jufubao-base 1.0.169-beta5 → 1.0.169-beta6

package/src/components/JfbBaseTfkCardLogin/JfbBaseTfkCardLogin.vue

@@ -18,22 +18,26 @@
     }">
       <view class="menu_wrap" :style="menuBoxStyle">
         <view class="menu_list">
-          <view class="menu_item" :style="{
-            marginRight: menuItemMargin + 'px'
-          }">
+          <view class="menu_item"
+            :style="{
+              marginRight: menuItemMargin + 'px'
+            }"
+            @click="changeMenu('card')"
+          >
             <view class="menu_item_inner"
               :style="[menuType === 'card' ? menuItemActiveStyle : menuItemStyle,  menuItemBoxStyle]">我的票券包</view>
           </view>
-          <view class="menu_item">
+          <view class="menu_item" @click="changeMenu('coupon')">
             <view class="menu_item_inner"
               :style="[menuType === 'coupon' ? menuItemActiveStyle : menuItemStyle,  menuItemBoxStyle]">我的优惠券</view>
           </view>
         </view>
-        <view @click="toBindCard">
+        <view class="bind_card" :style="bindCardBoxStyle" @click="toBindCard">
           <xd-font-icon :icon="bindCardIcon.icon"
             :color="bindCardIcon.color"
-            :style="{fontSize: bindCardIcon.fontSize}"
+            :size="bindCardIcon.size"
           ></xd-font-icon>
+          <view v-if="bindCardText" :style="getBindCardTextStyle">{{ bindCardText }}</view>
         </view>
       </view>
       <view class="JfbBaseNotice">
@@ -90,24 +94,37 @@
           <view v-else>
             <view v-if="cardList.length" class="bind_list">
               <view class="bind_item" v-for="(item, i) in cardList" :key="i"
-                :style="cardItemBoxStyle">
-                <view class="bind_point">120</view>
-                <view class="bind_deduct">兑换其他商品可抵：240元宝</view>
-                <view class="bind_number">1001000002541</view>
-                <view class="bind_time">2029-12-31到期</view>
+                :style="cardItemBoxStyle" @click="toCardDetail(item)">
+                <view class="bind_point">
+                  <xd-unit
+                    :unitFontSize="24"
+                    :fontSize="48"
+                    :price="item.card_point"
+                    :isOld="false"
+                    :unit="item.unit || ''"
+                  ></xd-unit>
+                </view>
+                <view v-if="item.other_card_point && item.card_point_type !== 1" class="bind_deduct">
+                  兑换其他商品可抵：{{ item.other_card_point }}
+                </view>
+                <view class="bind_number">{{ item.card_number }}</view>
+                <view class="bind_time">{{ item.end_time }}到期</view>
                 <view class="bind_type" :style="{
                   top: cardPadding.top + 'rpx',
                   right: cardPadding.right + 'rpx',
                 }">
-                  <view>兰州vip优惠券</view>
-                  <view>(可转票券)</view>
+                  <view>{{ item.card_type_name }}</view>
+                  <view v-if="item.is_exchange === 'Y'">(可转票券)</view>
                 </view>
-                <view class="bind_btn" :style="[{
-                  right: cardPadding.right + 'rpx',
-                  bottom: cardPadding.bottom + 'rpx',
-                  borderRadius: cardBtnRadius + 'rpx',
-                  padding: bindCardBtnPadding
-                }, item.is_login !== 'Y' ? bindCardActiveStyle : bindCardBtnStyle]">登录</view>
+                <view class="bind_btn"
+                  :style="[{
+                    right: cardPadding.right + 'rpx',
+                    bottom: cardPadding.bottom + 'rpx',
+                    borderRadius: cardBtnRadius + 'rpx',
+                    padding: bindCardBtnPadding
+                  }, item.is_login === 'Y' ? bindCardActiveStyle : bindCardBtnStyle]"
+                  @click.stop="doCardLogin(item)"
+                >{{ item.is_login === 'Y' ? '已登录' : '登录'}}</view>
               </view>
               <view v-if="!hasCardList" class="no_more_card">没有更多券了，查看失效的票券 ></view>
             </view>
