caimei-applets-mcare/pages/user/order/order-sharedetails.vue

<template>
	<view class="container details clearfix">
		<!-- 地址选择 -->
		<order-address ref="orderAddress" v-if="isRequest" :addressData="addressData"></order-address>
		<!-- 商品 -->
		<goods-list
			ref="goods"
			v-if="isRequest"
			:shopOrderData="shopOrderData"
			@popupClick="hanldePopupFn"
		></goods-list>
		<!-- 订单信息 -->
		<order-information ref="information" v-if="isRequest" :information="information"></order-information>
		<!-- 发票信息 -->
		<invoice-tent ref="invoice" v-if="isRequest" :orderInvoice="orderInvoice"></invoice-tent>
		<!-- 支付记录 -->
		<payment-record
			ref="payment"
			v-if="isRequest"
			:discernReceiptList="discernReceiptList"
			:receiptAmount="receiptAmount"
		></payment-record>
		<!-- 退款记录 -->
		<refund-record
			ref="refund"
			v-if="isRequest"
			:returnedPurchaseList="returnedPurchaseList"
			:returnedPurchaseFee="returnedPurchaseFee"
		></refund-record>
		<!-- 底部button -->
		<view class="button-content" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
			<view class="btn btn-query" v-if="btnState.isQuery" @click.stop="queryLogistics">查看物流</view>
			<view class="btn btn-cancel" v-if="btnState.isPay" @click.stop="btnConfirmPay">立即支付</view>
		</view>
		<!-- 促销活动弹窗 -->
		<activi-popup :Promotion="handlerPros" :popupShow="popupShow"></activi-popup>
	</view>
</template>

<script>
import orderAddress from './components/details/orderAddress' //地址信息
import goodsList from './components/details/goodsList' //商品列表
import invoiceTent from './components/details/invoiceTent' //发票信息
import orderInformation from './components/details/orderInformation' //订单信息
import paymentRecord from './components/details/paymentRecord' //支付记录
import refundRecord from './components/details/refundRecord' //退款记录
import activiPopup from './components/details/activipopu' //促销活动弹窗

export default {
	components: {
		orderInformation,
		orderAddress,
		invoiceTent,
		goodsList,
		paymentRecord,
		refundRecord,
		activiPopup
	},
	data() {
		return {
			status: '',
			userId: '',
			orderId: '',
			cellPhone: '', //客服电话
			btnStatus: 0, //按钮组件状态
			isRequest: false, //是否加载完成渲染子组件
			addressData: {}, //地址信息初始化
			information: {}, //订单信息初始化
			shopOrderData: {}, //商品信息初始化
			orderInvoice: {}, //发票信息初始化
			returnedPurchaseList: {}, //退款信息初始化
			discernReceiptList: {}, //支付信息初始化
			receiptAmount: 0, //支付金额
			returnedPurchaseFee: 0, //退款金额
			isIphoneX: this.$store.state.isIphoneX,
			popupShow: false,
			handlerPros: {},
			btnState: {
				isQuery: false,
				isPay:false
			},
			mapStateArr: [
				{ label: 'isQuery', val: [4, 5, 12, 13, 33, 22, 23, 32, 77], status: true },
				{ label: 'isPay', val: [11, 12, 13, 21, 22, 23, 111], status: true }
			]
		}
	},
	onLoad(option) {
		this.orderId = option.orderId
		this.userId = option.userId
		this.initOrderDetaileData()
	},
	methods: {
		initOrderDetaileData() {
			//初始化页面数据@参数：订单ID
			this.OrderService.QueryOrderDetails({ orderId: this.orderId, userId: this.userId })
				.then(response => {
					let data = response.data
					this.status = data.order.status
					this.addressData = data.userInfo
					this.information = data.order
					this.shopOrderData = data.shopOrderList
					this.orderInvoice = data.orderInvoice
					this.returnedPurchaseList = data.returnedPurchaseList
					this.discernReceiptList = data.discernReceiptList
					this.receiptAmount = data.order.receiptAmount
					this.returnedPurchaseFee = data.order.returnedPurchaseFee
					this.isRequest = true
					this.mapStateArr.forEach(el => {
						el.val.forEach(value => {
							if (this.status === value) {
								this.btnState[el.label] = el.status
							}
						})
					})
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		hanldePopupFn(data) {
			//监听活动内容
			this.popupShow = true
			this.handlerPros = data
		},
		queryLogistics() {
			//跳转查询物流页面
			this.$api.navigateTo('/pages/user/order/order-logistics?orderId=' + this.orderId)
		},
		btnConfirmPay() {
			// 立即支付点击事件
			this.getOrderPaymentValidation(this.orderId)
		},
		getOrderPaymentValidation(orderId) {
			//监听根据付款状态做操作
			this.OrderService.OrderPaymentValidation({ orderId: orderId })
				.then(response => {
					if (response.data.code == -1) {
						this.$util.modal('', '订单已申请全部退款，无需再付款！', '确定', '', false, () => {})
					} else {
						if (response.data.onlinePayFlag === 1) {
							this.$api.navigateTo(`/pages/user/pay/card-under?orderId=${orderId}`)
						} else {
							this.$api.navigateTo(`/pages/user/order/order-pay-list?orderId=${orderId}`,)
						}
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	height: auto;
	background: #f7f7f7;
}
.details {
	padding-bottom: 180rpx;
}
.btn-hover {
	background: #ffffff;
}
.animation {
	/* transition: transform 0.3s ease;*/
	transition-property: transform;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}
.invoice-balance {
	width: 702rpx;
	height: auto;
	padding: 0 24rpx;
	background: #ffffff;
	float: left;
	margin-top: 24rpx;
	margin-bottom: 24rpx;
	.balabce-t {
		width: 100%;
		height: 86rpx;
		line-height: 86rpx;
		font-size: $font-size-28;
		color: $text-color;
		float: left;
		.balabce-t-le {
			float: left;
			font-weight: bold;
		}
		.balabce-t-ri {
			float: right;
			display: flex;
			align-items: center;
			.money {
				display: flex;
				float: left;
			}
			.checkbox-box {
				display: flex;
				width: 60rpx;
				float: left;
				height: 100%;
				font-size: $font-size-24;
				.checkbox {
					width: 40rpx;
					text-align: right;
					box-sizing: border-box;
					text-align: center;
					text-decoration: none;
					border-radius: 0;
					-webkit-tap-highlight-color: transparent;
					overflow: hidden;
				}
			}
		}
	}
	.balabce-b {
		width: 100%;
		float: left;
		overflow: hidden;
		.balabce-b-text {
			width: 100%;
			line-height: 58rpx;
			font-size: $font-size-24;
			color: #ff2a2a;
			text-align: right;
			float: right;
		}
		&.balabce-b--hide {
			padding: 0 0;
			height: 0px;
			line-height: 0px;
		}
	}
}
.button-content {
	width: 702rpx;
	padding: 0 24rpx;
	height: auto;
	background: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	.btn {
		width: 160rpx;
		height: 64rpx;
		margin: 22rpx;
		line-height: 64rpx;
		font-size: $font-size-26;
		color: #ffffff;
		text-align: center;
		float: right;
		border-radius: 32rpx;
	}
	.btn-query {
		background: linear-gradient(135deg, rgba(255, 212, 129, 1) 0%, rgba(198, 129, 0, 1) 100%);
	}
	.btn-cancel {
		background: #ffffff;
		color: #666666;
		float: left;
		// margin: 22rpx 0;
		margin-right: 15rpx;
		border: 2rpx solid #999999;
	}
}
</style>