yanzong_qianduan/pages/news/park/recordHistory.vue

<template>
	<view class="record">
		<view class="item" v-for="(item,index) in presaList" :key="index">
			<view class="hd">
				<image :src="item.image"></image>
				<view class="info">
					<view class="a">{{item.goods_name}}</view>
					<view class="b"><text>倒计时</text>
						<u-count-down style="margin-left:20rpx;" :timestamp="item.p_time"></u-count-down>
					</view>
					<view class="c">预约价:￥<text>{{item.goods_price_min}}</text></view>
				</view>
				<view class="status">已预约</view>
			</view>
			<view class="bd">
				<view class="btn" @click="onCancel(item)">取消预约</view>
				<!-- <view class="btn btn-01">详情</view> -->
			</view>
		</view>
		<view class="empty" v-if="presaList.length == 0">
			<u-empty text="暂无记录"  mode="list" style="margin-top: 160rpx;"></u-empty>
		</view>
	</view>
</template>

<script>
	import * as GoodsApi from '@/api/goods'
	export default {
		data() {
			return {
				presaList: [],
				isLoading: false,
				total:0,
				page:1,
			};
		},
		onLoad() {
			this.getPresaleList();
		},
		methods: {
			beginTime(end) {
				const now = new Date();
				const year = now.getFullYear();
				const month = now.getMonth() + 1;
				const day = now.getDate();
				const hour = now.getHours();
				const minute = now.getMinutes();
				const second = now.getSeconds();
				let start= year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
				return (Date.parse(end.replace(/-/g, '/'))-Date.parse(start.replace(/-/g, '/')))
			},
			onCancel(item) {
				let app = this
				uni.showModal({
					title: "温馨提示",
					content: "是否取消该订单？",
					confirmColor: "#F21A1C",
					complete(res) {
						if (res.confirm) {
							GoodsApi.canlpresale({
									id: item.id
								})
								.then(result => {
									if (result.status == 200) {
										uni.showToast({
											title:'取消成功',
											icon:'none'
										})
										app.page=1;
										app.presaList = []
										app.getPresaleList()
									}
								})
								.finally(() => app.isLoading = false)
						}
					}
				})
			},
			async getPresaleList() {
				let app = this
				let res = await GoodsApi.presaleList({page:this.page});
				console.log(res)
				if (res.status == 200 && res.data.list.data.length>0) {
					res.data.list.data.forEach(function(item) {
						item.p_time = app.beginTime(item.p_time)
					});
					app.presaList.push(...res.data.list.data)
					app.total = res.data.list.total
				}
			},
		},
		onReachBottom() {
			if(this.presaList.length <this.total){
				this.pageNum ++;
				this.getPresaleList();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.record {
		padding: 0 16rpx 20rpx;
		overflow: hidden;

		.item {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-top: 20rpx;
			position: relative;
			.hd {
				display: flex;
				align-items: flex-start;
				overflow: hidden;
				padding: 15rpx 0;
				overflow: hidden;
				border-bottom: 1px solid #F2F2F2;

				image {
					width: 190rpx;
					height: 190rpx;
					margin-right: 20rpx;
				}

				.info {
					flex: 1;
					max-width: 320rpx;

					.a {
						white-space: nowrap;
						font-size: 32rpx;
						font-weight: 400;
						color: #1E1E1E;
						text-overflow: ellipsis;
						overflow: hidden;
						margin-top: 30rpx;
					}

					.b {
						display: flex;
						align-items: center;
						margin-top: 10rpx;

						text {
							color: #949494;
							// margin-right: 20rpx;
						}

						font-size: 28rpx;
						font-weight: 400;
						color: #FF0E0E;
					}

					.c {
						margin-top: 10rpx;

						text {
							font-size: 36rpx;
							font-weight: 600;
							color: #F21A1C;
						}

						font-size: 28rpx;
						font-weight: 400;
						color: #FF0E0E;
					}
				}

				.status {
					// flex: 1;
					// text-align: right;
					font-size: 32rpx;
					font-weight: 400;
					color: #529C30;
					position: absolute;
					right: 24rpx;
					top:14rpx;
				}
			}

			.bd {
				padding: 30rpx 0;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.btn {
					width: 158rpx;
					line-height: 62rpx;
					background: #FFFFFF;
					border-radius: 62rpx;
					text-align: center;
					border: 1px solid #C6C6C6;
					font-size: 28rpx;
					font-weight: 400;
					color: #3D3D3D;
					margin-left: 20rpx;

					&-01 {
						background: #F19592;
						border-color: #F19592;
						color: #fff;
					}
				}
			}
		}
	}
	.empty{
		height: calc(100vh - 88rpx);
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>