@@ -128,6 +145,8 @@
               :couponBtnRadius="couponBtnRadius"
               :couponBtnTextStyle="couponBtnTextStyle"
               :couponLeftBgColor="couponLeftBgColor"
+              :item="item"
+              @useCoupon="doCardLogin(item)"
             ></xd-coupon-item>
             <view v-if="!hasCouponList" class="no_more_card">没有更多券了，查看失效的票券 ></view>
           </view>
@@ -144,6 +163,7 @@
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdUnit from "@/components/XdUnit/XdUnit";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseTfkCardLoginMixin from "./JfbBaseTfkCardLoginMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
@@ -153,25 +173,35 @@
   import XdNoticeBar from "@/components/XdNoticeBar/XdNoticeBar";
   import XdCouponItem from "./XdCouponItem";
   import Color from "color"
+  import { mapState, mapActions } from "vuex";
   export default {
     name: "JfbBaseTfkCardLogin",
     components: {
       XdFontIcon,
       XdNoticeBar,
       XdCouponItem,
+      XdUnit
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseTfkCardLoginMixin
     ],
     data() {
       return {
-        menuType: "coupon", // card, coupon
-        loadingList: false,
-        cardList: [{id: 1}, {id: 2}],
-        couponList: [{id: 1}, {id: 2}],
+        menuType: "card", // card, coupon
+        loadingList: true,
+        cardList: [],
+        couponList: [],
         hasCardList: false,
         hasCouponList: false,
 
+        inCallbackUrlOrg:'',//是否带有回调地址
+        inCallback: null, //内部跳转地址
+        allEntryPath: "", //综合福利入口页
+        cardDetailPath: "", //我的票券包详情页
+
+        options: {},
+        showDisabled: 'Y',
+
         //todo
         previewCurrent: "",
         isPreview: false,
@@ -204,9 +234,21 @@
         noticeMargin: {},
         noticePadding: {},
         noticeFont: {},
+        bindCardText: "",
+        bindCardTextStyle: {},
+        bindCardShowType: "",
+        bindCardBtnRadius: 16,
+        cardBorder: {},
+        cardShadow: {},
+        cardImageMode: "",
+        entryGroupId: "",
       }
     },
     computed: {
+      ...mapState({
+        jwxSDK: (state) => state.jwxSDK,
+        jfbAuthorize: (state) => state.jfbAuthorize,
+      }),
       menuBoxStyle(){
         let padding = `${this.checkValue(this.menuPadding.top, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.menuPadding.right, 20)}rpx`;
@@ -291,6 +333,21 @@
         }
         return this.styleObjectToString(styleObj)
       },
+      bindCardBoxStyle(){
+        return this.styleObjectToString({
+          border: `1px solid ${this.bindCardShowType == 'button' ? this.bindCardTextStyle.color : 'transparent'}`,
+          borderRadius: this.bindCardBtnRadius + 'rpx',
+        })
+      },
+      getBindCardTextStyle(){
+        let styleObj = {
+          color: this.bindCardTextStyle['color'] || '#333',
+          fontSize: this.bindCardTextStyle['fontSize'] || '30rpx',
+          fontWeight: this.bindCardTextStyle['fontWeight'] || 'normal',
+          marginLeft: this.bindCardIcon.icon ? '10rpx' : 0,
+        }
+        return this.styleObjectToString(styleObj)
+      },
       getCardBgImage(){
         let bg = '';
         if(this.$xdUniHelper.checkVarType(this.cardImageUrl) === 'object'
@@ -304,18 +361,34 @@
       },
       cardItemBoxStyle(){
         let image = {};
+        let border = "none";
+        let boxShadow = "none";
+        if(this.cardBorder && this.cardBorder.type === 'Y'){
+          let { width, color } = this.cardBorder.value;
+          border = `${width}rpx solid ${color}`;
+        }
+        if(this.cardShadow && this.cardShadow.type === 'Y'){
+          let { width, color } = this.cardShadow.value;
+          boxShadow = `0 0 ${width}rpx ${color}`;
+        }
         if(this.cardImageUrl) image = {
           backgroundImage: `url(${this.getCardBgImage})`,
           backgroundSize: '100%',
           backgroundRepeat: 'no-repeat',
         }
+        if(this.cardImageMode) image['backgroundSize'] = this.cardImageMode;
+
         let padding = `${this.checkValue(this.cardPadding.top, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.cardPadding.right, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.cardPadding.bottom, 20)}rpx`;
         padding = `${padding} ${this.checkValue(this.cardPadding.left, 20)}rpx`;
-        image['padding'] = padding;
-        image['borderRadius'] = this.cardRadius + 'rpx';
-        return this.styleObjectToString(image)
+        return this.styleObjectToString({
+          ...image,
+          padding: padding,
+          borderRadius: this.cardRadius + 'rpx',
+          border: border,
+          boxShadow: boxShadow,
+        })
       },
       listBoxStyle(){
         let padding = `${this.checkValue(this.cardListPadding.top, 20)}rpx`;
@@ -387,6 +460,22 @@
     },
     methods: {
       onJfbLoad(options) {
+        this.options = options;
+        let { inCallback } = options;
+        if(!inCallback) this.$storage.remove("inCallback"); //作为入口
+        else {
+          this.$storage.set("inCallback", inCallback);
+          try{
+            inCallback = Base64.decode(inCallback);
+            this.inCallbackUrlOrg = options.inCallback;
+          }catch (e){
+            inCallback = null;
+          }
+        }
+        //登录成功调整地址优先级
+        this.inCallback = inCallback || this.allEntryPath || this.settings.index;
+
+        this.getCardList();
         this.getContent();
       },
       /**
@@ -421,13 +510,106 @@
         this.noticeMargin = getContainerPropsValue(value, "content.noticeMargin", {top: 20, left: 20, right: 20, bottom: 20});
         this.noticePadding = getContainerPropsValue(value, "content.noticePadding", {top: 20, left: 20, right: 20, bottom: 20});
         this.noticeFont = getContainerPropsValue(value, "content.noticeFont", {});
+        this.bindCardText = getContainerPropsValue(value, "content.bindCardText", "");
+        this.bindCardTextStyle = getContainerPropsValue(value, "content.bindCardTextStyle", {});
+        this.bindCardShowType = getContainerPropsValue(value, "content.bindCardShowType", 'text');
+        this.bindCardBtnRadius = getContainerPropsValue(value, "content.bindCardBtnRadius", 16);
+        this.cardBorder = getContainerPropsValue(value, "content.cardBorder", {});
+        this.cardShadow = getContainerPropsValue(value, "content.cardShadow", {});
+        this.cardImageMode = getContainerPropsValue(value, "content.cardImageMode", '');
+        this.allEntryPath = getContainerPropsValue(value, "content.allEntryPath", {value: ""}).value;
+        this.cardDetailPath = getContainerPropsValue(value, "content.cardDetailPath", {value: "/tfktest/system/card/tkfDetail"}).value;
+        // this.entryGroupId = getContainerPropsValue(value,"content.entryGroupId","default");
 
-        console.log(this.noticeFont, 'noticeFont')
+        console.log(this.cardShadow, 'cardShadow')
+        if(this.bindCardTextStyle && !this.bindCardTextStyle.color){
+          this.bindCardTextStyle.color = this.mainColor;
+        }
+        if(this.bindCardIcon && !this.bindCardIcon.color){
+          this.bindCardIcon.color = this.mainColor;
+        }
+        if(this.menuTabColor && !this.menuTabColor.actColor){
+          this.menuTabColor.actColor = this.mainColor;
+        }
+        if(this.cardBtnTextStyle){
+          if(!this.cardBtnTextStyle.actBgColor){
+            this.cardBtnTextStyle.actBgColor = this.mainColor;
+          }
+          if(!this.cardBtnTextStyle.bgColor){
+            this.cardBtnTextStyle.bgColor = this.mainColor;
+          }
+        }
 
         if(this.$configProject.isPreview){
           this.menuType = this.previewCurrent;
         }
       },
+      toCardDetail(item){
+        this.$xdUniHelper.navigateTo({
+          url: this.cardDetailPath + `?card_number=${item["card_number"]}`
+        },false)
+      },
+      doCardLogin(item){
+        this.$xdShowLoading({});
+        jfbRootExec("loginTfkCardBind", {
+          vm: this,
+          data: {
+            card_number: item["card_number"]
+          }
+        }).then(res => {
+          this.$xdHideLoading();
+          //#ifdef MP-WEIXIN
+          if (this.jfbAuthorize !== null) {
+            this.jfbAuthorize.setCardToken(res);
+          }
+          //#endif
+
+          if (this.$configProject.isPreview) {
+            console.log("handleBindLogin", "预览模式不跳转", this.inCallback);
+          } else {
+            this.$xdUniHelper.redirectTo({
+              url: this.inCallback,
+            });
+          }
+        }).catch((res) => {
+          this.$xdHideLoading();
+        });
+      },
+      changeMenu(menu){
+        this.menuType = menu;
+        this.getCardList();
+      },
+      getCardList(){
+        let show_type = this.menuType === 'coupon' ? 'coupon' : 'normal';
+        let params = {show_type};
+       
+        // let params = {is_all: 'Y', is_show_entry_settings: 'Y'};
+        // if(options['jfb_business_code']) {
+        //   params['card_business_code'] = options['jfb_business_code'];
+        // }
+        // if(this.entryGroupId) params['group_id'] = this.entryGroupId;
+        this.$xdShowLoading({});
+        jfbRootExec("getTfkListCardBind", {
+          vm: this,
+          data: params,
+        }).then(res => {
+          this.loadingList = false;
+          this.$xdHideLoading();
+          this.showDisabled = res.is_show_invalid_card_entrance;
+
+          let list = res.list.map(item => {
+            item.other_card_point = item.other_card_point ? this.$xdUniHelper.divisionFloatNumber(item.other_card_point, 100) : 0
+            return item;
+          })
+          if(show_type === 'coupon'){
+            this.couponList = list;
+          }
+          if(show_type === 'normal'){
+            this.cardList = list;
+          }
+        })
+        .catch(() => this.$xdHideLoading());
+      },
       toBindCard(){
         this.$xdUniHelper.navigateTo({
           url: this.cardBindPath
@@ -497,6 +679,12 @@
             border-bottom: 1px solid transparent;
           }
         }
+        .bind_card{
+          display: flex;
+          align-items: center;
+          padding: 8rpx 20rpx;
+          border-radius: 16rpx;
+        }
       }
       &-notice {
         width: 100%;

package/src/components/JfbBaseTfkCardLogin/Mock.js

@@ -28,7 +28,7 @@ module.exports = {
           "supermarket",
           "food"
         ],
-        is_login: "N",
+        is_login: "Y",
         consume_type: "1",
         card_use_rule: "",
         is_transfering: "Y"

package/src/components/JfbBaseTfkCardLogin/XdCouponItem.vue

@@ -3,31 +3,58 @@
     <view class="coupon_left" :style="{
       background: couponLeftBgColor
     }">
-      <view class="_point">200<text style="font-size: 24rpx;">点</text></view>
-      <view class="_rule">满100减40</view>
+      <view class="_point">
+        <xd-unit
+          :unitFontSize="24"
+          :fontSize="48"
+          :price="item.card_point"
+          :isOld="false"
+          :unit="item.unit || ''"
+          :colorNew="'#ffffff'"
+        ></xd-unit>
+        <!-- <text style="font-size: 24rpx;">{{ item.unit }}</text> -->
+      </view>
+      <view class="_rule">{{ item.card_use_rule }}</view>
     </view>
     <view class="coupon_right" :style="couponRightItemBoxStyle">
       <view class="cont_top" :style="{
         background: couponTitleBgColor
-      }">众福优选-众选全场通兑次票60档（上海）</view>
+      }">{{ item.card_type_name }}</view>
       <view class="cont_main">
-        <view class="cou_number">券号：923974909815654</view>
-        <view class="cou_time">有效期：2023-09-09</view>
-        <view class="cou_point">余额：120</view>
-        <view class="cou_btn" :style="[couponBtnStyle, {
-          padding: couponBtnPadding,
-          borderRadius: couponBtnRadius + 'rpx'
-        }]">去使用</view>
+        <view class="cou_number">券号：{{ item.card_number }}</view>
+        <view class="cou_time">有效期：{{ item.end_time }}</view>
+        <view class="cou_point">
+          余额：
+          <xd-unit
+            :unitFontSize="24"
+            :fontSize="28"
+            :price="item.card_point"
+            :isOld="false"
+            :unit="item.unit || ''"
+            :colorNew="'#333333'"
+          ></xd-unit>
+        </view>
+        <view class="cou_btn"
+          :style="[
+            item.is_login === 'Y' ? couponBtnActiveStyle : couponBtnStyle,
+            {
+              padding: couponBtnPadding,
+              borderRadius: couponBtnRadius + 'rpx'
+            }
+          ]"
+          @click="goToUseCoupon"
+        >{{item.is_login === 'Y' ? '已登录' : '去使用'}}</view>
       </view>
       <view class="cont_bottom">
-        <view class="switch_rule">
+        <view class="switch_rule" @click="switchRule">
           <view>使用规则</view>
           <view>
-            <xd-font-icon icon="iconxia_down" size="24"></xd-font-icon>
+            <xd-font-icon v-if="!expand" icon="iconxia_down" size="24"></xd-font-icon>
+            <xd-font-icon v-else icon="iconshang_up" size="24"></xd-font-icon>
           </view>
         </view>
-        <view class="expand_rule">
-          这是一段文字规则描述，不知道又多长多长长...
+        <view v-if="expand" class="expand_rule">
+          {{ item.card_use_rule }}
         </view>
       </view>
     </view>
@@ -35,13 +62,18 @@
 </template>
 <script>
   import getServiceUrl from '@/common/getServiceUrl'
+  import XdUnit from "@/components/XdUnit/XdUnit";
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
   export default{
     name: "XdCouponItem",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      XdUnit
     },
     props: {
+      item:{
+        type: Object,
+      },
       couponRadius: {
         type: String,
         default: "16"
@@ -86,7 +118,7 @@
     },
     data() {
       return {
-        
+        expand: false,
       }
     },
     computed: {
@@ -111,6 +143,14 @@
         }
         return this.styleObjectToString(styleObj)
       },
+      couponBtnActiveStyle(){
+        return this.styleObjectToString({
+          color: this.couponBtnTextStyle['actColor'] || '#fff',
+          background: this.couponBtnTextStyle['actBgColor'] || '#ff5722',
+          fontSize: this.couponBtnTextStyle['actFontSize'] || '30rpx',
+          fontWeight: this.couponBtnTextStyle['actFontWeight'] || 'normal',
+        })
+      },
       couponRightItemBoxStyle(){
         let image = {};
         if(this.cardImageUrl) image = {
@@ -133,6 +173,12 @@
       },
     },
     methods: {
+      switchRule(){
+        this.expand = !this.expand;
+      },
+      goToUseCoupon(){
+        this.$emit('useCoupon', this.item);
+      },
       checkValue(value, dValue = 0){
         if(value === undefined || value === '' || value === null) return dValue;
         return Number(value || 0);
@@ -177,6 +223,7 @@
       .cont_main{
         position: relative;
         padding: 28rpx 20rpx 28rpx 40rpx;
+        color: #333333;
         .cou_number{
           font-size: 32rpx;
           font-weight: bold;
@@ -187,6 +234,8 @@
         }
         .cou_point{
           font-size: 28rpx;
+          display: flex;
+          align-items: center;
         }
         .cou_btn{
           position: absolute;
@@ -204,10 +253,13 @@
           align-items: center;
           justify-content: space-between;
           padding: 12rpx 40rpx;
+          font-size: 24rpx;
+          color: #666666;
         }
         .expand_rule{
           padding: 12rpx 40rpx;
           font-size: 20rpx;
+          color: #333333;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;

package/src/components/JfbBaseTfkSearch/CustomList.vue

@@ -19,8 +19,9 @@
         >
           <skeleton-product
             :cell="type_other"
-            v-if="type_code === 'product'"
-            :product-config="productConfig"
+            v-if="$parentVm.productConfig !== null && type_code === 'product'"
+            :product-config="$parentVm.productConfig"
+            :out-spacing="$parentVm.outSpacing"
           ></skeleton-product>
           <skeleton-shop v-if="type_code === 'show'" :out-spacing="$parentVm.outSpacing"></skeleton-shop>
           <skeleton-film v-if="type_code === 'film'" :out-spacing="$parentVm.outSpacing"></skeleton-film>
@@ -103,15 +104,6 @@ export default {
       num = num - this.$parentVm.checkValue(this.$parentVm.contMargin.right, 20) - this.$parentVm.checkValue(this.$parentVm.contMargin.left, 20);
       return num - this.$parentVm.contBorderWidth * 2
     },
-    productConfig(){
-      if(this.$parentVm === null) {
-        return null
-      }
-      return {
-        is_show_brand: this.$parentVm.is_show_brand,
-
-      }
-    }
   },
   data(){
     return {

package/src/components/JfbBaseTfkSearch/SkeletonProduct.vue

@@ -1,7 +1,19 @@
 <template>
-  <view class="skeleton-wrap-item">
+  <view class="skeleton-wrap-item" :class="{display: cell===1}">
     <template v-if="cell===1">
-
+      <view class="image skeleton-item" :style="{marginRight:outSpacing + 'rpx'}"></view>
+      <view class="content">
+        <view class="top">
+          <view class="title skeleton-item"></view>
+          <view class="brand skeleton-item"></view>
+          <view class="tags skeleton-item"></view>
+        </view>
+        <view class="bottom">
+          <view class="price skeleton-item"></view>
+          <view class="orgPrice skeleton-item"></view>
+          <view class="cart skeleton-item"></view>
+        </view>
+      </view>
     </template>
     <template v-if="cell===2">
 
@@ -21,8 +33,9 @@ export default {
       type: Number|String,
       required: true
     },
-    productConfig(){
-
+    productConfig:{
+      type:Object|null,
+      default: null
     },
   }
 }
@@ -32,10 +45,52 @@ export default {
 
 <style scoped lang="less">
 .skeleton-wrap-item {
-  height: 240rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  min-height: 200rpx;
+
+  &.display {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    align-content: space-between;
+
+    & .image {
+      .skeleton-item(200rpx, 200rpx);
+    }
+
+    & .content {
+      flex: 1;
+      min-height: 200rpx;
+
+      .top {
+        height: 140rpx;
+
+        & .title {
+          .skeleton-item(100%, 60rpx);
+        }
+      }
+      .bottom {
+        display: flex;
+        justify-content: flex-start;
+        align-content: center;
+        align-items: center;
+        width: 100%;
+        height: 60rpx;
+
+        & .price {
+          flex-shrink: 0;
+          .skeleton-item(100rpx, 35rpx);
+        }
+
+        & .orgPrice {
+          flex-shrink: 0;
+          margin-left: 20rpx;
+          .skeleton-item(130rpx, 20rpx);
+        }
+      }
+    }
+  }
+
+
 
   //影片列表骨架
   &-image {