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> -->
				<countdown-time
					:showDay="false"
					:day="order_details.last_pay_time[0]" 
					:hour="order_details.last_pay_time[1]" 
					:minute="order_details.last_pay_time[2]" 
					:second="order_details.last_pay_time[3]"
					color="white"
					splitorColor="white"
					>
				</countdown-time>
			</view>
		</view>
		<!-- 待收货 -->
		<view class="tips-waitconfirm" v-if="order_details.pick_self == 0 && order_details.status == 3">
			<view class="lf-flex-column">
				<view class="lf-font-28 lf-color-white">{{logistics_data.state_text}}</view>
				<view class="lf-font-24 lf-color-white" style="width: 540rpx;">{{logistics_data.data[0].context}}</view>
			</view>
			<view class="waitconfirm-tag" @click="$url('/pages/order/newdetail/logistics?order_no='+order_no)">
				查看详情
			</view>
		</view>
		<view class="card" style="margin-top: 0;" v-if="order_details.pick_self == 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" style="margin-top: 0;" v-else>
			<view class="lf-font-28">
				<text class="lf-color-222 lf-font-bold">{{order_details.brand.name}}</text>
				<text class="lf-color-777 lf-m-l-20">{{order_details.brand.tel}}</text>
			</view>
			<view class="lf-font-28 lf-color-333 lf-m-t-20">
				<text>{{order_details.brand.floor}}</text>
			</view>
		</view>
		<view class="card goods">
			<view>
				<text class="lf-iconfont icon-Group- lf-font-30"></text>
				<text class="shop-name">{{order_details.brand.name}}</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" v-if="type == 'point'">{{item.redeem_point}}积分</text>
						<text class="price" v-else>¥{{item.unit_price_yuan}}</text>
						<text class="lf-font-28 lf-color-777">x {{item.quantity}}</text>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 60rpx;display: flex;justify-content: center;" v-if="$isRight(order_details) && order_details.status == 2 && order_details.pick_self != 0">
			<view class="lf-flex-column">
				<lf-qrcode :options="config.qrc"></lf-qrcode>
				<view class="lf-font-28 lf-row-center" style="color: #15716E;">{{order_details.status_text}}</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" v-if="order_details.adjustments[0].origin_type == 'coupon'">
				<text class="lf-color-777">优惠券</text>
				<text style="color: #F63434;">{{order_details.adjustments_total_yuan}}</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_yuan}}</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">
				<text class="lf-color-777">备注</text>
				<text class="lf-color-222">{{ order_details.note || '暂无备注' }}</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-price">
				待付款
			</view>
			<view class="lf-flex">
				<view class="btn-gray lf-m-r-20" @click="cancelOrder">取消订单</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" @click="confirmReceiving">
					确认收货
				</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 lfQrcode from '@/components/lf-code/lf-qrcode.vue';
	import countdownTime from '@/components/uni-countdown/uni-countdown.vue';
	export default {
		data() {
			return {
				type: 'default', // point积分订单详情, default默认普通商品订单详情
				time: '',
				order_no: '',
				order_details: '',
				countdown_minute: '',
				show: false,
				pick_type: 0,
				config: {
					bar: {
						code: 'E01181016286106',
						color: '#000', // 条形码的颜色
						bgColor: '#FFFFFF', // 背景色
						width: 586, // 宽度
						height: 210 // 高度
					},
					qrc: {
						code: "",
						size: 352, // 二维码大小
						level: 4, //等级 0～4
						bgColor: '#FFFFFF', //二维码背景色 默认白色
						// border: {
						// 	color: ['#8A2387', '#F27121'], //边框颜色支持渐变色
						// 	lineWidth: 3, //边框宽度
						// },
						// img: '/static/logo.png', //图片
						// iconSize: 40, //二维码图标的大小
						color: '#000000', //边框颜色支持渐变色
					}
				},
				logistics_data: {},
				show_count: 0
			}
		},
		components: {
			countdownTime,
			lfQrcode
		},
		onLoad(options) {
			this.type = options.type || this.type;
			this.order_no = options.order_id;
			this.pick_type = options.pick_type;
			console.log('字体',this.pick_type)
			if (this.order_no) {
				this.getOrderDetails();
				this.searchLogistics();
			}
		},
		onShow(){
			this.show_count++;
			if(this.show_count > 1){
				this.getOrderDetails();
				this.searchLogistics();
			}
		},
		methods: {
			// 确认收货
			confirmReceiving(){
				this.$http.post({
					api: 'api/shopping/order/received',
					data: {
						order_no: this.order_no
					},
					header: {
						Authorization: this.$cookieStorage.get('user_token')
					}
				}).then(res => {
					this.$msg(res.data.message).then(() => {
						this.getOrderDetails();
					})
				})
			},
			searchLogistics() {
				this.$http.get({
					api: 'api/express/query',
					data: {
						no: this.order_no
					},
					header: {
						Authorization: this.$cookieStorage.get('user_token')
					}
				}).then(res => {
					this.logistics_data = res.data.data;
				})
			},
			// 点击复制
			copy(text) {
				console.log(text)
				uni.setClipboardData({
					data: text
				});
			},
			dateFinish() {
				this.show = false;
				console.log("倒计时结束");
			},
			// 取消订单
			cancelOrder(){
				this.$http.post({
					api: 'api/shopping/order/cancel',
					data: {
						order_no: this.order_no
					},
					header: {
						Authorization: this.$cookieStorage.get('user_token')
					}
				}).then(res => {
					if(res.data.code == 200){
						this.$msg('订单取消成功', {icon: 'success'}).then(() => {
							this.$toBack();
						})
					}else{
						this.$msg(res.data.message || '订单取消失败');
					}
				})
			},
			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;
					this.config.qrc.code = JSON.stringify({
						u_id: this.order_details.user_id,
						no: this.order_details.order_no
					})
					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: max-content;
		background: #15716E;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 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>