hlm_pl_mall_h5/pages/member/live/LiveList.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-base :show="false"><view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view-wrapper div container">
        <view class="div common-header-wrap">
            <view class="status-holder"></view>
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar title="直播" class="common-header" left-icon="back" @clickLeft="goBack()">
            </uni-nav-bar>
        </view>
        </view>
        <view class="div header-back">
            <view class="div header-search">
                <text class="i iconfont">&#xe629;</text><input v-model="keyword" placeholder="试试搜商品/主播" @confirm="confirm" />
            </view>
            <view v-if="gc_list" class="div header-class">
                <view class="div gc-item" :class="{'active':gc_id==0}" @click="setGoodsClassId(0)">全部</view>
                <view v-bind:key="gc.gc_id" v-for="gc in gc_list" :class="{'active':gc_id==gc.gc_id}" @click="setGoodsClassId(gc.gc_id)" class="div gc-item">{{gc.gc_name}}</view>
            </view>
        </view>
        <view class="div header-back2"></view>
        <view class="div header-holder"></view>
        <view class="scroll-view div" style="position:relative">
        <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div flex-wrapper" @scrolltolower="loadMore" scroll-y="true">
            <view class="div live-list" v-if="liveList && liveList.length">
                <view class="div live-item" v-for='(item,index) in liveList' @click="goLiveDetail(item)" v-bind:key="index">
                    <view class="div live-cover" v-if="config.live_type == 1">
                        <image mode="aspectFit" class="img" :style="getBannerStyle" :src="item.minipro_live_image_url">
                    </view>
                    <view class="div live-cover" v-else>
                        <video :style="getBannerStyle" v-if="item.live_apply_cover_video" :src="item.live_apply_cover_video_url" muted="muted" autoplay="autoplay" loop="loop" />
                        <image mode="aspectFit" class="img" :style="getBannerStyle" v-else :src="item.live_apply_cover_image_url">
                    </view>
                    <view class="div live-info">
                        <view class="div live-name" v-if="config.live_type == 1">{{item.minipro_live_name}}</view>
                        <view class="div live-name" v-else>{{item.live_apply_name}}</view>
                        <view class="div store-info">
                            <view class="div left">
                                <image mode="aspectFit" class="img store-avatar" :src="item.store_avatar">
                            </view>
                            <view class="div right">
                                <view class="div store-name">{{item.store_name}}</view>
                                <view class="div area-info">{{item.area_info}}</view>
                            </view>
                        </view>
                        <view class="div goods-list" v-if="item.goods_list">
                            <view class="div goods-item goods-item-1">
                                <view class="div goods-back" v-if="item.goods_list[0]">
                                    <image mode="aspectFit" class="img" :src="item.goods_list[0].goods_image"/>
                                    <view class="div goods-price">￥{{item.goods_list[0].goods_price}}</view>
                                </view>
                            </view>
                            <view class="div goods-item goods-item-2">
                                <view class="div goods-back" v-if="item.goods_list[1]">
                                    <image mode="aspectFit" class="img" :src="item.goods_list[1].goods_image"/>
                                    <view v-if="item.goods_count<=2" class="div goods-price">￥{{item.goods_list[1].goods_price}}</view>
                                    <view v-else class="div goods-more">
                                        <view class="div goods-text-list">
                                            <view class="div goods-text">{{item.goods_count-1}}</view>
                                            <view class="div goods-text">宝贝</view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="div goods-class" v-if="item.gc_name"><view class="div goods-class-item">#{{item.gc_name}}</view></view>
                    </view>
                </view>
            </view>
            <empty-record v-if='liveList && !liveList.length'></empty-record>
        </scroll-view>
        </view>
    </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import MemberBase from '../MemberBase'
