jufubao-movie 1.0.39-beta5 → 1.0.39-beta7

package/package.json

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

package/src/components/JfbMovieLineLineSeat/JfbMovieLineLineSeat.vue

@@ -79,7 +79,6 @@
     mixins: [componentsMixins,extsMixins,JfbMovieLineLineSeatMixin],
     data() {
       return {
-        hideMask: true,
         scheduleId: '',
         filmId: '',
         cinemaId: '',

package/src/components/JfbMovieTfkFilmList/ContentItem.vue

@@ -8,48 +8,53 @@
       <image v-if="!errorStatus" :src="item['poster']" :alt="item['show_name']" @error="handleError()" ></image>
     </view>
     <view class="middle">
-      <view class="name">{{item['show_name']}}</view>
-      <view class="other">类型：{{item['type']}}</view>
-      <view class="other">导演：{{item['director']}}</view>
-      <view class="other">主演：{{item['leading_role']}}</view>
-    </view>
-    <view class="right">
-      <view class="score">
-        <template v-if="item['remark']">
-          <text>评分：</text><text :style="{color:color}">{{item['remark']}}</text>
-        </template>
+      <view class="top">
+        <view class="name">{{item['show_name']}}</view>
+        <view class="score">
+          <template v-if="item['remark']">
+            <text>评分：</text><text :style="{color:color}">{{item['remark']}}</text>
+          </template>
+        </view>
       </view>
-      <view class="btn">
-        <template v-if="type === 'hot'">
-          <xd-button
-            v-if="item['show_button'] === '1'"
-            type="primary"
-            style="display:block;"
-            size="small"
-            @click.stop="handleBuy(item)">购票</xd-button>
-          <xd-button
-            v-else-if="item['show_button'] === '2'"
-            type="subPrimary"
-            style="display:block;"
-            size="small"
-            @click="handleBuy(item)">预售</xd-button>
-        </template>
-        <template v-if="type === 'rightnow'">
-          <xd-button
-            v-if="item['show_button'] === '3'"
-            type="success"
-            style="display:block;"
-            size="small"
-            @click.stop="handleDetail(item)"
-          >想看</xd-button>
-          <xd-button
-            v-else-if="item['show_button'] === '2'"
-            type="subPrimary"
-            style="display:block;"
-            size="small"
-            @click.stop="handleBuy(item)">预售</xd-button>
-        </template>
+      <view class="bottom">
+        <view>
+          <view class="other">类型：{{item['type']}}</view>
+          <view class="other">导演：{{item['director']}}</view>
+          <view class="other">主演：{{item['leading_role']}}</view>
+        </view>
+        <view class="btn">
+          <template v-if="type === 'hot'">
+            <xd-button
+              v-if="item['show_button'] === '1'"
+              type="primary"
+              style="display:block;"
+              size="small"
+              @click.stop="handleBuy(item)">购票</xd-button>
+            <xd-button
+              v-else-if="item['show_button'] === '2'"
+              type="subPrimary"
+              style="display:block;"
+              size="small"
+              @click="handleBuy(item)">预售</xd-button>
+          </template>
+          <template v-if="type === 'rightnow'">
+            <xd-button
+              v-if="item['show_button'] === '3'"
+              type="success"
+              style="display:block;"
+              size="small"
+              @click.stop="handleDetail(item)"
+            >想看</xd-button>
+            <xd-button
+              v-else-if="item['show_button'] === '2'"
+              type="subPrimary"
+              style="display:block;"
+              size="small"
+              @click.stop="handleBuy(item)">预售</xd-button>
+          </template>
+        </view>
       </view>
+
     </view>
   </view>
 </template>
@@ -125,50 +130,89 @@
   }
   .middle {
     flex: 1;
-    & .name {
-      font-size: 36rpx;
-      font-weight: 600;
+
+    & .top {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
       margin-bottom: 20rpx;
-      .uni-max-cut(2, 90);
-      line-height: 45rpx;
-    }
 
-    & .other {
-      font-size: 25rpx;
-      color: #999;
-      .uni-max-cut(1,36);
-      line-height: 36rpx;
-      margin-bottom: 10rpx;
-      &:last-child {
-        margin-bottom: 0!important;
+      & > view:first-child{
+        flex: 1;
+        font-size: 36rpx;
+        font-weight: 600;
+        .uni-max-cut(2, 90);
+        line-height: 45rpx;
+      }
+      & >view:nth-child(2) {
+        flex-shrink: 0;
+        height: 45rpx;
+        line-height: 45rpx;
+        margin-left: 20rpx;
+        text-align: right;
+        & > text:nth-child(1) {
+          font-size: 20rpx;
+        }
+        & > text:nth-child(2) {
+          font-size: 28rpx;
+        }
       }
     }
-  }
 
-  .right {
-    flex-shrink: 0;
-    display: flex;
-    align-content: space-between;
-    align-items: flex-end;
-    justify-content: flex-end;
-    flex-flow: wrap;
-    box-sizing: border-box;
-    width: 160rpx;
-    height: 200rpx;
+    & .bottom {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
 
-    & .score {
-      height: 40rpx;
-      width:100%;
-      text-align: right;
-      & > text:nth-child(1) {
-        font-size: 20rpx;
-      }
-      & > text:nth-child(2) {
-        font-size: 28rpx;
+      & > view:first-child {
+        flex: 1;
+        & > view {
+          font-size: 25rpx;
+          color: #999;
+          .uni-max-cut(1,36);
+          line-height: 36rpx;
+          margin-bottom: 10rpx;
+          &:last-child {
+            margin-bottom: 0!important;
+          }
+        }
       }
 
+      & .btn {
+        width: 140rpx;
+        flex-shrink: 0;
+        margin-left: 20rpx;
+      }
     }
+    //& .name {
+    //  font-size: 36rpx;
+    //  font-weight: 600;
+    //  margin-bottom: 20rpx;
+    //  .uni-max-cut(2, 90);
+    //  line-height: 45rpx;
+    //}
+    //
+    //& .other {
 
+    //}
   }
+
+  //.right {
+  //  flex-shrink: 0;
+  //  display: flex;
+  //  align-content: space-between;
+  //  align-items: flex-end;
+  //  justify-content: flex-end;
+  //  flex-flow: wrap;
+  //  box-sizing: border-box;
+  //  width: 160rpx;
+  //  height: 200rpx;
+  //
+  //  & .score {
+
+  //
+  //  }
+  //
+  //}
 }
 </style>

package/src/components/JfbMovieTfkFilmList/JfbMovieTfkFilmList.vue

@@ -81,7 +81,7 @@
           </view>
         </view>
         <!--poster-->
-        <view id="content-ref" class="content-ref"></view>
+        <view v-if="type === 'hot' || type === 'rightnow'" id="content-ref" class="content-ref"></view>
         <!--film hot|rightnow-->
         <view
           v-if="type === 'hot' || type === 'rightnow'"
@@ -174,10 +174,15 @@
             ></xd-query-filter>
           </view>
         </view>
+        <view id="content-list-ref" v-if="type === 'list'" class="content-ref"></view>
         <view
           v-if="type === 'list'"
           class="list-cont"
-          :style="{marginTop:outSpacing + 'rpx'}"
+          :style="{
+            marginTop:outSpacing + 'rpx',
+            paddingTop:paddingTop,
+            paddingBottom:paddingBottom,
+          }"
         >
           <view class="skeleton-wrap" v-if="dataList === null">
             <view
@@ -326,7 +331,7 @@
         pageSize: 10,
         total: null,
         isFirstLoadingData: false,
-        dataList:null,
+
         cinemaOrgDataList:null,
         cinemaAreaList:null,
         sort_consume_mode:'',//获取影院数据排序
@@ -386,8 +391,13 @@
 
         buyPath:'',
         fimeDetailPath:'',
+
+        //页面列表展示数据
+        dataList:null,
         paddingTop: 0,
         paddingBottom: 0,
+
+        //计算高度预加载列表
         preRendering:[],
 
       }
@@ -442,6 +452,7 @@
         }
         return style[this.mode]
       },
