From 8274fffe6521aa68e635b8b94b94b4d519341b65 Mon Sep 17 00:00:00 2001
From: han <151435705@qq.com>
Date: Fri, 29 Nov 2024 15:01:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=9F=B3=E9=A2=91=E8=A7=86=E9=A2=91=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/animg/daolan/icon-zan.png              | Bin 0 -> 1574 bytes
 .../AudiovisualList/AudiovisualList.vue       | 395 ++++++++++++++++++
 subPageA/shop/shopDetail/shopDetail.vue       | 157 +++++++
 subPageA/shop/shopList/shopList.vue           | 150 +++++++
 4 files changed, 702 insertions(+)
 create mode 100644 static/animg/daolan/icon-zan.png
 create mode 100644 subPageA/Audiovisual/AudiovisualList/AudiovisualList.vue
 create mode 100644 subPageA/shop/shopDetail/shopDetail.vue
 create mode 100644 subPageA/shop/shopList/shopList.vue

diff --git a/static/animg/daolan/icon-zan.png b/static/animg/daolan/icon-zan.png
new file mode 100644
index 0000000000000000000000000000000000000000..1dfcc51ec9151e93d89e77334ffbfb73e071c409
GIT binary patch
literal 1574
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
YAFu}@pV{f9ZU6uP07*qoM6N<$f>1Baf&c&j

literal 0
HcmV?d00001

diff --git a/subPageA/Audiovisual/AudiovisualList/AudiovisualList.vue b/subPageA/Audiovisual/AudiovisualList/AudiovisualList.vue
new file mode 100644
index 0000000..be1a766
--- /dev/null
+++ b/subPageA/Audiovisual/AudiovisualList/AudiovisualList.vue
@@ -0,0 +1,395 @@
+<template>
+	<view class="v-pages bgcolor tab">
+		<!-- tab切换 -->
+		<view class="v-tab-list row flex-align-center">
+			<view class="tab-item col-12" :class="activeTab==item.value?'active':''" v-for="(item,index) in tab_list"
+				:key="index" @click="activeTab=item.value">{{item.name}}</view>
+		</view>
+
+		<!-- 影动心声 -->
+		<view v-if="activeTab==1" class="v-page-tab-top">
+			<!-- 影动心声 热门推荐 -->
+			<view class="v-card container-fluid">
+				<view class="v-page-title circle">
+					<view class="inner"><text class="text">热门推荐</text></view>
+				</view>
+				<scroll-view scroll-x="true">
+					<view class="v-pages-suggest video row">
+						<view class="list_item" v-for="(item,index) in class_list" :key="index"
+							@click="openVideo(item)">
+							<view class="item_image">
+								<image class="img" :src="item.logo" mode="widthFix"></image>
+							</view>
+							<view class="item_title">{{item.title}}</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+
+			<!-- 影动心声 列表 -->
+			<view class="v-card container-fluid m-t-24">
+				<view class="v-page-title circle">
+					<view class="inner"><text class="text">精选视频</text></view>
+				</view>
+				<mescroll-uni :up="upOption" @down="downCallback" @up="upCallback" :fixed="false">
+					<view class="v-video-list row">
+						<view class="list_item col-12" v-for="(item,index) in data_list" :key="index"
+							@click="openVideo(item)">
+							<view class="item_box">
+								<view class="item_image">
+									<image class="img" :src="item.logo" mode="widthFix"></image>
+								</view>
+								<view class="item_content col">
+									<view class="title">{{item.title}}</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</mescroll-uni>
+			</view>
+		</view>
+
+		<!-- 音悦时光 -->
+		<view v-if="activeTab==2" class="v-page-tab-top">
+			<!-- 音悦时光 热门推荐 -->
+			<view class="v-card container-fluid">
+				<view class="v-page-title circle">
+					<view class="inner"><text class="text">热门推荐</text></view>
+				</view>
+				<scroll-view scroll-x="true">
+					<view class="v-pages-suggest audio row">
+						<view class="list_item" v-for="(item,index) in class_list" :key="index"
+							@click="openAutio(item)">
+							<view class="item_image">
+								<image class="img" :src="item.logo" mode="widthFix"></image>
+							</view>
+							<view class="item_title">{{item.title}}</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+
+			<!-- 音悦时光 列表 -->
+			<view class="v-card container-fluid m-t-24">
+				<view class="v-page-title circle">
+					<view class="inner"><text class="text">精选音频</text></view>
+				</view>
+				<mescroll-uni :up="upOption" @down="downCallback" @up="upCallback" :fixed="false">
+					<view class="v-audio-list">
+						<view class="list_item row" v-for="(item,index) in data_list" :key="index"
+							@click="openAutio(item)">
+							<view class="item_image">
+								<image class="img" :src="item.logo" mode="widthFix"></image>
+							</view>
+							<view class="item_content col">
+								<view class="title">{{item.title}}</view>
+							</view>
+							<view class="item_play">
+							</view>
+						</view>
+					</view>
+				</mescroll-uni>
+			</view>
+		</view>
+		<!-- 视频弹窗 -->
+		<view class="v-video-popup" v-show="videoVisible">
+			<view class="v-video-popup-content">
+				<view class="close" @click="videoVisible=false"></view>
+				<video controls class="video" id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"></video>
+				<view class="v-video-popup-title m-t-12">{{activeVideo.title}}{{activeVideo.videopath}}</view>
+			</view>
+		</view>
+		<!-- 音频弹窗 -->
+		<view class="v-video-popup" v-if="autioVisible">
+			<view class="v-video-popup-content">
+				<view class="close" @click="autioVisible=false"></view>
+				<audio style="text-align: center" :src="activeAutio.src" :poster="activeAutio.poster"
+					:name="activeAutio.name" :action="audioAction" ></audio>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	// 自定义的mescroll-xinlang.vue
+	import MescrollUni from '@/components/mescroll-diy/mescroll-xinlang.vue';
+	export default {
+		components: {
+			MescrollUni
+		},
+		data() {
+			return {
+				rootPath: this.$config.ROOTPATH,
+				//tab
+				activeTab: 1,
+				tab_list: [{
+					name: "影动心声",
+					value: 1
+				}, {
+					name: "音悦时光",
+					value: 2
+				}],
+
+				class_list: [],
+				data_list: [],
+				videoVisible: false,
+				activeVideo: {},
+				autioVisible: false,
+				activeAutio: {},
+				audioAction: {
+					method: 'pause'
+				},
+				//滚动
+				downOption: {
+					auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
+				},
+				upOption: {
+					auto: true //是否在初始化完毕之后自动执行下拉回调callback; 默认true
+				},
+				mescroll: '',
+				param: {
+					pagesize: 10,
+					pageno: 1,
+					noData: false,
+					loading: false,
+					finished: false,
+					type: 1,
+					userkey: this.$param.userkey,
+				},
+			};
+		},
+		watch: {
+			activeTab: {
+			    // 监听器的回调函数，当属性值变化时执行
+			    handler(newValue, oldValue) {
+			     this.param.type = newValue
+			     this.getInitPage()
+			    },
+			    // 是否立即触发回调函数，默认为false
+			    immediate: false,
+			    // 深度监听对象内部的属性变化，默认为false
+			    deep: false
+			  },				
+		},
+		onLoad(option) {
+
+		},
+		onShow() {
+			this.getInitPage()
+		},
+		methods: {
+			// 页面初始化
+			getInitPage: function() {
+				this.getClassData()
+			},
+			/*下拉刷新的回调 */
+			downCallback(mescroll) {				
+				this.param.pageno = this.mescroll.num
+				this.getListData();
+				// #ifdef H5
+				this.top = uni.upx2px(100 + 88) + 'px'; // H5的高度需加上 88的标题栏
+				// #endif
+				// #ifndef H5
+				this.top = uni.upx2px(100) + 'px'; // 非H5不必加
+				// #endif
+				setTimeout(() => {
+					mescroll.endSuccess();
+					this.top = 0;
+				}, 2500);
+			},
+			upCallback(mescroll) {
+				this.mescroll = mescroll
+				this.param.pageno = this.mescroll.num
+				this.getListData();
+			},
+			// 获取分类数据
+			getClassData() {
+				this.$Request.get(this.$config.getVideoList, this.param, '', '', false, '').then(res => {
+					this.class_list = res.data.recommendList.map((item, index) => {
+						return {
+							isrecommend: item.isrecommend,
+							guid: item.guid,
+							logo: this.rootPath + item.logo,
+							title: item.title,
+							videopath: this.rootPath + item.videopath,
+							soundpath: this.rootPath + item.soundpath
+						}
+					})
+				});
+			},
+
+			// 获取列表数据
+			getListData() {				
+				this.$Request.get(this.$config.getVideoList, this.param, '', '', false, '').then(res => {
+					const curPageData = res.data.selectList || [] // 当前页数据
+					if (this.mescroll.num == 1) this.data_list = []; // 第一页需手动制空列表
+					curPageData.forEach((item, index) => {
+						let data = {
+							isrecommend: item.isrecommend,
+							guid: item.guid,
+							logo: this.rootPath + item.logo,
+							title: item.title,
+							videopath: this.rootPath + item.videopath,
+							soundpath: this.rootPath + item.soundpath
+						}
+						this.data_list.push(data)
+					})
+
+					setTimeout(() => {
+						this.mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
+					}, 1000);
+				}).catch(() => {
+					this.mescroll.endErr(); // 请求失败, 结束加载
+				});
+			},
+			// 获取视频 弹框
+			openVideo(val) {
+				this.videoVisible = true
+				this.activeVideo = val
+			},
+			// 获取音频 弹框
+			openAutio(val) {
+				this.autioVisible = true
+				this.activeAutio = {
+					poster: val.logo,
+					name: val.title,
+					src: val.soundpath,
+				}
+			}
+		}
+	};
+</script>
+
+
+<style lang="scss">
+	.v-video-list {
+		flex-wrap: wrap;
+		margin-left: -24rpx;
+
+		.list_item {
+			margin-bottom: 24rpx;
+
+			.item_box {
+				margin-left: 24rpx;
+				box-sizing: border-box;
+			}
+
+			.item_image {
+				position: relative;
+				width: 100%;
+				height: 220rpx;
+				border-radius: 16rpx;
+				overflow: hidden;
+
+				&::after {
+					content: '';
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%, -50%);
+					width: 60rpx;
+					height: 60rpx;
+					background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-video-play.png');
+					background-repeat: no-repeat;
+					background-size: contain;
+				}
+
+				.img {
+					width: 110%;
+				}
+			}
+
+			.item_content {
+				.title {
+					margin-top: 8rpx;
+					font-size: 28rpx;
+					color: #333333;
+					font-weight: bold;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					-webkit-box-orient: vertical;
+					overflow: hidden;
+				}
+			}
+		}
+	}
+
+	.v-audio-list {
+		.list_item {
+			margin-bottom: 24rpx;
+
+			.item_image {
+				width: 140rpx;
+				height: 140rpx;
+				margin-right: 20rpx;
+				border-radius: 16rpx;
+				overflow: hidden;
+
+				.img {
+					width: 110%;
+				}
+			}
+
+			.item_content {
+				.title {
+					font-size: 28rpx;
+					color: #333333;
+					font-weight: bold;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					-webkit-box-orient: vertical;
+					overflow: hidden;
+				}
+			}
+
+			.item_play {
+				margin-left: 20rpx;
+				width: 60rpx;
+				height: 60rpx;
+				background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-autio-play.png');
+				background-repeat: no-repeat;
+				background-size: cover;
+			}
+		}
+	}
+
+	.v-video-popup {
+		position: fixed;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		z-index: 99;
+		background-color: rgba(0, 0, 0, .85);
+
+		.v-video-popup-content {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			width: 90%;
+			transform: translate(-50%, -50%);
+
+			.close {
+				position: absolute;
+				top: -100rpx;
+				left: 50%;
+				right: 10rpx;
+				width: 80rpx;
+				height: 80rpx;
+				background: url('https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-close.png');
+				background-repeat: no-repeat;
+				background-size: contain;
+			}
+
+			.video {
+				width: 100%;
+
+			}
+
+			.v-video-popup-title {
+				text-align: center;
+				color: #fff;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/subPageA/shop/shopDetail/shopDetail.vue b/subPageA/shop/shopDetail/shopDetail.vue
new file mode 100644
index 0000000..bf789c3
--- /dev/null
+++ b/subPageA/shop/shopDetail/shopDetail.vue
@@ -0,0 +1,157 @@
+<template>
+	<view class="v-pages-bg bgcolor p-b-24">
+		<!-- 轮播 -->
+		<swiper :autoplay="autoplay" class="lh-swiper" :duration="duration" :indicator-dots="indicatorDots"
+			:interval="interval">
+			<swiper-item v-for="(item,index) in pic_list" :key="index">
+				<image class="slide-image" :src="item" mode="widthFix"></image>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				//轮播
+				indicatorDots: false,
+				autoplay: true,
+				interval: 3000,
+				duration: 500,
+
+				pic_list: undefined,
+				class_list: undefined,
+				data_list: undefined,
+			};
+		},
+		onLoad(option) {
+
+		},
+		onShow() {
+			this.getInitPage()
+		},
+		methods: {
+			// 页面初始化
+			getInitPage: function() {
+				this.getClassData()
+				this.getListData()
+			},
+			// 获取分类数据
+			getClassData() {
+				this.class_list = [{
+						name: "热门景区",
+						dec: "不停发现惊喜"
+					},
+					{
+						name: "精选美食",
+						dec: "不停发现惊喜"
+					},
+					{
+						name: "乐趣钓鱼",
+						dec: "不停发现惊喜"
+					},
+					{
+						name: "精选美食",
+						dec: "不停发现惊喜"
+					},
+				]
+				this.pic_list = ['http://119.249.56.5:8083/upload/images/3f8b3b45bb7d4ef4b9cf4f32e3b03ad9.png',
+					'http://119.249.56.5:8083/upload/images/573a5c48f2bf4771ae0004b029241836.png'
+				]
+			},
+		}
+	};
+</script>
+
+<style lang="scss">
+	.scroll-view {
+		top: 200rpx;
+	}
+
+	.lh-swiper {
+		width: 100%;
+		height: 325rpx;
+		overflow: hidden;
+		position: relative;
+	}
+
+	.lh-swiper .slide-image {
+		width: 100%;
+		height: 100%;
+	}
+
+
+
+	.v-method-class {
+		box-sizing: border-box;
+
+		padding: 0 24rpx;
+
+		.list-item:nth-child(1) {
+			height: 200rpx;
+		}
+
+		.list-item {
+			flex: 0 0 240rpx;
+			width: 240rpx;
+			height: 80rpx;
+			margin-right: 24rpx;
+
+
+			.name {
+				padding: 0 24rpx;
+				font-size: 30rpx;
+				font-weight: bold;
+			}
+
+			.dec {
+				padding: 0 24rpx;
+				font-size: 24rpx;
+			}
+		}
+	}
+
+	.v-method-list {
+		padding: 0 24rpx;
+
+		.method-list-item {
+			margin-bottom: 24rpx;
+			border-radius: 10rpx;
+			background-color: #fff;
+			height: 160rpx;
+			overflow: hidden;
+
+			.item_image {
+				width: 200rpx;
+				flex: 0 0 200rpx;
+				height: 165rpx;
+				margin-right: 24rpx;
+				overflow: hidden;
+
+				.img {
+					width: 250rpx;
+				}
+			}
+
+			.item_content {
+				padding: 24rpx 0;
+
+				.title {
+					font-size: 30rpx;
+				}
+
+				.dec {
+					margin-top: 10rpx;
+					font-size: 24rpx;
+					color: #666;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					/* 显示的行数 */
+					-webkit-box-orient: vertical;
+					overflow: hidden;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/subPageA/shop/shopList/shopList.vue b/subPageA/shop/shopList/shopList.vue
new file mode 100644
index 0000000..24f6f3b
--- /dev/null
+++ b/subPageA/shop/shopList/shopList.vue
@@ -0,0 +1,150 @@
+<template>
+	<view class="v-pages v-pages-bg tab">
+		<view class="v-pages-search">
+			<view class="search_box row flex-align-center">
+				<view class="col">
+					<input @input="write" type="text" class="input" @confirm="confirm" confirm-type="search"
+						placeholder-style="color:#999" placeholder="搜索美食" />
+				</view>
+				<view class="btn_img" @click="search()">
+					<image src="/subPageB/static/img/icon-search.png" class="img"></image>
+				</view>
+			</view>
+		</view>
+		
+		<!-- 列表 -->
+		<view class="v-shop-list row">
+			<view class="list_item col-12" v-for="(item,index) in data_list" :key="index">
+				<view class="item_box">
+					<view class="item_image">
+						<image class="img" :src="item.img" mode="aspectFill"></image>
+					</view>
+					<view class="item_content">
+						<view class="title">{{item.name}}</view>
+						<view class="dec">{{item.price}}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				//轮播
+				indicatorDots: false,
+				autoplay: true,
+				interval: 3000,
+				duration: 500,
+
+				pic_list: undefined,
+				class_list: undefined,
+				data_list: undefined,
+			};
+		},
+		onLoad(option) {
+
+		},
+		onShow() {
+			this.getInitPage()
+		},
+		methods: {
+			// 页面初始化
+			getInitPage: function() {
+				this.getClassData()
+				this.getListData()
+			},
+			// 获取分类数据
+			getClassData() {				
+				this.pic_list = ['http://119.249.56.5:8083/upload/images/3f8b3b45bb7d4ef4b9cf4f32e3b03ad9.png',
+					'http://119.249.56.5:8083/upload/images/573a5c48f2bf4771ae0004b029241836.png'
+				]
+			},
+			// 获取列表数据
+			getListData() {
+				this.data_list = [{
+					img:'http://119.249.56.5:8083/upload/images/3f8b3b45bb7d4ef4b9cf4f32e3b03ad9.png',
+						name: "白鹿白茶",
+						price: 158,
+						delPrice:198,
+						sale:58,
+						business:"稻香村河北总部基地",
+						tip:"文创产品"
+					},
+					{
+						img:'http://119.249.56.5:8083/upload/images/3f8b3b45bb7d4ef4b9cf4f32e3b03ad9.png',
+						name: "稻香村糕点",
+						price: 158,
+						delPrice:198,
+						sale:58,
+						business:"稻香村河北总部基地",
+						tip:"文创产品"
+					},
+					{
+						img:'http://119.249.56.5:8083/upload/images/3f8b3b45bb7d4ef4b9cf4f32e3b03ad9.png',
+						name: "文创小皮马包",
+						price: 158,
+						delPrice:198,
+						sale:58,
+						business:"稻香村河北总部基地",
+						tip:"文创产品"
+					},
+					{
+						img:'http://119.249.56.5:8083/upload/images/3f8b3b45bb7d4ef4b9cf4f32e3b03ad9.png',
+						name: "网红非遗漆扇",
+						price: 158,
+						delPrice:198,
+						sale:58,
+						business:"稻香村河北总部基地",
+						tip:"文创产品"
+					},
+				]
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.v-shop-list {
+		padding: 0 24rpx;
+		flex-wrap: wrap;
+		margin-left: -24rpx;
+
+		.list_item {
+			margin-bottom: 24rpx;
+
+			.item_box {
+				margin-left: 24rpx;
+				box-sizing: border-box;
+				background-color: #fff;
+			}
+
+			.item_image {
+				position: relative;
+				width: 100%;
+				height: 220rpx;
+				border-radius: 16rpx;
+				overflow: hidden;
+				.img {
+					width: 110%;
+				}
+			}
+
+			.item_content {
+				.title {
+					margin-top: 8rpx;
+					font-size: 28rpx;
+					color: #333333;
+					font-weight: bold;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					-webkit-box-orient: vertical;
+					overflow: hidden;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file