jufubao-movie 1.0.38 → 1.0.39-beta2

package/src/components/JfbMovieTfkFilmList/JfbMovieTfkFilmList.vue

@@ -14,87 +14,902 @@
     </view>
     <!-- #endif -->
     <view class="jfb-movie-tfk-film-list__body">
-      <view>测试插件( {{containerId}} )</view>
+      <view class="x-line"></view>
+      <view
+        class="tfk-list"
+        v-if="showTypeListData.length > 0"
+        :style="{
+          padding: outSpacing + 'rpx'
+        }"
+      >
+        <view class="list-tab" v-if="showTypeListData.length > 1">
+          <view
+            :class="{active: item.value === type}"
+            v-for="(item,index) in showTypeListData"
+            @click="handleTab(item.value)"
+            :key="index"
+            :style="{
+              backgroundColor:item.value === type ? tabStyle.actBgColor:tabStyle.bgColor,
+              color: item.value === type?tabStyle.actColor:tabStyle.color,
+              fontWeight: item.value === type? tabStyle.actFontWeight: tabStyle.fontWeight,
+              fontSize: item.value === type?(tabStyle.actFontSize):(tabStyle.fontSize),
+              borderRadius: tabRradius + 'rpx',
+              border:item.value === type?tabActBorder:tabBorder,
+              boxShadow: item.value === type ? tabActShadow: tabShadow,
+              marginRight: outSpacing + 'rpx',
+            }"
+          >{{item.label}}</view>
+        </view>
+        <!--poster-->
+        <view
+          class="list-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>
+        <!--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',
+            paddingTop:paddingTop,
+            paddingBottom:paddingBottom,
+          }"
+        >
+          <view class="skeleton-wrap" v-if="dataList === null">
+            <view
+              class="skeleton-wrap-item"
+              v-for="item in 6"
+              :key="item"
+              :style="{
+                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">
+                <view class="title skeleton-item"></view>
+                <view class="type skeleton-item"></view>
+                <view class="director skeleton-item"></view>
+                <view class="star skeleton-item"></view>
+              </view>
+              <view class="skeleton-wrap-item-btn skeleton-item" :style="{marginLeft:outSpacing + 'rpx'}">
+                <view class="score skeleton-item"></view>
+                <view class="btn skeleton-item"></view>
+              </view>
+            </view>
+          </view>
+          <template v-if="dataList !== null">
+            <view
+              class="list-cont-item"
+              v-for="film in dataList"
+              :key="film.id"
+              :style="{
+                marginBottom:outSpacing + 'rpx',
+                padding:contMarginComp,
+                borderRadius:contRradius+ 'rpx',
+                border:contBorder,
+                boxShadow:contShadow,
+                backgroundColor:contBgColor,
+              }"
+            >
+              <content-item
+                style="width: 100%;height: 100%"
+                :item="film"
+                :out-spacing="outSpacing"
+                :color="mainColor"
+                :type="type"
+                :border-radius="imgRradius"
+                @on-film-detail="handleFilmDetail"
+                @on-buy="handleBuy"
+              ></content-item>
+            </view>
+          </template>
+        </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 @click="handleFilterTab('filter')">
+              <xd-font-icon icon="iconrepository-xialaxuanxiangdown" size="24" color="#999"></xd-font-icon>
+              <text>{{areaName}}</text>
+            </view>
+            <view @click="handleFilterTab('sort')">
+              <xd-font-icon icon="iconshaixuanbiaoji_mian" size="28" color="#999"></xd-font-icon>
+              <text>{{sortName}}</text>
+            </view>
+          </view>
+          <view class="list-filter-modal" v-if="curQueryTab">
+            <xd-query-sort
+              key="sort"
+              :sort="sort"
+              v-if="sortUserList !== null && curQueryTab === 'sort'"
+              @onConfirm="handleQuerySort"
+              :list="sortUserList"
+            ></xd-query-sort>
+            <xd-query-filter
+              key="filter"
+              v-if="cinemaAreaList !== null && curQueryTab === 'filter'"
+              :list="cinemaAreaList"
+              @onConfirm="handleQueryFilter"
+            ></xd-query-filter>
+          </view>
+        </view>
+        <view
+          v-if="type === 'list'"
+          class="list-cont"
+          :style="{marginTop:outSpacing + 'rpx'}"
+        >
+          <view class="skeleton-wrap" v-if="dataList === null">
+            <view
+              class="skeleton-wrap-item list"
+              v-for="item in 8"
+              :key="item"
+              :style="{
+                marginBottom:outSpacing + 'rpx',
+                padding:contMarginComp,
+                borderRadius:contRradius+ 'rpx',
+                border:contBorder,
+                boxShadow:contShadow,
+              }"
+            >
+              <view class="title skeleton-item"></view>
+              <view class="address skeleton-item"></view>
+              <view class="bottom">
+                <view class="local skeleton-item"></view>
+                <view class="btn skeleton-item"></view>
+              </view>
+            </view>
+          </view>
+          <template v-if="dataList !== null">
+            <view
+              class="list-cont-item"
+              v-for="(film) in dataList"
+              :key="film.cinema_id"
+              :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"
+                @on-schedule="handleSchedule"
+                @on-cashier-detail="handleCashierDetail"
+                @on-code-detail="handleCodeDetail"
+              ></content-cinema>
+            </view>
+            <view
+              class="cont-mask"
+              v-if="curQueryTab"
+              @click="handleClose"
+              :style="{left:- outSpacing + 'rpx', right: - outSpacing + 'rpx', }"
+            ></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>
+      <template v-else>
+        <view
+          class="noConfig"
+          v-if="isPreview"
+          :style="{backgroundColor:backgroundColor, color:warningColor}"
+        >热映影片,即将上映未配置，此模块在线上不显</view>
+      </template>
     </view>
   </view>
 </template>
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdSwiperDot from "./XdSwiperDot.vue";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbMovieTfkFilmListMixin from "./JfbMovieTfkFilmListMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
+  import getServiceUrl from '@/common/getServiceUrl'
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
+  import posterMixins from "@/mixins/posterMixins";
+  import ContentItem from './ContentItem.vue'
+  import ContentCinema from "./ContentCinema.vue";
+  import XdQuerySort from "./XdQuerySort.vue";
+  import XdQueryFilter from "./XdQueryFilter.vue";
+  import {mapState} from "vuex";
+  import Color from "color";
+  import VirtualList from "@/lib/VirtualList";
+
   export default {
     name: "JfbMovieTfkFilmList",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      ContentItem,
+      XdSwiperDot,
+      ContentCinema,
+      XdQuerySort,
+      XdQueryFilter
     },
     mixins: [
-      componentsMixins, extsMixins, JfbMovieTfkFilmListMixin
+      componentsMixins, extsMixins, JfbMovieTfkFilmListMixin,posterMixins
     ],
     data() {
       return {
+        /**@type {VirtualList}**/
+        virtualList:null,
+        options: {},
+        //hideMask: true,
+        type:'', //hot rightnow
+        typeList:{hot:{label: '热映影片', value: 'hot'},list:{label: '影院列表', value: 'list'}, rightnow:{label: '即将上映', value: 'rightnow'}},
+        showTypeListData:null,
+        backgroundColor:'',
+        isPreview: false,
+        pageToken:'1',
+        pageSize: 10,
+        total: null,
+        isFirstLoadingData: false,
+        dataList:null,
+        cinemaOrgDataList:null,
+        cinemaAreaList:null,
+        sort_consume_mode:'',//获取影院数据排序
+        sortUserList:null,
+
+
+        //filter
+        showQueryModal:false,
+        curQueryTab:'',
+        sort:'',
+        sortName:'排序',
+        sortCode:'default',
+
+        //区域
+        areaCode:'all',
+        areaName:'区域筛选',
+
+        //广告
+        posterList:null,
+        poster:{},
+        posterNum:1,
+        mode:'round',
+        current: 0,
+        carouselTime: 5000,//轮播图轮播周期
+
+        //基础配置
+        outSpacing:'20',
+        showHot: '',
+        showRightnow:'',
+        showList:'Y',
+        showHotName:'',
+        showRightnowName: '',
+        showListName: '',
+        isList:'Y', //组件是否用户列表或者是否为首页（是否开启返回功能）
+        tabStyle:{},
+
+
+        //tab
+        tabBorder:'0',
+        tabActBorder:'0',
+        tabShadow:'0 0 0 rgba(0,0,0,0)',
+        tabActShadow:'0 0 0 rgba(0,0,0,0)',
+        tabRradius:'10',
+
+        //列表样式
+        contMargin:{},
+        contRradius:'20',
+        contBorder:'0',
+        contShadow:'0 0 10rpx rgba(0,0,0,.05)',
+        contBgColor:'#fff',
+        imgRradius:'10',
+
+        //链接
+        onlinePath:'',
+        codePath:'',
+        cashierPath:'',
+
+        buyPath:'',
+        fimeDetailPath:'',
+        paddingTop: 0,
+        paddingBottom: 0,
+        preRendering:[],
 
-        //todo
       }
+    },
+    computed:{
+      ...mapState({
+        stateCity: state => state.cityLocation.city,
+        stateLocation: (state) => state.cityLocation.location || {},
+      }),
+
+      dotStyleData(){
+        let alpha = 0.6;
+        let selectedColor = `rgba(${Color(this.mainColor).alpha(alpha).array().join(',')})`;
+        let style = {
+          dot: {
+            backgroundColor: 'rgba(166,166,166,.5)',
+            border: '0px rgba(166,166,166,.5) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: `0px this.mainColor solid`
+          },
+          default: {
+            width: 16,
+            backgroundColor: 'rgba(200,200,200,.45)',
+            border: '1px rgba(200,200,200,.45) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: `1px this.mainColor solid`
+          },
+          round: {
+            backgroundColor: 'rgba(166,166,166,.5)',
+            border: '0px rgba(166,166,166,.5) solid',
+            color: '#fff',
+            selectedBackgroundColor: selectedColor,
+            selectedBorder: `0px this.mainColor solid`
+          },
+          nav: {
+            backgroundColor: 'rgba(0,0,0,.5)',
+            border: '1px rgba(0,0,0,.5) solid',
+            color: '#fff',
+            selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
+            selectedBorder: '1px rgba(255, 255, 255 1) solid'
+          },
+          indexes: {
+            backgroundColor: 'rgba(0,0,0,.5)',
+            border: '0px rgba(0,0,0,.5) solid',
+            color: '#aaa',
+            selectedBackgroundColor: 'rgba(0,0,0,.8)',
+            selectedBorder: '0px rgba(0,0,0,.8) solid',
+            selectedColor: '#fff',
+          }
+        }
+        return style[this.mode]
+      },
+      contMarginComp(){
+        let str = `${this.checkValue(this.contMargin.top, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.contMargin.right, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.contMargin.bottom, 20)}rpx`;
+        str = `${str} ${this.checkValue(this.contMargin.left, 20)}rpx`;
+        return str
+      },
+
+      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;
+          return size;
+        }
+        return {
+          width: 710,
+          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();
+        }
+      },
+      stateCity(n, o){
+        if(n && JSON.stringify(n) !== JSON.stringify(o)){
+          this.clearDataVar()
+          this.getList();
+        }
+      },
+      showTypeListData(){
+        if(this.type === '') return;
+        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;
+      this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
       this.init(this.container);
-
-      //todo
     },
     methods: {
+      clearDataVar(){
+        this.dataList = null;
+        this.pageToken = '1';
+        this.areaCode = 'all'
+        this.areaName ='区域筛选';
+        this.sortName = '排序'
+        this.sortCode = 'default'
+        this.cinemaOrgDataList = null;
+      },
+      getSortList(){
+        jfbRootExec('getTFKSortList', {
+          vm: this,
+          data:{}
+        }).then(res => {
+          this.sortUserList = res['cinema_customer_sort'];
+        }).catch(err=>{
+          console.error(err);
+        })
+
+      },
+
+      //影片列表
+      handleFilmDetail(film_id){
+        console.warn(`toFilmInfo(影片详情).${film_id}`)
+        if(!this.fimeDetailPath) {
+          console.error('未配置链接');
+          return;
+        }
+        if( this.isPreview) return;
+        this.$xdUniHelper.navigateTo({
+          url: this.fimeDetailPath + `?film_id=${film_id}`
+        })
+      },
+      handleBuy(film_id){
+        console.warn(`toBuyChooseCinema(选择影院).${film_id}`)
+        if(!this.buyPath) {
+          console.error('未配置链接');
+          return;
+        }
+        if( this.isPreview) return;
+        this.$xdUniHelper.navigateTo({
+          url: this.buyPath + `?film_id=${film_id}`
+        })
+      },
+      //影片列表
+
+      //影院列表
+      handleSchedule(item){
+        console.warn(`handleSchedule(选择排期).${item.cinema_id}`)
+        if(!this.onlinePath) {
+          console.error('未配置链接');
+          return;
+        }
+        if( this.isPreview) return;
+        this.$xdUniHelper.navigateTo({
+          url: this.onlinePath + `?cinema_id=${item.cinema_id}`,
+        });
+      },
+      handleCodeDetail(item){
+        console.warn(`handleCodeDetail(选择电子码列表).${item.cinema_id}`)
+        if(!this.codePath) {
+          console.error('未配置链接');
+          return;
+        }
+        if( this.isPreview) return;
+        this.$xdUniHelper.navigateTo({
+          url: this.codePath + `?cinema_id=${item.cinema_id}`,
+        });
+      },
+      handleCashierDetail(item){
+        //todo
+      },
+      handleFilterTab(tab){
+        if(tab === this.curQueryTab ) {
+          this.curQueryTab = ''
+        }
+        else this.curQueryTab = tab
+      },
+      handleQuerySort(sortData){
+        this.sortCode = sortData.value;
+        this.sortName = sortData.label;
+        this.pageToken = '1';
+        this.dataList = null;
+        this.cinemaOrgDataList = null;
+        this.getList();
+
+        //等待排序规则
+        setTimeout(()=>{
+          this.curQueryTab = '';
+        },200)
+
+      },
+      handleQueryFilter(sortData){
+        this.areaCode = sortData.area_code;
+        this.areaName = sortData.area_name;
+        this.pageToken = '1';
+        this.dataList = null;
+        this.getList();
+        setTimeout(()=>{
+          this.curQueryTab = '';
+        },200)
+
+      },
+      handleClose(){
+        this.curQueryTab = '';
+      },
+      //影院列表
+
+      handleAnimationfinish(e){
+        this.current = e.detail.current;
+      },
+
+      getCinemaOrgData(){
+        let fitlerData = this.$xdUniHelper.cloneDeep(this.cinemaOrgDataList||[])
+
+        //非全域处理
+        if(this.areaCode !== 'all') {
+          fitlerData = fitlerData.filter(item=>{
+            return item.area_code === this.areaCode;
+          });
+        }
+
+        //添加测试数据
+        // "NODE_ENV": "development",
+        // #ifdef H5
+        if(window.location.href.indexOf('filter=1') !== -1
+          || this.$configProject.NODE_ENV === 'development'
+        ) {
+          fitlerData = fitlerData.map((item,index)=>{
+            return {
+              ...item,
+              cinema_name: `${item.cinema_name}-${index+1}`,
+            }
+          });
+        }
+        //#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;
+        }
+
+        let list = this.$xdUniHelper.getLocalPaginationData(
+          fitlerData, this.pageToken, this.pageSize
+        );
+
+        //分页完成的数据为0
+        if(list.length === 0) {
+          this.pageToken = ''
+          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) + '';
+      },
+
+      handleTab(value){
+        if(value === this.type) return;
+        if(value === 'hot' || value === 'rightnow' ) {
+          this.virtualList.onChangeTab();
+        }
+        this.type = value;
+        this.dataList = null;
+        this.pageToken = '1';
+        this.getList();
+      },
+
+      getList(){
+        let fName = 'getTFKListFilmHotList';
+        if(this.type === 'rightnow') fName = 'getTFKListFilmRightnowList';
+        if(this.type === 'list') fName = 'getTFKCinemaList';
+
+        if(this.isFirstLoadingData) this.$xdShowLoading({});
+        if(!this.isFirstLoadingData){
+          this.isFirstLoadingData = true;
+        }
+
+        let params = {
+          city_code: this.stateCity.city_code,
+          type: this.type,
+          page_token: this.pageToken,
+          page_size: this.pageSize
+        }
+
+        //影院参数
+        if(this.type === 'list') {
+          //有数据直接进行数据分页
+          if(this.cinemaOrgDataList !== null) {
+            this.getCinemaOrgData();
+            this.$xdHideLoading({});
+            return
+          }
+
+          params = {
+            city_code: this.stateCity.city_code,
+            latitude: this.stateLocation.latitude,
+            longitude: this.stateLocation.longitude,
+            sort_consume_mode: this.sort_consume_mode || '',
+            sort_custom:this.sortCode
+          }
+        }
+
+
+
+        jfbRootExec(fName, {
+          vm: this,
+          data:params
+        }).then(res => {
+          if(this.isFirstLoadingData) this.$xdHideLoading({});
+
+
+          //影片列表处理
+          if(this.type === 'rightnow' || this.type==='hot'){
+            //this.dataList = (this.dataList||[]).concat(res['list']);
+            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(res['list'].length <= this.pageSize) {
+              this.dataList = res['list'];
+              this.preRendering = this.$xdUniHelper.cloneDeep(res['list']);
+              this.pageToken = '';
+              return
+            }
+
+            //正常处理
+            this.getCinemaOrgData();
+          }
+
+        }).catch(e=>{
+          console.error(e);
+          this.$xdHideLoading({});
+        })
+      },
+
       onJfbLoad(options) {
+        this.options = options;
 
-        // jfbRootExec('baiduUserLogin', {
+        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;
+            }
 
