jufubao-base 1.0.216 → 1.0.218-beta1

package/src/components/JfbBaseCardEntry/JfbBaseCardEntry.vue

@@ -137,6 +137,7 @@
         v-if="subTabIndex === 2&&tabIndex === 1"
       >* 目前仅支持电影票兑换券进行转换</view>
       <view class="card-content">
+        <!--loading-->
         <view v-if="loadingCardList" class="jfb-base-card-entry__body-card skeleton-card">
           <view v-for="i in 3" class="card-list" :key="i">
             <view class="card-list-warp">
@@ -164,126 +165,124 @@
             </view>
           </view>
         </view>
-
+        <!--loading-->
+        <!--content-->
         <template v-else>
-          <view
-            v-if="tabIndex === 1 && (cardList && cardList.length > 0)"
-            class="jfb-base-card-entry__body-card"
-          >
+          <!--content card-->
+          <view v-if="tabIndex === 1 && (cardList && cardList.length > 0)" class="jfb-base-card-entry__body-card">
             <template v-if="cardType==='default'">
-              <view
-                v-for="(item,index) in cardList"
-                :data-index="item.card_number"
-                :data-idx="index"
-                :data-top="item.top"
-                class="card-list"
-                :key="item.card_number"
-                @click="toDetail(item)"
-                v-if="setCardItemShow(item,index)"
-                :style="{
+              <template v-for="(item,index) in cardList">
+                <view
+                  :data-index="item.card_number"
+                  :data-idx="index"
+                  :data-top="item.top"
+                  class="card-list"
+                  :key="item.card_number"
+                  @click="toDetail(item)"
+                  v-if="setCardItemShow(item,index)"
+                  :style="{
                   background: item['theme']['color'],
                   backgroundSize: '100%',
                   height: subTabIndex !== 3 ? item.height + 'px' : '300rpx'
                 }"
-              >
-                <view class="card-list-warp" :style="{backgroundImage: 'url('+ item['theme']['image'] +')'}">
-                  <view class="card-list__title">
-                    <view>
-                      <view>{{item['card_type_name']}}</view>
-                      <view v-if="item['is_login'] === 'Y'"><text></text><text>已登录</text></view>
-                    </view>
-                  </view>
-                  <view class="card-list__content">
-                    <view>
-                      <text>券号：</text>
-                      <text>{{item.card_number}}{{showIndex?(':' + index):''}}</text>
+                >
+                  <view class="card-list-warp" :style="{backgroundImage: 'url('+ item['theme']['image'] +')'}">
+                    <view class="card-list__title">
+                      <view>
+                        <view :style="{backgroundColor: mainColor}" class="gifted" v-if="item['is_gift'] === 'Y'">赠</view>
+                        <view>{{item['card_type_name']}}</view>
+                        <view class="logined" v-if="item['is_login'] === 'Y'"><text></text><text>已登录</text></view>
+                      </view>
                     </view>
-                    <view @click.stop="toDetail(item)" v-if="subTabIndex !== 3&&isShowCode === 'Y'&&!force">
+                    <view class="card-list__content">
                       <view>
-                        <xd-font-icon icon="iconerweima" width="56" height="56" size="50" color="#fff"></xd-font-icon>
+                        <text>券号：</text>
+                        <text>{{item.card_number}}{{showIndex?(':' + index):''}}</text>
+                      </view>
+                      <view @click.stop="toDetail(item)" v-if="subTabIndex !== 3&&isShowCode === 'Y'&&!force">
+                        <view>
+                          <xd-font-icon icon="iconerweima" width="56" height="56" size="50" color="#fff"></xd-font-icon>
+                        </view>
+                        <view>点击查看</view>
                       </view>
-                      <view>点击查看</view>
                     </view>
-                  </view>
-                  <view class="card-list__date">
-                    <text>有效期：</text>
-                    <text>{{item.end_time}}</text>
-                  </view>
-                  <view class="card-list__yue">
-                    <text>余额：</text>
-                    <text>{{item.card_point}} {{ item.unit }}</text>
-                  </view>
-                  <view class="card-list__other" v-if="item.other_card_point && item.card_point_type === 2">
-                    <view><text>购买其他物品可抵：</text><text>{{item.other_card_point}} {{ item.unit }}</text></view>
-                  </view>
-                  <template v-if="subTabIndex === 1">
-                    <view class="card-list__entry" v-if="item.is_login==='N'&&force">
-                      <view
-                        @click.stop="handleBindLogin(item,item['entries'][0])"
-                        :style="{
+                    <view class="card-list__date">
+                      <text>有效期：</text>
+                      <text>{{item.end_time}}</text>
+                    </view>
+                    <view class="card-list__yue">
+                      <text>余额：</text>
+                      <text>{{item.card_point}} {{ item.unit }}</text>
+                    </view>
+                    <view class="card-list__other" v-if="item.other_card_point && item.card_point_type === 2">
+                      <view><text>购买其他物品可抵：</text><text>{{item.other_card_point}} {{ item.unit }}</text></view>
+                    </view>
+                    <template v-if="subTabIndex === 1">
+                      <view class="card-list__entry" v-if="item.is_login==='N'&&force">
+                        <view
+                          @click.stop="handleBindLogin(item,item['entries'][0])"
+                          :style="{
                           background: '#fff',
                           color: item['theme']['color']}"
