jufubao-base 1.0.217 → 1.0.218-beta10

package/package.json

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

package/src/components/JfbBaseCard/Attr.js

@@ -251,6 +251,29 @@ export default {
           {label: "否", value: "2"},
         ]
       },
+      {
+        label: "无票券时是否展示购买新卡入口:",
+        ele: "xd-radio",
+        valueKey: "isShowBuy",
+        value: data.isShowBuy || "N",
+        list: [
+          { label: "展示", value: "Y" },
+          { label: "隐藏", value: "N" }
+        ],
+        groupKey: "content",
+      },
+      {
+        label: '购买新卡文案:',
+        ele: 'el-input',
+        type: 'text',
+        valueKey: 'buy_name',
+        groupKey:'content',
+        value: data.buy_name || '',
+        placeholder: '请输入购买新卡文案',
+        className: 'input80',
+        inline: false,
+        notice: '当未设置文案时，页面默认展示为"<span style="color:red">购买新卡</span>"，建议不超过<span style="color:red">4</span>个汉字'
+      },
       {
         ele: 'title',
         label: '登录样式设置',
@@ -458,6 +481,18 @@ export default {
         },
         inline: false,
       },
+      {
+        label: '购买新卡地址:',
+        ele: 'xd-select-pages-path',
+        valueKey: 'buy_new_url',
+        groupKey:'advanced',
+        placeholder: '请选择购买新卡地址',
+        value: data.buy_new_url || null,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        inline: false,
+      },
       {
         label: '综合福利入口页:',
         ele: 'xd-select-pages-path',

package/src/components/JfbBaseCard/JfbBaseCard.vue

@@ -132,7 +132,8 @@
           class="jfb-base-card__body-card"
         >
           <template v-if="cardLayout === '1'">
-            <view
+            <view v-if="showList&&showList.length>0">
+              <view
               v-for="(item, index) in showList"
               :key="index"
               @click="handleBindLogin(item)"
@@ -194,22 +195,45 @@
                 </view>
               </view>
             </view>
+            </view>
+            <view v-else>
+              <view class="jfb-base-card__body-empty">
+              <view class="jfb-base-card__body-empty-wrap">
+                <image :src="emptyBg"></image>
+                <view style="display:flex;align-items: center;justify-content: center;">
+                  暂无票券 <view v-if="isShowBuy==='Y'" class="buy_new" @click="toBuyNew" :style="{color: mainColor}"><view>{{buy_name}}</view> <xd-font-icon size="20" icon="iconxiangyou_xian"></xd-font-icon></view>
+                </view>
+              </view>
+            </view>
+            </view>
           </template>
           <template v-else>
-            <xd-card-v2
-              :login-name="login_name"
-              :logged-name="logged_name"
-              :look-name="look_name"
-              v-for="(item, index) in showList"
-              :mainColor="mainColor"
-              :key="index"
-              :cardInfo="item"
-              :tabIndex="tabIndex"
-              :lookStyle="lookStyle"
-              :login-style="loginStyle"
-              @toDetail="toDetail(item)"
-              @bindLogin="handleBindLogin(item)">
-            </xd-card-v2>
+            <view v-if="showList&&showList.length>0">
+              <xd-card-v2
+                :login-name="login_name"
+                :logged-name="logged_name"
+                :look-name="look_name"
+                v-for="(item, index) in showList"
+                :mainColor="mainColor"
+                :key="index"
+                :cardInfo="item"
+                :tabIndex="tabIndex"
+                :lookStyle="lookStyle"
+                :login-style="loginStyle"
+                @toDetail="toDetail(item)"
+                @bindLogin="handleBindLogin(item)">
+              </xd-card-v2>
+            </view>
+             <view v-else>
+              <view class="jfb-base-card__body-empty">
+              <view class="jfb-base-card__body-empty-wrap">
+                <image :src="emptyBg"></image>
+                <view style="display:flex;align-items: center;justify-content: center;">
+                  暂无票券 <view v-if="isShowBuy==='Y'" class="buy_new" @click="toBuyNew" :style="{color: mainColor}"><view>{{buy_name}}</view> <xd-font-icon size="20" icon="iconxiangyou_xian"></xd-font-icon></view>
+                </view>
+              </view>
+            </view>
+            </view>
           </template>
         </view>
       </template>
@@ -249,6 +273,7 @@ import openDebuggerMixins from "@/mixins/openDebuggerMixins";
 import { mapState, mapActions } from "vuex";
 import { getContainerPropsValue, isWechat,isQrCode } from "@/utils/xd.base";
 import XdNoticeBar from "@/components/XdNoticeBar/XdNoticeBar";
+import colorCardMixins from "@/mixins/colorCardMixins";
 import { Base64 } from "js-base64";
 const Color = require("color");
 
@@ -261,7 +286,7 @@ export default {
     XdCardV2,
     XdCardV2Skelton
   },
-  mixins: [componentsMixins, extsMixins, JfbBaseCardMixin,openDebuggerMixins],
+  mixins: [componentsMixins, extsMixins, JfbBaseCardMixin,openDebuggerMixins,colorCardMixins],
   computed: {
     ...mapState({
       jwxSDK: (state) => state.jwxSDK,
@@ -289,7 +314,11 @@ export default {
       if(this.look_text_radius) style['borderRadius'] = this.look_text_radius + 'rpx';
       if(this.cardLayout === '2') return style;
       return this.styleObjectToString(style);
-    }
+    },
+
+    emptyBg() {
+      return this.getNoData();
+    },
   },
   watch: {
     tabIndex(newVal) {
@@ -369,6 +398,9 @@ export default {
       dialogEvent: false,
       // is_show_change: false,
       popup: "https://img.zcool.cn/community/01784158abe781a801219c77e981ee.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100",
+      buy_name: '',
+      isShowBuy: 'N',
+      buy_new_url: ''
     };
   },
   created() {
@@ -424,6 +456,10 @@ export default {
       this.look_text_color = getContainerPropsValue(container, 'content.look_text_color', this.cardLayout==='2'? '#333':'#fff');
       this.look_text_bg_color = getContainerPropsValue(container, 'content.look_text_bg_color', this.cardLayout === '2'? '' :this.mainColor);
       this.look_text_radius = getContainerPropsValue(container, 'content.look_text_radius', '20');
+
+      this.isShowBuy = getContainerPropsValue(container, "content.isShowBuy", "N");
+      this.buy_name = getContainerPropsValue(container, "content.buy_name", "购买新卡");      
+      this.buy_new_url = getContainerPropsValue(container,"content.buy_new_url",{value: ""}).value;
     },
 
     handleToLink(path) {
@@ -632,6 +668,7 @@ export default {
           })
           console.warn(`changeList:${this.changeList.length}`)
           this.showList = this.getPageCardContent(this.cardList);
+          // this.showList = []
           if(this.hasContent) this.offsetIndex++;
           this.$xdHideLoading();
         })
@@ -643,6 +680,12 @@ export default {
       return newData.slice(0,this.pagesLimit);
     },
 
+    toBuyNew() {
+      this.$xdUniHelper.navigateTo({
+        url: `${this.buy_new_url}`,
+      });
+    },
+
     onJfbShow(options) {
       this.offsetIndex = 0;
       this.hasContent = true;
@@ -698,6 +741,37 @@ export default {
     padding: unit(55, rpx) unit(35, rpx);
     color: #333;
 
+    &-empty {
+      color: #888;
+      font-size: unit(24,rpx);
+      height: 60vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .buy_new {
+        display: flex;
+        margin-left: 8rpx;
+        & > view:first-child {
+          margin-right: 8rpx;
+        }
+      }
+
+      &-wrap {
+        display: flex;
+        flex-direction: column;
+
+        & > image {
+          width: unit(460,rpx);
+          height: unit(400,rpx);
+        }
+      }
+
+      & > view {
+        text-align: center;
+      }
+    }
+
     & .card_name {
       display: flex;
       justify-content: flex-start;

package/src/components/JfbBaseCardEntry/Attr.js

@@ -298,6 +298,29 @@ export default {
           {label: "隐藏", value: "2"},
         ]
       },
+      {
+        label: "无票券时是否展示购买新卡入口:",
+        ele: "xd-radio",
+        valueKey: "isShowBuy",
+        value: data.isShowBuy || "N",
+        list: [
+          { label: "展示", value: "Y" },
+          { label: "隐藏", value: "N" }
+        ],
+        groupKey: "content",
+      },
+      {
+        label: '购买新卡文案:',
+        ele: 'el-input',
+        type: 'text',
+        valueKey: 'buy_name',
+        groupKey:'content',
+        value: data.buy_name || '',
+        placeholder: '请输入购买新卡文案',
+        className: 'input80',
+        inline: false,
+        notice: '当未设置文案时，页面默认展示为"<span style="color:red">购买新卡</span>"，建议不超过<span style="color:red">4</span>个汉字'
+      },
       {
         label: "票券背景颜色:",
         ele: "xd-color",
@@ -386,6 +409,18 @@ export default {
         },
         inline: false,
       },
+      {
+        label: '购买新卡地址:',
+        ele: 'xd-select-pages-path',
+        valueKey: 'buy_new_url',
+        groupKey:'advanced',
+        placeholder: '请选择购买新卡地址',
+        value: data.buy_new_url || null,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        inline: false,
+      },
       {
         ele: "title",
         label: "我的优惠券样式配置",

package/src/components/JfbBaseCardEntry/JfbBaseCardEntry.vue

@@ -323,7 +323,9 @@
             <view class="jfb-base-card-entry__body-empty">
               <view class="jfb-base-card-entry__body-empty-wrap">
                 <image :src="emptyBg"></image>
-                暂无票券
+                <view style="display:flex;align-items: center;justify-content: center;">
+                  暂无票券 <view v-if="isShowBuy==='Y'" class="buy_new" @click="toBuyNew" :style="{color: mainColor}"><view>{{buy_name}}</view> <xd-font-icon size="20" icon="iconxiangyou_xian"></xd-font-icon></view>
+                </view>
               </view>
             </view>
           </view>
@@ -584,6 +586,9 @@ export default {
 
       cardBgColor: "",
       cardFontColor: "",
+      buy_new_url: '',
+      isShowBuy: "",
+      buy_name: ""
     };
   },
   created() {
@@ -639,6 +644,9 @@ export default {
       this.couponImageUrl = getContainerPropsValue(container, "content.couponImageUrl", "");
       this.cardBgColor = getContainerPropsValue(container, "content.cardBgColor", "");
       this.cardFontColor = getContainerPropsValue(container, "content.cardFontColor", "");
+      this.isShowBuy = getContainerPropsValue(container, "content.isShowBuy", "N");
+      this.buy_name = getContainerPropsValue(container, "content.buy_name", "购买新卡");
+      this.buy_new_url = getContainerPropsValue(container,"content.buy_new_url",{value: ""}).value;
       if(this.isPreview) {
         this.tabIndex = this.isShowCoupon==='Y'?2:1;
       }
@@ -993,6 +1001,12 @@ export default {
         .catch(() => this.$xdHideLoading());
     },
 
+    toBuyNew() {
+      this.$xdUniHelper.navigateTo({
+        url: `${this.buy_new_url}`,
+      });
+    },
+
     onJfbUpdate(data) {
       this.getContent();
     },
@@ -1023,6 +1037,14 @@ export default {
       align-items: center;
       justify-content: center;
 
+      .buy_new {
+        display: flex;
+        margin-left: 8rpx;
+        & > view:first-child {
+          margin-right: 8rpx;
+        }
+      }
+
       &-wrap {
         display: flex;
         flex-direction: column;

package/src/components/JfbBaseCardV2/Attr.js

@@ -44,6 +44,29 @@ export default {
         inline: false,
         notice: '当未设置文案时候，前台页面显示为"<span style="color:red">查看</span>"，建议不超过<span style="color:red">4</span>个汉字'
       },
+      {
+        label: "无票券时是否展示购买新卡入口:",
+        ele: "xd-radio",
+        valueKey: "isShowBuy",
+        value: data.isShowBuy || "N",
+        list: [
+          { label: "展示", value: "Y" },
+          { label: "隐藏", value: "N" }
+        ],
+        groupKey: "content",
+      },
+      {
+        label: '购买新卡文案:',
+        ele: 'el-input',
+        type: 'text',
+        valueKey: 'buy_name',
+        groupKey:'content',
+        value: data.buy_name || '',
+        placeholder: '请输入购买新卡文案',
+        className: 'input80',
+        inline: false,
+        notice: '当未设置文案时，页面默认展示为"<span style="color:red">购买新卡</span>"，建议不超过<span style="color:red">4</span>个汉字'
+      },
       {
         label: '填充设置:',
         ele: 'xd-margin-padding',
@@ -105,6 +128,18 @@ export default {
         },
         inline: false,
       },
+      {
+        label: '购买新卡地址:',
+        ele: 'xd-select-pages-path',
+        valueKey: 'buy_new_url',
+        groupKey:'advanced',
+        placeholder: '请选择购买新卡地址',
+        value: data.buy_new_url || null,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        inline: false,
+      },
     ].filter(i=>i)
   },
   advanced: [

package/src/components/JfbBaseCardV2/JfbBaseCardV2.vue

@@ -49,54 +49,64 @@
           class="jfb-base-card__body-card"
           :style="{padding: marginUi}"
         >
-          <view
-            v-for="(item, index) in cardList"
-            :key="index"
-            @click="handleBindLogin(item)"
-            class="jfb-base-card__body-card-item"
-            :style="{
-              marginBottom: list_sp + 'rpx',
-              backgroundColor:(item['is_login'] === 'Y'? mainBorderColor : '#fff'),
-              borderColor:`${item['is_login'] === 'Y'? mainSubBorderColor:'#eeeeee'}`
-            }"
-          >
-            <view class="jfb-base-card__body-card-item-left">
-              <xd-font-icon
-                size="100"
-                :color="mainColor"
-                :icon="item['is_login'] === 'Y'?'iconkaquandengluchenggong':'iconyouhuiquan1-011'"
-              ></xd-font-icon>
-              <view :style="{color: item['is_login'] === 'Y'?mainColor :''}">{{ item['is_login'] === 'Y'? logged_name : login_name}}</view>
-            </view>
+          <view v-if="cardList&&cardList.length>0">
             <view
-              class="jfb-base-card__body-card-item-right"
-              :style="{borderColor: item['is_login'] === 'Y'? mainSubBorderColor:'#eeeeee'}"
+              v-for="(item, index) in cardList"
+              :key="index"
+              @click="handleBindLogin(item)"
+              class="jfb-base-card__body-card-item"
+              :style="{
+                marginBottom: list_sp + 'rpx',
+                backgroundColor:(item['is_login'] === 'Y'? mainBorderColor : '#fff'),
+                borderColor:`${item['is_login'] === 'Y'? mainSubBorderColor:'#eeeeee'}`
+              }"
             >
+              <view class="jfb-base-card__body-card-item-left">
+                <xd-font-icon
+                  size="100"
+                  :color="mainColor"
+                  :icon="item['is_login'] === 'Y'?'iconkaquandengluchenggong':'iconyouhuiquan1-011'"
+                ></xd-font-icon>
+                <view :style="{color: item['is_login'] === 'Y'?mainColor :''}">{{ item['is_login'] === 'Y'? logged_name : login_name}}</view>
+              </view>
               <view
-                class="jfb-base-card__body-card-item-right-top"
+                class="jfb-base-card__body-card-item-right"
                 :style="{borderColor: item['is_login'] === 'Y'? mainSubBorderColor:'#eeeeee'}"
               >
-                <view :class="{card_name:item.is_gift === 'Y'}">
-                  <view :style="{backgroundColor: mainColor}" v-if="item.is_gift === 'Y'" class="is-gift">赠</view>
-                  <xd-font-icon
-                    v-else
-                    icon="iconkaquan"
-                    size="30"
-                    :style="{marginRight: '10rpx'}"
-                  ></xd-font-icon>
-                  <view>{{ item.card_type_name }}</view>
+                <view
+                  class="jfb-base-card__body-card-item-right-top"
+                  :style="{borderColor: item['is_login'] === 'Y'? mainSubBorderColor:'#eeeeee'}"
+                >
+                  <view :class="{card_name:item.is_gift === 'Y'}">
+                    <view :style="{backgroundColor: mainColor}" v-if="item.is_gift === 'Y'" class="is-gift">赠</view>
+                    <xd-font-icon
+                      v-else
+                      icon="iconkaquan"
+                      size="30"
+                      :style="{marginRight: '10rpx'}"
+                    ></xd-font-icon>
+                    <view>{{ item.card_type_name }}</view>
+                  </view>
+                  <view>
+                    <view>ID:{{ item.card_number }}</view>
+                    <view>有效期至:{{ item.end_time }}</view>
+                  </view>
                 </view>
-                <view>
-                  <view>ID:{{ item.card_number }}</view>
-                  <view>有效期至:{{ item.end_time }}</view>
+                <view class="jfb-base-card__body-card-item-right-bottom">
+                  <view class="jfb-base-card__body-card-item-right-bottom-info">
+                    <view class="jfb-base-card__body-card-item-right-bottom-info-residue">剩余{{ item.unit }}数：{{ item.card_point }}{{ item.unit }}</view>
+                    <view class="jfb-base-card__body-card-item-right-bottom-info-deduction">购买其他物品可抵：{{ item.other_card_point }}</view>
+                  </view>
+                  <view @click.stop="toDetail(item)" :style="{ background: mainColor }">{{look_name}}</view>
                 </view>
               </view>
-              <view class="jfb-base-card__body-card-item-right-bottom">
-                <view class="jfb-base-card__body-card-item-right-bottom-info">
-                  <view class="jfb-base-card__body-card-item-right-bottom-info-residue">剩余{{ item.unit }}数：{{ item.card_point }}{{ item.unit }}</view>
-                  <view class="jfb-base-card__body-card-item-right-bottom-info-deduction">购买其他物品可抵：{{ item.other_card_point }}</view>
-                </view>
-                <view @click.stop="toDetail(item)" :style="{ background: mainColor }">{{look_name}}</view>
+              </view>
+          </view>
+          <view v-else class="jfb-base-card__body-empty">
+            <view class="jfb-base-card__body-empty-wrap">
+              <image :src="emptyBg"></image>
+              <view style="display:flex;align-items: center;justify-content: center;">
+                暂无票券 <view v-if="isShowBuy==='Y'" class="buy_new" @click="toBuyNew" :style="{color: mainColor}"><view>{{buy_name}}</view> <xd-font-icon size="20" icon="iconxiangyou_xian"></xd-font-icon></view>
               </view>
             </view>
           </view>
@@ -126,6 +136,7 @@
   import JfbBaseCardV2Mixin from "./JfbBaseCardV2Mixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
+  import colorCardMixins from "@/mixins/colorCardMixins";
   import extsMixins from "@/mixins/extsMixins";
   import {Base64} from "js-base64";
   import {mapState} from "vuex";
@@ -138,7 +149,7 @@
       XdButton
     },
     mixins: [
-      componentsMixins, extsMixins, JfbBaseCardV2Mixin
+      componentsMixins, extsMixins, JfbBaseCardV2Mixin,colorCardMixins
     ],
     data() {
       return {
@@ -159,6 +170,9 @@
         list_sp:20,
 
         inCallbackUrlOrg:'',//是否带有回调地址
+        buy_new_url: '',
+        isShowBuy: "",
+        buy_name: ""
       }
     },
     watch: {
@@ -180,6 +194,9 @@
         str = `${str} ${this.checkValue(this.margin.left, 20)}rpx`;
         return str
       },
+      emptyBg() {
+        return this.getNoData();
+      },
     },
     created() {
       this.init(this.container);
@@ -235,6 +252,9 @@
         this.look_name =  getContainerPropsValue(container, 'content.look_name', '查看');
         this.logged_name =  getContainerPropsValue(container, 'content.logged_name', '已登录');
         this.list_sp = getContainerPropsValue(container, 'content.list_sp', 20);
+        this.isShowBuy = getContainerPropsValue(container, "content.isShowBuy", "N");
+        this.buy_name = getContainerPropsValue(container, "content.buy_name", "购买新卡");
+        this.buy_new_url = getContainerPropsValue(container,"content.buy_new_url",{value: ""}).value;
 
       },
 
@@ -274,6 +294,11 @@
           url:path
         })
       },
