jufubao-movie 1.0.39-beta8 → 1.0.39

package/src/components/JfbMovieTfkFilmList/JfbMovieTfkFilmList.vue

@@ -41,55 +41,26 @@
           >{{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"
+          v-if="type === 'hot' || type === 'rightnow'"
           :style="{
-            marginTop:outSpacing + 'rpx',
-            paddingTop:paddingTop,
-            paddingBottom:paddingBottom,
+            marginTop: outSpacing + 'rpx',
+            minHeight: layoutInfo['bodyMinHeightPx'] + 'px'
           }"
         >
           <view class="skeleton-wrap" v-if="dataList === null">
@@ -98,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">
@@ -126,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"
@@ -144,11 +117,27 @@
               ></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 class="list-filter-block" :class="{hasFitler:!!curQueryTab}">
+        <view class="list-filter-empty" v-if="isFixed"></view>
+        <view
+          v-if="type === 'list'"
+          id="list-filter"
+          class="list-filter"
+          :class="{
+            isFixed: isFixed,
+          }"
+          :style="{
+            marginTop:isFixed?0:(outSpacing + 'rpx'),
+            top: isFixed ? ((layoutInfo.top) +'rpx'): 0,
+            marginLeft:isFixed?0:(-outSpacing + 'rpx'),
+            marginRight:isFixed?0:(-outSpacing + 'rpx'),
+          }"
+        >
+          <view class="list-filter-block">
             <view @click="handleFilterTab('filter')">
               <xd-font-icon icon="iconrepository-xialaxuanxiangdown" size="24" color="#999"></xd-font-icon>
               <text>{{areaName}}</text>
@@ -182,6 +171,7 @@
             marginTop:outSpacing + 'rpx',
             paddingTop:paddingTop,
             paddingBottom:paddingBottom,
+            minHeight: layoutInfo['bodyMinHeightPx'] + 'px'
           }"
         >
           <view class="skeleton-wrap" v-if="dataList === null">
@@ -195,6 +185,7 @@
                 borderRadius:contRradius+ 'rpx',
                 border:contBorder,
                 boxShadow:contShadow,
+
               }"
             >
               <view class="title skeleton-item"></view>
@@ -217,10 +208,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"
@@ -238,12 +230,14 @@
               @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="type === 'list' && preRendering.length >0"
+          v-if="preRendering.length >0"
           :style="{padding:outSpacing + 'rpx'}"
         >
           <view
@@ -258,7 +252,6 @@
               border:contBorder,
               boxShadow:contShadow,
               backgroundColor:contBgColor,
-              height: 'auto'
             }"
           >
             <content-cinema
@@ -272,7 +265,6 @@
           </view>
         </view>
         <!--cinema-->
-        <view class="hasNoData" v-if="dataList && dataList.length > 0 && pageToken === ''">已经到底没有更多数据了</view>
       </view>
       <template v-else>
         <view
@@ -287,6 +279,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";
@@ -302,16 +295,19 @@
   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
@@ -323,6 +319,7 @@
         options: {},
         //hideMask: true,
         type:'', //hot rightnow
+        addressType: '',
         typeList:{hot:{label: '热映影片', value: 'hot'},list:{label: '影院列表', value: 'list'}, rightnow:{label: '即将上映', value: 'rightnow'}},
         showTypeListData:null,
         backgroundColor:'',
@@ -352,10 +349,9 @@
         //广告
         posterList:null,
         poster:{},
-        posterNum:1,
-        mode:'round',
-        current: 0,
-        carouselTime: 5000,//轮播图轮播周期
+        posterNum:1, //使用张数
+        mode:'round',//直接写死
+        carouselTime: 0,//轮播图轮播周期
 
         //基础配置
         outSpacing:'20',
@@ -396,10 +392,15 @@
         dataList:null,
         paddingTop: 0,
         paddingBottom: 0,