-                      >
-                        登录
+                        >登录</view>
                       </view>
-                    </view>
-                    <view class="card-list__entry" v-if="item.entries.length === 1&&!force">
-                      <view
-                        @click.stop="handleBindLogin(item,item['entries'][0])"
-                        :style="{color: item['theme']['color']}"
-                      >进入{{item['entries'][0]['entry_name']}}</view>
-                    </view>
-                    <view class="card-list__nodata" v-if="item.entries.length === 0&&!force">暂无支持服务列表</view>
-                    <view class="card-list__entrys" v-if="item.entries.length > 1&&!force" @click.stop>
-                      <view class="card-list__entrys-title">
-                        <view>可兑换权益</view>
-                        <view @click.stop="toDetail(item, false)">
-                          <text>查看详情</text>
-                          <xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
-                        </view>
+                      <view class="card-list__entry" v-if="item.entries.length === 1&&!force">
+                        <view
+                          @click.stop="handleBindLogin(item,item['entries'][0])"
+                          :style="{color: item['theme']['color']}"
+                        >进入{{item['entries'][0]['entry_name']}}</view>
                       </view>
-                      <view class="card-list__entrys-list">
-                        <scroll-view scroll-x class="card-list__entrys-scroll">
-                          <view class="card-list__entrys-item">
-                            <view
-                              v-for="(entry,idx) in item.entries"
-                              :key="idx"
-                              @click.stop="handleBindLogin(item, entry)"
-                            >
-                              <view><image :src="entry.image_url"></image></view>
-                              <view>{{entry|cutstr}}</view>
-                              <view>
-                                <text>去兑换</text>
-                                <xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
+                      <view class="card-list__nodata" v-if="item.entries.length === 0&&!force">暂无支持服务列表</view>
+                      <view class="card-list__entrys" v-if="item.entries.length > 1&&!force" @click.stop>
+                        <view class="card-list__entrys-title">
+                          <view>可兑换权益</view>
+                          <view @click.stop="toDetail(item, false)">
+                            <text>查看详情</text>
+                            <xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
+                          </view>
+                        </view>
+                        <view class="card-list__entrys-list">
+                          <scroll-view scroll-x class="card-list__entrys-scroll">
+                            <view class="card-list__entrys-item">
+                              <view
+                                v-for="(entry,idx) in item.entries"
+                                :key="idx"
+                                @click.stop="handleBindLogin(item, entry)"
+                              >
+                                <view><image :src="entry.image_url"></image></view>
+                                <view>{{entry|cutstr}}</view>
+                                <view>
+                                  <text>去兑换</text>
+                                  <xd-font-icon icon="iconxiangyou_xian" color="#999" size="20"></xd-font-icon>
+                                </view>
                               </view>
                             </view>
-                          </view>
-                        </scroll-view>
+                          </scroll-view>
+                        </view>
                       </view>
+                    </template>
+                    <view class="card-list__entry" v-else-if="subTabIndex===2">
+                      <view
+                        @click.stop="handleBindLogin(item,item['entries'][0])"
+                        :style="{color: item['theme']['color']}"
+                      >票券转换</view>
                     </view>
-                  </template>
-                  <view class="card-list__entry" v-else-if="subTabIndex===2">
-                    <view
-                      @click.stop="handleBindLogin(item,item['entries'][0])"
-                      :style="{color: item['theme']['color']}"
-                    >票券转换</view>
                   </view>
                 </view>
-              </view>
-              <view
-                class="card-content-empty card-list"
-                :data-index="item.card_number"
-                :data-idx="index"
-                :data-top="item.top"
-                v-else
-                :style="{
+                <view
+                  class="card-content-empty card-list"
+                  :data-index="item.card_number"
+                  :data-idx="index"
+                  :data-top="item.top"
+                  v-else
+                  :style="{
                   height: item.height + 'px',
                   backgroundImage: 'url('+ (tabIndex===2 || item.entries.length <= 1 ? cardItem: cardItemEntry) +')'
                 }"
-              ></view>
+                ></view>
+              </template>
             </template>
             <template v-if="cardType==='style2'">
-
               <view v-for="(item,index) in cardList" :key="item.card_number">
                 <xd-card-new
                   :item="item"
@@ -297,43 +296,50 @@
               </view>
             </template>
           </view>
+          <!--content card-->
+          <!--content coupon-->
           <view v-if="tabIndex===2&&(couponList&&couponList.length)">
             <view v-if="couponList.length" class="coupon_list">