+      toBuyNew() {
+        this.$xdUniHelper.navigateTo({
+          url: `${this.buy_new_url}`,
+        });
+      },
       toOrderList(){
         this.$xdUniHelper.navigateTo({
           url: this.orderListPath
@@ -353,7 +378,36 @@
   }
   .jfb-base-card__body{
 
+      &-empty {
+        color: #888;
+        font-size: unit(24,rpx);
+        height: 60vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .buy_new {
+          display: flex;
+          margin-left: 8rpx;
+          & > view:first-child {
+            margin-right: 8rpx;
+          }
+        }
+
+        &-wrap {
+          display: flex;
+          flex-direction: column;
+
+          & > image {
+            width: unit(460,rpx);
+            height: unit(400,rpx);
+          }
+        }
 
+        & > view {
+          text-align: center;
+        }
+      }
     &-card {
       &-item {
         display: flex;

package/src/components/JfbBaseCardV3/Attr.js

@@ -31,6 +31,29 @@ export default {
         inline: false,
         notice: '当未设置文案时候，前台页面显示为"<span style="color:red">已登录</span>"，建议不超过<span style="color:red">4</span>个汉字'
       },
+      {
+        label: "无票券时是否展示购买新卡入口:",
+        ele: "xd-radio",
+        valueKey: "isShowBuy",
+        value: data.isShowBuy || "N",
+        list: [
+          { label: "展示", value: "Y" },
+          { label: "隐藏", value: "N" }
+        ],
+        groupKey: "content",
+      },
+      {
+        label: '购买新卡文案:',
+        ele: 'el-input',
+        type: 'text',
+        valueKey: 'buy_name',
+        groupKey:'content',
+        value: data.buy_name || '',
+        placeholder: '请输入购买新卡文案',
+        className: 'input80',
+        inline: false,
+        notice: '当未设置文案时，页面默认展示为"<span style="color:red">购买新卡</span>"，建议不超过<span style="color:red">4</span>个汉字'
+      },
       {
         label: '绑定新票券地址:',
         ele: 'xd-select-pages-path',
@@ -67,6 +90,18 @@ export default {
         },
         inline: false,
       },
+      {
+        label: '购买新卡地址:',
+        ele: 'xd-select-pages-path',
+        valueKey: 'buy_new_url',
+        groupKey:'advanced',
+        placeholder: '请选择购买新卡地址',
+        value: data.buy_new_url || null,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        inline: false,
+      },
     ].filter(i=>i)
   },
   advanced: [