-        //   vm: this,//   data: {
+          },
+        });
 
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
+        jfbRootExec('getTFKPosterContent', {
+          vm: this,
+          data: {
+            page_id: this.pageAttr['page_id'], //页面ID
+            container_id: this.containerId, //组件ID
+            page_size: this.posterNum //可以不传
+          },
+        })
+          .then(res => {
+            let posterList = res.list.map((item,index) => {
+              return {
+                ...item,
+                image_background_url: item.image_background_url?getServiceUrl(item.image_background_url):'',
+                image_url: item.image_url?getServiceUrl(item.image_url):''
+              }
+            });
+            this.posterList = this.posterFilterNoUseData(posterList);
+          })
+          .catch(err=>{
+            console.error(err);
+          })
 
-        //   }
+        this.getSortList();
 
-        // }).then().catch()
       },
+
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
+        this.outSpacing =  getContainerPropsValue(container, 'content.outSpacing', '20');
+        this.tabStyle = Object.assign({},{
+          color:'#333',
+          bgColor: '#fff',
+          fontSize: '26rpx',
+          fontWeight: 'normal',
+          actBgColor: this.mainColor,
+          actColor: '#fff',
+          actFontSize: '26rpx',
+          actFontWeight: 'normal',
+        },getContainerPropsValue(container, 'content.tabStyle', {}));
+        this.tabShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,0.05)'},getContainerPropsValue(container, 'content.tabShadow', {}))
+        this.tabActShadow = this.getXdShadow( {width:20, color:this.mainColor},getContainerPropsValue(container, 'content.tabActShadow', {}))
+        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.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+        //内容
+        this.contMargin =  getContainerPropsValue(container, 'content.contMargin', {});
+        this.contRradius =  getContainerPropsValue(container, 'content.contRradius', '10');
+        this.contShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.contShadow', {}))
+        this.contBorder = this.getXdBorder({width:2,color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.contBorder', {}));
+        this.contBgColor = getContainerPropsValue(container, 'content.contBgColor', '#fff');
+        this.imgRradius = getContainerPropsValue(container, 'content.imgRradius', '10');
 
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
-      },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
+        //控制标签显示
+        this.showHot = getContainerPropsValue(container, 'content.showHot','Y');
+        this.showRightnow = getContainerPropsValue(container, 'content.showRightnow','Y');
+        this.showList = getContainerPropsValue(container, 'content.showList','Y');
+        this.showHotName = getContainerPropsValue(container, 'content.showHotName', '');
+        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.onlinePath = getContainerPropsValue(container, 'content.onlinePath', {value:''}).value;
+
+        //链接(影片)
+        this.buyPath = getContainerPropsValue(container, 'content.buyPath', {value: ""}).value;
+        this.fimeDetailPath = getContainerPropsValue(container, 'content.fimeDetailPath', {value: ""}).value;
+
+        //初始化数据
+        this.setShowTypeList();
       },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
