Homestay_manage_app/packageShang/pages/user/order/order-detail.vue

<template>
	<view class="order-detail">
		<!-- 订单状态 -->
		<view class="state-area padding-lr margin-tb-sm">
			<view class="padding border-radius bg-base-zhi">

				<view v-if="order_data.state == '1'">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaifukuan- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单待支付</text>
					</view>
					<view class="dflex-c">
						剩余时间：
						<uv-count-down v-if="time_remaining" :time="time_remaining" format="mm:ss" @finish="finish()"></uv-count-down>
						<!-- <use-count-down :show-days="false" separator="zh" separator-color="#fff" font-size="24"
							:timestamp="time_remaining"></use-count-down> -->
					</view>
				</view>

				<view v-if="order_data.state == '2'">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaifahuo- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单备货中</text>
					</view>
					<view class="dflex-c">预计1天后发货</view>
				</view>

				<view v-if="order_data.state == '3'">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaishouhuo- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单已发货</text>
					</view>
					<!-- <view class="dflex-c">还剩15天10时自动确认</view> -->
				</view>

				<view v-if="order_data.state == '4'">
					<view class="dflex-c fs-lg">
						<text class="iconfont iconyiwancheng- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单已收货</text>
					</view>
					<view class="dflex-c">感谢您的支持</view>
				</view>
				
				<view v-if="order_data.state == '5'">
					<view class="dflex-c fs-lg">
						<text class="iconfont iconyiwancheng- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单已完成</text>
					</view>
					<view class="dflex-c">感谢您的支持，期待下次购买</view>
				</view>

				<view v-if="order_data.state == '6'">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaifukuan- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单已关闭</text>
					</view>
					<view class="dflex-c">感谢您的支持</view>
				</view>
				
				<view v-if="order_data.state == '0'">
					<view class="dflex-c fs-lg">
						<text class="iconfont icondaifukuan- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">已申请售后</text>
					</view>
					<view class="dflex-c">请耐心等待工作人员处理</view>
				</view>
				<view v-if="order_data.state == '售后结束'">
					<view class="dflex-c fs-lg">
						<text class="iconfont iconyiwancheng- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">{{order_data.order_refund_state}}</text>
					</view>
					<view class="dflex-c">感谢您的支持</view>
				</view>
			</view>
		</view>

		<!-- 收货人 -->
		<view class="address-area padding-lr margin-tb-sm" v-if="order_data.orderConsignee">
			<view class="dflex padding border-radius bg-main">
				<view class="iconfont icondizhi- margin-right ft-main"></view>
				<view class="flex1">
					<view class="w-full dflex-wrap-w">
						<view class="margin-bottom-xs desc">
							<text>{{ order_data.orderConsigneeProvince }}{{ order_data.orderConsigneeCity }}{{ order_data.orderConsigneeDistrict }}
								{{ order_data.orderConsigneeAddrDetail }}</text>
						</view>
						<view>
							<text>{{ order_data.orderConsignee }}</text>
							<text class="margin-left">{{ order_data.orderConsigneeTel }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单商品明细 -->
		<view class="padding margin-lr margin-tb-sm bg-main border-radius">
			<view class="goods-area" :class="{ 'margin-top': index > 0 }" v-for="(item, index) in order_detail"
				:key="index">
				<view class="dflex">
					<view class="img">
						<image :src="item.goodsMasterImg"></image>
					</view>
					<view class="margin-left-sm">
						<text class="clamp-2">{{ item.goodsName }}</text>
						<view class="ft-dark fs-xs padding-top-xs">
							<text class="margin-right">× {{item.goodsCount}}</text>
							{{ item.goodsAttr || '&nbsp;&nbsp;' }}
						</view>
						<view class="margin-top-sm">
							<text class="price">{{ item.goodsActualPrice }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单数据 -->
		<view class="order-area padding margin-lr margin-tb-sm bg-main border-radius">
			<view class="item">
				<text>订单编号：</text>
				<text class="">{{ order_data.orderNo }}</text>
				<text class="copy" @click="copy">复制</text>
			</view>
			<view class="item">
				<text>下单时间：</text>
				<text class="">{{ order_data.createTime }}</text>
			</view>
			<view class="item">
				<text>支付方式：</text>
				<text class="">
					<!-- 1 微信支付 2余额支付 3支付宝 4网银 5其他 -->
					<template v-if="order_data.payWay==1">微信支付</template>
					<template v-if="order_data.payWay==2">余额支付</template>
					<template v-if="order_data.payWay==3">支付宝</template>
					<template v-if="order_data.payWay==4">网银</template>
					<template v-if="order_data.payWay==5">其他</template>
				</text>
			</view>
			<view class="item">
				<text>支付编号：</text>
				<text class="">{{ order_data.payNo }}</text>
			</view>
		</view>

		<!-- 退款数据 -->
		<view class="order-area padding margin-lr margin-tb-sm bg-main border-radius"
			v-if="order_data.order_refund_state">
			<view class="item">
				<text>退款原因：</text>
				<text class="">{{ order_data.order_refund_reason }}</text>
			</view>
			<view class="item">
				<text>退款说明：</text>
				<text class="">{{ order_data.order_refund_desc }}</text>
			</view>
			<view class="item">
				<text>退款状态：</text>
				<text>{{ order_data.order_refund_state }}</text>
			</view>
			<view class="item">
				<text>退款情况：</text>
				<text>{{ order_data.order_refund_remark || '' }}</text>
			</view>
		</view>

		<!-- 统计数据 -->
		<view class="total-area padding margin-lr margin-tb-sm bg-main border-radius" v-for="(item, index) in order_detail"
				:key="index">
			<view class="ft-dark">
				<view class="item dflex-b">
					<text>{{ goods_price_tip}}</text>
					<text class="">￥{{ item.goodsTotalAmt }}</text>
				</view>
				<view class="item dflex-b">
					<text>优惠</text>
					<text class="">￥{{ order_data.order_coupon_price || 0}}</text>
				</view>
				<view class="item dflex-b">
					<text>运费</text>
					<text class="">￥0</text>
				</view>
			</view>
			<view class="item dflex-b">
				<text>实付款</text>
				<text class="price">{{ order_data.orderActualPrice }}</text>
			</view>
		</view>
		<view style="height: 100rpx;"></view>

		<!-- 底部操作区 -->
		<view class="oper-area dflex-b padding-right padding-left-sm">
			<view class="dflex">
				<view class="btn-area dflex dflex-flow-c" @click="tohome">
					<text class="iconfont iconshouye-1"></text>
					<text>首页</text>
				</view>
				<!-- #ifndef H5 || MP-360 || MP-ALIPAY -->
				<button class="btn no-border" open-type="contact">
					<view class="btn-area dflex dflex-flow-c">
						<text class="iconfont iconkefu-01"></text>
						<text>客服</text>
					</view>
				</button>
				<!-- #endif -->
			</view>

			<view class="dflex-e">
				<view class="dflex" v-if="order_data.state == '1'">
					<button class="action-btn" @click="cancelOrder">取消订单</button>
					<button v-if="order_data.state == '1'" class="action-btn main-btn"
						@click="payment">立即支付</button>
					<!-- <button v-if="order_data.order_pay_state == '待核实'" class="action-btn main-btn"
						@click="payment">待核实</button> -->
				</view>
				<!-- <view class="dflex" v-if="order_data.state == '2'">
					<button v-if="!order_data.order_refund_state" class="action-btn border-radius-big bg-main"
						@click="refund">申请退款</button>
				</view> -->
				<view class="dflex" v-if="order_data.state == '2'">
					<button class="action-btn border-radius-big bg-main"
						@click="refund">申请退款</button>
				</view>
				<!-- <button v-if="!order_data.order_refund_state && 
					['3', '4', '5'].includes(order_data.state)" class="action-btn" @click="toexpress">查看物流</button>
				<view class="dflex" v-if="order_data.state == '3'">
					<button v-if="!order_data.order_refund_state" class="action-btn main-btn" @click="toreceipt">确认收货</button>
				</view> -->
				<button v-if="['3',].includes(order_data.state)" class="action-btn" @click="toexpress">查看物流</button>
				<view class="dflex" v-if="order_data.state == '3'">
					<button class="action-btn main-btn" @click="toreceipt">确认收货</button>
				</view>
				<view class="dflex" v-if="order_data.state == '4'">
					<button class="action-btn main-btn" @click="evaluate">我要评价</button>
				</view>
				<view v-if="order_data.state == '6'"><button @click="delorder" class="action-btn main-btn">删除订单</button></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		orderinfo,
		shouhuo,
		orserdelete,
		orserclear
	} from '../../../utils/api_order.js'
	export default {
		components: {
			// share
		},
		data() {
			return {
				// 商品数据
				order_detail: [],
				// 订单数据
				order_data: {},
				addressData: [],
				sharekefuList: [],
				shareEmptyList: [],
				orderId: '',
				goods_price_tip: '产品总计',
				time_remaining: 0,
			};
		},
		onUnload() {
			uni.$emit('__event_order', 'refresh');
		},
		onLoad(options) {

			this.orderId = options.order_id;

			this.loadData();
		},
		onShow() {
			this.loadData();
		},
		methods: {
			tohome() {
				this.$api.tohome();
			},
			loadData() {
				let _this = this;
				// 订单详情
				var data=_this.orderId
				orderinfo(data).then((res) => {
					if(res.success){
						_this.order_data = res.data;
						_this.order_detail = res.data.orderDetails;
						let temLockTime = 15
						// 兼容ios部分系统转换时间格式
						let createTime = res.data.createTime.slice(0, 19).replace(/-/g, '/')
						_this.time_remaining = new Date(createTime).getTime() + temLockTime * 60 * 1000 - new Date().getTime()
						return
					}
					_this.$api.msg(res.msg);
				})
				// this.$func.usemall.call('order/detail', {
				// 	order_id: _this.order_id
				// }).then(res => {
				// 	if (res.code === 200) {
				// 		res.datas.order.create_time = this.$api.format(res.datas.order.create_time);
				// 		_this.order_data = res.datas.order;
				// 		_this.order_detail = res.datas.order_detail;
				// 		_this.addressData = res.datas.order_trip;
				// 		if (res.datas.order && res.datas.order.state === '待付款') {
				// 			_this.time_remaining = res.datas.time_remaining;
				// 		}

				// 		_this.order_detail.forEach(data => {
				// 			if (data.goods_opt_id > 0) {
				// 				let desc = '';
				// 				if (data.goods_opt_desc) {
				// 					desc = ' (' + data.goods_opt_desc + ')';
				// 				}
				// 				_this.goods_price_tip = data.goods_opt_name + desc;
				// 			}
				// 		});
				// 	}
				// })
			},
			// 倒计时结束回调
			finish() {
				this.loadData()
			},
			// 立即支付
			payment() {
				if (this.order_data.order_pay_state == '待核实') {
					this.$api.msg('订单已支付待核实状态');
					return;
				}

				this.$api.topay({
					order_id: this.order_data.orderId,
					money: this.order_data.orderActualPrice,
				});
			},
			// 查看物流
			toexpress(item) {
				// this.$api.msg('查看物流开发中');
				uni.navigateTo({
					url: `/packageShang/pages/user/order/order-express?order_id=${this.orderId}`
				});
			},
			// 确认发货
			toreceipt() {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '确认收货',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
							var data=_this.orderId
							shouhuo(data).then((res) => {
								if(res.success){
									_this.loadData('refresh');
									return
								}
								_this.$api.msg(res.msg);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			// 删除订单
			delorder() {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '删除订单',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
							var data=_this.orderId
							orserdelete(data).then((res) => {
								if(res.success){
									uni.navigateBack({});
									return
								}
								_this.$api.msg(res.msg);
							})
						} else if (res.cancel) {
							console.log('点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			// 取消订单
			cancelOrder() {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '取消订单',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
							var data=_this.orderId
							orserclear(data).then((res) => {
								if(res.success){
									_this.loadData('refresh');
									return
								}
								_this.$api.msg(res.msg);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			// 点击复制
			copy() {
				let _this = this;

				uni.setClipboardData({
					data: _this.order_data.orderNo,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功'
								});
							}
						});
					}
				});
			},
			// 评价
			evaluate() {
				uni.navigateTo({
					url: `/packageShang/pages/user/order/order-evaluate?id=${this.orderId}`
				});
			},
			// 申请退款
			refund() {
				uni.navigateTo({
					url: `/packageShang/pages/user/order/order-refund?order_id=${this.orderId}`
				});
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}
	
	@import url('/packageShang/components/iconfont/iconfont.css');
	@import url('/packageShang/common/common.scss');

	.order-detail .item text:first-child {
		width: 152rpx;
		text-align: right;
		display: inline-block;
	}

	/* 状态区 */
	.state-area {}

	/* 收货人 */
	.address-area {}

	/* 商品区 */
	.goods-area {
		&:last-child {
			margin-bottom: 0;
		}

		image {
			width: 180rpx;
			height: 180rpx;
		}
	}

	/* 订单数据区 */
	.order-area {
		.item {
			line-height: 66rpx;

			.copy {
				margin-left: 20rpx;
				padding: 10rpx 40rpx;
				background-color: #f1f1f1;
				border-radius: 40rpx;
				font-size: 24rpx;
			}
		}
	}

	/* 数据统计区 */
	.total-area {
		.item {
			line-height: 48rpx;

			text {
				padding-right: 16rpx;
			}
		}
	}

	/* 操作区 */
	.oper-area {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		position: fixed;
		z-index: 1;
		bottom: 0;
		left: 0;
		border-top: 1px solid #f0f0f0;

		.btn-area {
			font-size: $font-sm;
			color: $font-color-base;
			width: 96rpx;

			.iconfont {
				font-size: 40rpx;
				line-height: 48rpx;
			}
		}

		/* 操作按钮 */
		.action-btn {
			width: 156rpx;
			height: inherit;
			line-height: inherit;
			margin: 0;
			margin-left: 20rpx;
			padding: 12rpx 0;
			font-size: $font-sm + 2upx;
			background: #fff;
			border-radius: 100px;
			/* #ifdef MP-QQ || MP-ALIPAY */
			border: 1px solid;
			/* #endif */

			&:after {
				border-radius: 100px;
			}

			&.main-btn {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}
</style>