jufubao-base 1.0.169-beta1 → 1.0.169-beta10

package/src/components/JfbBaseTfkCardDetail/JfbBaseTfkCardDetail.vue

@@ -31,8 +31,10 @@
                 </view>
                 <view class="_name">{{ cardInfo.card_type_name }}</view>
               </view>
-              <view>
-                <view class="card_deduct">购买其他物品可抵扣：78.21</view>
+              <view v-if="cardInfo.other_card_point && cardInfo.card_point_type !== 1">
+                <view class="card_deduct">
+                  购买其他物品可抵扣：{{ cardInfo.other_card_point }}
+                </view>
               </view>
             </view>
             <view class="card_bottom">
@@ -46,7 +48,9 @@
             <view class="bus_title">进入业务板块</view>
             <view class="bus_list">
               <view class="bus_item" v-for="(item, i) in businessList" :key="i"
-                :style="businessItemBox">
+                :style="businessItemBox"
+                @click="handleBusinessLogin(item)"
+              >
                 <view class="bus_img">
                   <image :src="item.image_url" />
                 </view>
@@ -55,17 +59,17 @@
             </view>
           </view>
           <view v-else>
-            <xd-button type="primary">立即使用</xd-button>
+            <xd-button type="primary" @click="doCardLogin">立即使用</xd-button>
           </view>
         </view>
         <view class="list_col_wrap" :style="listColWrapBoxStyle">
-          <view class="list_item" :style="listColItemStyle">
+          <view class="list_item" :style="listColItemStyle" @click="switchModule('rule')">
             <view class="list_title">使用规则</view>
             <view class="list_icon">
               <xd-font-icon icon="iconxiangyou_xian" size="24"></xd-font-icon>
             </view>
           </view>
-          <view class="list_item" :style="listColItemStyle">
+          <view class="list_item" :style="listColItemStyle" @click="switchModule('pickup')">
             <view class="list_title">提货码</view>
             <view class="list_icon">
               <xd-font-icon icon="iconxiangyou_xian" size="24"></xd-font-icon>
@@ -74,8 +78,10 @@
         </view>
       </view>
       <view v-if="curModule === 'rule'">
-        <view class="rule_wrap" :style="ruleDetailBoxStyle">
-          使用规则
+        <view v-if="cardRule" v-html="cardRule" class="rule_wrap" :style="ruleDetailBoxStyle">
+        </view>
+        <view v-else class="rule_wrap" :style="ruleDetailBoxStyle">
+          使用规则暂无
         </view>
       </view>
       <view v-if="curModule === 'pickup'">
@@ -84,10 +90,14 @@
             <view><xd-font-icon :icon='payPreIcon || "iconsaoma1"' size="54"></xd-font-icon></view>
             <view class="_title">向商家付款</view>
           </view>
-          <view class="barcode"></view>
-          <view class="qrcode" :style="qrcodeBoxStyle"></view>
-          <view class="time_loop">9分59秒后自动刷新</view>
-          <view class="refresh_btn">
+          <view class="barcode">
+            <image :src="cardInfo.barcode" mode="widthFix"></image>
+          </view>
+          <view class="qrcode" :style="qrcodeBoxStyle">
+            <image :src="cardInfo.card_qrcode"></image>
+          </view>
+          <view class="time_loop">{{ timeStr }}后自动刷新</view>
+          <view class="refresh_btn" @click="handleRefresh">
             <xd-font-icon class="btn_icon" :icon="refreshIcon"></xd-font-icon>
             刷新二维码
           </view>
@@ -106,7 +116,9 @@
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
+  import colorCardMixins from "@/mixins/colorCardMixins";
   import getServiceUrl from '@/common/getServiceUrl'
