jufubao-base 1.0.169-beta2 → 1.0.169-beta20

package/src/components/JfbBaseTfkCardBind/JfbBaseTfkCardBind.vue

@@ -16,6 +16,7 @@
     <view class="jfb-base-tfk-card-bind__body" :style="{
       '--form-border-color': formBorderColor,
       '--form-border-width': formBorderWidth + 'px',
+      '--form-border-radius': ($rpxNum * Number(formBorderRadius)) + 'px',
       '--form-input-padding': inputPadding + 'px',
       '--label-font-size': ($rpxNum * parseInt(labelFont.fontSize)) + 'px',
       '--label-font-color': labelFont.color,
@@ -35,11 +36,11 @@
     }">
       <view class="menu_wrap" :style="menuBoxStyle">
         <view class="menu_list">
-          <view class="menu_item">
+          <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">
+          <view class="menu_item" @click="switchShowType('code')">
             <view class="menu_inner" :class="menuShowType"
               :style="[menuType == 'code' ? menuItemActiveStyle : menuItemStyle, menuItemBoxStyle]">电子码</view>
           </view>
@@ -67,7 +68,7 @@
                   v-model="form.card_number"
                   placeholder="请输入票券号"
                 />
-                <view>
+                <view @click="doScanCode">
                   <xd-font-icon :icon="scanIcon.icon || 'iconsaoma'"
                     :color="scanIcon.color"
                     :style="{fontSize: scanIcon.fontSize}"
@@ -114,6 +115,7 @@
           <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;"
@@ -127,24 +129,26 @@
       </view>
       <view v-else class="form_wrap" :style="digitalFormStyle">
         <xd-form :key="formRenderKey"
-          label-align="left"
-          labelPosition="left"
+          :label-align="digitalLabelAlign"
+          :labelPosition="digitalLabelPosition"
           :border="true"
           paddingBetween="0"
         >
           <xd-form-item class="form-item digital_item"
-            label=""
+            :class="[digitalInputStyle]"
+            :label="digitalCodeLabel"
             :labelWidth="digitalCodeLabelWidth"
             :leftIcon="digitalCodeIcon.icon"
             :iconColor="digitalCodeIcon.color"
             content-align="left"
           >
-            <xd-form-input placeholder="请输入票券号" v-model="form.code" />
+            <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;"
@@ -193,12 +197,16 @@
         validImageAPIUrl: "",
         valid_token: "",
         formRenderKey: "formRenderKey",
+        hasCon: "", //是否有优惠券
+        jwxSDK: null,
        
         //todo
         tips: "",
         labelWidth: 180,
         labelAlign: "left",
+        digitalLabelAlign: "left",
         labelPosition: "left",
+        digitalLabelPosition: "left",
         inputStyle: "linear",  //输入框样式 linear:线性  face: 面性
         formBorderColor: "#F9F9F9", //
         formBorderWidth: 1, //表单边框宽度
@@ -252,6 +260,11 @@
         digitalCodeLabelWidth: "",
         digitalCodeRadius: 0,
         digitalCodeColor: "",
+        my_card_url: "",
+        backUrl: "",
+        digitalInputStyle: "",
+        digitalCodeLabel: "",
+        formBorderRadius: 16,
       }
     },
     computed: {
@@ -316,6 +329,7 @@
         return this.styleObjectToString({
           background: this.tipBgColor,
           padding: padding,
+          fontSize: '24rpx',
         })
       },
       menuItemBoxStyle(){
@@ -363,6 +377,16 @@
       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) {
@@ -407,21 +431,177 @@
         this.digitalCodeLabelWidth = getContainerPropsValue(value, "content.digitalCodeLabelWidth", '100');
         this.digitalCodeRadius = getContainerPropsValue(value, "content.digitalCodeRadius", '0');
         this.digitalCodeColor = getContainerPropsValue(value, "content.digitalCodeColor", '#dddddd');
+        this.digitalInputStyle = getContainerPropsValue(value, "content.digitalInputStyle", 'linear');
+        this.my_card_url = getContainerPropsValue(this.container, 'content.my_card_url', { value: "" }).value;
+        this.backUrl = getContainerPropsValue(this.container, 'content.back_url', { value: "" }).value;
+        this.digitalLabelPosition = getContainerPropsValue(value, "content.digitalLabelPosition", 'left');
+        this.digitalLabelAlign = getContainerPropsValue(value, "content.digitalLabelAlign", 'left');
+        this.digitalCodeLabel = getContainerPropsValue(value, "content.digitalCodeLabel", '');
+        this.formBorderRadius = getContainerPropsValue(value, "content.formBorderRadius", 16);
 
         console.log(this.digitalCodeRadius, "digitalCodeRadius");
 
         if(this.inputStyle === 'face'){
           this.labelPosition = 'left';
-          this.labelAlign = 'left';
+          // this.labelAlign = 'left';
+        }
+        if(this.digitalInputStyle === 'face'){
+          this.digitalLabelPosition = 'left';
+          // this.digitalLabelAlign = '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) {
+          uni.showToast({
+            title: '请输入电子码',
+            icon: "none"
+          });
+          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(){
+        console.log("开始扫码");
+        // #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)
@@ -438,9 +618,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);
+    }
     }
   }
 
