jufubao-base 1.0.61-beta1001 → 1.0.61-beta1003

package/src/components/JfbBaseCardShiftEntry/JfbBaseCardShiftEntry.vue

@@ -21,78 +21,54 @@
       v-if="info !== null"
       :style="{minHeight: layoutInfo.bodyMinHeightRpx + 'rpx'}"
     >
-    <view
-        class="jfb-base-card-shift-entry__body-header"
-        :style="{
-          background: headerBg.color,
-          backgroundSize: '100%',
-        }"
-      >
-        <view
-          class="jfb-base-card-shift-entry__body-header-wrap"
-          :style="{
-            backgroundImage: `url(${headerBg.image})`,
-          }"
-        >
-        <view class="jfb-base-card-shift-entry__body-header__title">
-          <view>
-            <xd-font-icon
-            size="40"
-            color="#fff"
-            icon="iconzhuanhuanshitu"
-            style="margin-right:10rpx"
-          ></xd-font-icon>
-            转换的票券
-          </view>
+    <view class="card-list" :style="{
+            background: headerBg['color'],
+            backgroundSize: '100%'
+          }">
+            <view class="card-list-warp" :style="{backgroundImage: `url(${headerBg['image']})`}">
+            <view class="card-list__title">
+              <view style="display:flex;align-items:center">
+              <xd-font-icon
+                size="40"
+                color="#fff"
+                icon="iconzhuanhuanshitu"
+                style="margin-right:10rpx"
+            ></xd-font-icon>
+            <text>转换的票券</text>
         </view>
-          <view style="padding-top:40rpx" class="jfb-base-card-shift-entry__body-header-item">
-            <view>券名：</view>
-            <view>{{info.card_type_name}}</view>
-          </view>
-          <view
-            style="padding-bottom: 20rpx"
-            class="jfb-base-card-shift-entry__body-header-item"
-          >
-            <view>券号：</view>
-            <view>{{info.card_number}}</view>
+            </view>
+            <div class="card-list__content">
+              <view>
+                <text>券号：</text>
+                <text>{{info.card_number}}</text>
+              </view>
+            </div>
+            <view class="card-list__date">
+              <text>有效期：</text>
+              <text>{{info.end_time}}</text>
+            </view>
+            <view class="card-list__yue">
+              <text>余额：</text>
+              <text>{{info.card_point}} {{ info.unit }}</text>
+            </view>
+            <view class="card-list__other" v-if="info.other_card_point && info.card_point_type === 2">
+              <view><text>购买其他物品可抵：</text><text>{{info.other_card_point}} {{ info.unit }}</text></view>
+            </view>
           </view>
         </view>
-      </view>
-      <!-- 转换之前 -->
-      <view
-        class="jfb-base-card-shift-entry__body-content"
-      >
-        <view
-          :class="
-            item.key === 'other_card_point'
-              ? 'jfb-base-card-shift-entry__body-content-special'
-              : 'jfb-base-card-shift-entry__body-content-item'
-          "
-          v-for="(item, index) in valueKey"
-          :key="index"
-        >
-        <view> {{ item.label }}： </view>
-          <view :style="{color:mainColor,fontWeight:500}" v-if="item.type === 'price'">
-            {{ info[item.key] }}
-            <text>{{info.unit}}</text>
-          </view>
-          <view style="color: #333; font-weight: 500" v-else>
-            {{ info[item.key] }}
-            <text v-if="item.type === 'type'">券</text>
-          </view>
-        </view>
-      </view>
       <!-- 转换剩余 -->
+      <view>
+        <xd-font-icon
+            size="32"
+            color="#bbb"
+            icon="iconrepository-xialaxuanxiangdown"
+          ></xd-font-icon>
+      </view>
       <view
         class="jfb-base-card-shift-entry__body-content"
         :style="{background:changeBg}"
       >
       <view class="jfb-base-card-shift-entry__body-content-title">
-        <xd-font-icon
-            size="32"
-            :color="mainColor"
-            icon="iconrepository-xialaxuanxiangdown"
-          ></xd-font-icon>
           <view>转换后预估票券额度</view>
       </view>
         <view
