jufubao-movie 1.0.36-beta1 → 1.0.36-beta3

package/src/components/JfbMovieTfkFilmList/JfbMovieTfkFilmList.vue

@@ -14,87 +14,633 @@
     </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="handleClick(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-->
+        <!--film hot|rightnow-->
+        <view
+          v-if="type === 'hot' || type === 'rightnow'"
+          class="list-cont"
+          :style="{marginTop:outSpacing + 'rpx'}"
+        >
+          <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 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>区域筛选</text>
+            </view>
+            <view @click="handleFilterTab('sort')">
+              <xd-font-icon icon="iconshaixuanbiaoji_mian" size="28" color="#999"></xd-font-icon>
+              <text>排序</text>
+            </view>
+          </view>
+          <view class="list-filter-modal" v-if="curQueryTab">
+            <xd-query-sort
+              :sort="sort"
+              v-show="curQueryTab === 'sort'"
+              @onConfirm="handleQuerySort"
+            ></xd-query-sort>
+            <xd-query-filter
+              v-if="cinemaAreaList !== null"
+              v-show="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>
+        <!--cinema-->
+      </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 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";
+
   export default {
     name: "JfbMovieTfkFilmList",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      ContentItem,
+      XdSwiperDot,
+      ContentCinema,
+      XdQuerySort,
+      XdQueryFilter
     },
     mixins: [
       componentsMixins, extsMixins, JfbMovieTfkFilmListMixin
     ],
     data() {
       return {
+        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: '20',
+        total: null,
+        isFirstLoadingData: false,
+        dataList:null,
+        cinemaOrgDataList:null,
+        cinemaAreaList:null,
+
+        //filter
+        showQueryModal:false,
+        curQueryTab:'filter',
+        sort:'sort',
+
+        //广告
+        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'
 
-        //todo
       }
+    },
+    computed:{
+      ...mapState({
+        stateCity: state => state.cityLocation.city
+      }),
+
+      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.getList();
+        }
+      },
+      showTypeListData(){
+        if(this.type === '') return;
+        this.dataList = null;
+        this.pageToken = '1';
+        this.getList();
+      },
     },
     created() {
+      this.isPreview = this.$configProject.isPreview;
+      this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
       this.init(this.container);
-
-      //todo
     },
     methods: {
-      onJfbLoad(options) {
+      //影片列表
+      handleFilmDetail(film_id){
+        if( this.isPreview) return;
+        this.$xdUniHelper.navigateTo({
+          url: this.fimeDetailPath + `?film_id=${film_id}`
+        })
+      },
+      handleBuy(film_id){
+        if( this.isPreview) return;
+        this.$xdUniHelper.navigateTo({
+          url: this.buyPath + `?film_id=${film_id}`
+        })
+      },
+      //影片列表
+      //影院列表
+      handleSchedule(item){
+        debugger
+      },
+      handleCodeDetail(item){
+        debugger
+      },
+      handleCashierDetail(item){
+        debugger
+      },
+      handleQuerySort(sortData){
+        console.log("handleQuerySort", sortData);
+        setTimeout(()=>{
+          this.curQueryTab = '';
+        },500)
+
+      },
+      handleFilterTab(tab){
+        if(tab === this.curQueryTab ) {
+          this.curQueryTab = ''
+        }
+        else this.curQueryTab = tab
+      },
+      handleQueryFilter(sortData){
+        console.log("handleQueryFilter", sortData);
+        setTimeout(()=>{
+          this.curQueryTab = '';
+        },500)
+
+      },
+      handleClose(){
+        this.curQueryTab = '';
+      },
+      //影院列表
+
+
 
-        // jfbRootExec('baiduUserLogin', {
+      handleClick(){
 
-        //   vm: this,//   data: {
+      },
+      handleAnimationfinish(e){
+        this.current = e.detail.current;
+      },
+      getCinemaOrgData(){
+        this.dataList = (this.dataList||[]).concat(this.$xdUniHelper.getLocalPaginationData(
+          this.cinemaOrgDataList, this.pageToken, this.pageSize
+        ));
+      },
+      handleTab(value){
+        if(value === this.type) return;
+        this.type = value;
+        this.dataList = null;
+        this.pageToken = '1';
+        this.getList();
+      },
 
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
+      getList(){
+        let fName = 'getTFKRecFilmHotList';
+        if(this.type === 'rightnow') fName = 'getTFKRecFilmRightnowList';
+        if(this.type === 'list') fName = 'getTFKCinemaList';
 
-        //   }
+        if(this.isFirstLoadingData) this.$xdShowLoading({});
+        if(!this.isFirstLoadingData){
+          this.isFirstLoadingData = true;
+        }
 
-        // }).then().catch()
+        jfbRootExec(fName, {
+          vm: this,
+          data: {
+            city_code: this.stateCity.city_code,
+            type: this.type,
+            page_token: this.pageToken,
+            page_size: this.pageSize
+          }
+        }).then(res => {
+          //影片列表处理
+          if(this.type === 'rightnow' || this.type==='hot'){
+            this.dataList = (this.dataList||[]).concat(res['list']);
+          }
+          //影院列表处理
+          if(this.type === 'list') {
+            this.cinemaOrgDataList = res['list'];
+            this.cinemaAreaList = res['area_list'];
+            this.getCinemaOrgData();
+          }
+          if(this.isFirstLoadingData) this.$xdHideLoading({});
+        }).catch(e=>{
+          console.error(e);
+          this.$xdHideLoading({});
+        })
       },
+
+      onJfbLoad(options) {
+        this.options = options;
+
+        jfbRootExec('getTFKPosterContent', {
+          vm: this,
+          data: {
+            page_id: this.pageAttr['page_id'], //页面ID
+            container_id: this.containerId, //组件ID
+            page_size: this.posterNum //可以不传
+          },
+        })
+          .then(res => {
+            this.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):''
+              }
+            });
+          })
+          .catch(err=>{
+            console.error(err);
+          })
+
+      },
+
       /**
        * @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);
+        //控制标签显示
+        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.showTypeList();
+
+        this.poster = getContainerPropsValue(container, 'content.poster',{});
+        this.posterNum = getContainerPropsValue(container, 'content.posterNum',1);
       },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
+      showTypeList(){
+        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(list.length > 0) this.type = list[0].value;
+        else this.type = '';
+        this.showTypeListData = list;
       },
+
       onJfbReachBottom(options) {
         console.log('event.onJfbReachBottom', options)
       },
+
       onJfbShow(options) {
-        console.log('event.onJfbShow', options)
+        this.getList()
       },
       onJfbHide(options) {
         console.log('event.onJfbHide', options)
       },
       onJfbBack(options) {
-        console.log('event.onJfbBack', options)
-      },
-      onJfbUpdate(...data) {
-        console.log('event.onJfbUpdate', data)
+        if(this.isList === 'Y') {
+          this.$xdUniHelper.navigateBack();
+        }
       },
-      onJfbCustomEvent(options) {
-        console.log('event.onJfbReachBottom', options)
+      //重新回去广告位置工
+      onJfbUpdate() {
+        this.onJfbLoad(this.options)
       },
+
     }
   }
 
@@ -105,7 +651,190 @@
 
   .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;
+        .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;
+
+          & > 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;
     }
   }
 </style>