jufubao-base 1.0.61-beta5 → 1.0.62

package/src/components/JfbBaseCardEntry/JfbBaseCardEntry.vue

@@ -34,7 +34,7 @@
               size="45"
               icon="iconsaoma"
             ></xd-font-icon>
-            
+
           </view>
           <view
             class="jfb-base-card-entry__body-cut-item"
@@ -51,7 +51,7 @@
               size="45"
               icon="iconyuechi"
             ></xd-font-icon>
-         
+
           </view>
         </template>
         <template v-else>
@@ -70,34 +70,36 @@
         </template>
       </view>
       <view class="jfb-base-card-entry__body-line" v-if="!notice"></view>
-      <view
-        class="jfb-base-card-entry__body-notice"
-        :style="{ background: noticeBackgroundColor }"
-        v-if="notice"
-      >
-        <xd-notice-bar
-          :showIcon="true"
-          :scrollable="true"
-          :speed="20"
-          :fontSize="24"
-          :height="70"
-          :is-no-bgc="false"
+      <view class="jfb-base-card-entry__body-notice" v-if="notice">
+        <view
+          class="jfb-base-card-entry__body-notice-in"
+          :style="{ background: noticeBackgroundColor }"
         >
-          <template>
-            <view v-html="notice"></view>
-          </template>
-        </xd-notice-bar>
+          <xd-notice-bar
+            :showIcon="true"
+            :scrollable="true"
+            :speed="20"
+            :fontSize="24"
+            :height="70"
+            :is-no-bgc="false"
+          >
+            <template>
+              <view v-html="notice"></view>
+            </template>
+          </xd-notice-bar>
+        </view>
       </view>
-      <view
-        v-if="noticeStatus && isPreview && notice === ''"
-        class="jfb-base-card-entry__body-notice"
-        :style="{
+      <view class="jfb-base-card-entry__body-notice" v-if="noticeStatus && isPreview && notice === ''">
+        <view
+          class="jfb-base-card-entry__body-notice-in"
+          :style="{
           background: noticeBackgroundColor,
           textAlign: 'center',
           color: dangerColor,
           fontSize: 26 + 'rpx',
         }"
-      >该组件未配置数据，因此改模块在正式环境将不显示</view>
+        >该组件未配置数据，因此改模块在正式环境将不显示</view>
+      </view>
       <view class="jfb-base-card-entry__body-tab">
         <view
           @click="tabIndex = 1"
@@ -107,7 +109,7 @@
           }"
         >已绑定票券</view>
         <view
-          v-if="changeList.length > 0"
+          v-if="hasChangeStatus"
           @click="tabIndex = 2"
           :style="{
             color: tabIndex === 2 ? '#fff' : '#B8B7BE',
@@ -120,16 +122,145 @@
         :style="{ color: warningColor }"
         v-if="tabIndex === 2"
       >* 目前仅支持电影票兑换券进行转换</view>
-      <view v-if="showList.length>0">
+      <view class="card-content">
+        <view
+          v-if="tabIndex === 2 || tabIndex === 1 && (cardList && cardList.length > 0)"
+          class="jfb-base-card-entry__body-card"
+        >
+          <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="{
+              background: item['theme']['color'],
+              backgroundSize: '100%',
+              height: item.height + 'px'
+            }"
+          >
+            <view class="card-list-warp" :style="{backgroundImage: 'url('+ item['theme']['image'] +')'}">
+              <view class="card-list__title"><view>{{item['card_type_name']}}</view></view>
+              <view class="card-list__content">
+                <view>
+                  <text>券号：</text>
+                  <text>{{item.card_number}}</text>
+                </view>
+                <view @click.stop="toDetail(item)" v-if="0">
+                  <view>
+                    <xd-font-icon icon="iconerweima" width="56" height="56" size="50" color="#fff"></xd-font-icon>
+                  </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="tabIndex === 1">
+                <view class="card-list__entry" v-if="item.entries.length === 1">
+                  <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">暂无支持服务列表</view>
+                <view class="card-list__entrys" v-if="item.entries.length > 1" @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>
+                    </scroll-view>
+                  </view>
+                </view>
+              </template>
+              <view class="card-list__entry" v-else>
+                <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="{
+              height: item.height + 'px',
+              backgroundImage: 'url('+ (tabIndex===2 || item.entries.length <= 1 ? cardItem: cardItemEntry) +')'
+            }"
+          ></view>
+        </view>
+        <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>
+          </view>
+        </view>
         <view