@@ -188,23 +164,6 @@ export default {
   data() {
     return {
       info: null,
-      valueKey: [
-        {
-          label: "票券余额",
-          key: "card_point",
-          type: "price",
-        },
-        {
-          label: "购买其他物品可抵",
-          key: "other_card_point",
-          type: "price",
-        },
-        {
-          label: "有效期限",
-          key: "end_time",
-          type: "normal",
-        },
-      ],
       changeValueKey: [
         {
           label: "票券余额",
@@ -287,14 +246,13 @@ export default {
         .then((res) => {
           let temp = {};
           Object.keys(res).map((key) => {
-            if (key === "card_point" || key === "exchange_card_point") {
+            if (key === "card_point" || key === "exchange_card_point" || key=== "other_card_point") {
               temp[key] = this.$xdUniHelper.divisionFloatNumber(res[key], 100);
             } else {
               temp[key] = res[key];
             }
           });
           if(res.other_card_point===0 || res.card_point_type === 1) {
-            this.valueKey.splice(1,1);
             this.changeValueKey.splice(1,1)
           }
           this.headerBg = this.getCardThemes(res.card_type_name);
@@ -323,57 +281,216 @@ export default {
     position: relative;
     color: #333;
     padding: unit(26, rpx);
-    &-header {
-      border-radius: unit(16, rpx);
-      font-size: unit(40, rpx);
+    .card-list {
+  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);
+      line-height: unit(56, rpx);
+      background: rgba(102, 102, 102, 0.4);
+      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;
+      justify-content: space-between;
+      align-items: center;
+      flex-flow: wrap;
+      flex-direction: column;
+      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);
+      height: unit(48, rpx);
+      line-height: unit(48, rpx);
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      font-weight: 400;
+      font-size: unit(24, rpx);
+      padding: 0 unit(20, rpx);
       color: #fff;
-      position: relative;
-      min-height: unit(260,rpx);
-
-      &__title {
-        height: unit(56, rpx);
+    }
+    
+    
+  }
+  
+  &__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 {
+      line-height: unit(64, rpx);
+      text-align: center;
+      font-size: unit(26, rpx);
+      border-radius: unit(32, rpx);
+      background: rgba(255, 255, 255, 1);
+      box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
+      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;
         align-items: center;
-
-    
-      & > view {
-        padding: 0 unit(80, rpx);
-        font-size: unit(24, rpx);
-        line-height: unit(56, rpx);
-        background: rgba(102, 102, 102, 0.4);
-        color: #fff;
-        border-radius:unit(16, rpx) 0 unit(16, rpx) 0;
-        display: flex;
+        flex-shrink: 0;
+        font-size: unit(20, rpx);
+        color: #999;
       }
+    }
+    
+    &-scroll {
     
     }
-
-      &-wrap {
-        width: unit(700, rpx);
-        border-radius: unit(16, rpx);
-        background-size: 100%;
-        min-height: 100%;
+  
+    &-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-flow: nowrap;
+      margin-left: unit(-14, rpx);
+      padding-top: unit(20, rpx);
+      
+      & > view {
+        width: unit(120, rpx);
+        margin-right: unit(10, rpx);
+        flex-shrink: 0;
         display: flex;
-        flex-direction: column;
         justify-content: center;
-      }
-
-      &-item {
-        display: flex;
-        justify-content: flex-start;
-        align-content: center;
-        padding-bottom: unit(32, rpx);
-        padding-left: unit(40,rpx);
-
+        flex-direction: column;
+        align-items: center;
+        
         & > view:first-child {
-          flex-basis: unit(120,rpx);
+          width: unit(76, rpx);
+          height: unit(76, rpx);
+          overflow: hidden;
+    
+          & > 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;
+          align-items: center;
           flex-shrink: 0;
+          font-size: unit(20, rpx);
+          color: #999;
+        }
+        
+        &:last-child {
+          margin-right: 0;
+        }
+        
       }
-      }
+      
+      
     }
-
+  }
+  
+  &-warp {
+    width: unit(700, rpx);
+    // min-height: unit(290, rpx);
+    position: relative;
+    border-radius: unit(16, rpx);
+    background-size: 100%;
+    padding-bottom: unit(20, rpx);
+  }
+}
     &-content {
       background: #fff;
       border-radius: unit(16, rpx);

package/src/mixins/cardListMixins.js

@@ -0,0 +1,125 @@
+'use strict';
+import {mapState} from "vuex";
+
+export default {
+  data() {
+    return {
+      ajaxCardList: null, //接口返回原始数据
+
+      //卡券列表
+      cardOrgList:[], //原始数据
+      cardList:null, //计算后的卡列表
+      cardPageNum: 0, //当前页面
+      cardPageLen: 10, //每页获取数据调试
+      cardComputedList:[], //当前获取的数据列表
+      cardLoading: false, //加载状态值设置
+      cardNextTop: 0, //计算到每一个节点的距离顶部Top值
+      contentStatus: false, //内容框是否已经进行过计算距离顶部Top值状态
+      hasContent: true, //是否可以进行继续加载状态
+
+      //转换按钮
+      hasChangeStatus: false,//是否有转换按钮
+    }
+  },
+  computed:{
+    ...mapState(['srollPreview'])
+  },
+  watch:{
+    srollPreview(value){
+      console.log(value)
+    }
+  },
+  created(){
+
+  },
+  methods:{
+    setCardItemShow({height , top}){
+      let fiexd = 100;
+      let boxTop = top + height + fiexd;
+      let boxBottom = top - (fiexd);
+      let {pageWindowPrevStart, pageWindowPrevEnd} = this.srollPreview;
+      return boxTop > pageWindowPrevStart && boxBottom < pageWindowPrevEnd;
+    },
+    getBoxTop(){
+      return new Promise((resolve, reject)=>{
+        const query = uni.createSelectorQuery().in(this);
+        query.select('.card-content').boundingClientRect(data=>{
+          this.cardNextTop = data.top;
+          this.contentStatus = true;
+          resolve();
+        }).exec()
+      })
+
+    },
+    async handleCardComputed(){
+      this.$xdShowLoading({});
+      if(this.contentStatus === false)  await this.getBoxTop();
+      this.$nextTick(()=>{
+        const query = uni.createSelectorQuery().in(this);
+        query.selectAll('.computed-box').boundingClientRect(data => {
+          let arr = data.map(item=>{
+            let card =  this.cardComputedList.filter(it=>{
+              return item.dataset.card === it.card_number;
+            })[0];
+            card['height'] = item.height + 15;
+            card['top'] =  this.cardNextTop;
+            this.cardNextTop =  this.cardNextTop + card['height']
+            return card
+          });
+          this.cardList = this.cardList.concat(arr);
+          this.$xdHideLoading();
+        }).exec();
+      })
+    },
+
+    handleCardInit(cardList,isChange = false){
+      let newCardList = this.$xdUniHelper.cloneDeep(cardList);
+      let validCardList = this.getCardGroupItem(newCardList.list.filter((item) => {
+        if(isChange === true)  return item["is_valid"] === "Y";
+        else return item["is_exchange"] === "Y";
+      }), newCardList['site_entry_settings']).map((item,index)=>{
+        item['index'] = index;
+        return item
+      });
+      this.cardOrgList = this.$xdUniHelper.cloneDeep(validCardList);
+      this.cardComputedList = this.cardOrgList.slice(this.cardPageNum,this.cardPageLen);
+      this.handleCardComputed().then().catch();
+    },
+
+    onJfbReachBottom(){
+      if(this.cardLoading || !this.hasContent) return;
+      this.cardLoading = true;
+      this.$xdShowLoading({});
+      this.cardPageNum++;
+      console.log('onJfbReachBottom',this.cardPageNum)
+      this.$nextTick(()=>{
+        setTimeout(()=>{
+          this.cardLoading = false;
+          this.$xdHideLoading();
+          this.cardComputedList = this.cardOrgList.slice(
+            this.cardPageNum*this.cardPageLen,
+            this.cardPageNum*this.cardPageLen + this.cardPageLen
+          );
+          this.handleCardComputed().then().catch();
+          if(this.cardComputedList.length < this.cardPageLen) {
+            this.hasContent = false;
+          }
+        },500)
+      })
+
+    },
+
+    clearDefault(){
+      this.cardOrgList = [];
+      this.cardList = null;
+      this.cardPageNum = 0;
+      this.cardComputedList = [];
+      this.cardLoading = false;
+      this.cardNextTop = 0;
+      this.contentStatus = false;
+      this.hasContent = true;
+    }
+  }
+}
+
+