discounts-minapp/my/favorite/index.vue

<template>
	<view class="favorite">
		<zs-list mt="0" @load="loadMore" :status="status">
			<view class="favorite-item" v-for="(item,index) in list" :key="index">
		<!-- 		<image :src="item.src" mode="" class="icon" @click="goDetail(item)"></image> -->
				<zs-img radius="full" :src="item.src" width="200rpx" height="180rpx"></zs-img>
				<view class="info">
					<view class="title">
						{{item.title}}
					</view>
					<view class="address"  @click="handleAdress(item)">
						<u-icon name="tags" size="38"></u-icon>
						{{item.address}}·距你{{item.distance}}km
					</view>
					<view class="tags">
						<view class="tag-item">
						<view class="label">
							折
						</view>	
						<view class="value">
							满200享8折
						</view>
						
						</view>
					</view>
					<view class="like" @click="handleLike(item)">
						<u-icon :name="item.isLike?'heart-fill':'heart'" color="red" size="48"></u-icon>
					</view>
				</view>
			</view>
		</zs-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:'more',
				loading:false,
				list: [{
						src: 'https://mstatic.gzstv.com/media/images/2021/06/09/w1nrZC8_x-PQ.jpg',
						title: '万安加油站（中石化）',
						isLike:true,
						time: '2023-07-30 10:00:00',
						distance: 13.62,
						address:'贵州省贵阳市观山湖区金清路',
				
					},
					{
						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: '万安加油站（中石化）',
						time: '2023-07-30 10:00:00',
						isLike:true,
						address:'贵州省贵阳市观山湖区金清路',
						distance: 13.62
				
					},
					{
						id: 2,
						src:'https://img-md.veimg.cn/meadinindex/img5/2021/11/69F51D249ADA446EB5507352AA4ABD6E.jpg',
						title: '泊斯曼酒店',
						isLike:true,
						time: '2023-07-30 10:00:00',
						address:'贵州省贵阳市观山湖区金清路',
						distance: 5.23,
						
					},
					{
						id: 3,
						src:'https://file.gzl.cn/group1/M00/32/54/wKkBH1_7uBKAaWm1AAMJ4gwToRo237.jpg',
						title: '贵阳万丽酒店',
						isLike:true,
						time: '2023-07-30 10:00:00',
						address:'贵州省贵阳市观山湖区金清路',
						distance: 5.23,
						
					},
				]
			}
		},
		methods: {
			handleLike(item) {
				item.isLike = !item.isLike
			},
			goDetail(){
				uni.navigateTo({
					url:'../../detail/shopDetail/shopDetail'
				})
			},
			loadMore(){
				this.status = 'loading'
					setTimeout(()=>{
						this.status = 'more'
						this.list.push({
						id: 3,
						src:'https://img2.baidu.com/it/u=242243300,1128843585&fm=253&fmt=auto&app=138&f=JPEG?w=696&h=500',
						title: '贵阳万丽酒店',
						isLike:true,
						time: '2023-07-30 10:00:00',
						address:'贵州省贵阳市观山湖区金清路',
						distance: 5.23,
						
					})
					},1000)
			},
			jump(){
				
			}
		},
	}
</script>

<style lang="scss" scoped>
.favorite{
	background: #efefef;
	padding: 30rpx;
	min-height: 100vh;
	.favorite-item {
				display: flex;
				padding: 20rpx 30rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				.icon{
					width: 200rpx;
					height: 180rpx;
					border-radius: 8px;
				}	
				.info{
					flex: 1;
					padding-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					position: relative;
					.title{
						font-size: 28rpx;
						font-weight: bold;
					}
					.address{
						color: #bebebe;
						display: flex;
						align-items: center;
						font-size: 24rpx;
						padding: 15rpx 0;
						.u-icon{
							align-self: flex-start;
						}
					}
					.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: #FE5B47;
								color: #fff;
								padding: 0 10rpx;
								border-radius: 8rpx 0 0 8rpx;
							}
							.value{
								color: #FE5B47;
								background: rgba(254,91,71,0.1);
								padding: 0 14rpx;
								border-radius: 0 8rpx 8rpx 0;
							}
						}
					}
					.like{
						position: absolute;
						top: 0%;
						right: 10rpx;
					}
				}
			}
}
</style>