-        v-if="tabIndex === 2 || tabIndex === 1"
-        class="jfb-base-card-entry__body-card"
-      >
+          v-if="showDisabled==='Y'"
+          @click="handleToDisabled"
+          class="jfb-base-card-entry__body-disabled"
+        >已失效票券>>></view>
+      </view>
+      <view class="jfb-base-card-entry__body-dialog" v-if="dialogEvent">
+        <view class="jfb-base-card-entry__body-dialog-content">
+          <image
+            class="jfb-base-card-entry__body-dialog-content-img"
+            alt=""
+            :src="popup"
+          ></image>
+          <xd-font-icon
+            icon="icondanchuangguanbi_xian"
+            width="52"
+            height="52"
+            size="26"
+            color="#fff"
+            class="jfb-base-card-entry-entry__body-dialog-content-close"
+            @click="dialogEvent = false"
+          ></xd-font-icon>
+        </view>
+      </view>
+      <view class="computed-height" >
         <view
-          v-for="(item) in showList"
-          class="card-list"
+          v-for="(item,index) in cardComputedList"
+          :data-card="item.card_number"
+          class="card-list computed-box"
           :key="item.card_number"
-          @click="toDetail(item)"
           :style="{
             background: item['theme']['color'],
             backgroundSize: '100%'
@@ -205,40 +336,8 @@
           </view>
         </view>
       </view>
-      </view>
-      <view v-else>
-        <view class="jfb-base-card-entry__body-empty">
-          <view class="jfb-base-card-entry__body-empty-wrap">
-            <image :src="emptyBg"></image>
-            暂无票券
-          </view>
-        </view>
-      </view>
-      <view
-        v-if="showDisabled==='Y'"
-        @click="handleToDisabled"
-        class="jfb-base-card-entry__body-disabled"
-      >已失效票券>>></view>
-    </view>
-      <view class="jfb-base-card-entry__body-dialog" v-if="dialogEvent">
-        <view class="jfb-base-card-entry__body-dialog-content">
-          <image
-            class="jfb-base-card-entry__body-dialog-content-img"
-            alt=""
-            :src="popup"
-          ></image>
-          <xd-font-icon
-            icon="icondanchuangguanbi_xian"
-            width="52"
-            height="52"
-            size="26"
-            color="#fff"
-            class="jfb-base-card-entry-entry__body-dialog-content-close"
-            @click="dialogEvent = false"
-          ></xd-font-icon>
-        </view>
-      </view>
     </view>
+  </view>
 </template>
 
 <script>
@@ -250,6 +349,7 @@ import JfbBaseCardEntryMixin from "./JfbBaseCardEntryMixin";
 import componentsMixins from "@/mixins/componentsMixins";
 import extsMixins from "@/mixins/extsMixins";
 import colorCardMixins from "@/mixins/colorCardMixins";
+import cardListMixins from "@/mixins/cardListMixins";
 import { mapState, mapActions } from "vuex";
 import { getContainerPropsValue, isWechat } from "@/utils/xd.base";
 import XdNoticeBar from "@/components/XdNoticeBar/XdNoticeBar";
@@ -264,15 +364,12 @@ export default {
     XdNoticeBar,
     XdCardV2
   },
