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 :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>
		<u-empty text="暂无记录" v-if="presaList.length == 0" mode="list" style="margin-top: 160rpx;"></u-empty>
	</view>
</template>

<script>
	import * as GoodsApi from '@/api/goods'
	export default {
		data() {
			return {
				presaList: [],
				isLoading: false,
			};
		},
		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.getPresaleList()
								}
							})
							.finally(() => app.isLoading = false)
					}
				}
			})
		},
		async getPresaleList() {
			let app = this
			let {
				status,
				message,
				data
			} = await GoodsApi.presaleList();
			if (status == 200 && data.length>0) {
				data.forEach(function(item) {
					item.p_time = app.beginTime(item.p_time)
				});
				app.presaList =data
			}
		},
	},
	}
</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;

			.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;
				}
			}

			.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;
					}
				}
			}
		}
	}
</style>