jufubao-movie 1.0.39-beta1 → 1.0.39-beta11

package/src/components/JfbMovieTfkFilmList/JfbMovieTfkFilmList.vue

@@ -41,51 +41,27 @@
           >{{item.label}}</view>
         </view>
         <!--poster-->
-        <view
-          class="list-poster"
+        <xd-poster
           v-if="posterList !== null && posterList.length > 0"
-          :style="{marginTop:outSpacing + 'rpx'}"
-        >
-          <view
-            :style="{width: posterSize.width + 'rpx', height: posterSize.height + 'rpx' }"
-            class="list-poster-one"
-            v-if="posterList.length === 1"
-          >
-            <image :src="posterList[0].image_url" :alt="posterList[0].content_name"></image>
-          </view>
-          <view class="list-poster-more" v-else>
-            <xd-swiper-dot
-              :style="{width: posterSize.width + 'rpx', height: posterSize.height + 'rpx' }"
-              :current="current"
-              :info="posterList"
-              field="content_name"
-              :mode="mode"
-              :dots-styles="dotStyleData"
-            >
-              <swiper
-                class="swiper xd-swiper-content"
-                :style="{width: posterSize.width + 'rpx', height: posterSize.height + 'rpx' }"
-                :indicator-dots="false"
-                :autoplay="carouselTime >0"
-                :interval="carouselTime"
-                :duration="500"
-                :current="current"
-                circular
-                @animationfinish="handleAnimationfinish"
-              >
-                <swiper-item v-for="(item,index) in posterList" :key="index" @click.stop="handlePosterClick(item,index)">
-                  <image :style="{width: posterSize.width + 'rpx', height: posterSize.height + 'rpx' }" :src="item['image_url']" mode="aspectFill"></image>
-                </swiper-item>
-              </swiper>
-            </xd-swiper-dot>
-          </view>
-        </view>
+          :dot-style-data="dotStyleData"
+          :mode="mode"
+          :poster-list="posterList"
+          :style-obj="{
+            outSpacing: this.outSpacing,
+            posterSize: posterSize,
+            carouselTime: carouselTime,
+          }"
+        ></xd-poster>
         <!--poster-->
+        <view v-if="type === 'hot' || type === 'rightnow'" id="content-ref" class="content-ref"></view>
         <!--film hot|rightnow-->
         <view
-          v-if="type === 'hot' || type === 'rightnow'"
           class="list-cont"
-          :style="{marginTop:outSpacing + 'rpx'}"
+          v-if="type === 'hot' || type === 'rightnow'"
+          :style="{
+            marginTop: outSpacing + 'rpx',
+            minHeight: layoutInfo['bodyMinHeightPx'] + 'px'
+          }"
         >
           <view class="skeleton-wrap" v-if="dataList === null">
             <view
@@ -93,12 +69,12 @@
               v-for="item in 6"
               :key="item"
               :style="{
-                marginBottom:outSpacing + 'rpx',
-                padding:contMarginComp,
-                borderRadius:contRradius+ 'rpx',
-                border:contBorder,
-                boxShadow:contShadow,
-              }"
+                  marginBottom:outSpacing + 'rpx',
+                  padding:contMarginComp,
+                  borderRadius:contRradius+ 'rpx',
+                  border:contBorder,
+                  boxShadow:contShadow,
+                }"
             >
               <view class="skeleton-wrap-item-image skeleton-item" :style="{marginRight:outSpacing + 'rpx'}"></view>
               <view class="skeleton-wrap-item-title">
@@ -121,13 +97,15 @@
               :style="{
                 marginBottom:outSpacing + 'rpx',
                 padding:contMarginComp,
-                borderRadius:contRradius+ 'rpx',
+                borderRadius:(contRradius+ 'rpx'),
                 border:contBorder,
                 boxShadow:contShadow,
                 backgroundColor:contBgColor,
+                height: film['is_content_height'] + 'rpx'
               }"
             >
               <content-item
+                v-if="film['is_content_show']"
                 style="width: 100%;height: 100%"
                 :item="film"
                 :out-spacing="outSpacing"
@@ -139,10 +117,12 @@
               ></content-item>
             </view>
           </template>
