H5-ThreeDoorder/components/orderListItem/orderListItem.vue

<template>
	<view>
		<!-- <view class="mt-30 order-box" @click="goOrder(InforData.order_sn)" v-for="(item,index) in collectionList" :key="index"> -->
		<view class="mt-30 order-box" @click="goOrder(InforData.order_sn)">
			<view class="flbtn">
				<view class="lit-333">
					下单时间：{{InforData.create_time}}
				</view>
				<view class="lit-333 flex" style="color: #FF7700;" v-if="InforData.status == 0">
					{{getStatusStr(InforData.status,InforData.is_evaluate)}}，剩余
					<u-count-down @change="onChange"
						:time="((new Date(InforData.create_time).getTime()) + 30*60*1000 - new Date().getTime())"
						@finish="finish">
						{{minutes < 10 ?'0'+minutes:minutes}}:{{seconds < 10 ?'0'+seconds:seconds}}
					</u-count-down>
					<!-- <countDownCom @finish="finish" @onChange="onChange" :time="((new Date(InforData.create_time).getTime()) + 30*60*1000 - new Date().getTime())"></countDownCom> -->
				</view>
				<view class="lit-333" v-else>
					{{getStatusStr(InforData.status,InforData.is_evaluate)}}
				</view>
			</view>
			<view class="item-box flbtn">
				<view class="flex">
					<u-image width="238rpx" height="178rpx" radius="20rpx" :src="InforData.goods_img"></u-image>
					<view class="item-text">
						<u-text :text="InforData.goods_name" size="28rpx" color="#333333" :bold="true" lines="1">
						</u-text>
						<view class="lit-999">
							x{{InforData.goods_count}}
						</view>
						<u-gap height="40rpx"></u-gap>
						<view class="price-item" style="font-size: 42rpx;color: #FF2A30;">
							<text style="font-size: 22rpx;">￥</text>{{InforData.pay_price/100}}
						</view>
					</view>
				</view>
				<view class="flex" style="align-items: flex-end;">
					<view class="" v-if="InforData.status == 0">
						<view class="gopay" @click.stop="goOrder(InforData.order_sn)">
							去支付
						</view>
						<view class="gopay cancel" @click.stop="cannelOrder(InforData.order_sn)">
							取消订单
						</view>
					</view>
					<view class="" v-if="InforData.status == 1">

						<view class="gopay cancel" @click.stop="goOrder(InforData.order_sn)">
							查看券码
						</view>
					</view>
					<view class="" v-if="InforData.status == 5 && InforData.is_evaluate == 0">

						<view class="gopay" @click.stop="goevaluated(InforData.order_sn)">
							去评价
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "orderListItem",
		props: {
			item: {
				type: Object,
				default: {}
			},
		},
		data() {
			return {
				minutes: 0,
				seconds: 0,
				InforData: {}
			};
		},
		mounted() {
			this['InforData'] = this['item'];
			this['InforData']['create_time'] = this['InforData']['create_time'].replace(/-/g,"/");
		},
		methods: {
			goevaluated(or_no) {
				uni.navigateTo({
					url: '/pages/evaluated/goevaluated?order_sn=' + or_no,
					fail(e) {
						console.log(e)
					}
				})
			},
			goOrder(order_sn) {
				uni.navigateTo({
					url: '/pages/Pendingpayment/paid?order_sn=' + order_sn
				})
			},
			onChange(e) {
				this.minutes = e.minutes
				this.seconds = e.seconds
			},
			finish(e) {
				console.log(this['InforData']['order_sn'],'倒计时结束');
				this.InforData.status = 4
			},
			cannelOrder(order_sn) {
				let _this = this
				uni.showModal({
					title: '您确定要取消订单吗',
					success(confirm) {
						if (confirm.confirm) {
							_this.$store.dispatch('api/cancelOrder', {
								order_sn: order_sn
							}).then(res => {
								_this['InforData']['status'] = 4;
								// 组件中得到的数据不可更改
								_this.$emit('OrderCancel', _this['index'])
								//_this.getOrder();
							})
						}
					}
				})

			},
			getStatusStr(status, is_evaluate) {
				console.log(status, '订单状态-1');
				let str = ''
				switch (status) {
					case 0:
						str = '待支付';
						break;
					case 1:
						str = '待使用'
						break
					case 3:
						str = '已退款'
						break
					case 4:
						str = '已取消'
						break
					case 5:
						if (is_evaluate == 0) {
							str = '待评价'
						}
						break;
				}
				return str;
			},
		}
	}
</script>

<style lang="scss">
	.order-box {
		margin-top: 20rpx;

		.item-box {
			margin-top: 20rpx;

			.item-text {
				margin-left: 20rpx;
				max-width: 260rpx;
			}
		}

		.gopay {
			font-size: 24rpx;
			font-weight: bold;
			color: #FF7700;
			border-radius: 10rpx;
			border: 2rpx solid #FF7700;
			text-align: center;
			width: 170rpx;
			height: 58rpx;
			line-height: 58rpx;
			margin-bottom: 10rpx;
		}

		.cancel {
			color: #999999;
			border: 2rpx solid #999999;
			font-weight: normal;
			padding-bottom: 0;
		}
	}
</style>