jufubao-base 1.0.168 → 1.0.169-beta10

package/src/components/JfbBaseTfkCardBind/JfbBaseTfkCardBind.vue

@@ -13,31 +13,350 @@
       <view class="jfb-base-tfk-card-bind__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-tfk-card-bind__body">
-      <view>测试插件( {{containerId}} )</view>
+    <view class="jfb-base-tfk-card-bind__body" :style="{
+      '--form-border-color': formBorderColor,
+      '--form-border-width': formBorderWidth + 'px',
+      '--form-input-padding': inputPadding + 'px',
+      '--label-font-size': ($rpxNum * parseInt(labelFont.fontSize)) + 'px',
+      '--label-font-color': labelFont.color,
+      '--label-font-weight': labelFont.fontWeight,
+      '--content-font-size': ($rpxNum * parseInt(contentFont.fontSize)) + 'px',
+      '--content-font-color': contentFont.color,
+      '--content-font-weight': contentFont.fontWeight,
+      '--placeholder-font-size': ($rpxNum * parseInt(placeholderFont.fontSize)) + 'px',
+      '--placeholder-font-color': placeholderFont.color,
+      '--placeholder-font-weight': placeholderFont.fontWeight,
+      '--ticket-icon-size': ($rpxNum * parseInt(ticketIcon.fontSize)) + 'px',
+      '--password-icon-size': ($rpxNum * parseInt(passwordIcon.fontSize)) + 'px',
+      '--valid-icon-size': ($rpxNum * parseInt(validCodeIcon.fontSize)) + 'px',
+      '--digital-icon-size': ($rpxNum * parseInt(digitalCodeIcon.fontSize)) + 'px',
+      '--digital-border-radius': ($rpxNum * Number(digitalCodeRadius)) + 'px',
+      '--digital-border-color': digitalCodeColor
+    }">
+      <view class="menu_wrap" :style="menuBoxStyle">
+        <view class="menu_list">
+          <view class="menu_item" @click="switchShowType('ticket')">
+            <view class="menu_inner" :class="menuShowType"
+              :style="[menuType == 'ticket' ? menuItemActiveStyle : menuItemStyle, menuItemBoxStyle]">实体券</view>
+          </view>
+          <view class="menu_item" @click="switchShowType('code')">
+            <view class="menu_inner" :class="menuShowType"
+              :style="[menuType == 'code' ? menuItemActiveStyle : menuItemStyle, menuItemBoxStyle]">电子码</view>
+          </view>
+        </view>
+      </view>
+      <view v-if="menuType === 'ticket'" class="form_wrap" :style="cardFormStyle">
+        <template v-if="menuType === 'ticket'">
+          <xd-form :label-align="labelAlign"
+            :key="formRenderKey"
+            :labelPosition="labelPosition"
+            :border="true"
+            paddingBetween="0"
+          >
+            <xd-form-item
+              class="form-item ticket_item"
+              :class="[inputStyle]"
+              :label="labelShow ==='N'?'':'票券号码'"
+              :labelWidth="labelWidth"
+              :leftIcon="ticketIcon.icon"
+              :iconColor="ticketIcon.color"
+              content-align="left"
+            >
+              <view class="align-center">
+                <xd-form-input
+                  v-model="form.card_number"
+                  placeholder="请输入票券号"
+                />
+                <view @click="doScanCode">
+                  <xd-font-icon :icon="scanIcon.icon || 'iconsaoma'"
+                    :color="scanIcon.color"
+                    :style="{fontSize: scanIcon.fontSize}"
+                  ></xd-font-icon>
+                </view>
+              </view>
+            </xd-form-item>
+            <xd-form-item
+              class="form-item password_item"
+              :class="[inputStyle]"
+              :label="labelShow ==='N'?'':'票券密码'"
+              :labelWidth="labelWidth"
+              :leftIcon="passwordIcon.icon"
+              :iconColor="passwordIcon.color"
+              content-align="left"
+            >
+              <xd-form-input type="password" placeholder="请输入票券密码" v-model="form.card_password" />
+            </xd-form-item>
+            <xd-form-item
+              class="form-item valid_item"
+              :class="[inputStyle]"
+              style="border-top: none;"
+              :label="labelShow ==='N'?'':'验证号码'"
+              :labelWidth="labelWidth"
+              :leftIcon="validCodeIcon.icon"
+              :iconColor="validCodeIcon.color"
+              content-align="left"
+              lastBorder
+            >
+              <view class="align-center">
+                <xd-form-input
+                  v-model="form.valid_code"
+                  placeholder="请输入验证码"
+                />
+                <view class="form_valid_code">
+                  <image
+                    style="width: 100%;height:100%"
+                    :src="validImageAPIUrl + '?image_width=160&image_height=50&token='+ valid_token"
+                  />
+                </view>
+              </view>
+            </xd-form-item>
+          </xd-form>
+          <view :style="btnWrapStyle">
+            <xd-button type="primary"
+              :radius="btnRadius + 'rpx'"
+              @click="toBindCardTicket"
+            >
+              <xd-font-icon :icon="btnIcon.icon"
+                style="display: inline-flex;margin-right: 12rpx;"
+                :color="btnIcon.color"
+                :style="{fontSize: btnIcon.fontSize}"
+              ></xd-font-icon>
+              确定
+            </xd-button>
+          </view>
+        </template>
+      </view>
+      <view v-else class="form_wrap" :style="digitalFormStyle">
+        <xd-form :key="formRenderKey"
+          label-align="left"
+          labelPosition="left"
+          :border="true"
+          paddingBetween="0"
+        >
+          <xd-form-item class="form-item digital_item"
+            label=""
+            :labelWidth="digitalCodeLabelWidth"
+            :leftIcon="digitalCodeIcon.icon"
+            :iconColor="digitalCodeIcon.color"
+            content-align="left"
+          >
+            <xd-form-input prefixIcon="1" placeholder="请输入票券号" v-model="form.code" />
+          </xd-form-item>
+        </xd-form>
+        <view :style="digitalBtnWrapStyle">
+          <xd-button type="primary"
+            :radius="btnRadius + 'rpx'"
+            @click="toBindCardDigital"
+          >
+            <xd-font-icon :icon="btnIcon.icon"
+              style="display: inline-flex;margin-right: 12rpx;"
+              :color="btnIcon.color"
+              :style="{fontSize: btnIcon.fontSize}"
+            ></xd-font-icon>
+            确定
+          </xd-button>
+        </view>
+      </view>
+      <view :style="tipBoxStyle" v-html="tips"></view>
     </view>
   </view>
 </template>
 
 <script>
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdFormCheckbox from "@/components/XdFormCheckbox/XdFormCheckbox";
+  import XdFormInput from "@/components/XdFormInput/XdFormInput";
+  import XdForm from "@/components/XdForm/XdForm";
+  import XdFormItem from "@/components/XdFormItem/XdFormItem";
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseTfkCardBindMixin from "./JfbBaseTfkCardBindMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
+  import { mapState } from "vuex";
   export default {
     name: "JfbBaseTfkCardBind",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      XdButton,
+      XdFormCheckbox,
+      XdFormInput,
+      XdFormItem,
+      XdForm,
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseTfkCardBindMixin
     ],
     data() {
       return {
-
+        menuType: "ticket", //ticket,code
+        form: {},
+        validImageAPIUrl: "",
+        valid_token: "",
+        formRenderKey: "formRenderKey",
+        hasCon: "", //是否有优惠券
+        jwxSDK: null,
+       
         //todo
+        tips: "",
+        labelWidth: 180,
+        labelAlign: "left",
+        labelPosition: "left",
+        inputStyle: "linear",  //输入框样式 linear:线性  face: 面性
+        formBorderColor: "#F9F9F9", //
+        formBorderWidth: 1, //表单边框宽度
+
+        formPadding: {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        digitalFormMargin: {},
+        menuPadding: {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        menuBtnPadding: {},
+       
+        passwordIcon: {},
+        validCodeIcon: {},
+        btnMargin: {},
+        btnRadius: 0,
+        tipBgColor: "",
+        tipPadding: {},
+        menuTabColor: {},
+        menuShowType: "text",
+        menuBorderWidth: 1,
+        labelShow: "Y",
+        inputPadding: "20",
+        labelFont: {  //表单label字体
+          color: "#333",
+          fontSize: "24rpx",
+          fontWeight: "normal",
+        },
+        contentFont: {  //表单内容字体
+          color: "#333",
+          fontSize: "24rpx",
+          fontWeight: "normal",
+        },
+        placeholderFont: {
+          color: "#d4d4d4",
+          fontSize: "24rpx",
+          fontWeight: "normal",
+        },
+        scanIcon: {},
+        ticketIcon: {},
+        btnIcon: {},
+        digitalCodeIcon: {},
+        digitalBtnMargin: {},
+        digitalCodeLabelWidth: "",
+        digitalCodeRadius: 0,
+        digitalCodeColor: "",
+        my_card_url: "",
+        backUrl: "",
+      }
+    },
+    computed: {
+      ...mapState({
+        brandInfo: state => state.brandInfo
+      }),
+      cardFormStyle(){
+        let padding = `${this.checkValue(this.formPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.formPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.formPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.formPadding.left, 20)}rpx`;
+
+        return this.styleObjectToString({
+          // background: this.formBgColor,
+          padding: padding,
+        })
+      },
+      digitalFormStyle(){
+        let padding = `${this.checkValue(this.digitalFormMargin.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.digitalFormMargin.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.digitalFormMargin.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.digitalFormMargin.left, 20)}rpx`;
+
+        return this.styleObjectToString({
+          padding: padding,
+        })
+      },
+      menuBoxStyle(){
+        let padding = `${this.checkValue(this.menuPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuPadding.left, 20)}rpx`;
+
+        return this.styleObjectToString({
+          // background: this.formBgColor,
+          padding: padding,
+        })
+      },
+      btnWrapStyle(){
+        let padding = `${this.checkValue(this.btnMargin.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.btnMargin.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.btnMargin.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.btnMargin.left, 20)}rpx`;
+        return this.styleObjectToString({
+          padding: padding,
+        })
+      },
+      digitalBtnWrapStyle(){
+        let padding = `${this.checkValue(this.digitalBtnMargin.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.digitalBtnMargin.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.digitalBtnMargin.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.digitalBtnMargin.left, 20)}rpx`;
+        return this.styleObjectToString({
+          padding: padding,
+        })
+      },
+      tipBoxStyle(){
+        let padding = `${this.checkValue(this.tipPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.tipPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.tipPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.tipPadding.left, 20)}rpx`;
+        return this.styleObjectToString({
+          background: this.tipBgColor,
+          padding: padding,
+          fontSize: '24rpx',
+        })
+      },
+      menuItemBoxStyle(){
+        let padding = `${this.checkValue(this.menuBtnPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuBtnPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuBtnPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.menuBtnPadding.left, 20)}rpx`;
+        return this.styleObjectToString({
+          padding
+        })
+      },
+      menuItemStyle(){
+        let styleObj = {
+          color: this.menuTabColor['color'] || '#333',
+          background: this.menuTabColor['bgColor'] || '#fff',
+          fontSize: this.menuTabColor['fontSize'] || '30rpx',
+          fontWeight: this.menuTabColor['fontWeight'] || 'normal',
+        }
+
+        return this.styleObjectToString(styleObj)
+      },
+      menuItemActiveStyle(){
+        let defaultTextColor = '#ff5a39';
+        let styleActiveObj = {
+          color: this.menuTabColor['actColor'] || defaultTextColor,
+          background: this.menuTabColor['actBgColor'] || '#fff',
+          fontSize: this.menuTabColor['actFontSize'] || '30rpx',
+          fontWeight: this.menuTabColor['actFontWeight'] || 'normal',
+        }
+        if(this.menuShowType === 'text'){
+          styleActiveObj['borderBottom'] = `${this.menuBorderWidth}px solid ${this.menuTabColor['actColor'] || defaultTextColor}`;
+        }else{
+        }
+        return this.styleObjectToString(styleActiveObj)
       }
     },
     watch: {
@@ -48,34 +367,218 @@
     },
     created() {
       this.init(this.container);
-
+      this.validImageAPIUrl = this.brandInfo['api_host'] + '/common/v1/valid_code/image/show'
+      this.valid_token = this.$xdUniHelper.randomChar(20);
       //todo
+      // #ifdef H5
+      jfbRootExec("getH5WxAuthorize", {
+        vm: this,
+        data: {
+          jsApiList: ["chooseWXPay"],
+        }
+      }).then(res => {
+        this.jwxSDK = res.jwxSDK;
+      })
+      // #endif
     },
     methods: {
       onJfbLoad(options) {
 
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
-
-        // }).then().catch()
       },
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
-      init(container) {
+      init(value) {
+        this.previewCurrent = getContainerPropsValue(value, "content.previewCurrent", 'ticket');
+        this.tips = getContainerPropsValue(value, "content.tips", '');
+        this.formPadding = getContainerPropsValue(value, "content.formPadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.digitalFormMargin = getContainerPropsValue(value, "content.digitalFormMargin", {top: 20, left: 20, right: 20, bottom: 20});
+        this.menuPadding = getContainerPropsValue(value, "content.menuPadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.menuBtnPadding = getContainerPropsValue(value, "content.menuBtnPadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.labelAlign = getContainerPropsValue(value, "content.labelAlign", 'left');
+        this.labelPosition = getContainerPropsValue(value, "content.labelPosition", 'left');
+        this.labelWidth = getContainerPropsValue(value, "content.labelWidth", '180');
+        this.ticketIcon = getContainerPropsValue(value, "content.ticketIcon", {});
+        this.passwordIcon = getContainerPropsValue(value, "content.passwordIcon", {});
+        this.validCodeIcon = getContainerPropsValue(value, "content.validCodeIcon", {});
+        this.btnMargin = getContainerPropsValue(value, "content.btnMargin", {});
+        this.btnRadius = getContainerPropsValue(value, "content.btnRadius", 0);
+        this.tipBgColor = getContainerPropsValue(value, "content.tipBgColor", '#fff');
+        this.tipPadding = getContainerPropsValue(value, "content.tipPadding", {top: 20, left: 20, right: 20, bottom: 20});
+        this.menuTabColor = getContainerPropsValue(value, "content.menuTabColor", {});
+        this.menuShowType = getContainerPropsValue(value, "content.menuShowType", 'text');
+        this.menuBorderWidth = getContainerPropsValue(value, "content.menuBorderWidth", 1);
+        this.inputStyle = getContainerPropsValue(value, "content.inputStyle", 'linear');
+        this.formBorderColor = getContainerPropsValue(value, "content.formBorderColor", '#F9F9F9');
+        this.formBorderWidth = getContainerPropsValue(value, "content.formBorderWidth", '1');
+        this.labelShow = getContainerPropsValue(value, "content.labelShow", true);
+        this.inputPadding = getContainerPropsValue(value, "content.inputPadding", 20);
+        this.labelFont = getContainerPropsValue(value, "content.labelFont", {});
+        this.contentFont = getContainerPropsValue(value, "content.contentFont", {});
+        this.placeholderFont = getContainerPropsValue(value, "content.placeholderFont", {});
+        this.scanIcon = getContainerPropsValue(value, "content.scanIcon", {});
+        this.btnIcon = getContainerPropsValue(value, "content.btnIcon", {});
+        this.digitalCodeIcon = getContainerPropsValue(value, "content.digitalCodeIcon", {});
+        this.digitalBtnMargin = getContainerPropsValue(value, "content.digitalBtnMargin", {});
+        this.digitalCodeLabelWidth = getContainerPropsValue(value, "content.digitalCodeLabelWidth", '100');
+        this.digitalCodeRadius = getContainerPropsValue(value, "content.digitalCodeRadius", '0');
+        this.digitalCodeColor = getContainerPropsValue(value, "content.digitalCodeColor", '#dddddd');
+        this.my_card_url = getContainerPropsValue(this.container, 'content.my_card_url', { value: "" }).value;
+        this.backUrl = getContainerPropsValue(this.container, 'content.back_url', { value: "" }).value;
 
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+        console.log(this.digitalCodeRadius, "digitalCodeRadius");
 
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
+        if(this.inputStyle === 'face'){
+          this.labelPosition = 'left';
+          this.labelAlign = 'left';
+        }
+        if(this.$configProject.isPreview){
+          this.menuType = this.previewCurrent;
+          this.formRenderKey = Date.now();
+        }
+      },
+      toShowCouponDialog(){
+        if(this.info){
+          jfbRootFnExec(this, 'onCustomEvent')("@showBaseConDialog", {user_card_number: this.form.card_number})
+        }
+      },
+      switchShowType(type){
+        this.menuType = type;
+      },
+      handlerAfterBindCard(res){
+        //已绑定卡券处理
+        if(res.pop_info && res.pop_info.pop_code === '1001'){
+          this.handleBindConfirm();
+          return;
+        }
+        let path = this.getUrlCallback(this.my_card_url || this.backUrl);
+        //有优惠券处理
+        if(this.hasCon){
+          this.toShowCouponDialog();
+          this.$bus.$on("onCloseConDialog",(container_id) => {
+            if(container_id === this.hasCon){
+              this.$xdUniHelper.redirectTo({
+                url: path,
+              });
+            }
+          })
+        }
+
+        //票券绑定成功
+        else{
+          this.$xdAlert({
+            content: "票券绑定成功",
+            close: () => {
+              this.$xdUniHelper.redirectTo({
+                url: path,
+              });
+            },
+          });
+        }
+      },
+      //卡券已被自己绑定时的弹框
+      handleBindConfirm(){
+        this.$xdConfirm({
+          styles: this.styles,
+          width: '90%',
+          content: '您已绑定该票券，无需再次绑定',
+          confirmText: '我的票券',
+          cancelText: '返回',
+          showClose: false,
+          success: (res) => {
+            if (res.confirm) {
+              let path = this.getUrlCallback(this.my_card_url || this.backUrl);
+              this.$xdUniHelper.redirectTo({ url: path});
+            }else{
+            }
+          }
+        })
+      },
+      //绑定实体券
+      async toBindCardTicket(){
+        console.log(this.form, 'this.form')
+        const { card_password, card_number, valid_code } = this.form;
+        if(!valid_code) return uni.showToast({
+          title: '请输入验证码',
+          icon: "none"
+        })
+        await this.checkValidToken();
+
+        jfbRootExec("pwdCardBind", {
+          vm: this,
+          data: {
+            card_password: card_password,
+            card_number: card_number + "",
+            is_show_pop: "Y"
+          }
+        }).then(res => {
+          this.handlerAfterBindCard(res);
+        })
+      },
+      //绑定电子码票券
+      toBindCardDigital(){
+        const { code } = this.form;
+
+        if(!code) return "";
+        jfbRootExec("pwdCardBind", {
+          vm: this,
+          data: {
+            card_password: code,
+            is_show_pop: "Y"
+          }
+        }).then(res => {
+          this.handlerAfterBindCard(res);
+        })
+      },
+      checkValidToken(){
+        const { valid_code } = this.form;
+        let token = this.valid_token;
+        return new Promise((r,j) => {
+          jfbRootExec("checkValidCode", {
+            vm: this,
+            data: {
+              token,
+              valid_code
+            }
+          }).then(res => {
+            if(res.is_valid){
+              r();
+            }else{
+              uni.showToast({
+                title: '验证码错误',
+                duration: 2000,
+                icon: "none"
+              });
+              this.switchValidToken();
+              j();
+            }
+          })
+        })
+      },
+      switchValidToken(){
+        let valid_token = this.$xdUniHelper.randomChar(20);
+        this.valid_token = valid_token;
+      },
+      doScanCode(){
+        // #ifdef H5
+        this.jwxSDK.scanQRCode({
+          needResult: 1,
+          success: res => {
+            this.$set(this.form, 'card_number', res.resultStr)
+          }
+        })
+        // #endif
+        // #ifdef MP
+        uni.scanCode({
+          success: res => {
+            this.$set(this.form, 'card_number', res.result)
+          }
+        })
+        // #endif
       },
       onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
+        // console.log('event.onJfbScroll', options)
       },
       onJfbReachBottom(options) {
         console.log('event.onJfbReachBottom', options)
@@ -92,9 +595,12 @@
       onJfbUpdate(...data) {
         console.log('event.onJfbUpdate', data)
       },
-      onJfbCustomEvent(options) {
-        console.log('event.onJfbReachBottom', options)
-      },
+      onJfbCustomEvent({action, data}){
+      if(action === 'baseConDialog@hasCon'){
+        this.hasCon = data;
+      }
+      console.log('onJfbCustomEvent',action, data);
+    }
     }
   }
 
@@ -102,10 +608,99 @@
 
 <style scoped lang="less">
   @import "./JfbBaseTfkCardBindLess.less";
+  .align-center{
+    display: flex;
+    align-items: center;
+  }
 
   .jfb-base-tfk-card-bind {
     &__body{
-
+      .form-item {
+        ::v-deep &.uni-forms-item {
+          .uni-input-input{
+            font-size: var(--content-font-size);
+            color: var(--content-font-color);
+            font-weight: var(--content-font-weight);
+          }
+          .label-text {
+            font-size: var(--label-font-size);
+            color: var(--label-font-color);
+            font-weight: var(--label-font-weight);
+          }
+          .uni-easyinput__placeholder-class{
+            font-size: var(--placeholder-font-size);
+            color: var(--placeholder-font-color);
+            font-weight: var(--placeholder-font-weight);
+          }
+        }
+        ::v-deep &.uni-forms-item--border{
+          padding: var(--form-input-padding) 0;
+        }
+        &.linear{
+          ::v-deep &.uni-forms-item--border{
+            border-color: var(--form-border-color) !important;
+            border-width: var(--form-border-width) !important;
+          }
+        }
+        &.face{
+          ::v-deep .uni-forms-item__box{
+            background: #F7F7F7;
+            border-radius: 16rpx;
+            padding-right: 20rpx;
+          }
+          ::v-deep &.uni-forms-item--border{
+            border: none;
+          }
+        }
+        &.ticket_item{
+          ::v-deep .label-icon{
+            font-size: var(--ticket-icon-size) !important;
+          }
+        }
+        &.password_item{
+          ::v-deep .label-icon{
+            font-size: var(--password-icon-size) !important;
+          }
+        }
+        &.valid_item{
+          ::v-deep .label-icon{
+            font-size: var(--valid-icon-size) !important;
+          }
+        }
+        &.digital_item{
+          ::v-deep .label-icon{
+            font-size: var(--digital-icon-size) !important;
+          }
+          ::v-deep .uni-forms-item__inner{
+            padding-bottom: 0% !important;
+            border: 1px solid var(--digital-border-color);
+            border-radius: var(--digital-border-radius);
+          }
+        }
+      }
+      .menu_wrap{
+        .menu_list{
+          display: flex;
+          .menu_item{
+            flex: 1;
+            text-align: center;
+            
+            .menu_inner{
+              display: inline-block;
+              &.button{
+                border-radius: 50rpx;
+              }
+            }
+          }
+        }
+      }
+      .form_valid_code{
+        width: 160rpx;
+        height: 50rpx;
+        background: #DDD;
+        border-radius: 8rpx;
+        overflow: hidden;
+      }
     }
   }
 </style>