shangmenanmo/additionalvue/live/index.vue

<template>
  <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption"
    @up="upCallback">
    <view class="live-room-list">
      <view v-for="(item, index) in list.data" :key="index" @click="onTargetLiveRoom(item.room_id)"
        :class="[`live-room-item live-status__${item.live_status}`]">
        <!-- 直播状态 -->
        <view class="room-head dis-flex flex-y-center">
          <!-- 直播中 -->
          <text v-if="item.live_status == 101" class="live-status_icon iconfont icon-zhibozhong"></text>
          <!-- 未开播 -->
          <text v-if="item.live_status == 102" class="live-status_icon iconfont icon-shijian-s"></text>
          <!-- 已结束 -->
          <text v-if="item.live_status >= 103" class="live-status_icon iconfont icon-shipin"></text>
          <!-- 状态说明 -->
          <text class="live-status_text">{{ item.live_status_text_1 }}</text>
        </view>
        <!-- 房间名称 -->
        <view class="room-name oneline-hide">
          <text>{{ item.room_name }}</text>
        </view>
        <!-- 房间封面 -->
        <view class="room-cover">
          <image class="image" :src="item.share_img" mode="aspectFill"></image>
        </view>
        <!-- 主播信息 -->
        <view class="room-anchor dis-flex">
          <view class="lay-left flex-box dis-flex flex-y-center">
            <!-- 主播头像 -->
            <!-- mix: 微信api未提供主播头像, 此处显示封面图 -->
            <view class="anchor-avatar">
              <image class="image" :src="item.share_img" mode="aspectFill"></image>
            </view>
            <!-- 主播昵称 -->
            <view class="anchor-name">
              <text>{{ item.anchor_name }}</text>
            </view>
          </view>
          <view class="lay-right">
            <text class="live-status_text2">{{ item.live_status_text_2 }}</text>
          </view>
        </view>
      </view>
    </view>
  </mescroll-body>
</template>

<script>
  import WxofficialMixin from '@/core/mixins/wxofficial'
  import { getEmptyPaginateObj, getMoreListData, getShareParams } from '@/core/app'
  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
  import { formatDate, dateFormat } from '@/utils/util'
  import * as Api from '@/api/live/room'

  const pageSize = 15

  export default {
    mixins: [MescrollMixin, WxofficialMixin],
    data() {
      return {
        // 上拉加载配置
        upOption: {
          // 首次自动执行
          auto: true,
          // 每页数据的数量; 默认10
          page: { size: pageSize },
          // 数量要大于3条才显示无更多数据
          noMoreSize: 3,
        },
        // 直播间列表
        list: getEmptyPaginateObj()
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 获取直播间列表
      this.getLiveRoomList()
      // 设置微信公众号链接分享卡片内容
      this.setWxofficialShareData()
    },

    methods: {

      /**
       * 上拉加载的回调 (页面初始化时也会执行一次)
       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
       * @param {Object} page
       */
      upCallback(page) {
        const app = this
        // 设置列表数据
        app.getLiveRoomList(page.num)
          .then(list => {
            const curPageLen = list.data.length
            const totalSize = list.data.total
            app.mescroll.endBySize(curPageLen, totalSize)
          })
          .catch(() => app.mescroll.endErr())
      },

      /**
       * 获取直播间列表
       * @param {Number} pageNo 页码
       */
      getLiveRoomList(pageNo = 1) {
        const app = this
        return new Promise((resolve, reject) => {
          Api.list({ page: pageNo }, { load: false })
            .then(result => {
              // 合并新数据
              const newList = result.data.list
              app.list.data = getMoreListData(newList, app.list, pageNo)
              resolve(newList)
            })
            .catch(reject)
        })
      },

      // 进入直播间
      onTargetLiveRoom(roomId) {
        const { platform, $toast } = this
        if (platform !== 'MP-WEIXIN') {
          $toast('很抱歉，直播间仅支持微信小程序，请前往微信小程序端')
          return
        }
        const customParams = getShareParams({
          path: 'pages/index/index'
        })
        wx.navigateTo({
          url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}`
        })
      },

      // 设置微信公众号链接分享卡片内容
      setWxofficialShareData() {
        this.updateShareCardData({ title: '直播列表' })
      },

    },

    /**
     * 分享当前页面
     */
    onShareAppMessage() {
      return {
        title: '直播列表',
        path: "/pages/live/index?" + this.$getShareUrlParams()
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      return {
        title: '直播列表',
        path: "/pages/live/index?" + this.$getShareUrlParams()
      }
    }

  }
</script>

<style lang="scss" scoped>
  .live-room-item {
    width: 710rpx;
    margin: 0 auto 20rpx auto;
    padding: 25rpx 24rpx;
    background: #fff;
    border-radius: 5rpx;
    box-sizing: border-box;
    box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.05);

    &:first-child {
      margin-top: 20rpx;
    }
  }

  .room-head {
    color: #b6b6b6;
    line-height: 40rpx;

    .live-status_icon {
      margin-right: 15rpx;
      font-size: 34rpx;
    }

    .live-status_text {
      font-size: 26rpx;
    }

  }

  // 直播中
  .live-status__101 .room-head {
    color: #db384b;
  }

  .live-status__102 .room-head {
    color: #db384b;
  }

  // 房间名称
  .room-name {
    margin-top: 10rpx;
    font-size: 28rpx;
  }

  // 房间封面图
  .room-cover {
    margin-top: 15rpx;

    .image {
      display: block;
      width: 100%;
      height: 371rpx;
    }
  }

  // 主播信息
  .room-anchor {
    margin-top: 20rpx;

    .anchor-avatar {
      margin-right: 12rpx;

      .image {
        display: block;
        width: 45rpx;
        height: 45rpx;
        border-radius: 50%;
      }

    }

    .anchor-name {
      font-size: 26rpx;
    }

  }


  .live-status_text2 {
    color: #b6b6b6;
    font-size: 26rpx;
  }

  // 直播中
  .live-status__101 .live-status_text2 {
    color: #db384b;
  }

  .live-status__102 .live-status_text2 {
    color: #db384b;
  }
</style>