jufubao-base 1.0.403-beta4 → 1.0.404

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.403-beta4",
+  "version": "1.0.404",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",

package/src/components/JfbBaseCardEntry/Api.js

@@ -51,4 +51,12 @@ module.exports = [
     },
     disabled: true,
   },
+  {
+    mapFnName: 'getListPlusCouponRights',
+    isRule: false,
+    title: '获得绑定的卡的优惠券权益列表',
+    path: '/card/v1/card-bind/list-plus-coupon-rights',
+    params: {},
+    disabled: true,
+  },
 ];

package/src/components/JfbBaseCardEntry/Attr.js

@@ -320,6 +320,17 @@ export default {
           { label: "一行滑块展示", value: "one" }
         ]
       },
+      {
+        label: "是否展示plus权益:",
+        ele: "xd-radio",
+        valueKey: "isShowPlus",
+        groupKey:'content',
+        value: data.isShowPlus || "N",
+        list: [
+          { label: "展示", value: "Y" },
+          { label: "隐藏", value: "N" }
+        ]
+      },
       {
         label: "二维码文案",
         ele: "el-input",
@@ -561,6 +572,85 @@ export default {
             });
         },
       },
+      {
+        ele: "title",
+        label: "plus权益样式配置",
+        size: "small",
+        groupKey: "style",
+        hidden: data.isShowPlus !== 'Y',
+      },
+      {
+        label: "列表项背景图:",
+        ele: "xd-upload",
+        valueKey: "plusItemBgImage",
+        groupKey:'style',
+        value: data.plusItemBgImage || {},
+        defaultValue: data.plusItemBgImage || null,
+        slot: true,
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one',
+        uploadType: 'aliyun',
+        size: 5,
+        action: 'action',
+        oneWidth: 375,
+        oneHeight: 120,
+        sort: true,
+        hidden: data.isShowPlus !== 'Y',
+        inline: true,
+      },
+      {
+        label: "套餐名称颜色:",
+        ele: "xd-color",
+        valueKey: "plusPackageNameColor",
+        groupKey:'style',
+        value: data.plusPackageNameColor || '#8C530D',
+        hidden: data.isShowPlus !== 'Y',
+        inline: true,
+      },
+      {
+        label: "兑换有效期颜色:",
+        ele: "xd-color",
+        valueKey: "plusValidDateColor",
+        groupKey:'style',
+        value: data.plusValidDateColor || '#A8630D',
+        hidden: data.isShowPlus !== 'Y',
+        inline: true,
+      },
+      {
+        label: "按钮文字颜色:",
+        ele: "xd-color",
+        valueKey: "plusBtnTextColor",
+        groupKey:'style',
+        value: data.plusBtnTextColor || '#A8630D',
+        hidden: data.isShowPlus !== 'Y',
+        inline: true,
+      },
+      {
+        label: "按钮背景颜色:",
+        ele: "xd-gradient-color",
+        valueKey: "plusBtnBgColor",
+        groupKey:'style',
+        value: data.plusBtnBgColor || 'linear-gradient(90deg, #FFF6E5 0%, #FEE4AA 100%)',
+        hidden: data.isShowPlus !== 'Y',
+        inline: true,
+      },
+      {
+        ele: "title",
+        label: "tab按钮样式配置",
+        size: "small",
+        groupKey: "style",
+      },
+      {
+        label: "选中时文字背景色设置: ",
+        ele: "xd-text-and-bgc",
+        groupKey:'style',
+        valueKey: "tabBtnStyle",
+        value: data.tabBtnStyle || null,
+        setting: {
+          color: true,
+          bgColor: true,
+        },
+      },
     ]
   },
 };

package/src/components/JfbBaseCardEntry/JfbBaseCardEntry.vue

@@ -104,18 +104,17 @@
       <view class="jfb-base-card-entry__body-tab">
         <view
           @click="tabIndex = 1"
