Init project

pages/VideoPlayBackList/VideoPlayBackDetail.vue

@@ -0,0 +1,47 @@
+<template>
+  <view class="">
+	  <video class="video" :show-fullscreen-btn="false" id="myVideo" autoplay :src="curPlayVideoUrl" @error="videoErrorCallback" controls></video>
+  </view>
+</template>
+<script>
+import uniPopup from '@/components/uni-popup/uni-popup.vue';
+export default {
+  
+  components:{
+	  uniPopup
+  },
+  data() {
+  	return {
+  		curPlayVideoUrl:'',
+  		isVideoPopupShow:false
+  	}
+  },
+  onReady: function(res) {
+	 this.videoContext = uni.createVideoContext('myVideo');
+	 this.videoContext.requestFullScreen();
+  },
+  onLoad:function(e){
+  	
+	this.curPlayVideoUrl = e.videoUrl;
+	//this.$refs.popup.open();
+
+  },
+  methods: {
+  	videoErrorCallback: function(e) {
+  		uni.showModal({
+  			content: e.target.errMsg,
+  			showCancel: false
+  		})
+  	}
+  }
+};
+</script>
+
+<style scoped>
+
+.video{
+	height: 100vh;
+	width: 100vw;
+}
+
+</style>

pages/VideoPlayBackList/VideoPlayBackList.vue

@@ -0,0 +1,175 @@
+<template>
+  <view>
+    <view class="type-list flex ai-center">
+      <view class="item" :class="{'active':type===item.value}" v-for="(item,index) in typeList" :key="index"
+            @click="changeType(item)">{{ item.label }}
+      </view>
+    </view>
+
+    <view class="list" v-if="list.length">
+      <custom-waterfalls-flow :value="list" imageKey="cover">
+        <view class="item" v-for="(item,index) in list" :key="index" slot="slot{{index}}" @click="goDetail(item)">
+          <image class="cover" :src="item.cover" mode="widthFix"></image>
+          <view class="content">
+            <view class="title more-t">{{ item.title }}</view>
+            <view class="footer flex jc-between ai-center">
+              <view class="visit flex ai-center">
+                <image class="icon" style="margin-right: 8rpx" :src="item.storeLogo" mode="scaleToFill"></image>
+                {{ item.storeName }}
+              </view>
+              <image class="icon flex-0" :src="webUrl+'/20210806121203835373.png'" mode="scaleToFill"></image>
+            </view>
+          </view>
+        </view>
+      </custom-waterfalls-flow>
+    </view>
+
+    <view class="v4-nodata" v-else>
+      <image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
+      <view class="text">暂无数据</view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {getStoreVideoType, getArticleList} from "@/api/public";
+import {getVideoList} from "@/api/user";
+
+export default {
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      typeList: [{"label": "全部", "value": ""}],
+      type: "",
+      page: 1,
+      limit: 10,
+      keyword: "",
+      list: [],
+      isWait: false
+    }
+  },
+  onLoad() {
+    this.getType();
+    this.fetchList();
+  },
+  onReachBottom() {
+    this.page++;
+    this.fetchList();
+  },
+  methods: {
+    getType() {
+      getStoreVideoType().then(({data}) => {
+        if (data.length > 0) {
+          data.forEach(item => {
+            this.typeList.push(item);
+          })
+        }
+      });
+    },
+
+    changeType(item) {
+      this.type = item.value;
+      this.page = 1;
+      this.list = [];
+      this.fetchList();
+    },
+
+    fetchList() {
+      if (this.isWait) return;
+      this.isWait = true;
+
+      let params = {
+        type: this.type,
+        page: this.page,
+        limit: this.limit
+      };
+
+      getVideoList(params).then(res => {
+        if (res.status === 200) {
+          for (let i = 0; i < res.data.length; i++) {
+            res.data[i].hide = true;
+            this.list.push(res.data[i])
+          }
+        }
+        this.isWait = false;
+      });
+    },
+
+    goDetail(item) {
+      this.$yrouter.push("/pages/VideoPlayBackList/VideoPlayBackDetail?videoUrl=" + item.video);
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.type-list {
+  margin: 28rpx 32rpx;
+
+  .item {
+    margin-right: 20rpx;
+    padding: 12rpx 16rpx;
+    border-radius: 20rpx;
+    background: #fff;
+    font-size: 26rpx;
+  }
+
+  .active {
+    background: #f66;
+    color: #fff;
+  }
+}
+
+.list {
+  margin: 28rpx 32rpx;
+
+  .item {
+    border-radius: 4rpx;
+    background: #fff;
+
+    .cover {
+      width: 332rpx;
+      //height: 200rpx;
+      vertical-align: middle;
+    }
+
+    .title {
+      padding: 12rpx 16rpx;
+      font-size: 26rpx;
+      font-weight: bold;
+      line-height: 38rpx;
+      color: #333;
+    }
+
+    .mark {
+      margin: 14rpx 16rpx;
+      font-size: 22rpx;
+      line-height: 32rpx;
+      color: #999;
+    }
+
+    .footer {
+      padding: 12rpx 16rpx 16rpx;
+      border-top: 1rpx solid #E1E1E1;
+      font-size: 22rpx;
+    }
+
+    .icon {
+      width: 40rpx;
+      height: 40rpx;
+      vertical-align: middle;
+      border-radius: 50%;
+    }
+
+    .visit {
+      width: 100%;
+      color: #333;
+      overflow: hidden;
+    }
+
+    .time {
+      color: #999;
+    }
+  }
+}
+</style>