+
+      onJfbScroll(options){
+        if(this.type === 'hot' || this.type === 'rightnow'){
+          this.virtualList.onScrollEvent(options.e.scrollTop);
+        }
       },
-      onJfbShow(options) {
-        console.log('event.onJfbShow', options)
+
+      setShowTypeList(){
+        let list = [];
+        if(this.showHot === 'Y') list.push(this.typeList["hot"]);
+        if(this.showList === 'Y') list.push(this.typeList["list"]);
+        if(this.showRightnow === 'Y') list.push(this.typeList["rightnow"]);
+        list = this.$xdUniHelper.cloneDeep(list).map(item=>{
+          if(item.value === 'hot') item.label = this.showHotName ||item.label
+          if(item.value === 'list') item.label = this.showListName || item.label;
+          if(item.value === 'rightnow') item.label = this.showRightnowName || item.label;
+          return item
+        })
+
+        //已有选中值不设置默认值
+        if(this.type === '' && list.length > 0) {
+          this.type = list[0].value;
+        }
+        this.showTypeListData = list;
       },
-      onJfbHide(options) {
-        console.log('event.onJfbHide', options)
+
+      onJfbReachBottom(options) {
+        if(!this.pageToken) return false;
+        this.getList();
       },
+
       onJfbBack(options) {
-        console.log('event.onJfbBack', options)
+        if(this.isList === 'Y') {
+          this.$xdUniHelper.navigateBack();
+        }
       },
-      onJfbUpdate(...data) {
-        console.log('event.onJfbUpdate', data)
-      },
-      onJfbCustomEvent(options) {
-        console.log('event.onJfbReachBottom', options)
+
+      //重新回去广告位置工
+      onJfbUpdate() {
+        this.onJfbLoad(this.options)
       },
+
     }
   }
 
@@ -105,7 +920,211 @@
 
   .jfb-movie-tfk-film-list {
     &__body{
+      .tfk-list {
+        & >view:first-child {
+          margin-top: 0 !important;
+        }
+      }
+
+      .list-tab {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        & > view {
+          flex: 1;
+          height: 80rpx;
+          line-height: 80rpx;
+          text-align: center;
+          font-size: 28rpx;
+
+          &:last-child {
+            margin-right: 0!important;
+          }
+        }
+      }
+
+      .list-cont {
+        position: relative;
+        z-index: 2;
+        min-height: 600rpx;
+        .skeleton-wrap {
+          .skeleton-wrap-item {
+            height: 240rpx;
+            padding: 20rpx;
+            background: #fff;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            //影片列表骨架
+            &-image {
+              .skeleton-item(160rpx, 240rpx);
+              flex-shrink: 0;
+              margin-right: 20rpx;
+            }
+
+            &-title {
+              flex: 1;
+
+              .title {
+                .skeleton-item(100%, 50rpx);
+                margin-bottom: 20rpx;
+              }
+
+              .director,.star,.type  {
+                .skeleton-item(100%, 40rpx);
+                margin-bottom: 10rpx;
+              }
+            }
+
+            &-btn {
+              display: flex;
+              align-content: space-between;
+              align-items: flex-end;
+              justify-content: flex-end;
+              flex-flow: wrap;
+              height: 100%;
+              box-sizing: border-box;
+              padding: 10rpx 0;
+              width: 130rpx;
+              flex-shrink: 0;
+
+              & > .score {
+                .skeleton-item(100rpx, 40rpx);
+              }
+              & > .btn {
+                .skeleton-item(130rpx, 60rpx);
+              }
+            }
+
+            &:last-child {
+              margin-bottom: 0!important;
+            }
+
+            //影院列表骨架
+            &.list {
+              display: block;
+            }
+            & > .title {
+              .skeleton-item(100%, 60rpx);
+              margin-bottom: 20rpx;
+            }
+            & > .address {
+              .skeleton-item(100%, 40rpx);
+              margin-bottom: 20rpx;
+            }
+            & > .bottom {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              padding-top: 30rpx;
+
+              & > .local {
+                .skeleton-item(120rpx, 30rpx);
+              }
+              & > .btn {
+                .skeleton-item(150rpx, 70rpx);
+              }
+            }
+          }
+        }
+
+        &-item {
+          height: 240rpx;
+
+          &:last-child {
+            margin-bottom: 0!important;
+          }
+        }
+
+        .cont-mask {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          z-index: 1;
+          background-color: rgba(0, 0, 0, .2);
+        }
+      }
+
+      .list-poster {
+        &-one {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          & > image {
+            height: 100%;
+            width: 100%;
+          }
+        }
+      }
+
+      .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;
+        }
+
+        &-block {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 100rpx;
+          background: #fff;
+          font-size: 28rpx;
+
+          & > view {
+            flex: 1;
+            text-align: center;
+            cursor: pointer;
+            color:#999;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            & > text {
+              margin-left: 10rpx;
+            }
+          }
+        }
+
+        &-modal {
+          position: relative;
+          height: 1px;
+          width: 100%;
+          z-index: 3;
+        }
+      }
+    }
+
+    .noConfig {
+      line-height: 100rpx;
+      text-align: center;
+      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;
+      font-size: 24rpx;
+      text-align: center;
+      color: #ccc;
+      background-color: rgba(255, 255, 255, .05);
+      margin: 20rpx 0
     }
   }
 </style>