@@ -457,6 +640,9 @@
     &__body{
       .form-item {
         ::v-deep &.uni-forms-item {
+          .is-required{
+            display: none;
+          }
           .uni-input-input{
             font-size: var(--content-font-size);
             color: var(--content-font-color);
@@ -478,14 +664,16 @@
         }
         &.linear{
           ::v-deep &.uni-forms-item--border{
-            border-color: var(--form-border-color) !important;
-            border-width: var(--form-border-width) !important;
+            // border-color: var(--form-border-color) !important;
+            // border-width: var(--form-border-width) !important;
+            border-top: none !important;
+            border-bottom: var(--form-border-width) solid var(--form-border-color) !important;
           }
         }
         &.face{
           ::v-deep .uni-forms-item__box{
             background: #F7F7F7;
-            border-radius: 16rpx;
+            border-radius: var(--form-border-radius);
             padding-right: 20rpx;
           }
           ::v-deep &.uni-forms-item--border{
@@ -508,13 +696,23 @@
           }
         }
         &.digital_item{
+          &.linear{
+            ::v-deep &.uni-forms-item--border{
+              border-color: var(--digital-border-color) !important;
+            }
+          }
+          &.face{
+            ::v-deep .uni-forms-item__box{
+              border-radius: var(--digital-border-radius);
+            }
+          }
           ::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);
+            // padding-bottom: 0% !important;
+            // border: 1px solid var(--digital-border-color);
+            // border-radius: var(--digital-border-radius);
           }
         }
       }

package/src/components/JfbBaseTfkCardBind/Mock.js

@@ -1,13 +1,23 @@
 'use strict';
 
 module.exports = {
-  
-  getTfkByIdFilmSquate:{},
-  
-  updateTfkFilmPaiqiDate:{},
-  
-  removeTfkFilmAddress:{},
-  
-  addTfkFilmcart:{},
-  
+  getByPwdCardDetail: {
+    "card_number": "101001000005195",
+    "card_point": 0,
+    "card_type_name": "聚福宝",
+    "end_time": "2024-10-31 23:59:59",
+    "card_status": "Y",
+    "card_status_name": "开启",
+    "unit": "点",
+    "main_product_name": "",
+    "is_exchange": "N",
+    "is_expired":'Y',
+    "request_id": "741c41d86c5ae0cf",
+    "main_business_code_name": "蛋糕(勿改)",
+    "other_card_point": 4073,
+  },
+  pwdCardBind: { "id": 20, "request_id": "91f76bd11d5889be" },
+  qrcodeCardBind: {},
+  getByQrCardDetail: {},
+  qrCardBind: {},
 }

package/src/components/JfbBaseTfkCardDetail/Api.js

@@ -16,6 +16,17 @@ module.exports = [
     },
     disabled: true,
   },
+  {
+    mapFnName: 'loginTfkCardBind',
+    isRule: false,
+    title: '登录卡',
+    prefix: 'login',
+    path: '/card/v1/card-bind/login-card',
+    data: {
+      card_number: ['卡号', 'String', '必选'],
+    },
+    disabled: true,
+  },
   {
     mapFnName: 'getListBaseNewsContent', //自定义方法名字（必选）
     title: '获取内容',