+        virtualHeight:0,
+        virtualTop: 0,
+
 
         //计算高度预加载列表
         preRendering:[],
-
+        listFilterTop:null,
+        listFilterTopTimer:0,
+        isFixed: false,
       }
     },
     computed:{
@@ -464,9 +465,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 {
@@ -487,6 +488,7 @@
       },
       stateCity(n, o){
         if(n && JSON.stringify(n) !== JSON.stringify(o)){
+          this.virtualList.onChangeTab();
           this.clearDataVar()
           this.getList();
         }
@@ -506,13 +508,25 @@
       }
     },
     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 + Number(this.outSpacing) + 20 * 2 ,
-        otherHeight: Number(this.outSpacing),
+        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)=>{
@@ -528,19 +542,50 @@
         getParentThis(){
           return this
         },
-        callback: ({data, paddingTop,  paddingBottom}) =>{
-          this.paddingTop = paddingTop;
-          this.paddingBottom = paddingBottom;
+        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;
+                  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')
@@ -548,7 +593,7 @@
             if(data && data.length > 0) {
               let height = [];
               data.map(item=>{
-                height[item.dataset.index] = item.height + Number(this.outSpacing) * this.$rpxNum;
+                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);
             }
@@ -565,6 +610,7 @@
         this.sortCode = 'default'
         this.cinemaOrgDataList = null;
       },
+
       getSortList(){
         jfbRootExec('getTFKSortList', {
           vm: this,
@@ -578,26 +624,26 @@
       },
 
       //影片列表
-      handleFilmDetail(film_id){
-        console.warn(`toFilmInfo(影片详情).${film_id}`)
+      handleFilmDetail(item){
+        console.warn(`toFilmInfo(影片详情).${item.id}`)
         if(!this.fimeDetailPath) {
           console.error('未配置链接');
           return;
         }
         if( this.isPreview) return;
         this.$xdUniHelper.navigateTo({
-          url: this.fimeDetailPath + `?film_id=${film_id}`
+          url: this.fimeDetailPath + `?film_id=${item.id}`
         })
       },
-      handleBuy(film_id){
-        console.warn(`toBuyChooseCinema(选择影院).${film_id}`)
+      handleBuy(item){
+        console.warn(`toBuyChooseCinema(选择影院).${item.id}`)
         if(!this.buyPath) {
           console.error('未配置链接');
           return;
         }
         if( this.isPreview) return;
         this.$xdUniHelper.navigateTo({
-          url: this.buyPath + `?film_id=${film_id}`
+          url: this.buyPath + `?film_id=${item.id}`
         })
       },
       //影片列表
@@ -629,10 +675,16 @@
         //todo
       },
       handleFilterTab(tab){
-        if(tab === this.curQueryTab ) {
-          this.curQueryTab = ''
-        }
-        else this.curQueryTab = tab
+        uni.pageScrollTo({
+          scrollTop: this.listFilterTop,
+          duration: 1,
+          success:()=>{
+            if(tab === this.curQueryTab ) {
+              this.curQueryTab = ''
+            }
+            else this.curQueryTab = tab
+          }
+        })
       },
       handleQuerySort(sortData){
         this.sortCode = sortData.value;
@@ -640,6 +692,7 @@
         this.pageToken = '1';
         this.dataList = null;
         this.cinemaOrgDataList = null;
+        this.virtualList.onChangeTab();
         this.getList();
 
         //等待排序规则
@@ -665,10 +718,6 @@
       },
       //影院列表
 
-      handleAnimationfinish(e){
-        this.current = e.detail.current;
-      },
-
       getCinemaOrgData(){
         let fitlerData = this.$xdUniHelper.cloneDeep(this.cinemaOrgDataList||[])
 
@@ -694,9 +743,6 @@
         }
         //#endif
 
-        console.log(`fitlerData：`,fitlerData)
-        console.warn(`fitlerData.length=${fitlerData.length}`)
-
         //过滤之后不够分页直接返回值
         if(fitlerData.length <= this.pageSize) {
           this.preRendering = this.$xdUniHelper.cloneDeep(fitlerData);
@@ -721,13 +767,18 @@
 
       handleTab(value){
         if(value === this.type) return;
-        if(value === 'hot' || value === 'rightnow' ) {
+        this.type = value;
+        if( this.type === 'hot' ||  this.type === 'rightnow' ) {
+          this.isFixed = false;
           this.virtualList.onChangeTab(this,'#content-ref', 'fixed' );
         }
-        if(value === 'list') {
+        if( this.type === 'list') {
           this.virtualList.onChangeTab(this,'#content-list-ref', 'auto' );
+          this.$nextTick(()=>{
+            this.getListFilterEleTop()
+          })
         }
-        this.type = value;
+
         this.dataList = null;
         this.pageToken = '1';
         this.getList();
@@ -774,11 +825,15 @@
         }).then(res => {
           if(this.isFirstLoadingData) this.$xdHideLoading({});
 
-
           //影片列表处理
           if(this.type === 'rightnow' || this.type==='hot'){
             //预览模式
-            if(this.isPreview) this.dataList = (this.dataList||[]).concat(res['list']);
+            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;
@@ -788,19 +843,20 @@
 
           //影院列表处理
           if(this.type === 'list') {
-            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));
+              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
@@ -866,6 +922,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', {});
@@ -883,14 +941,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;
@@ -901,7 +959,14 @@
       },
 
       onJfbScroll(options){
+        //console.log(options.e.scrollTop)
         this.virtualList.onScrollEvent(options.e.scrollTop);
+
+        //未初始化完成不执行改逻辑
+        if(this.listFilterTop !== null) {
+          this.isFixed = options.e.scrollTop >= this.listFilterTop
+        }
+
       },
 
       setShowTypeList(){
@@ -917,14 +982,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 || this.dataList === null) return false;
+        if(this.pageToken === '' || this.dataList === null) return;
         this.getList();
       },
 
@@ -934,6 +1012,7 @@
         }
       },
 
+
       //重新回去广告位置工
       onJfbUpdate() {
         this.onJfbLoad(this.options)
@@ -948,6 +1027,8 @@
   @import "./JfbMovieTfkFilmListLess.less";
 
   .jfb-movie-tfk-film-list {
+    position: relative;
+    z-index: 200;
     &__body{
       .tfk-list {
         & >view:first-child {
@@ -976,7 +1057,7 @@
       .list-cont {
         position: relative;
         z-index: 2;
-        min-height: 600rpx;
+
         .skeleton-wrap {
           .skeleton-wrap-item {
             height: 240rpx;
@@ -1060,7 +1141,7 @@
         }
 
         &-item {
-          height: 240rpx;
+          box-sizing: content-box;
 
           &:last-child {
             margin-bottom: 0!important;
@@ -1092,9 +1173,12 @@
       .list-filter {
         position: relative;
         z-index: 3;
-        .hasFitler {
-          box-shadow: 0 -5rpx 20rpx 0 rgba(0,0,0, .1);
-          border-radius: 20rpx 20rpx 0 0;
+
+        &.isFixed {
+          position: fixed;
+          left:0;
+          right: 0;
+          z-index: 9999;
         }
 
         &-block {
@@ -1126,7 +1210,12 @@
           width: 100%;
           z-index: 3;
         }
+
+        &-empty{
+          height: 100rpx;
+        }
       }
+
     }
 
     .noConfig {
@@ -1136,10 +1225,11 @@
     }
 
     .preRendering {
+      background: #eee;
       position: fixed;
-      top: -9999px;
-      left: -9999px;
-      opacity: 0;
+      top:-9999rpx;
+      left:-9999rpx;
+      opacity: 1;
       z-index: 0;
       width: 100%;
       box-sizing: border-box;