veterans_H5/h5_web/pages/publicCourse/publicCourse.vue

<template>
  <view class="content">
    <view class="content-list">
      <view class="content-list-item" v-for="(item, index) in videoList" :key="index" @click="clickVideo(item)">
        <view class="content-list-item-image">
          <u-image class="image" width="100%" height="224rpx" :src="item.coverUrl" />
          <view class="play-btn">
            <u-image width="70rpx" height="70rpx" src="/static/img/play-video-icon.svg" />
          </view>
        </view>
        <view class="content-list-item-title">
          <text>{{ item.chapterName }}</text>
        </view>
        <view class="content-list-item-subtitle">
          <text>{{ '颂军魂' }}</text>
        </view>
      </view>
    </view>
    <u-loadmore :status="status" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      status: 'loadmore',
      videoList: [],
      page: {
        num: 1,
        size: 10,
        total: 0
      }
    };
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: '颂军魂'
    });
		this.getDict();
  },
  onPullDownRefresh() {
    Object.assign(this, {
      status: 'loadmore',
      videoList: [],
      page: {
        num: 1,
        size: 10,
        total: 0
      }
    });
    setTimeout(() => {
      this.handleVideoList();
      uni.stopPullDownRefresh(); //停止刷新
    }, 1000);
  },
  onReachBottom() {
    if (this.page.num >= this.page.total) return;
    this.status = 'loading';
    this.page.num = ++this.page.num;
    setTimeout(() => {
      this.handleVideoList();
    }, 1500);
  },
  methods: {
    async handleVideoList() {
			const { num, size } = this.page
			const { code, data } = await this.$u.api.publicClasses.getPublicClassesListApi({ id: 1, pageNum: num, pageSize: size });
			if (code === 200) {
				this.videoList = this.videoList.concat(data?.rows ?? [])
				this.page.total = Number(data?.pages ?? 0);
				if (this.page.num >= this.page.total) this.status = 'nomore';
				else this.status = 'loading';
			}
    },
		async getDict() {
			const { code, data } = await this.$u.api.getDictdataUrl({
				key: 'site_type'
			})
			if (code === 200) {
				const type = this.iswap();
				const { text } = data.find((item) => item.label === type);
				if (!location.href.includes(text)) {
					location.href = text;
					return
				}
				this.handleVideoList()
			}
		},
    clickVideo(item) {
      this.$u.route({
        url: '/pages/publicCourse/videoDetails/videoDetails',
				params: {
					chapterName: item.chapterName,
					videoUrl: item.videoUrl
				}
      });
    },
		iswap() {
			var uA = navigator.userAgent.toLowerCase();
			var ipad = uA.match(/ipad/i) == "ipad";
			var iphone = uA.match(/iphone os/i) == "iphone os";
			var midp = uA.match(/midp/i) == "midp";
			var uc7 = uA.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
			var uc = uA.match(/ucweb/i) == "ucweb";
			var android = uA.match(/android/i) == "android";
			var windowsce = uA.match(/windows ce/i) == "windows ce";
			var windowsmd = uA.match(/windows mobile/i) == "windows mobile";
			if (
				!(
					ipad ||
					iphone ||
					midp ||
					uc7 ||
					uc ||
					android ||
					windowsce ||
					windowsmd
				)
			) {
				// PC 端
				return "Pc";
			} else {
				// 移动端
				return "Mobile";
			}
		},
  }
};
</script>

<style lang="scss" scoped>
@import './publicCourse.scss';
</style>