discounts-minapp/detail/shopDetail/shopDetail.vue

<template>
	<view class="shopDetail">
		<view class="top-box">
			<image class="bg" :src="info.src||'../../static/jiayou.png'" mode="aspectFill"></image>

			<view class="shop-info">
				<view class="title">
					{{info.title}}
				</view>
				<view class="address">
					<image class="position" src="../../static/position.png" mode=""></image>
					{{info.address || 'xxxxx地址'}}·距你{{info.distance}}km
				</view>
			</view>
		</view>
		<view class="content">
			<view class="discounts">
				<view class="title">
					全场优惠
				</view>
				<view class="discounts-item">
					<view class="info">
						<view class="title">
							满200享 <text class="red">7</text> 折
						</view>
						<view class="time">
							有效期至2023-10-27
						</view>
					</view>
					<view class="btn-box">
						<view class="num">
							剩余 1 次
						</view>
						<view class="btn" @click="jump">
							去使用
						</view>
					</view>
				</view>
				
				<view class="discounts-item">
					<view class="info">
						<view class="title">
							满200享 <text class="red">7</text> 折
						</view>
						<view class="time">
							有效期至2023-10-27
						</view>
					</view>
					<view class="btn-box">
						<view class="num">
							剩余 1 次
						</view>
						<view class="btn" @click="jump">
							去使用
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="hot-title">
			<image class="icon" src="../../static/hot.png" mode=""></image>
			<view class="title">
				热门推荐
			</view>
			<image class="icon" src="../../static/hot.png" mode=""></image>
		</view>
		
		<!-- 列表 -->
		<zs-list class="store-box" mt="0" @load="loadMore" :status="status">
			<view class="left">
				<view class="left-frist">
					<view class="top-box">
						<view class="title">
							天天低价
						</view>
						<view class="type-box">
							<image class="hot" src="../../static/hot-white.png" mode=""></image>
							<view class="type">
								今日超低价
							</view>
						</view>
					</view>
					<view class="image-box">
						<image class="image" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F45f7efd9-3760-4fa0-8cf0-79ca4b44d017%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695803683&t=09678f8c997578d3e8101dd2b0a597e8" mode=""></image>
						<view class="btn-box">
							<view class="btn">
								折
							</view>
							<view class="desc">
								满200享7折
							</view>
						</view>
					</view>
				</view>
				<view class="store-item" v-for="(item,index) in list" :key="index" @click="goShopDetail(item)">
						<zs-img  :src="item.src" width="335rpx"  mode="widthFix" ></zs-img>
						<view class="info">
							<view class="title">
								{{item.title}}
							</view>
							<view class="address">
								
								<image class="position" src="../../static/position.png" mode=""></image>
								{{item.distance}}km
							</view>
							<image v-if="index==0" class="hot-icon" src="../../static/hot1.png" mode=""></image>
						</view>
				</view>
			</view>
			<view class="right">
				<view class="store-item frist" @click="goShopDetail(list1[0])">
						<zs-img  :src="list1[0].src" width="335rpx"  mode="widthFix" ></zs-img>
						<view class="info">
							<view class="title">
								{{list1[0].title}}
							</view>
							<view class="tags">
								<view class="tag-item">
									<view class="label">
										折
									</view>	
									<view class="value">
										满200享8折
									</view>
								</view>
							</view>
						</view>
				</view>
				
				<view v-if="index!=0" class="store-item" v-for="(item,index) in list1" :key="index" @click="goShopDetail(item)">
						<zs-img  :src="item.src" width="335rpx"  mode="widthFix" ></zs-img>
						<view class="info">
							<view class="title">
								{{item.title}}
							</view>
							<view class="address">
								<image class="position" src="../../static/position.png" mode=""></image>
								{{item.distance}}km
							</view>
						</view>
				</view>
			</view>
		
		</zs-list>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: null,
				status: 'more',
				list: [{
						src: 'https://mstatic.gzstv.com/media/images/2021/06/09/w1nrZC8_x-PQ.jpg',
						title: '万安加油站（中石化）',
						distance: 13.62
				
					},
					{
						src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F159660028%2Fb327e4a2a3e1473a82e2a53b5a5d2db2.jpeg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTU5NjYwMDI4L2IzMjdlNGEyYTNlMTQ3M2E4MmUyYTUzYjVhNWQyZGIyLmpwZWc%3D%2Fsign%2Fcec9ce1dfb5e0c3e627e30fb099899da.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693560973&t=7b7dfb1cbf6a6759e70f868c894888c9',
						title: '万安加油站（中石化）',
						distance: 13.62
				
					},
					{
						id: 2,
						src:'https://img2.baidu.com/it/u=242243300,1128843585&fm=253&fmt=auto&app=138&f=JPEG?w=696&h=500',
						title: '泊斯曼酒店',
						distance: 5.23,
						
					},
					{
						id: 3,
						src:'https://img-md.veimg.cn/meadinindex/img5/2021/11/69F51D249ADA446EB5507352AA4ABD6E.jpg',
						title: '贵阳万丽酒店',
						distance: 5.23,
						
					},
			
				],
				list1: [
					{
						id: 3,
						src:'https://alipic.lanhuapp.com/XDSlicePNGMAX7ded25d105ed4479be2eb747ddcbdb05808ff36bf272aad1d9717f0a2fb26d06.png',
						title: '黄果树瀑布',
						distance: 5.23,
						
					},
					{
						id: 3,
						src:'https://alipic.lanhuapp.com/XDSlicePNGMAXdb1c28750d2e8f45e7509c176f186600d2bafe09de15a8107b168c078801e1e7.png',
						title: '微笑牙科诊所',
						distance: 5.23,
						
					},
					{
						id: 2,
						src:'https://img2.baidu.com/it/u=242243300,1128843585&fm=253&fmt=auto&app=138&f=JPEG?w=696&h=500',
						title: '泊斯曼酒店',
						distance: 5.23,
						
					},
					{
						id: 3,
						src:'https://img-md.veimg.cn/meadinindex/img5/2021/11/69F51D249ADA446EB5507352AA4ABD6E.jpg',
						title: '贵阳万丽酒店',
						distance: 5.23,
						
					},
					
				]
			};
		},
		onLoad() {
			this.info = JSON.parse(uni.getStorageSync('shopInfo'))
		},
		methods: {
			jump() {
				uni.navigateTo({
					url: '../qrcode/index'
				})
			},
			goShopDetail(item) {
				uni.setStorageSync('shopInfo', JSON.stringify(item))
				uni.navigateTo({
					url: `../../detail/shopDetail/shopDetail`
				})
			},
			loadMore(){
				// this.status = 'loading'
				// setTimeout(() => {
				// 	this.status = 'more'
				// 	this.list = this.list.concat([{
				// 		src: 'https://img1.baidu.com/it/u=384382004,2638328762&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
				// 		title: '万安加油站（中石化）',
				// 		distance: 13.62
				// 	}, {
				// 		src: 'https://img1.baidu.com/it/u=1281595595,1208289696&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500',
				// 		title: '万安加油站（中石化）',
				// 		distance: 13.62
				// 	}])
				// }, 1000)
			}
		},
	}
