discounts-minapp/my/order/index.vue

<template>
	<view class="order">
		<zs-search fixed></zs-search>
		<!-- <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search> -->
		<zs-list mt="130rpx" @load="loadMore" :status="status">
			<view class="order-item" v-for="(item,index) in list" :key="index" @click="jump">
				
				<view class="order-box">
			
					<!-- <image class="icon" :src="item.src" mode=""></image> -->
					<zs-img radius="full" :src="item.src" width="164rpx" height="164rpx"></zs-img>
					<view class="info">
						<view class="title">
							{{item.title}}
						</view>
						<view class="time">
							购买时间:{{item.time}}
						</view>

					</view>
				</view>
			</view>
		</zs-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'more',
				loading: false,
				keyword: '',
				list: [{
						src: 'https://mstatic.gzstv.com/media/images/2021/06/09/w1nrZC8_x-PQ.jpg',
						title: '万安加油站（中石化）',
						time: '2023-07-30 10:00:00',
						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: '万安加油站（中石化）',
						time: '2023-07-30 10:00:00',
						distance: 13.62
				
					},
					{
						id: 2,
						src:'https://img-md.veimg.cn/meadinindex/img5/2021/11/69F51D249ADA446EB5507352AA4ABD6E.jpg',
						title: '泊斯曼酒店',
						time: '2023-07-30 10:00:00',
						distance: 5.23,
						
					},
					{
						id: 3,
						src:'https://file.gzl.cn/group1/M00/32/54/wKkBH1_7uBKAaWm1AAMJ4gwToRo237.jpg',
						title: '贵阳万丽酒店',
						time: '2023-07-30 10:00:00',
						distance: 5.23,
						
					},
				]
			}
		},
		methods: {
			loadMore() {
				this.status = 'loading'
				setTimeout(() => {
					this.status = 'more'
					this.list.push({
						src: 'https://img2.baidu.com/it/u=3177584174,2077949726&fm=253&fmt=auto&app=120&f=JPEG?w=540&h=360',
						title: '万安加油站（中石化）',
						status: 1,
						time: '2023-07-30 10:00:00',
						price: 251.00
					})
				}, 1000)
			},
			jump() {
				uni.navigateTo({
					url: './detail'
				})
			}
		},
	}
</script>

<style lang="scss">
	.order {
		background: #efefef;
		padding: 0 30rpx;
		min-height: 100vh;

		.zs-search {
			// position: fixed;
			// top: 0%;
			// left: 0;
			// width: 100%;
		}

		.zs-list {
			padding-top: 30rpx;

			.order-item {
				background-color: #fff;
				border-radius: 8px;
				margin-bottom: 30rpx;

				.order-box {
					padding: 25rpx;
					display: flex;

					.icon {
						width: 164rpx;
						height: 164rpx;
						border-radius: 16rpx;
						background-color: #999;
					}

					.info {
						margin-left: 25rpx;
						
						.title {
							color: #0F0F0F;
							font-size: 28rpx;
							margin-top: 30rpx;
						}

						.time {
							font-size: 26rpx;
							
color: #999999;
							margin-top: 20rpx;
						}

					}
				}
			}
		}
	}
</style>