From 5491d53c7a863935c3079c37f08fbb27d257d8e5 Mon Sep 17 00:00:00 2001
From: huliyong <2783385703@qq.com>
Date: Thu, 19 Dec 2024 17:35:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/list/videoList - 副本.vue | 189 +++++++++++++++++++++++++++++++++
 components/list/videoList.vue          |  65 +++++++-----
 pages/index/index.vue                  |   4 +-
 3 files changed, 233 insertions(+), 25 deletions(-)
 create mode 100644 components/list/videoList - 副本.vue

diff --git a/components/list/videoList - 副本.vue b/components/list/videoList - 副本.vue
new file mode 100644
index 0000000..8b083e1
--- /dev/null
+++ b/components/list/videoList - 副本.vue	
@@ -0,0 +1,189 @@
+<template>
+	<scroll-view 
+	scroll-y="true" 
+	:style="{height: height}"
+	@scrolltolower="loadMoreData">
+		<view class="videoList">
+			<view class="video-item" v-for="(item, index) in list" :key="index"
+			>
+				<view class="image" @click="showVideo(item, index)">
+					<image :src="item.travelVideo.videoImage" mode="aspectFill">
+					</image>
+					<view class="icon">
+						<uv-icon size="35rpx" name="play-right-fill">
+						</uv-icon>
+					</view>
+				</view>
+				<view class="bottom">
+					<view class="headImage">
+						<!-- <image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill">
+						</image> -->
+						{{ item.travelVideo.videoTitle }}
+					</view>
+					<view class="like"
+					@click="addThumpup(item.travelVideo.id)">
+					<uv-icon size="45rpx" color="#FF4340" v-if="item.thumpupFlag" name="heart-fill"></uv-icon>
+						<uv-icon size="45rpx" v-else name="heart"></uv-icon>
+						{{ item.travelVideo.videoThumpup }}
+					</view>
+				</view>
+			</view>
+		</view>
+	</scroll-view>
+</template>
+
+<script>
+import index from '../../uni_modules/uv-ui-tools'
+	export default {
+		props : {
+			height : {
+				default : 'auto'
+			},
+			roleId : {
+			}
+		},
+		data() {
+			return {
+				queryParams: {
+					pageNo: 1,
+					pageSize: 10,
+				},
+				total : 0,
+				list : [],
+			}
+		},
+		methods: {
+			showVideo(item, current){
+				// this.$utils.hanldePreview
+				
+				// uni.previewMedia({
+				// 	current : item.videoContent
+				// })
+				
+				let sources = []
+				
+				this.list.forEach(n => {
+					sources.push({
+						url : n.travelVideo.videoContent,
+						type : 'video'
+					})
+				})
+				
+				wx.previewMedia({
+					sources, // 需要预览的资源列表
+					current, // 当前显示的资源序号
+					// url: url // 当前预览资源的url链接
+				})
+			},
+			queryVideoList(){
+				
+				if(this.roleId){
+					this.queryParams.roleInfoId = this.roleId
+				}
+				
+				if(uni.getStorageSync('token')){
+					this.queryParams.token = uni.getStorageSync('token')
+				}
+				
+				this.$api('queryVedioById', this.queryParams, res => {
+					if(res.code == 200){
+						this.list = res.result
+						// this.total = res.result.total
+					}
+				})
+			},
+			loadMoreData(){
+				if(this.queryParams.pageSize <= this.list.length){
+					this.queryParams.pageSize += 10
+					this.queryVideoList()
+				}
+			},
+			addThumpup(videoId){
+				this.$api('addThumpup', {
+					videoId
+				}, res => {
+					if(res.code == 200){
+						this.queryVideoList()
+						uni.showToast({
+							title: res.message,
+							icon: 'none'
+						})
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.videoList {
+		display: flex;
+		flex-wrap: wrap;
+
+		.video-item {
+			margin: 20rpx;
+			width: 335rpx;
+
+			.image {
+				position: relative;
+				width: 100%;
+				height: 420rpx;
+				border-radius: 30rpx;
+				overflow: hidden;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+
+				.icon {
+					position: absolute;
+					right: 30rpx;
+					top: 30rpx;
+					width: 60rpx;
+					height: 60rpx;
+					background-color: #ffffffaa;
+					border-radius: 50%;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+			}
+
+			.bottom {
+				padding: 10rpx 0;
+				font-size: 22rpx;
+				display: flex;
+				justify-content: space-between;
+
+				.headImage {
+					display: flex;
+					align-items: center;
+
+					image {
+						width: 50rpx;
+						height: 50rpx;
+						border-radius: 50%;
+						margin-right: 6rpx;
+					}
+				}
+
+				.like {
+					display: flex;
+					align-items: center;
+				}
+			}
+		}
+		.showVideo{
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100%;
+			width: 1000%;
+			video{
+				// width: 100%;
+				// height: 100%;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/components/list/videoList.vue b/components/list/videoList.vue
index 8b083e1..fc64ffe 100644
--- a/components/list/videoList.vue
+++ b/components/list/videoList.vue
@@ -4,27 +4,27 @@
 	:style="{height: height}"
 	@scrolltolower="loadMoreData">
 		<view class="videoList">
-			<view class="video-item" v-for="(item, index) in list" :key="index"
+			<view class="video-item" v-for="(item, index) in spotListWord" :key="index"
 			>
 				<view class="image" @click="showVideo(item, index)">
-					<image :src="item.travelVideo.videoImage" mode="aspectFill">
+					<image :src="item.spotImage" mode="aspectFill">
 					</image>
-					<view class="icon">
-						<uv-icon size="35rpx" name="play-right-fill">
-						</uv-icon>
-					</view>
 				</view>
 				<view class="bottom">
 					<view class="headImage">
-						<!-- <image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill">
-						</image> -->
-						{{ item.travelVideo.videoTitle }}
+						{{ item.spotName }}
 					</view>
-					<view class="like"
-					@click="addThumpup(item.travelVideo.id)">
-					<uv-icon size="45rpx" color="#FF4340" v-if="item.thumpupFlag" name="heart-fill"></uv-icon>
-						<uv-icon size="45rpx" v-else name="heart"></uv-icon>
-						{{ item.travelVideo.videoThumpup }}
+					
+					<view class="like">
+						<view class="">
+							查看详情
+						</view>
+						
+						<view class=""
+						style="margin-top: 10rpx;">
+							<uv-icon size="30rpx"
+							name="arrow-right"></uv-icon>
+						</view>
 					</view>
 				</view>
 			</view>
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import index from '../../uni_modules/uv-ui-tools'
+	import { mapState } from 'vuex'
 	export default {
 		props : {
 			height : {
@@ -52,6 +52,12 @@ import index from '../../uni_modules/uv-ui-tools'
 				list : [],
 			}
 		},
+		computed : {
+			...mapState(['spotList']),
+			spotListWord(){
+				return this.spotList.filter(n => n.categoryId == 0)
+			},
+		},
 		methods: {
 			showVideo(item, current){
 				// this.$utils.hanldePreview
@@ -60,6 +66,10 @@ import index from '../../uni_modules/uv-ui-tools'
 				// 	current : item.videoContent
 				// })
 				
+				this.$utils.navigateTo(`/pages_order/service/articleDetail?id=${item.id}&type=Inheritance`)
+				
+				return
+				
 				let sources = []
 				
 				this.list.forEach(n => {
@@ -117,23 +127,20 @@ import index from '../../uni_modules/uv-ui-tools'
 
 <style scoped lang="scss">
 	.videoList {
-		display: flex;
-		flex-wrap: wrap;
-
 		.video-item {
 			margin: 20rpx;
-			width: 335rpx;
-
+			background-color: #fff;
+			position: relative;
 			.image {
 				position: relative;
 				width: 100%;
 				height: 420rpx;
-				border-radius: 30rpx;
 				overflow: hidden;
 
 				image {
 					width: 100%;
-					height: 100%;
+					height: 420rpx;
+					border-radius: 30rpx;
 				}
 
 				.icon {
@@ -151,10 +158,17 @@ import index from '../../uni_modules/uv-ui-tools'
 			}
 
 			.bottom {
-				padding: 10rpx 0;
-				font-size: 22rpx;
+				font-size: 30rpx;
 				display: flex;
 				justify-content: space-between;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				background-color: #ffffffaa;
+				width: calc(100% - 40rpx);
+				padding: 30rpx;
+				font-weight: 900;
+				align-items: center;
 
 				.headImage {
 					display: flex;
@@ -171,6 +185,9 @@ import index from '../../uni_modules/uv-ui-tools'
 				.like {
 					display: flex;
 					align-items: center;
+					justify-content: center;
+					font-weight: 500;
+					font-size: 26rpx;
 				}
 			}
 		}
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 1b1e0c5..84dde7e 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -36,8 +36,10 @@
 			</view>
 			
 			<view class="video-title">
-				视频中的景徳镇
+				<!-- 视频中的景徳镇 -->
+				景徳镇的景点
 			</view>
+			
 			<videoList ref="videoList"/>
 			
 		</view>