caimei-applets-caimei/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/cm-module/orderDetails/orderAddress' 		 //地址信息
	import goodsList from '@/components/cm-module/orderDetails/goodsList'		 		 //商品列表
	import invoiceTent from '@/components/cm-module/orderDetails/invoiceTent'	 		 //发票信息
	import orderInformation from '@/components/cm-module/orderDetails/orderInformation' //订单信息
	import paymentRecord from '@/components/cm-module/orderDetails/paymentRecord'		 //支付记录
	import refundRecord from '@/components/cm-module/orderDetails/refundRecord'		 //退款记录
	import activiPopup from '@/components/cm-module/orderDetails/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
				},
				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(){// 待支付订单
				
			},
		},
		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>