import EmptyRecord from '../../EmptyRecord'
import { mapState, mapActions } from 'vuex'
import { getLiveList, getMiniproLiveList } from '../../../api/memberLive'
export default {
  name: 'LiveList',
  components:{
    TitleHeader,
    MemberBase,
    EmptyRecord
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  data(){
    return {
      navHeight: 0,
      gc_list: false,
      keyword: '',
      gc_id: '', // 文章分类ID
      liveList: false,
      params: { 'page': 0, 'per_page': 10 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
    }
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      config: state => state.config.config
    }),
    getBannerStyle: function () {
      const res = uni.getSystemInfoSync()
      var width = res.windowWidth
      var height = res.windowHeight
      let itemWidth = width / 2
      return "width:"+itemWidth +"px;height:"+itemWidth +"px"
    }
  },
  onLoad: function (option) {
    this.gc_id=option.gc_id ? option.gc_id : ''
    this.fetchConfig()

    this.loadMore()
  },
  methods:{
    goBack(){uni.navigateBack({delta:1})},
    ...mapActions({
      fetchConfig: 'fetchConfig'
    }),
    loadMore () {
      if (this.loading) {
        return
      }
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.getLiveList(true)
      }
    },
    setGoodsClassId (gc_id) {
      this.gc_id = gc_id
      this.reload()
    },
    confirm () {
      this.reload()
    },
    reload () {
      // 重新加载数据
      this.params.page = 0
      this.isMore = true
      this.loading = false
      this.liveList = []
      this.loadMore()
    },
    getLiveList () {
      uni.showLoading({ title: '加载中' })
      if (this.config.live_type == 1) {
        getMiniproLiveList(Object.assign({ gc_id: this.gc_id, keyword: this.keyword }, this.params)).then(res => {
          uni.hideLoading()
          if (res.result.hasmore) {
            this.isMore = true
          } else {
            this.isMore = false
          }

          if (this.liveList) {
            this.liveList = this.liveList.concat(res.result.minipro_live_list)
          } else {
            this.liveList = res.result.minipro_live_list
          }
          if (!this.gc_list) {
            this.gc_list = res.result.goodsclass_list
          }
        }).catch(error => {
          uni.hideLoading()
          uni.showToast({icon:'none',title: error.message})
        })
      } else {
        getLiveList(Object.assign({ gc_id: this.gc_id, keyword: this.keyword }, this.params)).then(res => {
          uni.hideLoading()
          if (res.result.hasmore) {
            this.isMore = true
          } else {
            this.isMore = false
          }

          if (this.liveList) {
            this.liveList = this.liveList.concat(res.result.live_apply_list)
          } else {
            this.liveList = res.result.live_apply_list
          }
          if (!this.gc_list) {
            this.gc_list = res.result.goodsclass_list
          }
        }).catch(error => {
          uni.hideLoading()
          uni.showToast({icon:'none',title: error.message})
        })
      }
    },
    goLiveDetail (item) {
      if (this.config.live_type == 1) {
        // #ifndef  MP-WEIXIN
          uni.showToast({icon:'none',title: '请在小程序中打开'})
          return
        // #endif

          wx.navigateTo({ url: 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + item.minipro_live_room_id })
      } else {
        uni.navigateTo({ url: '/pages/member/live/LiveDetail'+'?'+urlencode( { 'live_apply_id': item.live_apply_id } )})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    .scroll-view-wrapper{display: flex;flex-direction: column;}
    .scroll-view{flex:1}
    .common-header-wrap .common-header{border-bottom: 0;background: $primaryColor;color:#fff;box-shadow: unset}
    .header-back2{
        height: 5rem;background:$primaryColor;position: fixed;z-index: 1;width: 100%;top:5rem;
    }
    .header-holder{height: 4.5rem;}
    .header-back{
        height: 4.5rem;
        background:$primaryColor;
        position: fixed;
        width: 100%;
        z-index: 3;
    }
    .header-search{margin:0 0.8rem;position: relative;
        input{width: 100%;height: 1.5rem;line-height: 1.5rem;background: rgba(255,255,255,.2);border-radius:1.5rem;text-indent: 1.5rem;border:0;color:#fff;font-size:$subFontSize;}
        input::-webkit-input-placeholder{color: #f7d8d8}
        .i{position: absolute;color:#f7d8d8;display:block;width:1.5rem;line-height: 1.5rem;text-align: center;}
    }
    .header-class{position:relative;height:1.5rem;white-space: nowrap;overflow: hidden;overflow-x: auto;margin-top:.8rem;font-size:$subFontSize;color:#f7d8d8;padding:0 .4rem;
        .gc-item{display: inline-block;margin:0 .4rem;}
        .gc-item.active{color:#fff;position: relative;
            &::after{content:' ';position: absolute;bottom: -.4rem;width:1rem;height: 3px;background: #fff;border-radius: 3px;left:50%;margin-left:-.5rem;}
        }
    }
    .flex-wrapper{margin:0 .8rem;position: relative;z-index: 2;
        .live-item{border-radius:1rem;background: #fff;margin-bottom:.8rem;overflow:hidden;
            display: flex;
            .live-cover{
                background: #000;font-size: 0;
            }
            .live-info{flex:1;
                .live-name{padding:0 .4rem;font-size:$h2;margin:.8rem 0;font-weight: 700}
                .store-info{padding:0 .4rem;display: flex;
                    .store-avatar{width:1.5rem;height: 1.5rem;border-radius: 1.5rem}
                    .right{flex:1;
                        .store-name{font-size:$subFontSize;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
                        .area-info{font-size:$fontSize;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color:#666}
                    }
                }
            }
            .goods-list{padding:0 .4rem;overflow: hidden}
            .goods-item{width:50%;height: 0;padding-bottom:50%;float: left;position: relative;
                .goods-back{position: absolute;top:0.2rem;left:0.2rem;right:0.2rem;bottom:0.2rem;border-radius: .2rem;overflow: hidden;
                    .img{position: absolute;width:100%;height: 100%;}
                }
                .goods-price{position: absolute;bottom:0;let:.4rem;color:#fff;font-size:$subFontSize}
                .goods-more{width:100%;height: 100%;background: rgba(0,0,0,.5);font-size:$subFontSize;color:#fff;position: absolute;text-align: center}
                .goods-text{line-height: 1rem}
                .goods-text-list{position: relative;top:50%;margin-top:-1rem;}
            }
            .goods-item-1{}
            .goods-item-2{}
            .goods-class{padding:0 .4rem}
            .goods-class-item{font-size:$fontSize;line-height: 1rem;padding:0 .4rem;background: #fff2e2;display: inline-block;border-radius: .2rem;color:#ce7303}
        }
    }
</style>