jufubao-movie 1.0.39-beta1 → 1.0.39-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-movie",
-  "version": "1.0.39-beta1",
+  "version": "1.0.39-beta2",
   "private": false,
   "description": "聚福宝在线选座业务组件插件包",
   "main": "index.js",

package/src/components/JfbMovieTfkFilmList/ContentItem.vue

@@ -4,7 +4,7 @@
       class="image"
       :style="{marginRight: outSpacing + 'rpx',borderRadius:borderRadius+'rpx'}"
     >
-      <image :src="item['poster']"  :alt="item['show_name']"></image>
+      <image :src="item['poster']" :alt="item['show_name']" @error="handleError(item)"></image>
     </view>
     <view class="middle">
       <view class="name">{{item['show_name']}}</view>
@@ -84,6 +84,9 @@
 
     },
     methods:{
+      handleError(item){
+        item['poster'] = 'https://img.jufubao.cn/common/error_movie.png?v20'
+      },
       handleDetail(item){
         console.log('handleDetail.item',item,item.id);
         this.$emit('on-film-detail',item.id);
@@ -142,10 +145,9 @@
     align-items: flex-end;
     justify-content: flex-end;
     flex-flow: wrap;
-    height: 100%;
     box-sizing: border-box;
     width: 160rpx;
-    min-height: 200rpx;
+    height: 200rpx;
 
     & .score {
       height: 40rpx;

package/src/components/JfbMovieTfkFilmList/JfbMovieTfkFilmList.vue

@@ -81,11 +81,16 @@
           </view>
         </view>
         <!--poster-->
+        <view id="content-ref" class="content-ref"></view>
         <!--film hot|rightnow-->
         <view
           v-if="type === 'hot' || type === 'rightnow'"
           class="list-cont"
-          :style="{marginTop:outSpacing + 'rpx'}"
+          :style="{
+            marginTop:outSpacing + 'rpx',
+            paddingTop:paddingTop,
+            paddingBottom:paddingBottom,
+          }"
         >
           <view class="skeleton-wrap" v-if="dataList === null">
             <view
@@ -230,6 +235,37 @@
             ></view>
           </template>
         </view>
+        <view
+          id="preRendering"
+          class="preRendering"
+          v-if="type === 'list' && preRendering.length >0"
+          :style="{padding:outSpacing + 'rpx'}"
+        >
+          <view
+            class="list-cont-item"
+            v-for="(film,index) in preRendering"
+            :key="film.cinema_id"
+            :data-index="index"
+            :style="{
+              marginBottom:outSpacing + 'rpx',
+              padding:contMarginComp,
+              borderRadius:contRradius+ 'rpx',
+              border:contBorder,
+              boxShadow:contShadow,
+              backgroundColor:contBgColor,
+              height: 'auto'
+            }"
+          >
+            <content-cinema
+              style="width: 100%;height: 100%"
+              :item="film"
+              :out-spacing="outSpacing"
+              :color="{SEAT:mainColor,CODE:subMainColor,SELL:successColor}"
+              :type="type"
+              :border-radius="imgRradius"
+            ></content-cinema>
+          </view>
+        </view>
         <!--cinema-->
         <view class="hasNoData" v-if="dataList && dataList.length > 0 && pageToken === ''">已经到底没有更多数据了</view>
       </view>
@@ -260,6 +296,7 @@
   import XdQueryFilter from "./XdQueryFilter.vue";
   import {mapState} from "vuex";
   import Color from "color";
+  import VirtualList from "@/lib/VirtualList";
 
   export default {
     name: "JfbMovieTfkFilmList",
@@ -276,6 +313,8 @@
     ],
     data() {
       return {
+        /**@type {VirtualList}**/
+        virtualList:null,
         options: {},
         //hideMask: true,
         type:'', //hot rightnow
@@ -284,7 +323,7 @@
         backgroundColor:'',
         isPreview: false,
         pageToken:'1',
-        pageSize: 20,
+        pageSize: 10,
         total: null,
         isFirstLoadingData: false,
         dataList:null,
@@ -347,7 +386,9 @@
 
         buyPath:'',
         fimeDetailPath:'',
-
+        paddingTop: 0,
+        paddingBottom: 0,
+        preRendering:[],
 
       }
     },
@@ -447,6 +488,17 @@
         this.clearDataVar();
         this.getList();
       },