-  mixins: [componentsMixins, extsMixins, JfbBaseCardEntryMixin, colorCardMixins],
+  mixins: [componentsMixins, extsMixins, JfbBaseCardEntryMixin, colorCardMixins, cardListMixins],
   computed: {
     ...mapState({
       jwxSDK: (state) => state.jwxSDK,
       jfbAuthorize: (state) => state.jfbAuthorize,
     }),
-    showList(){
-      return this.tabIndex === 1 ? this.cardList: this.changeList
-    },
     emptyBg() {
         return this.getNoData();
     },
@@ -286,6 +383,10 @@ export default {
   watch: {
     container(value) {
       this.init(value)
+    },
+    tabIndex(){
+      this.clearDefault();
+      this.handleCardInit(this.ajaxCardList, this.tabIndex === 1);
     }
   },
   data() {
@@ -300,11 +401,9 @@ export default {
       cutIndex: 1,
       tabIndex: 1,
       isBack: null, //是否使用返回键
-      cardList: [],
-      changeList: [],
-      disableList: [],
       inCallback: null, //内部跳转地址
 
+
       //页面跳转地址
       login_name:'',//登陆文案
       changeUrl: "",
@@ -325,7 +424,6 @@ export default {
     this.init(this.container);
     this.noticeBackgroundColor = Color(this.warningColor).alpha(0.2).toString();
     this.isPreview = this.$configProject.isPreview;
-    
 
     //#ifdef H5
     this.isWx = this.isPreview || isWechat();
@@ -345,7 +443,7 @@ export default {
 
   },
   methods: {
-    
+
     init(container){
       //设置
       this.cardLayout = getContainerPropsValue(container,"content.cardLayout","1");
@@ -357,7 +455,7 @@ export default {
       //this.allEntryPath = getContainerPropsValue(container,"content.allEntryPath",{value: ""}).value;
       this.login_name = getContainerPropsValue(container, "content.login_name", "登录");
     },
-    
+
     handleToLink(path) {
       this.$xdUniHelper.navigateTo({
         url: path,
@@ -443,7 +541,7 @@ export default {
         if (item["is_valid"] !== "Y") {
           return;
         }
-        
+
         this.$xdShowLoading({});
         jfbRootExec("loginEntryCardBind", {
           vm: this,
@@ -462,7 +560,7 @@ export default {
             if (this.$configProject.isPreview) {
               console.log("handleBindLogin", "预览模式不跳转", this.inCallback);
             }
-            
+
             else {
               this.handleToApp(entry);
             }
@@ -471,7 +569,7 @@ export default {
             this.$xdHideLoading();
           });
       }
-      
+
       //转换卡跳转
       else {
         this.$xdUniHelper.navigateTo({
@@ -493,7 +591,7 @@ export default {
       }
       const {dir, path, host} = item;
       let nsp = Base64.encodeURI(JSON.stringify({business_code: entry['business_code']}));
-      
+
       //外站配置地址
       if (entry.redirect_type === 'URL') {
         if (item['path'].indexOf('?') === -1) {
@@ -502,13 +600,13 @@ export default {
         this.toApp(redirectUrl);
         return;
       }
-      
+
       //站内转换
       let jumpUrl = item.path;
       //#ifdef H5
       jumpUrl = `//${host}/${dir}${path}`;
       //#endif
-  
+
       if (item['fixed_business_code'] === '') {
         redirectUrl = `${jumpUrl}?x-common=${nsp}&vs=${new Date().getTime()}`
       }
@@ -517,21 +615,11 @@ export default {
       }
       this.toApp(redirectUrl);
     },
-    
+
     toDetail(item, out=true) {
-      if(out) {
-        if(item.entries.length === 1) {
-          this.$xdUniHelper.navigateTo({
-            url: `${this.detailUrl}?card_number=${item["card_number"]}`,
-          }, false);
-        }
-      }
-      else{
-        this.$xdUniHelper.navigateTo({
-          url: `${this.detailUrl}?card_number=${item["card_number"]}`,
-        }, false);
-      }
-      
+      this.$xdUniHelper.navigateTo({
+        url: `${this.detailUrl}?card_number=${item["card_number"]}`,
+      }, false);
     },
 
     onJfbLoad(options) {
@@ -578,24 +666,19 @@ export default {
               ),
             };
           });
-          
-          this.cardList = this.getCardGroupItem(res.list.filter((item) => {
-            return item["is_valid"] === "Y";
-          }), res['site_entry_settings']);
-          
-          this.changeList = this.getCardGroupItem(this.cardList.filter((item) => {
+          this.ajaxCardList =  res;
+          this.handleCardInit(this.ajaxCardList, this.tabIndex === 1);
+
+
+          this.hasChangeStatus = this.getCardGroupItem(this.ajaxCardList.list.filter((item) => {
             return item["is_exchange"] === "Y";
-          }), res['site_entry_settings']);
-          
+          }), res['site_entry_settings']).length > 0;
+
           this.$xdHideLoading();
         })
         .catch(() => this.$xdHideLoading());
     },
 
-    onShow(options) {
-      this.onJfbLoad(options);
-    },
-
     onJfbUpdate(data) {
       this.getContent();
     },
@@ -674,7 +757,7 @@ export default {
         }
       }
     }
-  
+
     &-line {
       height: 1px;
       background: #eee;
@@ -686,7 +769,7 @@ export default {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      
+
 
       &-item {
         border: unit(6, rpx) solid;
@@ -699,15 +782,27 @@ export default {
         align-items: center;
         justify-content: center;
         box-sizing: border-box;
-        
+
       }
     }
 
     &-notice {
-      margin: unit(30, rpx) unit(-35, rpx) 0 unit(-35, rpx);
-      
-      padding: unit(22, rpx) unit(35, rpx);
-      line-height: unit(70, rpx);
+      width: 100%;
+      margin-top: unit(30, rpx);
+      height: unit(80, rpx);
+      position: relative;
+      &-in {
+        position: absolute;
+        left: unit(-30, rpx);
+        top: unit(0, rpx);
+        right: unit(-30, rpx);
+        bottom: 0;
+        display: flex;
+        padding: 0 unit(30, rpx);
+        overflow: hidden;
+        align-items: center;
+      }
+
     }
 
     &-tab {
@@ -746,18 +841,18 @@ export default {
   overflow: hidden;
   border-radius: unit(16, rpx);
   margin-bottom: unit(30, rpx);
-  
+
   &:last-child {
     margin-bottom: 0;
   }
-  
-  
+
+
   &__title {
     height: unit(56, rpx);
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    
+
     & > view {
       padding: 0 unit(80, rpx);
       font-size: unit(24, rpx);
@@ -766,23 +861,23 @@ export default {
       color: #fff;
       border-radius: 0 0 unit(16, rpx) 0;
     }
-    
+
   }
-  
+
   &__content {
     padding: unit(10, rpx) unit(40, rpx) 0;
     height: unit(86, rpx);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    
+
     & > view:first-child {
       font-size: unit(36, rpx);
       line-height: unit(86, rpx);
       color: #fff;
       font-weight: 700;
     }
-    
+
     & > view:nth-child(2) {
       font-size: unit(24, rpx);
       display: flex;
@@ -793,32 +888,32 @@ export default {
       color: #fff;
     }
   }
-  
+
   &__date {
     padding: 0 unit(40, rpx);
     font-size: unit(28, rpx);
     line-height: unit(32, rpx);
     color: #fff;
   }
-  
+
   &__yue {
     padding: unit(10, rpx) unit(40, rpx) 0;
     font-size: unit(28, rpx);
     line-height: unit(32, rpx);
     color: #fff;
-    
+
     & > text:nth-child(2) {
       font-weight: 700;
     }
   }
-  
+
   &__other {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     padding: unit(20, rpx) unit(40, rpx) 0;
     margin-top: unit(0, rpx);
-    
+
     & > view {
       border-radius:unit(8, rpx);
       background: rgba(255, 255, 255, 0.2);
@@ -832,17 +927,17 @@ export default {
       padding: 0 unit(20, rpx);
       color: #fff;
     }
-    
-    
+
+
   }
-  
+
   &__nodata {
     padding: unit(20, rpx) unit(40, rpx) 0;
     margin-top: unit(0, rpx);
     color: #fff;
     font-size: unit(28, rpx);
   }
-  
+
   &__entry {
     padding: unit(20, rpx) unit(40, rpx) 0;
     & > view {
@@ -855,26 +950,26 @@ export default {
       font-weight: 500;
     }
   }
-  
+
   &__entrys {
     margin: unit(20, rpx) unit(20, rpx) 0;
     padding: unit(30, rpx);
     border-radius: unit(16, rpx);
     background: rgba(255, 255, 255, 1);
     box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
-    
+
     &-title {
       display: flex;
       justify-content: space-between;
       align-items: center;
-     
-      
+
+
       & > view:first-child {
         font-size: unit(28, rpx);
         font-weight: 500;
         flex: 1;
       }
-      
+
       & > view:nth-child(2) {
         display: flex;
         justify-content: flex-start;
@@ -884,11 +979,11 @@ export default {
         color: #999;
       }
     }
-    
+
     &-scroll {
-    
+
     }
-  
+
     &-item {
       display: flex;
       justify-content: flex-start;
@@ -896,7 +991,7 @@ export default {
       flex-flow: nowrap;
       margin-left: unit(-14, rpx);
       padding-top: unit(20, rpx);
-      
+
       & > view {
         width: unit(120, rpx);
         margin-right: unit(10, rpx);
@@ -905,25 +1000,29 @@ export default {
         justify-content: center;
         flex-direction: column;
         align-items: center;
-        
+        padding-bottom: unit(10,rpx);
+
         & > view:first-child {
           width: unit(76, rpx);
           height: unit(76, rpx);
           overflow: hidden;
-    
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
           & > image {
             height: 100%;
             width: 100%;
           }
         }
-        
+
         & > view:nth-child(2) {
           margin-top: unit(10, rpx);
           font-size: unit(24, rpx);
           line-height: unit(36, rpx);
           margin-bottom: unit(10, rpx);
         }
-        
+
         & > view:nth-child(3) {
           display: flex;
           justify-content: flex-start;
@@ -932,20 +1031,19 @@ export default {
           font-size: unit(20, rpx);
           color: #999;
         }
-        
+
         &:last-child {
           margin-right: 0;
         }
-        
+
       }
-      
-      
+
+
     }
   }
-  
-  
+
+
   &-warp {
-    width: unit(700, rpx);
     min-height: unit(310, rpx);
     position: relative;
     border-radius: unit(16, rpx);
@@ -953,4 +1051,22 @@ export default {
     padding-bottom: unit(20, rpx);
   }
 }
+
+.computed-height {
+  position: fixed;
+  top:-999999px;
+  width: 100%;
+  z-index: 99999;
+}
+
+.card-content-empty {
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: top center;
+
+  & > image {
+    width: 100%;
+    height: 100%;
+  }
+}
 </style>