jufubao-base 1.0.216 → 1.0.218-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.216",
+  "version": "1.0.218-beta1",
   "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)"
@@ -166,14 +167,16 @@
                   class="jfb-base-card__body-card-item-right-top"
                   :style="{borderColor: item['is_login'] === 'Y'? mainSubBorderColor:'#eeeeee'}"
                 >
-                  <view>
+                  <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="38"
                       :style="{marginRight: '18rpx'}"
                       :color="mainColor"
                     ></xd-font-icon>
-                    <view>{{ item.card_type_name }}</view>
+                    <view class="card_name_text">{{ item.card_type_name }}</view>
                   </view>
                   <view>
                     <view>{{ item.card_number }}{{showIndex?(':' + index):''}}</view>
@@ -192,28 +195,49 @@
                 </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>
-      <view v-if="showDisabled==='Y'" @click="handleToDisabled" class="jfb-base-card__body-disabled">
-        已失效票券>>>
-      </view>
+      <view v-if="showDisabled==='Y'" @click="handleToDisabled" class="jfb-base-card__body-disabled">已失效票券>>></view>
     </view>
       <view class="jfb-base-card__body-dialog" v-if="dialogEvent">
         <view class="jfb-base-card__body-dialog-content">
@@ -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,60 @@ 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;
+      align-items: flex-start;
+
+      & .is-gift {
+        margin-top: 5rpx;
+        font-size: 18rpx;
+        padding: 2rpx 10rpx;
+        border-radius: 8rpx;
+        line-height:26rpx;
+        height: 26rpx;
+        color: #fff;
+        margin-right: 18rpx;
+      }
+
+      & .card_name_text {
+        //line-height: 36rpx;
+      }
+    }
+
+
+
     &-dialog {
       position: fixed;
       top: 0;
@@ -899,6 +996,8 @@ export default {
       color: #b8b7be;
       margin-bottom: unit(30, rpx);
     }
+
+
   }
 }
 </style>

package/src/components/JfbBaseCard/Mock.js