+          <view class="hasNoData" v-if="dataList && dataList.length > 0 && pageToken === ''">已经到底没有更多数据了</view>
+          <xd-no-data v-if="dataList && dataList.length === 0" height="50vh" icon-type="film">暂无影片数据</xd-no-data>
         </view>
         <!--film hot|rightnow-->
         <!--cinema-->
-        <view v-if="type === 'list'" class="list-filter" :style="{marginTop:outSpacing + 'rpx'}">
+        <view v-if="type === 'list'" id="list-filter" class="list-filter" :style="{marginTop:outSpacing + 'rpx'}">
           <view class="list-filter-block" :class="{hasFitler:!!curQueryTab}">
             <view @click="handleFilterTab('filter')">
               <xd-font-icon icon="iconrepository-xialaxuanxiangdown" size="24" color="#999"></xd-font-icon>
@@ -169,10 +149,16 @@
             ></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,
+            minHeight: layoutInfo['bodyMinHeightPx'] + 'px'
+          }"
         >
           <view class="skeleton-wrap" v-if="dataList === null">
             <view
@@ -185,6 +171,7 @@
                 borderRadius:contRradius+ 'rpx',
                 border:contBorder,
                 boxShadow:contShadow,
+
               }"
             >
               <view class="title skeleton-item"></view>
@@ -207,10 +194,11 @@
                 border:contBorder,
                 boxShadow:contShadow,
                 backgroundColor:contBgColor,
-                height: 'auto'
+                height: film['is_content_height'] + 'rpx'
               }"
             >
               <content-cinema
+                v-if="film['is_content_show']"
                 style="width: 100%;height: 100%"
                 :item="film"
                 :out-spacing="outSpacing"
@@ -228,10 +216,41 @@
               @click="handleClose"
               :style="{left:- outSpacing + 'rpx', right: - outSpacing + 'rpx', }"
             ></view>
+            <view class="hasNoData" v-if="dataList && dataList.length > 0 && pageToken === ''">已经到底没有更多数据了</view>
+            <xd-no-data v-if="dataList && dataList.length === 0" height="50vh" icon-type="cinema">暂无影院数据</xd-no-data>
           </template>
         </view>
+        <view
+          id="preRendering"
+          class="preRendering"
+          v-if="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,
+            }"
+          >
+            <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>
       <template v-else>
         <view
@@ -246,6 +265,7 @@
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdNoData from "@/components/XdNoData/XdNoData.vue";
   import XdSwiperDot from "./XdSwiperDot.vue";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbMovieTfkFilmListMixin from "./JfbMovieTfkFilmListMixin";
@@ -260,34 +280,41 @@
   import XdQueryFilter from "./XdQueryFilter.vue";
   import {mapState} from "vuex";
   import Color from "color";
+  import VirtualList from "@/lib/VirtualList";
+  import XdPoster from "./XdPoster.vue";
 
   export default {
     name: "JfbMovieTfkFilmList",
     components: {
+      XdPoster,
       XdFontIcon,
       ContentItem,
       XdSwiperDot,
       ContentCinema,
       XdQuerySort,
-      XdQueryFilter
+      XdQueryFilter,
+      XdNoData
     },
     mixins: [
       componentsMixins, extsMixins, JfbMovieTfkFilmListMixin,posterMixins
     ],
     data() {
       return {
+        /**@type {VirtualList}**/
+        virtualList:null,
         options: {},
         //hideMask: true,
         type:'', //hot rightnow
+        addressType: '',
         typeList:{hot:{label: '热映影片', value: 'hot'},list:{label: '影院列表', value: 'list'}, rightnow:{label: '即将上映', value: 'rightnow'}},
         showTypeListData:null,
         backgroundColor:'',
         isPreview: false,
         pageToken:'1',
-        pageSize: 20,
+        pageSize: 10,
         total: null,
         isFirstLoadingData: false,
-        dataList:null,
+
         cinemaOrgDataList:null,
         cinemaAreaList:null,
         sort_consume_mode:'',//获取影院数据排序
@@ -308,10 +335,9 @@
         //广告
         posterList:null,
         poster:{},
-        posterNum:1,
-        mode:'round',
-        current: 0,
-        carouselTime: 5000,//轮播图轮播周期
+        posterNum:1, //使用张数
+        mode:'round',//直接写死
+        carouselTime: 0,//轮播图轮播周期
 
         //基础配置
         outSpacing:'20',
@@ -348,7 +374,18 @@
         buyPath:'',
         fimeDetailPath:'',
 
+        //页面列表展示数据
+        dataList:null,
+        paddingTop: 0,
+        paddingBottom: 0,
+        virtualHeight:0,
+        virtualTop: 0,
 
+
+        //计算高度预加载列表
+        preRendering:[],
+        listFilterTop:null,
+        listFilterTopTimer:0,
       }
     },
     computed:{
@@ -401,6 +438,7 @@
         }
         return style[this.mode]
       },