+
       contMarginComp(){
         let str = `${this.checkValue(this.contMargin.top, 20)}rpx`;
         str = `${str} ${this.checkValue(this.contMargin.right, 20)}rpx`;
@@ -463,15 +474,12 @@
           height: 280,
         }
       },
-
-
     },
     watch: {
       container(value, oldValue) {
         if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
         if (this.$configProject['isPreview']) this.init(value)
       },
-
       posterNum(){
         if (this.$configProject['isPreview']){
           this.onJfbLoad();
@@ -488,15 +496,12 @@
         this.clearDataVar();
         this.getList();
       },
-      preRendering(){
+
+      preRendering(val){
         this.$nextTick(()=>{
-          const query = uni.createSelectorQuery().in(this);
-          query
-            .select('#preRendering > .list-cont-item')
-            .boundingClientRect((data) => {
-              console.log("得到布局位置信息" + JSON.stringify(data));
-            })
-            .exec();
+          if(val.length > 0) {
+            this.handlePreRendering(val);
+          }
         })
       }
     },
@@ -504,8 +509,53 @@
       this.isPreview = this.$configProject.isPreview;
       this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
       this.init(this.container);
+
+      this.virtualList = new VirtualList(this, this.type ==='list'?'#content-list-ref':'#content-ref', {
+        fixedHeight: 240 + Number(this.outSpacing) + 20 * 2 ,
+        otherHeight: Number(this.outSpacing),
+        type:this.type ==='list'?'auto':'fixed',
+        //获取节点数据
+        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}) =>{
+          this.paddingTop = paddingTop;
+          this.paddingBottom = paddingBottom;
+          this.dataList = data;
+        },
+      });
     },
     methods: {
+      /**
+       * @description 非固定高度处理
+       * @param list
+       */
+      handlePreRendering(list){
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .selectAll('#preRendering > .list-cont-item')
+          .boundingClientRect((data) => {
+            if(data && data.length > 0) {
+              let height = [];
+              data.map(item=>{
+                height[item.dataset.index] = item.height + Number(this.outSpacing) * this.$rpxNum;
+              });
+              this.virtualList.pushVirtualData(list,height);
+            }
+          })
+          .exec();
+      },
+
       clearDataVar(){
         this.dataList = null;
         this.pageToken = '1';
@@ -603,6 +653,7 @@
         this.areaName = sortData.area_name;
         this.pageToken = '1';
         this.dataList = null;
+        this.virtualList.onChangeTab();
         this.getList();
         setTimeout(()=>{
           this.curQueryTab = '';
@@ -648,7 +699,6 @@
 
         //过滤之后不够分页直接返回值
         if(fitlerData.length <= this.pageSize) {
-          this.dataList = this.$xdUniHelper.cloneDeep(fitlerData);
           this.preRendering = this.$xdUniHelper.cloneDeep(fitlerData);
           this.pageToken = ''
           return;
@@ -665,7 +715,6 @@
         }
 
         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) + '';
       },
@@ -673,7 +722,10 @@
       handleTab(value){
         if(value === this.type) return;
         if(value === 'hot' || value === 'rightnow' ) {
-          this.virtualList.onChangeTab();
+          this.virtualList.onChangeTab(this,'#content-ref', 'fixed' );
+        }
+        if(value === 'list') {
+          this.virtualList.onChangeTab(this,'#content-list-ref', 'auto' );
         }
         this.type = value;
         this.dataList = null;
@@ -736,25 +788,26 @@
 
           //影院列表处理
           if(this.type === 'list') {
-            //res['list'].splice(0, 31);
+            debugger
             this.cinemaOrgDataList = res['list'];
             this.cinemaAreaList = [{area_code:'all', area_name:'全城'}].concat(res['area_list']);
 
+            //预览模式
+            if(this.isPreview)  {
+              this.dataList = (this.dataList||[]).concat(res['list'].slice(0, 20));
+              return;
+            }
+
             //小于数量页面显示记录
             if(res['list'].length <= this.pageSize) {
-              this.dataList = res['list'];
+              //this.dataList = res['list'];
               this.preRendering = this.$xdUniHelper.cloneDeep(res['list']);
               this.pageToken = '';
               return
             }
 
-            if(this.isPreview) {
-              this.dataList = (this.dataList||[]).concat(res['list'].slice(0, 20));
-            }
-            else {
-              //正常处理
-              this.getCinemaOrgData();
-            }
+            //正常处理
+            this.getCinemaOrgData();
 
           }
 
@@ -766,34 +819,6 @@
 
       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: {
@@ -876,10 +901,7 @@
       },
 
       onJfbScroll(options){
-        if(!this.pageToken || this.dataList === null) return false;
-        if(this.type === 'hot' || this.type === 'rightnow'){
-          this.virtualList.onScrollEvent(options.e.scrollTop);
-        }
+        this.virtualList.onScrollEvent(options.e.scrollTop);
       },
 
       setShowTypeList(){
@@ -896,7 +918,7 @@
 
         //已有选中值不设置默认值
         if(this.type === '' && list.length > 0) {
-          this.type = list[0].value;
+          this.type = list[1].value;
         }
         this.showTypeListData = list;
       },

package/src/components/JfbMovieTfkFilmRecommend/JfbMovieTfkFilmRecommend.vue

@@ -182,7 +182,6 @@
     ],
     data() {
       return {
-        hideMask: true,
         options: {},
         type:'', //hot rightnow
         typeList:{hot:{label: '热映影片', value: 'hot'},rightnow:{label: '即将上映', value: 'rightnow'}},

package/src/lib/VirtualList.js

@@ -1,12 +1,13 @@
 'use strict';
 //原点对象
 let __orgUpdateTop = null;
+let idx = 0;
 
 export default class VirtualList {
   virtualType='fixed';
-  virtualBufferHeight= 300;
+  virtualBufferHeight= 0;
   virtualFixedItemHeight; //固定模式高度设置
-  virtualVue; //当前组件vm实例
+  //virtualVue; //当前组件vm实例(小程序不可用)
   virtualTotalData=[]; //数组长度
   virtualHeightObj = {}; //高度序列index: {max:xx,min:xx}
   $el= null; //开始点元素
@@ -22,7 +23,9 @@ export default class VirtualList {
   top=0;
   bottom=0;
   virtualCallback=  ()=>{};
-  status= false
+  status= false;
+  options = null;
+
 
   /**
    * @description 初始化或者重置对象
@@ -35,59 +38,63 @@ export default class VirtualList {
    * @param params.otherHeight {number} 其他高度(rpx)
    * @param params.callback {Function} 回调方法
    */
-  constructor($vm,$el, params ) {
-    this.virtualVue = $vm;
-    this.virtualBufferHeight = 480 *  this.virtualVue.$rpxNum;
+  constructor($vm ,$el, params ) {
+    this.options = params;
+    this.virtualBufferHeight = 480 *  $vm.$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;
+    if(params.bufferHeight) this.virtualBufferHeight = params.bufferHeight * $vm.$rpxNum;
+    if(params.otherHeight) this.otherHeight = params.otherHeight * $vm.$rpxNum;
+    if(params.fixedHeight){
+      this.virtualFixedItemHeight = params.fixedHeight * $vm.$rpxNum;
     }
     this.virtualTotalData = [];
-    this.virtualVue.virtualViewData = null;
     this.$el = $el;
-    this.virtualVue.$nextTick(()=>{
+    $vm.$nextTick(()=>{
+      debugger
       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;
-
   }
 
+  /**
+   * @description 获取原点的偏移量
+   */
   checkOffsetTop(){
-    if(__orgUpdateTop) {
-      this.orgUpdateTop = __orgUpdateTop;
-      this.status = true;
-      return;
-    }
+
     //相对了10次不在检查
-    if(this.eqMaxTimer >= 3) {
+    if(this.eqMaxTimer >= 5) {
       this.status = true;
-      __orgUpdateTop = this.orgUpdateTop;
       return
     }
-    if(this.virtualVue.$refs[this.$el]) {
-      let offsetTop =  this.virtualVue.$refs[this.$el].$el.getBoundingClientRect().top;
+
+    this.options.getDom(this.$el).then(res=>{
+      let offsetTop =  res.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)
+      setTimeout(()=>{
+        this.checkOffsetTop();
+      }, 100)
+    }).catch(res=>{
+      setTimeout(()=>{
+        this.checkOffsetTop();
+      }, 100)
+    })
   }
 
   cloneDeep(data){
     return JSON.parse(JSON.stringify(data));
   }
 
+  /**
+   * @description 固定高度模式初始化列表记录范围
+   */
   computedMinAndMaxFixed(){
     let itemHeight = this.virtualFixedItemHeight;
     this.virtualTotalData.map((item,index)=>{
@@ -107,32 +114,62 @@ export default class VirtualList {
     });
   }
 
+  /**
+   * @description 新增数据时候调用此方法（对外）
+   * @param data {Array} 列表数据
+   * @param height {Array} 高度数组
+   */
   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.status) {
+      // data = data.map((item,index)=>{
+      //   return {
+      //     ...item,
+      //     show_name: `【${idx} - ${index}】${item.show_name}`,
+      //   }
+      // });
+      idx++;
+      //清空响应对象
+      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);
+      }
 
-    //固定模式
-    if(this.virtualType === 'fixed') {
-      this.virtualTotalData = this.virtualTotalData.concat(this.cloneDeep(data));
-      this.computedMinAndMaxFixed();
-      if(this.isFirst) this.onScrollEvent(0);
+      this.isFirst = false
+    }
+    else {
+      setTimeout(()=>{
+        this.pushVirtualData(data, height)
+      },100)
     }
 
-    this.isFirst = false
   }
 
   /**
-   * @description 滚动事件
+   * @description 滚动事件（对外）
    * @param scrollTop
    */
   onScrollEvent(scrollTop) {
+    //console.log('onScrollEvent',scrollTop)
+    if(!this.status || this.virtualTotalData.length === 0) {
+      /**@type Function **/
+      this.virtualCallback({
+        paddingTop:0,
+        paddingBottom: 0,
+        data: []
+      });
+      return;
+    }
+
     //非固定计算索引
     let time = new Date().getTime();
     //计算开始索引
@@ -170,14 +207,41 @@ export default class VirtualList {
 
     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)
+    console.log('onScrollEvent.index',this.endIndex - this.startIndex, this.startIndex,this.endIndex, this.top, this.bottom);
+
 
     /**@type Function **/
     this.virtualCallback({
-      paddingTop:this.top,
+      paddingTop: this.top,
       paddingBottom: this.bottom,
-      data:this.cloneDeep(this.virtualTotalData).slice(this.startIndex, this.endIndex + 1)}
-    );
+      data: this.cloneDeep(this.virtualTotalData).slice(this.startIndex, this.endIndex + 1)
+    });
+  }
+
+  /**
+   * @description 切换Tab调用此方法（对外）
+   * @param virtualType {string} 类型 fixed|auto
+   * @param $vm {Vue} vue实例 (在自动高度模式必选)
+   * @param ref 元素对象 (在自动高度模式必选)
+   */
+  onChangeTab($vm , ref , virtualType = 'fixed'){
+    this.virtualTotalData = [];
+    this.isFirst = true;
+
+    //改变顶部偏移量元素
+    if(virtualType && virtualType !== this.virtualType) {
+      if(!$vm)  throw new Error(`$vm is require, got is ${$vm.$xdUniHelper.checkVarType($vm)},value is ${$vm}`);
+      if(!ref)  throw new Error(`ref is require, got is ${$vm.$xdUniHelper.checkVarType(ref)}, value is ${ref}`);
+      this.virtualType = virtualType;
+      if(type === 'auto' && $vm && ref) {
+        this.$el = ref;
+        this.status = false;
+        this.eqMaxTimer = 3;
+        $vm.$nextTick(()=>{
+          this.checkOffsetTop();
+        });
+      }
+    }
   }
 }