</script>

<style lang="scss">
	.shopDetail {
		background: rgb(239, 239, 239);
		min-height: 100vh;
		.top-box{
			background: linear-gradient(180deg, #FFDEDE 0%, #FFFCFC 100%);
			.bg {
				width: calc(100% - 60rpx);
				margin: 0 30rpx;
				height: 350rpx;
				object-fit: cover;
				border-radius: 16rpx;
			}

			.shop-info {
				padding: 30rpx;
				box-sizing: border-box;

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.address {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					padding: 15rpx 0;
					color: #999;
					.position{
						width: 25rpx;
						height: 29rpx;
						margin-right: 8rpx;
					}
				}
			}
		}

		.content {
			padding: 0 30rpx;

			.discounts {
				padding: 30rpx;
				background: #fff;
				border-radius: 8px;
				margin-top: 20rpx;

				.title {
					font-weight: bold;
					font-size: 28rpx;
				}

				.discounts-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: rgb(239, 239, 239);
					background: url('../../static/card.png') no-repeat;
					background-size: 100% 144rpx;
					border-radius: 16rpx;
					height: 144rpx;
					padding: 0 30rpx;
					margin-top: 20rpx;

					.info {
						margin-left: 20rpx;
						.title {
							color: #0F0F0F;
							font-size: 30rpx;
						}
						.red{
							color: $uni-text-primary!important;
						}
						.time {
							color: #9a9a9a;
							font-size: 24rpx;
							margin-top: 15rpx;
						}
					}
					.btn-box{
						display: flex;
						flex-direction: column;
						align-items: center;
						.btn {
							width: 118rpx;
							height: 48rpx;
							line-height: 48rpx;
							text-align: center;
							font-size: 24rpx;
							background: linear-gradient(90deg, #FEFBF2 0%, #F7D188 100%);
							border-radius: 35rpx;
							color: #E5452C;
							margin-top: 15rpx;
						}
						.num{
							color: #fff;
							font-size: 24rpx;
						}
					}
				}
			}
		}
		
		.hot-title{
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20rpx 0;
			.icon{
				width: 29rpx;
				height: 35rpx;
			}
			.title{
				font-size: 32rpx;
				color: #0F0F0F;
				font-weight: bold;
				padding: 0 10rpx;
			}
		}
		
		.zs-list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 30rpx;
			.left{
				.left-frist{
					padding: 15rpx;
					border-radius: 16rpx;
					width: 332rpx;
					height: 284rpx;
					box-sizing: border-box;
					background: linear-gradient(180deg, #FFDEDE 0%, #FFFFFF 100%);
					box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0,0,0,0.16);
					margin-bottom: 25rpx;
					.top-box{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.title{
							color: #0F0F0F;
							font-size: 26rpx;
						}
						.type-box{
							display: flex;
							align-items: center;
							padding: 0 16rpx;
							height: 40rpx;
							line-height: 40rpx;
							border-radius: 20rpx;
							background: linear-gradient(90deg, #FE574C 0%, #FE2A5C 100%);
							.hot{
								width: 16.7rpx;
								height: 21.7rpx;
							}
							.type{
								font-size: 20rpx;
								font-weight: 400;
								color: #FFFFFF;
								margin-left: 6rpx;
							}
						}
					}
					.image-box{
						position: relative;
						margin-top: 20rpx;
						.image{
							width: 302rpx;
							height: 182rpx;
							border-radius: 16rpx;
						}
						.btn-box{
							position: absolute;
							left: 0;
							bottom: 10rpx;
							display: flex;
							align-items: center;
							.desc{
								font-size: 24rpx;
								font-weight: 400;
								color: #FFFFFF;
								margin-left: 10rpx;
							}
							.btn{
								height: 36rpx;
								line-height: 36rpx;
								padding: 0 14rpx;
								background: $uni-color-primary;
								border-radius: 8rpx;
								color: #FFFFFF;
								font-size: 20rpx;
							}
						}
					}
				}
			}
			.right{
				.frist{
					border: 1px solid #FF612E;
					.info{
						background: #FF612E;
						color: #fff;
						.address{
							color: #fff;
						}
					}
				}
			}
			.store-item {
				width: 335rpx;
				margin-bottom: 25rpx;
				box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.08);
				border-radius: 16rpx;
				background: #fff;
		
				.icon {
					width: 100%;
					height: 300rpx;
					border-radius: 16rpx 16rpx 0 0;
				}
		
				.info {
					padding: 20rpx;
					background: #fff;
					border-radius: 0 0 16rpx 16rpx;
					position: relative;
					.hot-icon{
						position: absolute;
						bottom: 20rpx;
						right: 25rpx;
						width: 44.6rpx;
						height: 48.6rpx;
					}
					.title {
						font-weight: bold;
						width: 100%;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.tags{
						display: flex;
						align-items: center;
						.tag-item{
							line-height: 50rpx;
							border-radius: 8rpx;
							padding: 6rpx 0;
							font-size: 24rpx;
							margin-left: 10rpx;
							display: flex;
							.label{
								background: #FFF;
								color: #FE5B47;
								padding: 0 10rpx;
								border-radius: 8rpx 0 0 8rpx;
							}
							.value{
								color: #FFF;
								background: rgba(255, 255, 255, .2);
								padding: 0 14rpx;
								border-radius: 0 8rpx 8rpx 0;
							}
						}
					}
		
					.address {
						display: flex;
						align-items: center;
						margin-top: 15rpx;
						color: #999;
						.position{
							width: 25rpx;
							height: 29rpx;
							margin-right: 8rpx;
						}
					}
				}
			}
		}
		
	}
</style>