-          :style="{
-            color: tabIndex === 1 ? '#fff' : '#B8B7BE',
-            background: tabIndex === 1 ? mainColor : '#fff',
-          }"
-        >已绑定票券</view>
+          :style="tabIndex === 1 ? tabSelectedStyle : tabNormalStyle"
+        >已绑票券({{totalCardNum}})</view>
         <view
           @click="tabIndex = 2"
-          :style="{
-            color: tabIndex === 2 ? '#fff' : '#B8B7BE',
-            background: tabIndex === 2 ? mainColor : '#fff',
-          }"
-        >优惠券</view>
+          :style="tabIndex === 2 ? tabSelectedStyle : tabNormalStyle"
+        >优惠券({{totalCouponCardNum}})</view>
+        <view
+          v-if="isShowPlus === 'Y'"
+          @click="tabIndex = 3"
+          :style="tabIndex === 3 ? tabSelectedStyle : tabNormalStyle"
+        >plus权益({{totalPlusCardNum}})</view>
       </view>
       <view class="jfb-base-card-entry__body-sub-tab" v-if="tabIndex === 1">
         <view :style="{
@@ -333,6 +332,35 @@
             <view v-else>暂无数据</view>
           </view>
           <!--content coupon-->
+          <!--content plus-->
+          <view v-if="tabIndex === 3 && plusList && plusList.length > 0" class="jfb-base-card-entry__body-plus">
+            <view class="jfb-base-card-entry__body-plus-list">
+              <view
+                class="jfb-base-card-entry__body-plus-item"
+                v-for="(item, idx) in plusList"
+                :key="idx"
+                @click="handlePlusClick(item)"
+                :style="{
+                  backgroundImage: plusItemBgImageUrl ? 'url(' + plusItemBgImageUrl + ')' : '',
+                  backgroundSize: '100% 100%',
+                }"
+              >
+                <view class="jfb-base-card-entry__body-plus-item-top">
+                  <view class="jfb-base-card-entry__body-plus-item-name" :style="{ color: plusPackageNameColor }">{{ item.plus_product_name }}</view>
+                  <view
+                    class="jfb-base-card-entry__body-plus-item-btn"
+                    :class="{ redeemed: item.button_text === '去使用' }"
+                    :style="{
+                      color: plusBtnTextColor,
+                      background: item.button_text === '去使用' ? '' : plusBtnBgColor,
+                    }"
+                  >{{ item.button_text }}</view>
+                </view>
+                <view class="jfb-base-card-entry__body-plus-item-date" :style="{ color: plusValidDateColor }">兑换有效期：{{ item.end_time | formatTimestamp }}</view>
+              </view>
+            </view>
+          </view>
+          <!--content plus-->
           <!--no data-->
           <view v-else-if="cardList !== null && cardList.length === 0">
             <view class="jfb-base-card-entry__body-empty">
@@ -516,10 +544,34 @@ export default {
         return this.getNoData();
     },
   },
