ec.uniapp-master/pages/order/newdetail/newdetail.vue

<template>
	<view v-if="$isRight(order_details)">
		<lf-nav title="订单详情" :showIcon="true"></lf-nav>
		<!-- v-if="order_details.last_pay_time" -->
		<view class="tips" v-if="show">
			<view class="lf-font-24 lf-color-white">剩余支付时间：</view>
			<view class="lf-font-24 lf-color-white">
				<!-- {{time}} -->
				<countdown-timer :time="time" :autoStart="true" @finish="dateFinish">
					<template v-slot="{minute, second}">
						<view class="lf-flex">
							<view class="lf-font-24 lf-color-white">{{ minute >= 10 ? minute : "0" + minute }}</view>
							<view class="lf-font-24 lf-color-white">:</view>
							<view class="lf-font-24 lf-color-white">{{ second >= 10 ? second : "0" + second }}</view>
						</view>
					</template>
				</countdown-timer>
			</view>
		</view>
		<!-- 待收货 -->
		<view class="tips-waitconfirm">
			<view class="lf-flex-column">
				<view class="lf-font-28 lf-color-white">运输中</view>
				<view class="lf-font-24 lf-color-white" v-if="true">广州转运中心公司 已发出，下一站南宁转运中心</view>
				<view class="lf-font-24 lf-color-white" v-else>[自提柜]已签收，签收人凭取货码签收。</view>
			</view>
			<view class="waitconfirm-tag">
				查看详情
			</view>
		</view>
		<view class="card" style="margin-top: 0;">
			<view class="lf-font-28">
				<text class="lf-color-222 lf-font-bold">{{order_details.accept_name}}</text>
				<text class="lf-color-777 lf-m-l-20">{{order_details.mobile}}</text>
			</view>
			<view class="lf-font-28 lf-color-333 lf-m-t-20">
				<text>{{order_details.address_name}}{{order_details.address}}</text>
			</view>
		</view>
		<view class="card goods">
			<view>
				<text class="lf-iconfont icon-Group- lf-font-30"></text>
				<text class="shop-name">{{order_details.from}}</text>
				<text class="lf-iconfont icon-xiangyou lf-font-24"></text>
			</view>
			<view class="lf-flex lf-m-t-20" v-for="(item,index) of order_details.items" :key="index">
				<image class="goods-img" :src="item.item_meta.image"></image>
				<view class="info">
					<view class="lf-font-26 lf-color-333 lf-line-1">{{item.item_name}}</view>
					<view class="lf-font-24 lf-color-777">{{item.item_meta.specs_text}}</view>
					<view class="lf-row-between" style="line-height: 1;">
						<text class="price">¥{{item.total_yuan}}</text>
						<text class="lf-font-28 lf-color-777">x {{item.quantity}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="card" v-if="type == 'point'">
			<view class="lf-row-between lf-font-28">
				<text class="lf-color-777">积分数量</text>
				<text class="lf-color-222">{{order_details.redeem_point}}</text>
			</view>
			<view class="lf-row-between lf-m-t-30 lf-font-28">
				<text class="lf-color-777">应付运费</text>
				<text class="lf-color-222">+¥{{order_details.payable_freight}}</text>
			</view>
			<view class="lf-row-between lf-m-t-30 lf-font-28">
				<text class="lf-color-777">实付运费</text>
				<text class="lf-color-222">+¥{{order_details.real_freight}}</text>
			</view>
		</view>
		<view class="card" v-if="type == 'default'">
			<view class="lf-row-between lf-font-28">
				<text class="lf-color-777">优惠券</text>
				<text style="color: #F63434;">-¥20</text>
			</view>
			<view class="lf-row-between lf-m-t-30 lf-font-28">
				<text class="lf-color-777">运费</text>
				<text class="lf-color-222">+¥10</text>
			</view>
			<view class="lf-row-between lf-m-t-30 lf-font-28">
				<text class="lf-color-777">订单总价</text>
				<text class="lf-color-222">¥{{order_details.total_yuan}}</text>
			</view>
		</view>
		<view class="card">
			<view class="lf-row-between lf-font-28">
				<text class="lf-color-777">商品订单编号</text>
				<text>
					<text class="lf-color-222">{{order_details.order_no}}</text>
					<text class="lf-font-28 lf-m-l-20" style="color: #22A19F;"
						@click="copy(order_details.order_no)">复制</text>
				</text>
			</view>
			<view class="lf-row-between lf-font-28 lf-m-t-30">
				<text class="lf-color-777">创建时间</text>
				<text class="lf-color-222">{{order_details.created_at}}</text>
			</view>
			<!-- <view class="lf-row-between lf-font-28 lf-m-t-30">
				<text class="lf-color-777">留言</text>
				<text class="lf-color-222">暂无留言</text>
			</view> -->
			<view class="lf-row-between lf-font-28 lf-m-t-30" v-if="order_details.status_text">
				<text class="lf-color-777">订单状态</text>
				<text class="lf-color-222">{{order_details.status_text}}</text>
			</view>
			<!-- 待发货 -->
			<view class="lf-row-between lf-font-28 lf-m-t-30">
				<text class="lf-color-777">支付方式</text>
				<text class="lf-color-222">{{order_details.payment_text}}</text>
			</view>
			<view class="lf-row-between lf-font-28 lf-m-t-30" v-if="order_details.pick_self == 0">
				<text class="lf-color-777">收货方式</text>
				<text class="lf-color-222">快递</text>
			</view>
			<view class="lf-row-between lf-font-28 lf-m-t-30" v-else>
				<text class="lf-color-777">收货方式</text>
				<text class="lf-color-222">自提</text>
			</view>
			<view class="lf-row-between lf-font-28 lf-m-t-30" v-if="order_details.pay_time">
				<text class="lf-color-777">支付时间</text>
				<text class="lf-color-222">{{order_details.pay_time}}</text>
			</view>
		</view>
		<view style="height: 120rpx;margin-top: 20rpx;"></view>
		<!-- 待付款 -->
		<!-- <view class="order-btn">
			<view class="lf-font-28 lf-row-center" style="color:#F63434">
				待付款
			</view>
			<view class="lf-flex">
				<view class="btn-cancel lf-m-r-20">
					取消订单
				</view>
				<view class="btn-atonce">
					立即付款
				</view>
			</view>
		</view> -->
		<!-- 待发货 -->
		<view class="order-btn" v-if="order_details.status == 2">
			<view class="lf-font-28 lf-row-center lf-color-777">
				待发货
			</view>
			<view class="lf-flex">
				<view style="width: 220rpx;"></view>
				<view style="width: 220rpx;"></view>
			</view>
		</view>
		<!-- 代付款 -->
		<view class="order-btn" v-if="order_details.status == 1">
			<view class="lf-font-28 lf-row-center lf-color-777">
				待付款
			</view>
			<view class="lf-flex">
				<view class="btn-gray lf-m-r-20">取消订单</view>
				<view class="btn-red" @click="$url('/pages/order/cashier/cashier?amount='+ order_details.total_yuan+'&order_no='+order_details.order_no)">立即付款</view>
			</view>
			
			
		</view>
		<!-- 待收货 -->
		<view class="order-btn" v-if="order_details.status == 3">
			<view class="lf-font-28 lf-row-center lf-color-black">
				待收货
			</view>
			<view class="lf-flex">
				<view style="width: 220rpx;"></view>
				<view class="btn-confirm">
					确认收货
				</view>
			</view>
		</view>
		<!-- 已完成 -->
		<view class="order-btn" v-if="order_details.status == 4">
			<view class="lf-font-28 lf-row-center" style="color: #22A19F;">
				已完成
			</view>
			<view class="lf-flex">
				<view style="width: 220rpx;"></view>
				<view style="width: 220rpx;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import countdownTimer from '@/components/countdown-timer/countdown-timer';
	export default {
		data() {
			return {
				type: 'default', // point积分订单详情, default默认普通商品订单详情
				time: '',
				order_no: '',
				order_details: '',
				countdown_minute: '',
				time: '',
				show: false
			}
		},
		components: {
			countdownTimer
		},
		onLoad(options) {
			this.type = options.type || this.type;
			this.order_no = options.order_id;
			if (this.order_no) {
				this.getOrderDetails();
			}
		},
		methods: {
			// 点击复制
			copy(text) {
				uni.setClipboardData({
					data: text
				});
			},
			dateFinish() {
				this.show = false;
				console.log("倒计时结束");
			},
			countDown(munite, second) {
				let m = munite;
				let s = second;
				let m2, s2;
				let _this = this;
				let tiem = setInterval(function() {
					s--;
					if (s < 0) {
						s = 59;
						m--;
						if (m < 0) {
							_this.time = '00分00秒';
							_this.show = false;
							// _this.getOrderDetails();
							clearTimeout(tiem);
							return;
						}
					}
					m2 = m < 10? '0' + m : m;
					s2 = s < 10 ? ('0' + s) : s;
					_this.time = m2 + '分' + s2 + '秒';
				}, 1000)
			},
			s_to_hs(s) {
				//计算分钟
				//算法：将秒数除以60，然后下舍入，既得到分钟数
				var h;
				h = Math.floor(s / 60);
				//计算秒
				//算法：取得秒%60的余数，既得到秒数
				s = s % 60;
				//将变量转换为字符串
				h += '';
				s += '';
				//如果只有一位数，前面增加一个0
				// h = (h.length == 1) ? '0' + h : h;
				// s = (s.length == 1) ? '0' + s : s;
				this.countDown(h,s)
				// return h + ':' + s;
			},
			getTime(){
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				return timer;
			},
			getOrderDetails() {
				this.$http.get({
					api: 'api/order/' + this.order_no,
					header: {
						Authorization: this.$cookieStorage.get('user_token')
					}
				}).then(res => {
					this.order_details = res.data.data
					var date = this.getTime()
					this.time = new Date(this.order_details.will_closed_at).getTime() - new Date(date).getTime()
					if(this.time > 0) {
						this.show = true;
					}
					console.log(this.order_details);
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss" scoped="scoped">
	.btn-gray {
		width: 220rpx;background: white;height: 90rpx;border-radius: 45rpx;border: 2rpx solid #999999;display: flex;align-items: center;justify-content: center;
		color: #777777;
		font-size: 28rpx;
	}
	.btn-red {
		width: 220rpx;background: #F63434;height: 90rpx;border-radius: 45rpx;display: flex;align-items: center;justify-content: center;
		color: white;
		font-size: 28rpx;
	}
	.tips-waitconfirm {
		width: 100%;
		height: 113rpx;
		background: #15716E;
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		align-items: center;
	}

	.waitconfirm-tag {
		width: 136rpx;
		height: 53rpx;
		border-radius: 27rpx;
		border: 2rpx solid #FFFFFF;
		font-size: 24rpx;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-cancel {
		width: 220rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border: 2rpx solid #999999;
		color: #777;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-confirm {
		width: 220rpx;
		height: 90rpx;
		border-radius: 45rpx;
		background-color: #15716E;
		color: #fff;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-atonce {
		width: 220rpx;
		height: 90rpx;
		border-radius: 45rpx;
		background-color: #F63434;
		color: #fff;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order-btn {
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 0 32rpx;
		position: fixed;
		bottom: 0;
	}

	.tips {
		display: flex;
		background-color: #F63434;
		height: 64rpx;
		width: 100%;
		justify-content: center;
		align-items: center;
	}

	.card {
		height: max-content;
		width: 750rpx;
		padding: 30rpx 32rpx;
		background-color: #FFFFFF;

		&:nth-child(n+2) {
			margin-top: 20rpx;
		}
	}

	.goods {
		.shop-name {
			font-size: 28rpx;
			color: #222222;
			font-weight: bold;
			margin: 0 15rpx;
		}

		.goods-img {
			width: 130rpx;
			height: 130rpx;
			border-radius: 4rpx;
			margin-right: 15rpx;
			background-color: #EEEEEE;
		}

		.info {
			width: 540rpx;
			height: 130rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.price {
				font-size: 32rpx;
				color: #F63434;
				font-weight: bold;
			}
		}

		.order-num {
			font-size: 24rpx;
			color: #999999;
			display: flex;
			justify-content: space-between;
			margin-top: 28rpx;
		}
	}
</style>