+
       contMarginComp(){
         let str = `${this.checkValue(this.contMargin.top, 20)}rpx`;
         str = `${str} ${this.checkValue(this.contMargin.right, 20)}rpx`;
@@ -412,9 +450,9 @@
       posterSize(){
         if(this.poster && this.poster.size) {
           let {width, height} = this.poster.size
-          let size = {}
-          if(width) size['width'] = width || 710;
-          if(height) size['height'] = height || 280;
+          let size = { width: 710, height: 280 }
+          if(width) size['width'] = Number(width || 710);
+          if(height) size['height'] = Number(height || 280);
           return size;
         }
         return {
@@ -422,15 +460,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();
@@ -438,6 +473,7 @@
       },
       stateCity(n, o){
         if(n && JSON.stringify(n) !== JSON.stringify(o)){
+          this.virtualList.onChangeTab();
           this.clearDataVar()
           this.getList();
         }
@@ -447,13 +483,109 @@
         this.clearDataVar();
         this.getList();
       },
+
+      preRendering(val){
+        this.$nextTick(()=>{
+          if(val.length > 0) {
+            this.handlePreRendering(val);
+          }
+        })
+      }
     },
     created() {
+      let tab_id = '';
+      // #ifdef H5
+      tab_id = this.$xdUniHelper.getParmater('tab_id') ? this.$xdUniHelper.getParmater('tab_id'):'';
+      // #endif
+      // #ifdef MP-WEIXIN
+      let pages = this.$xdUniHelper.parseURL(this.$root.$scope.$page.fullPath);
+      tab_id  = (pages.params && pages.params['tab_id']) ? pages.params['tab_id'] :'';
+      // #endif
+      if(['hot','list', 'rightnow'].includes(tab_id)) {
+        this.addressType = tab_id
+      }
+
       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 ,
+        marginTopAndBottom: Number(this.outSpacing),
+        paddingTopAndBottom: this.checkValue(this.contMargin.top, 20) + this.checkValue(this.contMargin.bottom, 20),
+        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}) =>{
+          this.dataList = data;
+        },
+      });
     },
     methods: {
+      getListFilterEleTop(){
+        if(this.listFilterTop !== null) return;
+        uni.pageScrollTo({
+          scrollTop: 0,
+          duration: 1,
+          success:()=>{
+            const query = uni.createSelectorQuery().in(this);
+            query
+              .select('#list-filter')
+              .boundingClientRect((data) => {
+                if(data && data.top !==undefined){
+                  let listFilterTop = data.top - this.layoutInfo.top * this.$rpxNum - this.outSpacing  * this.$rpxNum;
+                  if(listFilterTop !== this.listFilterTop) {
+                    setTimeout(()=>{
+                      this.getListFilterEleTop();
+                      this.listFilterTopTimer++
+                    },200)
+                  }
+                  if( this.listFilterTopTimer >= 5)  this.listFilterTop = listFilterTop;
+                }
+                else{
+                  setTimeout(()=>{
+                    this.getListFilterEleTop();
+                  },30)
+                }
+              })
+              .exec();
+          }
+        })
+
+      },
+
+      /**
+       * @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 - this.$rpxNum * ( this.checkValue(this.contMargin.top, 20) + this.checkValue(this.contMargin.bottom, 20))
+              });
+              this.virtualList.pushVirtualData(list,height);
+            }
+          })
+          .exec();
+      },
+
       clearDataVar(){
         this.dataList = null;
         this.pageToken = '1';
@@ -463,6 +595,7 @@
         this.sortCode = 'default'
         this.cinemaOrgDataList = null;
       },
+
       getSortList(){
         jfbRootExec('getTFKSortList', {
           vm: this,
@@ -527,10 +660,16 @@
         //todo
       },
       handleFilterTab(tab){
-        if(tab === this.curQueryTab ) {
-          this.curQueryTab = ''
-        }
-        else this.curQueryTab = tab
+        uni.pageScrollTo({
+          scrollTop: this.listFilterTop,
+          duration: 200,
+          success:()=>{
+            if(tab === this.curQueryTab ) {
+              this.curQueryTab = ''
+            }
+            else this.curQueryTab = tab
+          }
+        })
       },
       handleQuerySort(sortData){
         this.sortCode = sortData.value;
@@ -538,6 +677,7 @@
         this.pageToken = '1';
         this.dataList = null;
         this.cinemaOrgDataList = null;
+        this.virtualList.onChangeTab();
         this.getList();
 
         //等待排序规则
@@ -551,6 +691,7 @@
         this.areaName = sortData.area_name;
         this.pageToken = '1';
         this.dataList = null;
+        this.virtualList.onChangeTab();
         this.getList();
         setTimeout(()=>{
           this.curQueryTab = '';
@@ -562,10 +703,6 @@
       },
       //影院列表
 
-      handleAnimationfinish(e){
-        this.current = e.detail.current;
-      },
-
       getCinemaOrgData(){
         let fitlerData = this.$xdUniHelper.cloneDeep(this.cinemaOrgDataList||[])
 
@@ -591,12 +728,9 @@
         }
         //#endif
 
-        console.log(`fitlerData：`,fitlerData)
-        console.warn(`fitlerData.length=${fitlerData.length}`)
-
         //过滤之后不够分页直接返回值
         if(fitlerData.length <= this.pageSize) {
-          this.dataList = this.$xdUniHelper.cloneDeep(fitlerData);
+          this.preRendering = this.$xdUniHelper.cloneDeep(fitlerData);
           this.pageToken = ''
           return;
         }
@@ -611,7 +745,7 @@
           return;
         }
 
-        this.dataList = (this.dataList||[]).concat(this.$xdUniHelper.cloneDeep(list));
+        this.preRendering = this.$xdUniHelper.cloneDeep(list);
         if(this.pageSize < list.length) this.pageToken = '';
         else this.pageToken = (Number(this.pageToken)+1) + '';
       },
@@ -619,6 +753,16 @@
       handleTab(value){
         if(value === this.type) return;
         this.type = value;
+        if( this.type === 'hot' ||  this.type === 'rightnow' ) {
+          this.virtualList.onChangeTab(this,'#content-ref', 'fixed' );
+        }
+        if( this.type === 'list') {
+          this.virtualList.onChangeTab(this,'#content-list-ref', 'auto' );
+          this.$nextTick(()=>{
+            this.getListFilterEleTop()
+          })
+        }
+
         this.dataList = null;
         this.pageToken = '1';
         this.getList();
@@ -659,8 +803,6 @@
           }
         }
 
-
-
         jfbRootExec(fName, {
           vm: this,
           data:params
@@ -669,27 +811,44 @@
 
           //影片列表处理
           if(this.type === 'rightnow' || this.type==='hot'){
-            this.dataList = (this.dataList||[]).concat(res['list']);
-            this.pageToken = res.next_page_token;
+            //预览模式
+            if(this.isPreview){
+              this.dataList = (this.dataList||[]).concat(res['list']).map(item=>{
+                item.is_content_show = true;
+                return item
+              });
+            }
+            else {
+              this.virtualList.pushVirtualData(res['list']);
+              this.pageToken = res.next_page_token;
+            }
             return;
           }
 
           //影院列表处理
           if(this.type === 'list') {
-            //res['list'].splice(0, 31);
             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)).map(item=>{
+                item.is_content_show = true;
+                return item
+              });
+              return;
+            }
 
             //小于数量页面显示记录
             if(res['list'].length <= this.pageSize) {
-              this.dataList = res['list'];
+              this.preRendering = this.$xdUniHelper.cloneDeep(res['list']);
               this.pageToken = '';
               return
             }
 
             //正常处理
             this.getCinemaOrgData();
+
           }
 
         }).catch(e=>{
@@ -700,7 +859,6 @@
 
       onJfbLoad(options) {
         this.options = options;
-
         jfbRootExec('getTFKPosterContent', {
           vm: this,
           data: {
@@ -748,6 +906,8 @@
         this.tabBorder = this.getXdBorder({width:2,color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.tabBorder', {}));
         this.tabActBorder = this.getXdBorder({width:2,color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.tabActBorder', {}));
         this.tabRradius =  getContainerPropsValue(container, 'content.tabRradius', '10');
+        this.sort_consume_mode = getContainerPropsValue(container, 'content.sort_consume_mode', '');
+        this.isList = getContainerPropsValue(container, 'content.isList', 'N');
 
         //内容
         this.contMargin =  getContainerPropsValue(container, 'content.contMargin', {});
@@ -765,14 +925,14 @@
         this.showRightnowName = getContainerPropsValue(container, 'content.showRightnowName', '');
         this.showListName = getContainerPropsValue(container, 'content.showListName', '');
 
-
+        //广告设置
         this.poster = getContainerPropsValue(container, 'content.poster',{});
         this.posterNum = getContainerPropsValue(container, 'content.posterNum',1);
-        this.sort_consume_mode = getContainerPropsValue(container, 'content.sort_consume_mode', '');
-        this.isList = getContainerPropsValue(container, 'content.isList', 'N');
+        this.carouselTime = Number(getContainerPropsValue(container, 'content.carouselTime',5)) * 1000;
 
         //链接(影院)
         this.onlinePath = getContainerPropsValue(container, 'content.onlinePath', {value:''}).value;
+        this.codePath = getContainerPropsValue(container, 'content.codePath', {value:''}).value;
 
         //链接(影片)
         this.buyPath = getContainerPropsValue(container, 'content.buyPath', {value: ""}).value;
@@ -782,6 +942,11 @@
         this.setShowTypeList();
       },
 
+      onJfbScroll(options){
+        //console.log(options.e.scrollTop)
+        this.virtualList.onScrollEvent(options.e.scrollTop);
+      },
+
       setShowTypeList(){
         let list = [];
         if(this.showHot === 'Y') list.push(this.typeList["hot"]);
@@ -795,14 +960,27 @@
         })
 
         //已有选中值不设置默认值
-        if(this.type === '' && list.length > 0) {
-          this.type = list[0].value;
+        if(this.addressType) {
+          this.type = this.addressType;
+        }
+        else {
+          if(this.type === '' && list.length > 0) {
+            this.type = list[0].value;
+          }
+        }
+
+        //
+        if(this.type === 'list') {
+          this.$nextTick(()=>{
+            this.getListFilterEleTop()
+          })
         }
+
         this.showTypeListData = list;
       },
 
       onJfbReachBottom(options) {
-        if(!this.pageToken) return false;
+        if(this.pageToken === '' || this.dataList === null) return;
         this.getList();
       },
 
@@ -811,6 +989,8 @@
           this.$xdUniHelper.navigateBack();
         }
       },
+
+
       //重新回去广告位置工
       onJfbUpdate() {
         this.onJfbLoad(this.options)
@@ -853,6 +1033,7 @@
       .list-cont {
         position: relative;
         z-index: 2;
+
         .skeleton-wrap {
           .skeleton-wrap-item {
             height: 240rpx;
@@ -936,7 +1117,7 @@
         }
 
         &-item {
-          height: 240rpx;
+          box-sizing: content-box;
 
           &:last-child {
             margin-bottom: 0!important;
@@ -1011,6 +1192,18 @@
       font-size: 26rpx;
     }
 
+    .preRendering {
+      background: #eee;
+      position: fixed;
+      top:-9999rpx;
+      left:-9999rpx;
+      opacity: 1;
+      z-index: 0;
+      width: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
     .hasNoData {
       height: 80rpx;
       line-height: 80rpx;