+  computed: {
+    tabSelectedStyle() {
+      let styleObj = {
+        color: this.tabBtnStyle && this.tabBtnStyle['actColor'] || '#fff',
+        background: this.tabBtnStyle && this.tabBtnStyle['actBgColor'] || this.mainColor,
+      }
+      return this.styleObjectToString(styleObj);
+    },
+    tabNormalStyle() {
+      let styleObj = {
+        color: this.tabBtnStyle['color']||'#ccc',
+        background:this.tabBtnStyle['bgColor']|| '#eee',
+      }
+      return this.styleObjectToString(styleObj);
+    },
+  },
   filters:{
     cutstr(val){
       if(typeof val.entry_name === 'string') return val.entry_name.slice(0,4);
       return ''
+    },
+    formatTimestamp(val) {
+      if (!val) return '';
+      const date = new Date(Number(val) * 1000);
+      const y = date.getFullYear();
+      const m = String(date.getMonth() + 1).padStart(2, '0');
+      const d = String(date.getDate()).padStart(2, '0');
+      return `${y}-${m}-${d}`;
     }
   },
   watch: {
@@ -655,6 +707,20 @@ export default {
       buy_name: "",
       code_name: "",
       bussShowType: "",
+      isShowPlus: 'N',
+      plusList: [],
+      plusItemBgImage: {},
+      plusItemBgImageUrl: '',
+      plusPackageNameColor: '',
+      plusValidDateColor: '',
+      plusBtnTextColor: '',
+      plusBtnBgColor: '',
+      tabBtnStyle: null,
+      totalCardNum: 0,
+      totalPlusCardNum: 0,
+      totalCouponCardNum: 0,
+      isInitialized: false,
+      exchange_url: '',
     };
   },
   created() {
@@ -739,11 +805,22 @@ export default {
       let bussShowType = getContainerPropsValue(container, "content.bussShowType", "one");
       if(this.isPreview) {
         this.tabIndex = this.isShowCoupon==='Y'?2:1;
-        if(this.bussShowType !== bussShowType){
-          this.clearDefault();
-          this.cardPageNum = 0;
-          this.onJfbLoad(this.options);
-        }
+      }
+      this.isShowPlus = getContainerPropsValue(container, "content.isShowPlus", "N");
+      let plusItemBgImage = getContainerPropsValue(container, "content.plusItemBgImage", '');
+      this.plusItemBgImageUrl = plusItemBgImage ? getServiceUrl(plusItemBgImage.url) : '';
+      this.plusPackageNameColor = getContainerPropsValue(container, "content.plusPackageNameColor", '#8C530D');
+      this.plusValidDateColor = getContainerPropsValue(container, "content.plusValidDateColor", '#A8630D');
+      this.plusBtnTextColor = getContainerPropsValue(container, "content.plusBtnTextColor", '#A8630D');
+      this.plusBtnBgColor = getContainerPropsValue(container, "content.plusBtnBgColor", 'linear-gradient(90deg, #FFF6E5 0%, #FEE4AA 100%)');
+      this.tabBtnStyle = getContainerPropsValue(container, "content.tabBtnStyle", {
+        color: '#fff',
+        bgColor: '',
+      });
+      if(this.bussShowType !== bussShowType){
+        this.clearDefault();
+        this.cardPageNum = 0;
+        this.onJfbLoad(this.options);
       }
       this.bussShowType = bussShowType;
     },
@@ -979,10 +1056,17 @@ export default {
       // #endif
 
       this.getContent();
-      if(this.tabIndex===1) {
+      if(!this.isInitialized){
+        this.isInitialized = true;
         this.getCardList(options);
-      } else {
         this.getCouponList(options);
+        this.getPlusList(options);
+      } else if(this.tabIndex===1) {
+        this.getCardList(options);
+      } else if(this.tabIndex===2) {
+        this.getCouponList(options);
+      } else if(this.tabIndex===3) {
+        this.getPlusList(options);
       }
     },
 
@@ -998,6 +1082,7 @@ export default {
         data: params
       }).then(res=>{
         this.loadingCardList = false;
+        this.totalCouponCardNum = res.list.length || 0;
           this.showDisabled = res.is_show_invalid_card_entrance;
           if(this.isPreview) {
             res.list = this.testCouponList
@@ -1014,6 +1099,48 @@ export default {
 
     },
 
+    getPlusList(options) {
+      this.$xdShowLoading({});
+      let params = {}
+      if(this.entryGroupId) params['group_id'] = this.entryGroupId;
+      jfbRootExec("getListPlusCouponRights", {
+        vm: this,
+        data: params
+      })
+        .then((res) => {
+          this.loadingCardList = false;
+          this.totalPlusCardNum = res.list.length || 0;
+          //过滤入口配置
+          this.plusList = res.list
+          this.exchange_url = res.exchange_url
+          this.$xdHideLoading();
+        })
+        .catch(() => {
+          this.loadingCardList = false;
+          this.$xdHideLoading();
+        });
+    },
+
+    handlePlusClick(item) {
+      let site_path = this.exchange_url;
+      jfbRootExec("getBaseByIdCardDetail", {
+        vm: this,
+        data: {
+          card_number: item.card_number
+        }
+      }).then(res => {
+        let code_content = this.getParams(res.card_qrcode, "code_content")
+        let sitePath = `${site_path}?ecode=${Base64.encodeURI(code_content)}`;
+        sitePath = `${sitePath}&is_return_is_used=Y`
+        let sitePathPre = sitePath.split("?")[0];
+        let sitePathAfter = sitePath.split("?")[1];
+        sitePath = `${sitePathPre}?ecode-params=${Base64.encodeURI(sitePathAfter)}`;
+        this.$xdUniHelper.redirectTo({
+          url: sitePath,
+        });
+      })
+    },
+
     getCardList(options) {
       let params = {is_all: 'Y', is_show_entry_settings: 'Y', show_type: 'normal'};
       if(options['jfb_business_code']) {
@@ -1028,6 +1155,7 @@ export default {
         .then((res) => {
           this.loadingCardList = false;
           this.showDisabled = res.is_show_invalid_card_entrance;
+          this.totalCardNum = res.list.length || 0;
           res.list = res.list.map((item) => {
             return {
               ...item,
@@ -1256,6 +1384,64 @@ export default {
   }
 }
 
+.jfb-base-card-entry__body-plus {
+  padding: 0 0 30rpx;
+
+  &-header {
+    font-size: 28rpx;
+    color: #666;
+    margin-bottom: 20rpx;
+
+    &-num {
+      color: #333;
+      font-weight: 700;
+      font-size: 32rpx;
+    }
+  }
+
+  &-list {
+    display: flex;
+    flex-direction: column;
+    gap: 24rpx;
+  }
+
+  &-item {
+    padding: 30rpx 40rpx;
+    background: #fff;
+    border-radius: 16rpx;
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+
+    &-top {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    &-name {
+      font-size: 32rpx;
+      font-weight: 500;
+      color: #8C530D;
+    }
+
+    &-date {
+      font-size: 28rpx;
+      color: #A8630D;
+      margin-top: 72rpx;
+    }
+
+    &-btn {
+      flex-shrink: 0;
+      margin-left: 20rpx;
+      padding: 12rpx 36rpx;
+      font-size: 32rpx;
+      color: #A8630D;
+      border-radius: 54rpx;
+      text-align: center;
+      background: linear-gradient(90deg, #FFF6E5 0%, #FEE4AA 100%);
+    }
+  }
+}
+
 .card-list {
   overflow: hidden;
   border-radius: unit(16, rpx);

package/src/components/JfbBaseCardEntry/Mock.js

@@ -393,5 +393,8 @@ module.exports = {
   "card_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhM2U4YjQ5OWEwNzUwN2EyIiwiaWF0IjoxNjc0OTYzODE3LjY2OTM1MywiZXhwIjoxNjc1MDIwNTc3LjY2OTM1MywiY2FyZF9udW1iZXIiOiIxMDEwMDEwMDAwMDUxOTUiLCJjYXJkX3R5cGVfbmFtZSI6IjZJR2E1NmFQNWE2ZDU2YVA1WTJoNXJXTDZLK1Y2SnVMNTdPViIsInByaWNlIjoxMDAsIm9ubGluZV9wcmljZSI6MTAwLCJ1c2Vfc2NlbmNlIjozLCJidXNpbmVzc19jb2RlcyI6IjAsMSwyLDMsNCJ9.LsoBJq4pC_gSc1jZRwDhD2rAfOf1DMCy29VHomGiqYE",
   "card_expire_in": 56760,
   "request_id": "8fde2506c426a55d"
-}
+},
+  getListPlusCouponRights:{ "total_size": 1, "list": [{ "card_number": "101001000141415", "card_type_name": "聚福宝福卡（点12位）", "plus_product_id": 60038520, "plus_product_name": "体验卡7天", "start_time": 1754841600, "end_time": 1800547199, "exchange_expire_time": 1800547099, "exchange_status": "N", "exchange_status_name": "未兑换", "business_codes": ["market", "cake"], "exchange_card_numbers": "", "exchange_time": 0, "button_text": "去兑换" }], "request_id": "f2043ea4806956cb" }
+
+
 }