ctxx-xcx/ctxx_xcx/pages/subscribeList/index.vue

<template>
	<view class="content">
		<view class="sub-lists" v-for="(item,index) in list" @click="goodsTap(item.id)" >
			<view class="sub-tops">
				<view>预约号：{{item.code}}</view>
			</view>
			<view class="contents">
				<view class="sub-img">
					<img :src="item.cover" alt="">
				</view>
				<view class="goods">
					<view class="goods-name overflow2">{{item.goods_name}} 
					{{item.desc}}
					</view>
					<view class="goods-rule">{{item.goods_spec}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from 'utils/api'
	export default {
		data() {
			return {
				pages:{
					page:1,
					pageNum:10
				},
				list:[],
				loadmore: true,
			}
		},
		onLoad() {

		},
		onReachBottom() {
			if (this.loadmore) {
				this.pages.page = this.pages.page + 1;
				this.getAppointmentList();
			}
		},
		onShow() {
			this.getAppointmentList();
		},
		methods: {
			goodsTap(id){
				console.error(id)
				uni.navigateTo({
					url:"/pages/subscribeDetails/index?id="+id
				})
			},
			getAppointmentList(){
				let data={
					page:this.pages.page,
					page_num:this.pages.pageNum,
					status:-1,
				}
				api.getAppointmentList(data).then((res)=>{
					if(res.code==1){
						// this.list=res.data.list
						let goodsList=res.data.list
						this.list = [...this.list, ...goodsList];
						if (res.data.list=='') {
							this.loadmore = false;
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 20rpx 30rpx;
		.sub-lists{
			.contents{
				display: flex;
				padding: 20rpx 30rpx;
				width: 100%;
				background-color: #fff;
				.goods{
					margin-left: 20rpx;
					.goods-rule{
						font-size: 20rpx;
						color: #666;
						margin-top: 15rpx;
					}
					.goods-name{
						width: 470rpx;
						color: #222;
						font-size: 24rpx;
					}
				}
				.sub-img{
					image{
						width: 120rpx;
						height: 120rpx;
					}
				}
			}
			width: 630rpx;
			background-color: #fff;
			margin-bottom: 25rpx;
			.contents{
				display: flex;
			}
			.sub-tops{
				height: 64rpx;
				background: #222222;
				border-radius: 16rpx 16rpx 0px 0px;
				line-height: 64rpx;
				width: 100%;
				padding: 0 30rpx;
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
</style>