-            <CusCouponItem v-for="(item, i) in couponList" :key="i"
-              style="margin-bottom:20rpx"
-              :couponRadius="couponRadius"
-              :couponImageUrl="couponImageUrl"
-              :couponTitleBgColor="couponTitleBgColor"
-              :couponUseBtnPadding="couponUseBtnPadding"
-              :couponBtnRadius="couponBtnRadius"
-              :couponBtnTextStyle="couponBtnTextStyle"
-              :couponLeftBgColor="couponLeftBgColor"
-              :item="item"
-              :mainColor="mainColor"
-              @useCoupon="handleBindLogin(item,item['entries'][0])"
-              @toDetail="toDetail(item)"
-            ></CusCouponItem>
-          </view>
-          <view v-else>
-            暂无数据
-          </view>
+              <CusCouponItem v-for="(item, i) in couponList" :key="i"
+                style="margin-bottom:20rpx"
+                :couponRadius="couponRadius"
+                :couponImageUrl="couponImageUrl"
+                :couponTitleBgColor="couponTitleBgColor"
+                :couponUseBtnPadding="couponUseBtnPadding"
+                :couponBtnRadius="couponBtnRadius"
+                :couponBtnTextStyle="couponBtnTextStyle"
+                :couponLeftBgColor="couponLeftBgColor"
+                :item="item"
+                :mainColor="mainColor"
+                @useCoupon="handleBindLogin(item,item['entries'][0])"
+                @toDetail="toDetail(item)"
+              ></CusCouponItem>
+            </view>
+            <view v-else>暂无数据</view>
           </view>
+          <!--content coupon-->
+          <!--no data-->
           <view v-else-if="cardList !== null && cardList.length === 0">
             <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>
+          <!--no data-->
         </template>
-
+        <!--content-->
+        <!--disabled-->
         <view
           v-if="showDisabled==='Y'"
           @click="handleToDisabled"
           class="jfb-base-card-entry__body-disabled"
         >已失效票券>>></view>
       </view>
+      <!--disabled-->
       <view class="jfb-base-card-entry__body-dialog" v-if="dialogEvent">
         <view class="jfb-base-card-entry__body-dialog-content">
           <image
@@ -580,6 +586,9 @@ export default {
 
       cardBgColor: "",
       cardFontColor: "",
+      buy_new_url: '',
+      isShowBuy: "",
+      buy_name: ""
     };
   },
   created() {
@@ -635,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;
       }
@@ -989,6 +1001,12 @@ export default {
         .catch(() => this.$xdHideLoading());
     },
 
+    toBuyNew() {
+      this.$xdUniHelper.navigateTo({
+        url: `${this.buy_new_url}`,
+      });
+    },
+
     onJfbUpdate(data) {
       this.getContent();
     },
@@ -1019,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;
@@ -1190,11 +1216,11 @@ export default {
       justify-content: center;
       align-items: center;
 
-      .skeleton-card &{
+      .skeleton-card & {
         .skeleton-item(120rpx, 50rpx, 0 0 16rpx 0, #EEEEEE);
       }
 
-      & > view:nth-child(2) {
+      & > view.logined {
         height: 36rpx;
         line-height: 36rpx;
         background-color: rgb(41, 203, 151);
@@ -1218,8 +1244,18 @@ export default {
         }
       }
 
-    }
+      & > 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/JfbBaseCardEntry/Mock.js

@@ -17,6 +17,7 @@ module.exports = {
         "is_transfering":"Y",
         "card_point_type": 1,
         "is_login":'Y',
+        "is_gift":"Y",
         "business_codes": ["health"]
       }, {
         "card_number": "121000100000028",
@@ -31,6 +32,7 @@ module.exports = {
         "is_exchange": "N",
         "is_transfering":"Y",
         "card_point_type": 1,
+        "is_gift":"N",
         "business_codes": ["health"]
       }, {
         "card_number": "101001000005192",
@@ -45,6 +47,7 @@ module.exports = {
         "is_exchange": "N",
         "is_transfering":"Y",
         "card_point_type": 1,
+        "is_gift":"N",
         "business_codes": ["movie", "market", "cake", "book", "video", "play", "health", "small", "travel", "supermarket", "food"]
       }, {
         "card_number": "101001000008421",
@@ -59,6 +62,7 @@ module.exports = {
         "is_exchange": "N",
         "is_transfering":"N",
         "is_login":'Y',
+        "is_gift":'Y',
         "card_point_type": 1,
         "business_codes": ["cake"]
       }, {
@@ -73,9 +77,26 @@ module.exports = {
         "other_card_point": 0,
         "is_exchange": "Y",
         "is_transfering":"N",
+        "is_gift":'Y',
         "card_point_type": 1,
         "business_codes": ["movie", "market", "cake"]
-      }, {
+      },
+      {
+        "card_number": "171003500000383",
+        "card_point": 100000,
+        "card_type": "39",
+        "card_type_name": "一对一次卡（无限制）",
+        "unit": "次",
+        "end_time": "2024-08-31",
+        "is_valid": "Y",
+        "main_business_code_name": "",
+        "other_card_point": 0,
+        "is_exchange": "Y",
+        "is_transfering":"N",
+        "is_gift":'N',
+        "card_point_type": 1,
+        "business_codes": ["movie", "market", "cake"]
+      },{
         "card_number": "101001000007175",
         "card_point": 9998700,
         "card_type": "27",

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: [