+      preRendering(){
+        this.$nextTick(()=>{
+          const query = uni.createSelectorQuery().in(this);
+          query
+            .select('#preRendering > .list-cont-item')
+            .boundingClientRect((data) => {
+              console.log("得到布局位置信息" + JSON.stringify(data));
+            })
+            .exec();
+        })
+      }
     },
     created() {
       this.isPreview = this.$configProject.isPreview;
@@ -597,6 +649,7 @@
         //过滤之后不够分页直接返回值
         if(fitlerData.length <= this.pageSize) {
           this.dataList = this.$xdUniHelper.cloneDeep(fitlerData);
+          this.preRendering = this.$xdUniHelper.cloneDeep(fitlerData);
           this.pageToken = ''
           return;
         }
@@ -611,6 +664,7 @@
           return;
         }
 
+        this.preRendering = this.$xdUniHelper.cloneDeep(list);
         this.dataList = (this.dataList||[]).concat(this.$xdUniHelper.cloneDeep(list));
         if(this.pageSize < list.length) this.pageToken = '';
         else this.pageToken = (Number(this.pageToken)+1) + '';
@@ -618,6 +672,9 @@
 
       handleTab(value){
         if(value === this.type) return;
+        if(value === 'hot' || value === 'rightnow' ) {
+          this.virtualList.onChangeTab();
+        }
         this.type = value;
         this.dataList = null;
         this.pageToken = '1';
@@ -667,9 +724,11 @@
         }).then(res => {
           if(this.isFirstLoadingData) this.$xdHideLoading({});
 
+
           //影片列表处理
           if(this.type === 'rightnow' || this.type==='hot'){
-            this.dataList = (this.dataList||[]).concat(res['list']);
+            //this.dataList = (this.dataList||[]).concat(res['list']);
+            this.virtualList.pushVirtualData(res['list']);
             this.pageToken = res.next_page_token;
             return;
           }
@@ -684,6 +743,7 @@
             //小于数量页面显示记录
             if(res['list'].length <= this.pageSize) {
               this.dataList = res['list'];
+              this.preRendering = this.$xdUniHelper.cloneDeep(res['list']);
               this.pageToken = '';
               return
             }
@@ -701,6 +761,33 @@
       onJfbLoad(options) {
         this.options = options;
 
+        this.virtualList = new VirtualList(this, '#content-ref', {
+          fixedHeight: 240 + Number(this.outSpacing) + 20 * 2 ,
+          otherHeight: Number(this.outSpacing),
+          //获取节点数据
+          getDom:(id)=>{
+            return new Promise((resolve,reject)=>{
+              uni.createSelectorQuery().in(this).select(id)
+                .boundingClientRect((data)=>{
+                  if(data && data.top !== undefined)  resolve(data);
+                  else reject(null)
+                }).exec()
+            });
+          },
+          //获取当前this
+          getParentThis(){
+            return this
+          },
+          callback: ({data, paddingTop,  paddingBottom}) =>{
+            if(this.type === 'hot' ||this.type ==='rightnow' ) {
+              this.paddingTop = paddingTop;
+              this.paddingBottom = paddingBottom;
+              this.dataList = data;
+            }
+
+          },
+        });
+
         jfbRootExec('getTFKPosterContent', {
           vm: this,
           data: {
@@ -782,6 +869,12 @@
         this.setShowTypeList();
       },
 
+      onJfbScroll(options){
+        if(this.type === 'hot' || this.type === 'rightnow'){
+          this.virtualList.onScrollEvent(options.e.scrollTop);
+        }
+      },
+
       setShowTypeList(){
         let list = [];
         if(this.showHot === 'Y') list.push(this.typeList["hot"]);
@@ -811,6 +904,7 @@
           this.$xdUniHelper.navigateBack();
         }
       },
+
       //重新回去广告位置工
       onJfbUpdate() {
         this.onJfbLoad(this.options)
@@ -853,6 +947,7 @@
       .list-cont {
         position: relative;
         z-index: 2;
+        min-height: 600rpx;
         .skeleton-wrap {
           .skeleton-wrap-item {
             height: 240rpx;
@@ -1011,6 +1106,17 @@
       font-size: 26rpx;
     }
 
+    .preRendering {
+      position: fixed;
+      top: -9999px;
+      left: -9999px;
+      opacity: 0;
+      z-index: 0;
+      width: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
     .hasNoData {
       height: 80rpx;
       line-height: 80rpx;

package/src/components/JfbMovieTfkFilmRecommend/JfbMovieTfkFilmRecommend.vue

@@ -106,7 +106,7 @@
               @click="toFilmInfo(item.id)"
             >
               <view class="tfk-scroll-item-image" :style="{borderRadius:contItemRradius + 'rpx'}">
-                <image :src="item.poster" :alt="item.show_name" mode="scaleToFill"></image>
+                <image :src="item.poster" :alt="item.show_name" mode="scaleToFill" @error="handleError(item)"></image>
               </view>
               <view class="tfk-scroll-item-title">{{item.show_name}}</view>
               <view class="tfk-scroll-item-btn">
@@ -310,6 +310,9 @@
       this.init(this.container);
     },
     methods: {
+      handleError(item){
+        item['poster'] = 'https://img.jufubao.cn/common/error_movie.png?v20'
+      },
       toFilmInfo(film_id){
         console.warn(`toFilmInfo(影片详情).${film_id}`)
         if(!this.fimeDetailPath) {

package/src/lib/VirtualList.js

@@ -0,0 +1,184 @@
+'use strict';
+//原点对象
+let __orgUpdateTop = null;
+
+export default class VirtualList {
+  virtualType='fixed';
+  virtualBufferHeight= 300;
+  virtualFixedItemHeight; //固定模式高度设置
+  virtualVue; //当前组件vm实例
+  virtualTotalData=[]; //数组长度
+  virtualHeightObj = {}; //高度序列index: {max:xx,min:xx}
+  $el= null; //开始点元素
+  offsetTop= null;//开始点元素的偏移量
+  eqMaxTimer = 0;//
+  otherHeight= 0; //调节高度
+  orgUpdateTop = 0; //开始点元素原点偏移量
+  isFirst = true;
+  startIndex= 0;
+  endIndex= 0;
+  screenHeight=0;//全屏高度
+
+  top=0;
+  bottom=0;
+  virtualCallback=  ()=>{};
+  status= false
+
+  /**
+   * @description 初始化或者重置对象
+   * @param $vm {Vue} vue对象
+   * @param $el {string}
+   * @param params {Object}
+   * @param params.type {string} 元素高度为固定或者非固定 其值：auto|fixed
+   * @param params.fixedHeight {number} 固定(rpx)（fixed）模式 (必选)
+   * @param params.bufferHeight {number} 缓冲高度(rpx)
+   * @param params.otherHeight {number} 其他高度(rpx)
+   * @param params.callback {Function} 回调方法
+   */
+  constructor($vm,$el, params ) {
+    this.virtualVue = $vm;
+    this.virtualBufferHeight = 480 *  this.virtualVue.$rpxNum;
+    if(params.type && ['auto','fixed'].includes(params.type)) this.virtualType = params.type;
+    if(params.bufferHeight) this.virtualBufferHeight = params.bufferHeight * this.virtualVue.$rpxNum;
+    if(params.otherHeight) this.otherHeight = params.otherHeight * this.virtualVue.$rpxNum;
+    if(this.virtualType === 'fixed'){
+      if(params.fixedHeight === undefined) throw new Error(`FixedHeight is require, got is ${params.fixedHeight}`);
+      else this.virtualFixedItemHeight = params.fixedHeight * this.virtualVue.$rpxNum;
+    }
+    this.virtualTotalData = [];
+    this.virtualVue.virtualViewData = null;
+    this.$el = $el;
+    this.virtualVue.$nextTick(()=>{
+      this.checkOffsetTop();
+    });
+    this.screenHeight = uni.getSystemInfoSync().safeArea.height;
+    if(typeof params.callback !== 'function') {
+      throw new Error(`FixedHeight is require, got is ${params.fixedHeight}`);
+    }else this.virtualCallback = params.callback;
+
+  }
+
+  checkOffsetTop(){
+    if(__orgUpdateTop) {
+      this.orgUpdateTop = __orgUpdateTop;
+      this.status = true;
+      return;
+    }
+    //相对了10次不在检查
+    if(this.eqMaxTimer >= 3) {
+      this.status = true;
+      __orgUpdateTop = this.orgUpdateTop;
+      return
+    }
+    if(this.virtualVue.$refs[this.$el]) {
+      let offsetTop =  this.virtualVue.$refs[this.$el].$el.getBoundingClientRect().top;
+      if(this.offsetTop === offsetTop) {
+        this.eqMaxTimer++;
+      }
+      else this.offsetTop = offsetTop;
+      this.orgUpdateTop = offsetTop + this.otherHeight;
+      if(this.virtualType === 'fixed') this.computedMinAndMaxFixed();
+    }
+    setTimeout(()=>{
+      this.checkOffsetTop();
+    }, 200)
+  }
+
+  cloneDeep(data){
+    return JSON.parse(JSON.stringify(data));
+  }
+
+  computedMinAndMaxFixed(){
+    let itemHeight = this.virtualFixedItemHeight;
+    this.virtualTotalData.map((item,index)=>{
+      if(index === 0) {
+        this.virtualHeightObj[index] = {
+          min: this.orgUpdateTop,
+          max: this.orgUpdateTop + itemHeight
+        }
+      }
+      else {
+        let prev = this.virtualHeightObj[index-1];
+        this.virtualHeightObj[index] = {
+          min: prev.max,
+          max: prev.max + itemHeight
+        }
+      }
+    });
+  }
+
+  pushVirtualData(data, height){
+    //清空响应对象
+    this.virtualVue.virtualViewData = null;
+    if(this.virtualTotalData.length > 0) this.isFirst = false;
+
+    //非固定模式
+    if(this.virtualType === 'auto') {
+      if(!height) throw new Error(`height is require, got is ${height}`);
+      this.virtualHeightObj = Object.assign({},this.virtualHeightObj, this.cloneDeep(height));
+    }
+
+    //固定模式
+    if(this.virtualType === 'fixed') {
+      this.virtualTotalData = this.virtualTotalData.concat(this.cloneDeep(data));
+      this.computedMinAndMaxFixed();
+      if(this.isFirst) this.onScrollEvent(0);
+    }
+
+    this.isFirst = false
+  }
+
+  /**
+   * @description 滚动事件
+   * @param scrollTop
+   */
+  onScrollEvent(scrollTop) {
+    //非固定计算索引
+    let time = new Date().getTime();
+    //计算开始索引
+    Object.keys(this.virtualHeightObj).map((key,index)=>{
+      let top = scrollTop - this.virtualBufferHeight;
+
+      //滚动高度小于元素顶部与屏幕顶部偏移量直接取值0索引
+      if(top <= this.orgUpdateTop) {
+        this.startIndex = 0;
+        return;
+      }
+
+
+      ////距离底部有1屏幕高度
+      let maxScroll = this.virtualHeightObj[this.virtualTotalData.length -1].max - this.screenHeight;
+      if(scrollTop >= maxScroll) {
+        top = maxScroll;
+      }
+
+      if(top >= this.virtualHeightObj[key].min && top < this.virtualHeightObj[key].max){
+        this.startIndex = Number(key);
+      }
+    })
+
+    //计算结束索引
+    this.endIndex = this.virtualTotalData.length;
+    Object.keys(this.virtualHeightObj).map((key,index)=>{
+      let top = scrollTop <= this.orgUpdateTop ? this.orgUpdateTop : scrollTop
+      let endScrollTop = top + this.screenHeight + this.virtualBufferHeight;
+      if(endScrollTop >= this.virtualHeightObj[key].min && endScrollTop < this.virtualHeightObj[key].max){
+        this.endIndex = Number(key);
+      }
+    });
+
+
+    this.top = this.virtualHeightObj[this.startIndex].min - this.orgUpdateTop.toString() + 'px'
+    this.bottom = this.virtualHeightObj[this.virtualTotalData.length-1].max - this.virtualHeightObj[this.endIndex-1].max.toString() + 'px'
+    console.log('onScrollEvent.index',this.endIndex - this.startIndex, this.startIndex,this.endIndex, this.top, this.bottom)
+
+    /**@type Function **/
+    this.virtualCallback({
+      paddingTop:this.top,
+      paddingBottom: this.bottom,
+      data:this.cloneDeep(this.virtualTotalData).slice(this.startIndex, this.endIndex + 1)}
+    );
+  }
+}
+
+