football/pages/order/order-detail/order-detail.vue

<template>
	<app-layout>
		<view v-if="is_show && orderDetail" class='order-detail-box'>
			<app-order-banner v-if="istype!=2&&istype!=1" :title='orderDetail.status_text'></app-order-banner>
			<view>
				<!-- 兼容旧版本数据 -->
				<block v-if='orderDetail.is_send == 1 && orderDetail.detailExpress.length == 0 && orderDetail.express && orderDetail.express_no'>
					<view class='express-box'>
						<app-order-express :pageUrl='getPageUrl' :express='orderDetail.express' :express_no='orderDetail.express_no'>
						</app-order-express>
					</view>
				</block>
				<block v-else-if='orderDetail.is_send == 1 && orderDetail.detailExpress.length == 1&&istype!=2&&istype!=1'>
					<view class='express-box'>
						<template v-if="orderDetail.detailExpress[0].send_type == 1">
							<app-order-express :pageUrl='getPageUrl' :express='orderDetail.detailExpress[0].express' :express_no='orderDetail.detailExpress[0].express_no'
							 :merchant_remark='orderDetail.detailExpress[0].merchant_remark'>
							</app-order-express>
						</template>
						<template v-else>
							物流信息: 其它方式({{orderDetail.detailExpress[0].express_content}})
						</template>
					</view>
				</block>
				<block v-else-if='orderDetail.detailExpress.length >= 1&&istype!=2&&istype!=1'>
					<app-jump-button :url="getPageUrl">
						<view class='e-box dir-left-nowrap cross-center'>
							<view class='dir-top-nowrap box-grow-1 text'>
								该订单已拆成多个包裹发货，点击查看详情
							</view>
							<image class='box-grow-0 img' src='/static/image/icon/arrow-right.png'></image>
						</view>
					</app-jump-button>
				</block>

				<view v-if='orderDetail.name && orderDetail.mobile && orderDetail.address' class='address-box dir-top'>
					<view class='dir-left-nowrap'>
						<view class='box-grow-1'>联系人: {{orderDetail.name}}</view>
						<view class='box-grow-0'>{{orderDetail.mobile}}</view>
					</view>
					<view v-if='orderDetail.send_type != 1' class='text'>收货地址: {{orderDetail.address}}</view>
				</view>

				<view v-if='orderDetail.send_type == 1' class='store-info-box dir-left-nowrap'>
					<view class='box-grow-1 dir:top'>
						<view>门店名称: {{orderDetail.store.name}}</view>
						<view>联系电话: {{orderDetail.store.mobile}}</view>
						<view>门店地址: {{orderDetail.store.address}}</view>
					</view>
					<view class='box-grow-0 cross-center'>
						<view @click='navigation(orderDetail.store)' class='box-grow-0 detail-btn' size='mini'>
							导航
						</view>
					</view>
				</view>

				<template v-if="orderDetail.send_type == 2">
					<view class="order-info-box dir-left-wrap delivery cross-center" v-if="orderDetail.city">
						<image src="/static/image/icon/deliveryman.png" class="box-grow-0 deliveryman"></image>
						<view class="box-grow-1 content">
							<view class="delivery-tips">配送员</view>
							<view v-if="orderDetail.city.name.length > 6 || orderDetail.city.mobile.length > 11">
								<view class="mr-16 t-omit">{{orderDetail.city.name}}</view>
								<view class="t-omit">{{orderDetail.city.mobile}}</view>
							</view>
							<view v-else>
								<view class="mr-16" style="display: inline-block">{{orderDetail.city.name}}</view>
								<text>{{orderDetail.city.mobile}}</text>
							</view>
						</view>
						<view class="box-grow-0 delivery-mobile cross-center main-right" @click="mobile">
							<image src="/static/image/icon/store-tel.png" class="mobile"></image>
						</view>
					</view>
					<view class="order-info-box dir-top-wrap" v-if="orderDetail.delivery_config">
						<view>发货地址: {{orderDetail.delivery_config.address.address}}</view>
						<view>{{orderDetail.delivery_config.explain}}</view>
					</view>
				</template>

				<view class='order-info-box dir-top-wrap' v-if="istype!=2&&istype!=1">
					<view class='dir-left-nowrap cross-center'>
						<view class='box-grow-1'>订单编号: {{orderDetail.order_no}}</view>
						<view @click='copyText(orderDetail.order_no)' class='box-grow-0 detail-btn' size='mini'>复制
						</view>
					</view>
					<view>下单时间: {{orderDetail.created_at}}</view>
					<block>
						<view v-if="orderDetail.pay_type == 1">支付方式: 线上支付</view>
						<view v-if="orderDetail.pay_type == 2">支付方式: 货到付款</view>
						<view v-if="orderDetail.pay_type == 3">支付方式: 余额支付</view>
					</block>
					<block v-if="orderDetail.is_send && orderDetail.sign != 'scan_code_pay'">
						<view v-if="orderDetail.send_type == 0">发货方式: 快递发货</view>
						<view v-if="orderDetail.send_type == 1">发货方式: 到店自提</view>
						<view v-if="orderDetail.send_type == 2">发货方式: 同城配送</view>
					</block>
				</view>
				<template v-if="orderDetail.sign === 'advance'">
					<view class="preferential-box dir-top-nowrap">
						<view class='dir-left-nowrap item' style="margin-bottom: 28rpx;">
							<text class='box-grow-1' style="font-size: 28rpx;">
								商品总额：￥{{orderDetail.total_goods_original_price}}，定金￥{{orderDetail.advance_order.deposit}}抵扣￥{{orderDetail.advance_order.swell_deposit}}
							</text>
						</view>
						<view class="item-box">
							<view class="dir-left-nowrap item ">
								<text class='box-grow-1' style="color: #ff4544;font-size: 24rpx;">阶段一</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									定金
								</text>
								<text class='box-grow-0'>￥{{orderDetail.advance_order.deposit}}</text>
							</view>
						</view>
						<view class="item-box" style="margin-top:24rpx;">
							<view class="dir-left-nowrap item ">
								<text class='box-grow-1' style="color: #ff4544;font-size: 24rpx;">阶段二</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									尾款
								</text>
								<text class='box-grow-0'>￥{{orderDetail.total_price}}</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;" v-if="orderDetail.member_discount_price > 0">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									会员折扣
								</text>
								<text class='box-grow-0'>-￥{{orderDetail.member_discount_price}}</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;" v-if="orderDetail.advance_order.preferential_price > 0">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									活动优惠
								</text>
								<text class='box-grow-0'>-￥{{orderDetail.advance_order.preferential_price}}</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;" v-if="orderDetail.coupon_discount_price > 0">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									优惠券优惠
								</text>
								<text class='box-grow-0'>-￥{{orderDetail.coupon_discount_price}}</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;" v-if="orderDetail.integral_deduction_price > 0">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									积分抵扣
								</text>
								<text class='box-grow-0'>-￥{{orderDetail.integral_deduction_price}}</text>
							</view>
							<view class="dir-left-nowrap item " style="margin-top: 20rpx;">
								<text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
									运费
								</text>
								<text class='box-grow-0'>￥{{orderDetail.express_price}}</text>
							</view>
						</view>
						<view class="dir-left-nowrap item main-right" style="margin:28rpx 0 ;">
							<text class='box-grow-0' style="font-size: 28rpx;">合计：￥{{orderDetail.total_pay_price}}
							</text>
						</view>
					</view>
				</template>
				<view class='preferential-box dir-top-wrap' v-if="orderDetail.sign !== 'advance'">
					<view class='dir-left-nowrap item'>
						<view class='box-grow-1'>商品总额</view>
						<view class='box-grow-0'>￥{{orderDetail.total_goods_original_price}}</view>
					</view>

					<!-- 插件额外优惠 -->
					<view v-if="orderDetail.plugin_data && sign !== 'advance'">
						<view v-for='item in orderDetail.plugin_data' :key="item.id" class='dir-left-nowrap item'>
							<view class='box-grow-1'>{{item.label}}</view>
							<view class='box-grow-0'>-￥{{item.value}}</view>
						</view>
					</view>
					<view v-if='orderDetail.coupon_discount_price > 0' class='dir-left-nowrap item'>
						<view class='box-grow-1'>优惠券抵扣</view>
						<view class='box-grow-0'>-￥{{orderDetail.coupon_discount_price}}</view>
					</view>
					<view v-if='orderDetail.integral_deduction_price > 0' class='dir-left-nowrap item'>
						<view class='box-grow-1'>积分抵扣</view>
						<view class='box-grow-0'>-￥{{orderDetail.integral_deduction_price}}</view>
					</view>
					<view v-if="orderDetail.member_deduction_price_count > 0  && sign !== 'advance'" class='dir-left-nowrap item'>
						<view class='box-grow-1'>会员折扣</view>
						<view class='box-grow-0'>-￥{{orderDetail.member_deduction_price_count}}</view>
					</view>
					<view class='dir-left-nowrap item' v-if="orderDetail.sign !== 'advance'&&istype!=2&&istype!=1">
						<view class='box-grow-1'>运费</view>
						<view class='box-grow-0'>￥{{orderDetail.express_price}}</view>
					</view>
					<view v-if='orderDetail.remark' class='dir-top-nowrap item'>
						<view class='box-grow-1'>买家留言:</view>
						<view class='box-grow-0 t-extra-small-color'>{{orderDetail.remark}}</view>
					</view>
				</view>
				<view class='order-price-box cross-center dir-right-nowrap' v-if="orderDetail.sign !== 'advance'&&istype!=2&&istype!=1">
					<view>
						合计:
						<text class='price'>￥
							<text>{{orderDetail.total_pay_price}}</text>
						</text>
					</view>
				</view>

				<view class='goods-box composition' v-if="sign == 'composition'">
					<view class="composition-item" v-for='(list, idx) in orderDetail.composition_list' :key='idx'>
						<view class="main-between composition-title">
							<view class="composition-type" v-if="list.type == 1">固定套餐</view>
							<view class="composition-type" v-else>搭配套餐</view>
							<view>套餐总价 ￥{{list.total_price}}</view>
						</view>
						<view class="goods-list" v-for='(item, index) in list.goods_list' :key='index'>
							<app-order-goods-info :plugin="list.type == 2 ?sign : ''" v-if="list.show || index == 0" style="width:100%;"
							 :goods='item'></app-order-goods-info>
							<block v-if='orderDetail.is_send == 1 && (list.show || index == 0)'>
								<view class='dir-left-nowrap sale-box'>
									<view class='box-grow-1'></view>
									<view class='box-grow-0 dir-top-nowrap'>
										<!-- 无售后记录 且 未超过售后时间 才可申请售后 -->
										<block v-if='!item.refund'>
											<app-jump-button v-if='orderDetail.is_sale == 0' :url="`/pages/order/refund/refund?id=${item.id}&sign=${orderDetail.sign}`">
												<view size='mini' class='sale-server detail-btn'>申请售后</view>
											</app-jump-button>
										</block>
										<block v-else>
											<text class='refund-status'>已申请售后({{item.refund.status_text}})</text>
										</block>
									</view>
								</view>
							</block>
						</view>
						<view class="composition-open main-center">
							<view @click="toggle(idx)" class="composition-btn">
								<text>{{list.show ? '点击收起套餐详情' : '点击展开套餐详情'}}</text>
								<image v-if="!list.show" src="/static/image/icon/icon-down.png"></image>
								<image v-else src="/static/image/icon/icon-up.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class='goods-box' v-else>
					<view v-for='(item, index) in orderDetail.detail' :key='index'>
						<app-jump-button :url="item.goods_info.page_url">
							<app-order-goods-info style="width:100%;" :goods='item.goods_info'></app-order-goods-info>
						</app-jump-button>
						<block v-if='orderDetail.is_send == 1'>
							<view class='dir-left-nowrap sale-box'>
								<view class='box-grow-1'></view>
								<view class='box-grow-0 dir-top-nowrap'>
									<!-- 无售后记录 且 未超过售后时间 才可申请售后 -->
									<block v-if='!item.refund'>
										<app-jump-button v-if='orderDetail.is_sale == 0' :url="`/pages/order/refund/refund?id=${item.id}&sign=${orderDetail.sign}`">
											<view size='mini' class='sale-server detail-btn'>申请售后</view>
										</app-jump-button>
									</block>
									<block v-else>
										<text class='refund-status'>已申请售后({{item.refund.status_text}})</text>
									</block>
								</view>
							</view>
						</block>
					</view>
				</view>

				<block v-if='(orderDetail.is_pay == 1 || orderDetail.pay_type == 2) && orderDetail.is_send == 0 && orderDetail.status == 1 && orderDetail.detailExpressRelation.length == 0 && orderDetail.cancel_status != 1'>
					<view class='action-box dir-left-nowrap'>
						<view class='box-grow-1'></view>
						<text v-if='orderDetail.cancel_status == 2' class='cancel-text'>申请退款中</text>
						<view v-else @click='cancel(orderDetail)' class='box-grow-0 btn'>申请退款</view>
					</view>
				</block>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import appOrderGoodsInfo from "../../../components/page-component/app-order-goods-info/app-order-goods-info.vue";
	import appOrderExpress from "../../../components/page-component/app-order-express/app-order-express.vue";
	import appOrderBanner from "../../../components/page-component/app-order-banner/app-order-banner.vue";
	import order from "../order.js";
	import AppJumpButton from "../../../components/basic-component/app-jump-button/app-jump-button.vue";

	export default {
		components: {
			AppJumpButton,
			"app-order-goods-info": appOrderGoodsInfo,
			"app-order-express": appOrderExpress,
			"app-order-banner": appOrderBanner,
		},
		data() {
			return {
				order_id: null,
				orderDetail: {
					detailExpressRelation: [],
					detailExpress: [],
				},
				is_show: false,
				advance_order: {
					goods_num: 0
				},
				detail: [],
				sign: '',
				istype: ""
			}
		},
		computed: {
			getPageUrl() {
				let orderDetail = this.orderDetail;
				if (orderDetail.is_send == 1 && orderDetail.detailExpress.length == 0) {
					let coverPic = '';
					orderDetail.detail.forEach(function(item, index) {
						if (index === 0) {
							coverPic = item.goods_info.pic_url;
						}
					});
					return `/pages/order/express-detail/express-detail?express=${orderDetail.express}&customer_name=${orderDetail.customer_name}&express_no=${orderDetail.express_no}&cover_pic=${coverPic}`
				} else if (orderDetail.is_send == 1 && orderDetail.detailExpress.length == 1) {
					let express = orderDetail.detailExpress[0].express;
					let express_no = orderDetail.detailExpress[0].express_no;
					let customer_name = orderDetail.detailExpress[0].customer_name;
					let cover_pic = orderDetail.detailExpress[0].expressRelation[0].orderDetail.goods_info.goods_attr.cover_pic;
					return `/pages/order/express-detail/express-detail?express=` + express + `&customer_name=` + customer_name +
						`&express_no=` + express_no + `&cover_pic=` + cover_pic
				} else if (orderDetail.detailExpress.length >= 1) {
					return '/pages/order/express-list/express-list?order_id=' + orderDetail.id;
				}
			}
		},
		methods: {
			toggle(index) {
				this.orderDetail.composition_list[index].show = !this.orderDetail.composition_list[index].show;
				this.$forceUpdate();
			},
			getOrderDetail() {
				let self = this;
				self.$showLoading();
				self.$request({
					url: self.$api.order.detail,
					data: {
						id: self.order_id,
					}
				}).then(response => {
					console.log(response)
					this.istype = response.data.detail.detail[0].order.goods_type
					console.log(this.istype)
					self.$hideLoading();
					self.is_show = true;
					if (response.code == 0) {
						self.orderDetail = response.data.detail;
						if (self.sign == 'composition') {
							for (let i in self.orderDetail.composition_list) {
								self.orderDetail.composition_list[i].show = false;
							}
						}
					} else {
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch(() => {
					self.$hideLoading();
				});
			},
			copyText(orderNo) {
				order.copyText(orderNo)
			},
			navigation(store) {
				uni.openLocation({
					latitude: parseFloat(store.latitude),
					longitude: parseFloat(store.longitude),
					name: store.name,
					address: store.address,
				})
			},
			// 取消 | 申请退款
			cancel(e) {
				let self = this;
				uni.showModal({
					title: '提示',
					content: '是否取消订单？',
					success: function(res) {
						if (res.confirm) {
							self.$subscribe(self.orderDetail.template_message_list).then(response => {
								self.cancelAction(e);
							}).catch(res => {
								self.cancelAction(e);
							});
						}
					}
				});
			},
			cancelAction(e) {
				let self = this;
				uni.showLoading({
					title: '取消中'
				});
				self.$request({
					url: self.$api.order.cancel,
					data: {
						id: e.id
					}
				}).then(response => {
					uni.hideLoading();
					if (response.code === 0) {
						if (self.sign === 'advance') {
							self.$request({
								url: self.$api.advance.order_detail,
								method: 'get',
								data: {
									id: self.order_id,
								}
							}).then(response => {
								self.is_show = true;
								if (response.code === 0) {
									self.orderDetail = response.data.detail;
								} else {
									uni.showModal({
										title: '',
										content: response.msg,
										showCancel: false,
									});
								}
							})
						} else {
							self.getOrderDetail();
						}
					} else {
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},
			mobile: function() {
				uni.makePhoneCall({
					phoneNumber: this.orderDetail.city.mobile,
				})
			},
		},
		onLoad(options) {
			this.order_id = options.id;
			this.sign = options.sign;
		},
		onShow() {
			let self = this;
			let interval = setInterval(function() {
				if (self.sign === 'advance') {
					self.$request({
						url: self.$api.advance.order_detail,
						method: 'get',
						data: {
							id: self.order_id,
						}
					}).then(response => {
						self.is_show = true;
						if (response.code === 0) {
							self.orderDetail = response.data.detail;
						} else {
							uni.showModal({
								title: '',
								content: response.msg,
								showCancel: false,
							});
						}
					})
				} else {
					self.getOrderDetail();
				}
				clearInterval(interval);
			}, 300);
		}
	}
</script>

<style scoped lang="scss">
	.order-detail-box {
		font-size: $uni-font-size-general-one;
		color: $uni-general-color-one;
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.express-box {
		background: #fff;
		padding: 32#{rpx} 24#{rpx};
		margin-bottom: 20#{rpx};
	}

	.address-box {
		background: #fff;
		padding: 32#{rpx} 24#{rpx};
		margin-bottom: 20#{rpx};
	}

	.address-box .text {
		margin-top: 10#{rpx};
	}

	.order-info-box {
		background: #fff;
		padding: 32#{rpx} 24#{rpx};
		margin-bottom: 20#{rpx};

		&.delivery {
			.deliveryman {
				width: #{72rpx};
				height: #{72rpx};
				display: block;
				margin-right: #{24rpx};
			}

			.delivery-tips {
				font-size: $uni-font-size-weak-one;
				color: $uni-general-color-two;
				margin-bottom: #{16rpx};
			}

			.mr-16 {
				margin-right: #{16rpx};
			}

			.delivery-mobile {
				width: #{96rpx};
				border-left: #{1rpx} solid #e2e2e2;

				.mobile {
					width: #{40rpx};
					height: #{40rpx};
					display: block;
				}
			}

			.content {
				width: #{500rpx};
			}
		}
	}

	.store-info-box {
		background: #fff;
		padding: 32#{rpx} 24#{rpx};
		margin-bottom: 20#{rpx};
	}

	.preferential-box {
		background: #fff;
		padding: 32#{rpx} 24#{rpx};
		border-bottom: 1#{rpx} solid $uni-weak-color-one;
	}

	.preferential-box .item {
		margin: 5#{rpx} 0;
	}

	.order-price-box {
		height: 100#{rpx};
		background: #fff;
		padding: 32#{rpx} 24#{rpx};
		margin-bottom: 20#{rpx};
	}

	.goods-box {
		background: #fff;
		padding: 32#{rpx} 24#{rpx};
		margin-bottom: 20#{rpx};

		&.composition {
			padding: 0;
			padding-bottom: #{8rpx};
			margin-bottom: 0;
			background-color: #f7f7f7;
		}

		.composition-item {
			margin-bottom: #{20rpx};
			background-color: #fff;

			.composition-open {
				text-align: center;
				background-color: #fff;
				height: #{84rpx};

				.composition-btn {
					display: inline-block;
					border: #{2rpx} solid #bbbbbb;
					font-size: #{24rpx};
					color: #999999;
					padding: 0 #{24rpx};
					margin: #{12rpx} 0 #{16rpx};
					height: #{56rpx};
					line-height: #{54rpx};
					border-radius: #{28rpx};

					image {
						width: #{22rpx};
						height: #{12rpx};
						margin-left: #{16rpx};
					}
				}
			}

			.goods-list {
				padding: 0 #{24rpx};
			}

			.composition-title {
				height: #{80rpx};
				line-height: #{80rpx};
				padding: 0 #{24rpx};
				font-size: #{28rpx};
				color: #353535;
				margin-bottom: #{24rpx};
				border-bottom: #{2rpx} solid #e2e2e2;

				.composition-type {
					color: #f39800;
				}
			}
		}
	}

	.goods-box .sale-server {
		margin-top: 20#{rpx};
	}

	.goods-box .sale-box {
		padding-bottom: 15#{rpx};
	}

	.goods-box .refund-status {
		margin-top: 15#{rpx};
		color: $uni-important-color-black;
	}

	.action-box {
		background: #fff;
		padding: 32#{rpx} 24#{rpx};

		.cancel-text {
			font-size: $uni-font-size-import-two;
		}

		.btn {
			border: 1#{rpx} solid #bbbbbb;
			border-radius: 30#{rpx};
			padding: 10#{rpx} 30#{rpx};
		}
	}

	.detail-btn {
		border: 1#{rpx} solid #bbbbbb;
		border-radius: 30#{rpx};
		padding: 10#{rpx} 30#{rpx};
	}

	.e-box {
		width: 100%;
		height: #{100rpx};
		padding: 0 #{24rpx};
		background: #ffffff;
		margin-bottom: #{20rpx};

		.img {
			width: 12#{rpx};
			height: 24#{rpx};
		}

		.express-name {
			margin-bottom: 15#{rpx};
		}

		.text {
			color: #353535;
			font-size: #{28rpx};
		}
	}

	.advance {
		width: #{702rpx};
		border-radius: #{16rpx};
		background-color: #f7f7f7;
		padding: #{32rpx 24rpx};

		.title {
			font-size: #{24rpx};
			color: #ff4544;
			margin-bottom: #{15rpx};
		}
	}

	.item-box {
		border: #{1rpx} solid #c2c2c2;
		padding: #{24rpx};
		border-radius: #{16rpx};
		width: #{702rpx};
	}
</style>