+  import { mapState, mapActions } from "vuex";
   export default {
     name: "JfbBaseTfkCardDetail",
     components: {
@@ -115,7 +127,7 @@
       XdUnit,
     },
     mixins: [
-      componentsMixins, extsMixins, JfbBaseTfkCardDetailMixin
+      componentsMixins, extsMixins, JfbBaseTfkCardDetailMixin, colorCardMixins
     ],
     data() {
       return {
@@ -123,7 +135,13 @@
         card_number: "",
         cardInfo: {},
         businessList: [],
+        timeStr: "",
+        timeer: null,
+        date: 2, //时间底数
+        time: 2, //时间幂指数
+        stopTimer: false, //停止轮询
 
+        cardRule: "",
         showBusinessList: "Y",
         //todo
         cardInfoMargin: {},
@@ -149,9 +167,18 @@
         payPreIcon: "",
         refreshIcon: "",
         bussWidth: 100,
+        codeDetailRadius: 16,
+        codeDetailBorder: {},
+        codeDetailShadow: {},
+        ruleDetailFontColor: "",
+        ruleDetailRadius: 0,
       }
     },
     computed: {
+      ...mapState({
+        jwxSDK: (state) => state.jwxSDK,
+        jfbAuthorize: (state) => state.jfbAuthorize,
+      }),
       cardWrapBoxStyle(){
         let padding = `${this.checkValue(this.cardInfoMargin.top, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.cardInfoMargin.right, 20)}rpx`;
@@ -252,9 +279,21 @@
           margin: margin,
           padding: padding,
           backgroundColor: this.ruleDetailBgColor,
+          color: this.ruleDetailFontColor,
+          borderRadius: this.ruleDetailRadius + 'rpx',
         })
       },
       codeDetailBoxStyle(){
+        let border = "none";
+        let boxShadow = "none";
+        if(this.codeDetailBorder && this.codeDetailBorder.type === 'Y'){
+          let { width, color } = this.codeDetailBorder.value || {};
+          border = `${width || 0}rpx solid ${color || 'transparent'}`;
+        }
+        if(this.codeDetailShadow && this.codeDetailShadow.type === 'Y'){
+          let { width, color } = this.codeDetailShadow.value || {};
+          boxShadow = `0 0 ${width || 0}rpx ${color || 'transparent'}`;
+        }
         let padding = `${this.checkValue(this.codeDetailPadding.top, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.codeDetailPadding.right, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.codeDetailPadding.bottom, 20)}rpx`;
@@ -267,6 +306,9 @@
           margin: margin,
           padding: padding,
           backgroundColor: this.codeDetailBgColor,
+          borderRadius: this.codeDetailRadius + 'rpx',
+          border: border,
+          boxShadow: boxShadow,
         })
       },
       qrcodeBoxStyle(){
@@ -292,6 +334,7 @@
       onJfbLoad(options) {
         this.card_number = options.card_number;
         this.getCardDetail();
+        this.getContent();
       },
       /**
        * @description 监听事件变化
@@ -308,7 +351,7 @@
         this.bussPadding = getContainerPropsValue(value, 'content.bussPadding', {top: 20, left: 20, right: 20, bottom: 20});
         this.bussMargin = getContainerPropsValue(value, 'content.bussMargin', {top: 20, left: 20, right: 20, bottom: 20});
         this.bussTempMargin = getContainerPropsValue(value, 'content.bussTempMargin', {top: 20, left: 20, right: 20, bottom: 20});
-        this.bussTempBgColor = getContainerPropsValue(value, 'content.bussTempBgColor', '#fff');
+        this.bussTempBgColor = getContainerPropsValue(value, 'content.bussTempBgColor', 'transparent');
         this.listColMargin = getContainerPropsValue(value, 'content.listColMargin', {top: 20, left: 20, right: 20, bottom: 20});
         this.listColPadding = getContainerPropsValue(value, 'content.listColPadding', {top: 20, left: 20, right: 20, bottom: 20});
         this.listColSpace = getContainerPropsValue(value, 'content.listColSpace', 10);
@@ -323,41 +366,190 @@
         this.payPreIcon = getContainerPropsValue(value, 'content.payPreIcon', '');
         this.refreshIcon = getContainerPropsValue(value, 'content.refreshIcon', '');
         this.bussWidth = getContainerPropsValue(value, 'content.bussWidth', 100);
+        this.codeDetailRadius = getContainerPropsValue(value, 'content.codeDetailRadius', 16);
+        this.codeDetailBorder = getContainerPropsValue(value, 'content.codeDetailBorder', {});
+        this.codeDetailShadow = getContainerPropsValue(value, 'content.codeDetailShadow', {});
+        this.ruleDetailFontColor = getContainerPropsValue(value, 'content.ruleDetailFontColor', '');
+        this.ruleDetailRadius = getContainerPropsValue(value, 'content.ruleDetailRadius', 0);
+
+        console.log(this.codeDetailBorder, 'codeDetailBorder')
 
         if(this.$configProject.isPreview){
           this.curModule = this.previewCurrent;
         }
       },
+      switchModule(module){
+        this.curModule = module;
+      },
+      handleBusinessLogin(item){
+        this.doCardLogin(() => {
+          this.handleClick(item);
+        })
+      },
+      doCardLogin(cb){
+        this.$xdShowLoading({});
+        jfbRootExec("loginTfkCardBind", {
+          vm: this,
+          data: {
+            card_number: this.card_number
+          }
+        }).then(res => {
+          this.$xdHideLoading();
+          //#ifdef MP-WEIXIN
+          if (this.jfbAuthorize !== null) {
+            this.jfbAuthorize.setCardToken(res);
+          }
+          //#endif
+
+          if(cb) return cb();
+
+          if (this.$configProject.isPreview) {
+            console.log("handleBindLogin", "预览模式不跳转", this.inCallback);
+          } else {
+            this.$xdUniHelper.redirectTo({
+              url: this.settings.index
+            });
+          }
+        }).catch((res) => {
+          this.$xdHideLoading();
+        });
+      },
       getCardDetail(){
         jfbRootExec("getTfkCardDetail", {
           vm: this,
           data: {
             card_number: this.card_number,
-            is_show_entry_settings: this.showBusinessList,
+            is_show_entry_settings: this.curModule === 'main' ? this.showBusinessList : "N",
           }
         }).then(res => {
-          this.cardInfo = res;
-          this.businessList = res.site_entry_settings.map(item => {
+          this.cardInfo = Object.assign({}, res, {
+            other_card_point: res.other_card_point ? this.$xdUniHelper.divisionFloatNumber(res.other_card_point, 100) : 0
+          });
+          let businessList = this.filterNotSupportEntry(res.site_entry_settings);
+          this.businessList = businessList.filter(item => {
             item['image_url'] = getServiceUrl(item.image_url);
-            return item;
+            return res.business_codes.includes(item.business_code);
           })
+          if(!this.$configProject.isPreview) {
+            this.setIntval(res.card_qrcode_expire);
+          }else{
+            this.timeStr = "08分10秒";
+          }
+        })
+      },
+      handleClick(entry){
+        const {dir, path, host, appType} = entry['redirect_data'];
+        let regHttp = /^(\/\/|http:\/\/|https:\/\/).+$/;
+        let regSp = /(-apiuri\/v)/;
 
+        if(!appType) entry.redirect_data.appType = 'h5';
+        let nsp = Base64.encodeURI(JSON.stringify({business_code: entry['business_code']}));
+
+        //外站配置地址
+        if(entry.redirect_type === 'URL') {
+          if(regHttp.test(entry.redirect_data['path']) || regSp.test(entry.redirect_data['path'])) {
+            this.$xdUniHelper.redirectTo({
+              url:`${entry.redirect_data['path']}?x-common=${nsp}&vs=${new Date().getTime()}${cardPathStr}`
+            }, false)
+          }
+          else {
+            console.error(`配置错误：${entry.redirect_data['path']}`);
+            throw new Error(`配置错误：${entry.redirect_data['path']}`)
+          }
+          return
+        }
+
+        //站内应用处理
+        let jumpUrl = path;
+        let cardPathStr = '';
+        const {deploy_dir} = this.projectAttr;
+        if(host === this.projectAttr.host && deploy_dir !== dir){
+          jumpUrl = `//${host}/${dir}${path}`;
+          //#ifdef MP-WEIXIN
+          jumpUrl = `https:${jumpUrl}`;
+          //#endif
+        }
+
+        //#ifdef MP-WEIXIN
+        //获取自定义卡券登录地址(微信小程序跳转到H5平台起作用)
+        if(entry.redirect_data.appType === 'h5') {
+          const custom_redirect_data = this.$xdUniHelper.checkVarType(entry['custom_redirect_data']) === 'object'?entry['custom_redirect_data']:{};
+          const cardPathObject = this.getCardPath(custom_redirect_data);
+          if(cardPathObject !== null) {
+            const {cardPath, cardSelf} =cardPathObject
+            if(cardPath) cardPathStr = `&card-login=${encodeURIComponent(cardPath)}&cardSelf=${cardSelf}`
+          }
+        }
+        //#endif
+
+        jumpUrl = `${jumpUrl}?x-common=${nsp}&vs=${new Date().getTime()}${cardPathStr}`;
+        console.warn(`entry.path:${jumpUrl}`);
+        if(regHttp.test(jumpUrl)) this.$xdUniHelper.redirectTo({url:jumpUrl}, false)
+        else this.$xdUniHelper.navigateTo({url:jumpUrl}, false)
+      },
+      getContent() {
+        jfbRootExec("getListBaseNewsContent", {
+          vm: this,
+          data: {
+            page_id: this.pageAttr["page_id"], //页面ID
+            container_id: this.containerId, //组件ID
+            limit: 1,
+          },
         })
+          .then((res) => {
+            if (res.list.length > 0) {
+              if(res.list && res.list.length > 0) {
+                this.cardRule = this.$xdUniHelper.filterHtml(res.list[0].content);
+              }
+              // this.noticeStatus = true;
+            }
+          })
+          .catch((error) => {
+            console.error(error);
+          });
       },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
+      handleRefresh(){
+        clearInterval(this.timeer);
+        this.getCardDetail();
       },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
+      setIntval(time){
+        this.timeer = setInterval(() => {
+          if (time === 0) {
+            this.timeStr = "00分00秒";
+            clearInterval(this.timeer);
+            if (!this.stopTimer) this.getCardDetail();
+          } else {
+            time--;
+            let f = Math.floor(time / 60);
+            f = f < 10 ? "0" + f : f;
+            let m = time % 60;
+            m = m < 10 ? "0" + m : m;
+            this.timeStr = `${f}分${m}秒`;
+          }
+        }, 1000);
+      },
+
+      onJfbUnload(){
+        this.timeStr = ""
+        if (this.timeer) {
+          clearInterval(this.timeer);
+        }
       },
       onJfbShow(options) {
-        console.log('event.onJfbShow', options)
+        this.onJfbLoad(options)
       },
       onJfbHide(options) {
-        console.log('event.onJfbHide', options)
+        this.timeStr = ""
+        if (this.timeer) {
+          clearTimeout(this.timeer);
+        }
       },
       onJfbBack(options) {
-        console.log('event.onJfbBack', options)
+        this.timeStr = ""
+        if (this.timeer) {
+          clearTimeout(this.timeer);
+        }
+        this.$xdUniHelper.navigateBack();
       },
       onJfbUpdate(...data) {
         console.log('event.onJfbUpdate', data)
@@ -379,6 +571,7 @@
         display: flex;
         flex-direction: column;
         justify-content: space-between;
+        font-size: 26rpx;
         .card_top{
           display: flex;
           flex-direction: column;
@@ -389,6 +582,14 @@
             ._point{
               font-size: 40rpx;
               font-weight: bold;
+              ::v-deep .xd-unit{
+                height: auto !important;
+                font-weight: bold;
+                align-items: flex-end;
+                .xd-unit__unit{
+                  line-height: 1.5 !important;
+                }
+              }
               ._unit{
                 font-size: 24rpx;
                 margin-left: 4rpx;
@@ -469,24 +670,29 @@
       .code_wrap{
         display: flex;
         flex-direction: column;
+        font-size: 28rpx;
         .code_title{
           display: flex;
           align-items: center;
           ._title{
             margin-left: 30rpx;
+            font-size: 32rpx;
           }
         }
         .barcode{
-          background-color: #EEE;
-          height: 100rpx;
+          width: 100%;
           margin-top: 32rpx;
+          image{
+            width: 100%;
+          }
         }
         .qrcode{
-          background-color: #EEE;
-          height: 100rpx;
-          width: 100rpx;
           margin: 40rpx 24rpx;
           align-self: center;
+          image{
+            width: 100%;
+            height: 100%;
+          }
         }
         .time_loop{
           align-self: center;

package/src/components/JfbBaseTfkCardDetail/Mock.js

@@ -15,11 +15,11 @@ module.exports = {
     card_qrcode_expire: 600,
     unit: "点",
     main_business_code_name: "",
-    other_card_point: 0,
+    other_card_point: 2480,
     is_exchange: "N",
     exchange_card_type_name: "福券",
     exchange_card_point: 86511,
-    card_point_type: 1,
+    card_point_type: 2,
     is_show_qrcode_logo: "Y",
     is_can_unbind: "Y",
     is_can_transfer: "Y",