@@ -13,7 +13,8 @@ module.exports = {
       "is_login":'Y',
       "main_product_name": "",
       "other_card_point": 0,
-      "is_exchange": "N"
+      "is_exchange": "N",
+      "is_gift":"Y"
     }, {
       "card_number": "101001000005193",
       "card_point": 99963600,
@@ -23,7 +24,8 @@ module.exports = {
       "is_valid": "Y",
       "main_product_name": "",
       "other_card_point": 0,
-      "is_exchange": "N"
+      "is_exchange": "N",
+      "is_gift":"N"
     }, {
       "card_number": "101001000005184",
       "card_point": 100000000,
@@ -33,7 +35,8 @@ module.exports = {
       "is_valid": "Y",
       "main_product_name": "",
       "other_card_point": 0,
-      "is_exchange": "N"
+      "is_exchange": "N",
+      "is_gift":"Y"
     }, {
       "card_number": "101001000005185",
       "card_point": 99631000,
@@ -63,6 +66,7 @@ module.exports = {
       "is_valid": "Y",
       "main_product_name": "",
       "other_card_point": 0,
+      "is_gift":"Y",
       "is_exchange": "Y"
     }, {
       "card_number": "101001000006989",
@@ -83,7 +87,8 @@ module.exports = {
       "is_valid": "Y",
       "main_product_name": "",
       "other_card_point": 0,
-      "is_exchange": "Y"
+      "is_exchange": "Y",
+      "is_gift":"Y"
     }, {
       "card_number": "101001000005479",
       "card_point": 10000000,

package/src/components/JfbBaseCardDisabled/JfbBaseCardDisabled.vue

@@ -10,9 +10,7 @@
       :class="{ editx: isEditx && active }"
       v-if="isEditx && active"
     >
-      <view class="jfb-base-card-disabled__edit-icon" @click="delEdit"
-        >删除</view
-      >
+      <view class="jfb-base-card-disabled__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
     <view class="jfb-base-card-disabled__body">
@@ -56,14 +54,16 @@
             </view>
             <view class="jfb-base-card-disabled__body-card-item-right">
               <view class="jfb-base-card-disabled__body-card-item-right-top">
-                <view>
+                <view :class="{card_name:item.is_gift === 'Y'}">
+                  <view :style="{backgroundColor: '#b8b7be'}" v-if="item.is_gift === 'Y'" class="is-gift">赠</view>
                   <xd-font-icon
+                    v-else
                     icon="iconkaquan"
                     size="38"
                     :style="{marginRight: '18rpx'}"
                     color="#B8B7BE"
                   ></xd-font-icon>
-                  <view style="color: #b8b7be">{{ item.card_type_name }}</view>
+                  <view class="card_name_text" style="color: #b8b7be">{{ item.card_type_name }}</view>
                 </view>
                 <view>
                   <view>{{ item.card_number }}</view>
@@ -211,6 +211,27 @@ export default {
     padding: unit(55, rpx) unit(35, rpx);
     color: #333;
 
+    & .card_name {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      & .is-gift {
+        margin-top: 5rpx;
+        font-size: 18rpx;
+        padding: 2rpx 10rpx;
+        border-radius: 8rpx;
+        line-height:26rpx;
+        height: 26rpx;
+        color: #fff;
+        margin-right: 18rpx;
+      }
+
+      & .card_name_text {
+        //line-height: 36rpx;
+      }
+    }
+
     &-card {
       border: 1px dashed rgba(0, 0, 0, 0);
       box-sizing: border-box;

package/src/components/JfbBaseCardDisabled/Mock.js

@@ -100,7 +100,8 @@ module.exports = {
       "main_business_code_name": "",
       "other_card_point": 0,
       "is_exchange": "N",
-      "card_point_type": 1
+      "card_point_type": 1,
+      "is_gift": 'Y',
     }, {
       "card_number": "261001000002643",
       "card_point": 0,
@@ -111,7 +112,8 @@ module.exports = {
       "main_business_code_name": "",
       "other_card_point": 0,
       "is_exchange": "N",
-      "card_point_type": 1
+      "card_point_type": 1,
+      "is_gift": 'Y',
     }, {
       "card_number": "261001000002641",
       "card_point": 0,

package/src/components/JfbBaseCardDisabledEntry/JfbBaseCardDisabledEntry.vue

@@ -34,7 +34,10 @@
             >
               <view class="card-list-warp" :style="{backgroundImage: 'url('+ item['theme']['image'] +')'}">
                 <view class="card-list__title">
-                  <view>{{item['card_type_name']}}</view>
+                  <view>
+                    <view :style="{backgroundColor: '#b8b7be'}" class="gifted" v-if="item['is_gift'] === 'Y'">赠</view>
+                    <view class="__title-name">{{item['card_type_name']}}</view>
+                  </view>
                 </view>
                 <div class="card-list__content">
                   <view>
@@ -438,6 +441,9 @@ export default {
     align-items: center;
 
     & > view {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
       padding: 0 unit(80, rpx);
       font-size: unit(24, rpx);
       line-height: unit(56, rpx);
@@ -446,6 +452,18 @@ export default {
       border-radius: 0 0 unit(16, rpx) 0;
     }
 
+
+    & view.gifted {
+      margin-top: -2rpx;
+      font-size: 18rpx;
+      padding: 2rpx 10rpx;
+      border-radius: 8rpx;
+      line-height:26rpx;
+      height: 26rpx;
+      color: #fff;
+      margin-right: 18rpx;
+    }
+
   }
 
   &__content {

package/src/components/JfbBaseCardDisabledEntry/Mock.js

@@ -25,6 +25,7 @@ module.exports = {
       "is_valid": "N",
       "main_business_code_name": "",
       "other_card_point": 0,
+      "is_gift":'Y',
       "is_exchange": "N",
       "card_point_type": 1,
       "business_codes": ["health"]
@@ -40,6 +41,7 @@ module.exports = {
       "other_card_point": 0,
       "is_exchange": "N",
       "card_point_type": 1,
+      "is_gift":'Y',
       "business_codes": ["movie", "market", "cake", "book", "video", "play", "health", "small", "travel", "supermarket", "food"]
     }, {
       "card_number": "101001000008421",

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: "我的优惠券样式配置",