|
@@ -0,0 +1,116 @@
|
|
|
+<template>
|
|
|
+ <view class="body">
|
|
|
+ <view v-for="(item,i) in list" :key="i">
|
|
|
+ <image v-if="item.cover" class="imgStryle"
|
|
|
+ :style=" item.style ? 'width:'+ item.style.w +'px;height:' + item.style.h + 'px' : '' "
|
|
|
+ @load="v=>loadIndex(v,i)" @click="() => tonext(item)" :src="item.cover" mode="scaleToFill" />
|
|
|
+ <swiper @change="e=>change(i + '-' + e.detail.current)" v-if="item.swiper_list && item.swiper_list.length"
|
|
|
+ :indicator-dots="true" :autoplay="autoplay"
|
|
|
+ :style=" item.swiper_list[0].style ? 'height:' + item.swiper_list[0].style.h + 'px' : '' "
|
|
|
+ :interval="3000" :duration="1000">
|
|
|
+ <swiper-item v-for="(v, o) in item.swiper_list" :key="'swiper-item' + i">
|
|
|
+ <video class="imgStryle videos" :id="`${i}-${o}`"
|
|
|
+ :style=" v.style ? 'width:'+ v.style.w +'px;height:' + v.style.h + 'px' : '' " :src="v.url"
|
|
|
+ :autoplay="item.current == o"
|
|
|
+ @loadedmetadata="video_item=>videoLoadIndex(video_item.detail, i, o)" initial-time="0.01"
|
|
|
+ @play="play" @ended="ended" :poster="v.cover" :enable-progress-gesture="false" controls></video>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ ref
|
|
|
+ } from "vue";
|
|
|
+ import config from "../../config/index.js";
|
|
|
+ import {
|
|
|
+ onShareAppMessage,
|
|
|
+ onShareTimeline,
|
|
|
+ onReady
|
|
|
+ } from '@dcloudio/uni-app'
|
|
|
+
|
|
|
+ const info = uni.getSystemInfoSync();
|
|
|
+ const list = ref([]);
|
|
|
+ const autoplay = ref(true);
|
|
|
+ let lastVideoId = undefined;
|
|
|
+ onShareAppMessage(() => {})
|
|
|
+ onShareTimeline(() => {})
|
|
|
+ onReady(() => {
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ uni.request({
|
|
|
+ url: config.base + "home.json?" + Date.now(),
|
|
|
+ success: r => {
|
|
|
+ if (r.statusCode !== 200) return
|
|
|
+ const list_json = r.data.list || [];
|
|
|
+ list.value = list_json;
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ function loadIndex(v, i) {
|
|
|
+ const w = info.windowWidth - 16;
|
|
|
+ const h = v.detail.height / v.detail.width * w;
|
|
|
+ list.value[i].style = {
|
|
|
+ w,
|
|
|
+ h
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ function videoLoadIndex(v, i, o) {
|
|
|
+ const w = info.windowWidth - 16;
|
|
|
+ const h = v.height / v.width * w;
|
|
|
+ list.value[i].swiper_list[o].style = {
|
|
|
+ w,
|
|
|
+ h
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function tonext(T) {
|
|
|
+ T.pageType === "detail" && uni.navigateTo({
|
|
|
+ url: "/pages/brief/brief?title=" + T.subTitle + "&page=" + T.page
|
|
|
+ });
|
|
|
+
|
|
|
+ T.pageType === "single_row" && uni.navigateTo({
|
|
|
+ url: "/pages/single_row/single_row?title=" + T.title + "&url=" + T.headCover + "&page=" + T.page
|
|
|
+ })
|
|
|
+
|
|
|
+ T.pageType === "single_list" && uni.navigateTo({
|
|
|
+ url: "/pages/single_list/single_list?title=" + T.title + "&url=" + T.headCover + "&page=" + T.page
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ function play(e) {
|
|
|
+ autoplay.value = false;
|
|
|
+ if (e.currentTarget.id === lastVideoId || !lastVideoId) {
|
|
|
+ lastVideoId = e.currentTarget.id
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const oldVideo = wx.createVideoContext(lastVideoId, this);
|
|
|
+ oldVideo.pause();
|
|
|
+ lastVideoId = e.currentTarget.id
|
|
|
+ }
|
|
|
+
|
|
|
+ function ended() {
|
|
|
+ autoplay.value = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ function change(id) {
|
|
|
+ if (!wx || !id || lastVideoId === id) return
|
|
|
+ const nowVideo = wx.createVideoContext(id, this);
|
|
|
+ nowVideo.play();
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .body {
|
|
|
+ padding: 1em 0;
|
|
|
+
|
|
|
+ .imgStryle {
|
|
|
+ margin: 2px 8px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|