caimei-applets-caimei/seller/pages/order/order-details.vue

<template>
	<view class="container details clearfix" :style="{paddingBottom :isIphoneX ? (130+68)+'rpx' : '130rpx'}">
		<!-- 自定义返回 -->
		<header-back :systeminfo='systeminfo' :navbar-data='nvabarData' :headerBtnPosi ="headerBtnPosi" :isShare='isOrderShare'></header-back>
		<view class="container-details" :style="{paddingTop:navbarHeight+'px'}">
			<!-- 地址选择 -->
			<order-address ref="orderAddress" v-if="isRequest" :addressData="addressData"></order-address>
			<!-- 订单信息 -->
			<order-information ref="information" v-if="isRequest" :information="information"></order-information>
			<!-- 商品 -->
			<goods-list ref='goods' v-if="isRequest" :shopOrderData="shopOrderData" @popupClick="hanldePopupFn"></goods-list>
			<!-- 发票信息 -->
			<invoice-tent ref="invoice" v-if="isRequest" :orderInvoice="orderInvoice"></invoice-tent>
			<!-- 转账信息 -->
			<!-- <transfe-record ref="transfe" v-if="isRequest"></transfe-record> -->
			<!-- 支付记录 -->
			<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>
			<view class="clause" @tap.stop="openclauseConten(clauseData.id)" :class="clauseData.name=='无条款'?'noclick':''">
				售后条款：<label class="text" :class="clauseData.name=='无条款'?'color-bg':''">{{clauseData.name}}</label>
			</view>
			<!-- 底部button -->
			<order-button ref="orderButton" 
						  v-if= "isRequest" 
						  :status= "btnStatus" 
						  :order="information" 
						  :rechargeGoods = "rechargeGoods"
						  :ableUserMoney = "ableUserMoney"
						  :shareCode= "shareCode"
						   @buttonConfirm="handButtonConfirm">
			</order-button>
		</view>
		<!-- 付款弹窗 -->
		<order-model v-if="isPayModel" 
					:payModelData="payModelData" 
					:modelType='modelType' 
					@paymentConfirm ='hanldPaymentConfirm'/>
		<!-- 分享弹窗 -->			
		<share-alert  :orderID="orderID" 
					  v-if="isShareModal"  
					  @shareConfirm ='onShareAppMessage'>
		</share-alert>		
		<!-- 促销活动弹窗 -->
		<activi-popup :Promotion="handlerPros" :popupShow="popupShow"></activi-popup>
	</view>
</template>

<script>
	import headerBack from '@/components/cm-module/headerNavbar/header-back' 		 	 //自定义导航
	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 transfeRecord from '@/components/cm-module/orderDetails/transfeRecord'		 //转账信息
	import paymentRecord from '@/components/cm-module/orderDetails/paymentRecord'		 //支付记录
	import refundRecord from '@/components/cm-module/orderDetails/refundRecord'		 //退款记录
	import orderButton from '@/components/cm-module/orderDetails/sellerDetaileButton'	 //底部按钮
	import shareAlert from '@/components/cm-module/modelAlert/sellerShareAlert.vue'			 //分享弹窗
	import orderModel from '@/components/cm-module/modelAlert/order-alert'			 //付款弹窗
	import activiPopup from "@/components/cm-module/orderDetails/activipopu"		//促销活动弹窗
	
	import { queryOrderDetails,cancelOrder,deleteOrder,affirmOrder } from "@/api/order.js" 
	export default {
		components:{
			headerBack,
			orderInformation,
			orderAddress,
			invoiceTent,
			goodsList,
			transfeRecord,
			paymentRecord,
			refundRecord,
			orderButton,
			shareAlert,
			orderModel,
			activiPopup
		},
		data() {
			return {
				state:0,
				userID:'',
				orderID:'',
				serviceProviderId:'',		//协销ID
				shareCode:'',				//分享码
				shareType:'',               //分享登录页过来记录的状态
				cellPhone:'',				//客服电话
				payStatus:0,
				btnStatus:0,				//按钮组件状态
				isRequest:false,			//是否加载完成渲染子组件
				isOrderShare:false,
				isShareModal:false,
				isPayModel:false,
				modelType:0,
				ableUserMoney:'',			//机构余额
				payModelData:{},
				addressData:{},				//地址信息初始化
				information:{},				//订单信息初始化
				shopOrderData:{},			//商品信息初始化
				orderInvoice:{},			//发票信息初始化
				returnedPurchaseList:{},	//退款信息初始化
				discernReceiptList:{},		//支付信息初始化
				receiptAmount:0,			//支付金额
				returnedPurchaseFee:0,		//退款金额
				navbarHeight:'',
				rechargeGoods:false,
				headerBtnPosi:	this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
				systeminfo: this.setSysteminfo(),		 //获取设备信息
				isIphoneX:this.$store.state.isIphoneX,
				CustomBar:this.CustomBar,// 顶部导航栏高度
				popupShow:false,
				handlerPros:{},
				nvabarData: {							 //顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
					title: '订单详情', // 导航栏 中间的标题
				},
				clauseData:{},
			}
		},
		onLoad(option){
			console.log(option)
			this.shareType = option.type;
			this.orderID = option.orderID
			if(this.shareType ==='share'){
				this.listType = 0
				this.isOrderShare = true
			}else if(option.type === 'confim' || option.type === 'search' || option.type === 'cash'){
				this.listType = 0
			}else{
				this.listType = option.listType
			}
			this.getHeaderTopHeight()
			this.initOrderDetaileData()
		},
		methods: {
			openclauseConten(id){
				this.$api.navigateTo(`/pages/service/sellconten?clauseId=${id}`)
			},
			initOrderDetaileData(){//初始化页面数据@参数：订单ID
				queryOrderDetails({ orderID : this.orderID }).then(response =>{
					let resData = response.data;
					this.isRequest = true
					this.rechargeGoods = resData.rechargeGoods
					this.userID = resData.order.userID
					this.shareCode = resData.shareCode
					this.addressData = resData.userInfo
					this.information = resData.order
					this.btnStatus = resData.order.status
					this.payStatus = resData.order.payStatus
					this.shopOrderData = resData.shopOrderList
					this.orderInvoice = resData.orderInvoice
					this.returnedPurchaseList = resData.returnedPurchaseList
					this.discernReceiptList = resData.discernReceiptList
					this.receiptAmount = resData.order.receiptAmount
					this.returnedPurchaseFee = resData.order.returnedPurchaseFee
					this.ableUserMoney = resData.ableUserMoney
					this.clauseData = resData.clause
				}).catch(error =>{
					this.$util.modal('提示','订单查询失败，请稍后重试~','确定','',false,() =>{
						this.$api.switchTabTo('/seller/pages/index/index')
					})
				})
			},
			handButtonConfirm(data){//监听点击时间的按钮类型并执行...
				this.handShowAlert(data)
			},
			handShowAlert(data){//判断点击的按钮类型并执行...
				switch(data.type){
					case 'delete':
						this.handOrderDetele();
						break;
					case 'cancel':
						this.handCenceConfirm();
						break;
					case 'confirm':
						this.handOrderConfirm(data)
						break;
					case 'balance':
						this.getOrderPaymentValidation(data)
						break;
				}
			},
			handOrderConfirm(data){//确认订单
				this.$util.modal('提示','确认此订单？','确定','取消',true,() =>{
					affirmOrder({orderID:this.orderID}).then(response =>{
						this.$util.msg(response.msg,2000,true,'success');
						this.initOrderDetaileData()
					}).catch(error =>{
						this.$util.msg(error.msg,2000)
					})
				})
			},
			hanldPaymentConfirm(data){//监听余额抵扣按钮
				switch(data.type){
					case 3:
						this.OrderService.OrderBalanceDeduction({orderId:this.orderID}).then(response =>{
							this.$util.msg('余额抵扣成功',2000)
							this.initOrderDetaileData()
						}).catch(error =>{
							this.$util.msg(error.msg,2000)
						})	
						break;
				}
			},
			getOrderPaymentValidation(data){//监听根据付款状态做操作
				this.OrderService.OrderPaymentValidation({orderId:data.orderId}).then(response =>{
					let dataCode = response.data.code
					this.payModelData = response.data
					if(dataCode == -1){
						this.$util.modal('','订单已申请全部退款，无需再付款！','确定','',false,() =>{})
					}else{
						this.isPayModel = true;
						this.modelType = 3
					}
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})	
			},
			
			handOrderDetele(){//删除订单
				this.$util.modal('提示','确认删除该订单吗？','确定','取消',true,() =>{
					deleteOrder({orderID:this.orderID}).then(response =>{
						this.$util.msg(response.msg,2000,true,'success');
						setTimeout(() => {
							if(this.shareType ==='share'){
								this.$api.navigateTo('/seller/pages/index/index')
							}else{
								this.$api.navigateTo(`/seller/pages/order/order-list?type=detele&listType=${this.listType}`)
							}
						},500)
					}).catch(error =>{
						this.$util.msg(error.msg,2000)
					})
				})
			},
			handCenceConfirm(){//取消订单
				this.$util.modal('提示','确认取消该订单吗？','确定','取消',true,() =>{
					cancelOrder({orderID:this.orderID}).then(response =>{
						this.$util.msg(response.msg,2000,true,'success');
						this.initOrderDetaileData()
					}).catch(error =>{
						this.$util.msg(error.msg,2000)
					})
				})
			},
			hanldePopupFn(data){//监听活动内容
				this.popupShow = true
				this.handlerPros = data
			},
			onShareAppMessage(res){//分享转发
				this.isShareModal = false
				if (res.from === 'button') {
					// 来自页面内转发按钮
			    }
				return {
					title: '您有新的订单，请点击查看~',
					path: `/pages/user/order/order-sharelogin?orderID=${this.orderID}&userID=${this.userID}&serviceProviderId=${this.serviceProviderId}`,
					imageUrl:'https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_SABnOFABZCgCzFV_g063.png'
				}
			},
			getHeaderTopHeight(){
				let statusBarHeight = this.systeminfo.statusBarHeight // 状态栏高度
				let headerPosi = this.headerBtnPosi
				let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点
				      height: headerPosi.height,
				      width: headerPosi.width,
				      // 胶囊top - 状态栏高度
				      top: headerPosi.top - statusBarHeight,
				      // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
				      bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
				      // 屏幕宽度 - 胶囊right
				      right: this.systeminfo.screenWidth - headerPosi.right
				}
				this.navbarHeight= headerPosi.bottom + btnPosi.bottom// 原胶囊bottom + 现胶囊bottom
			},
			setHeaderBtnPosi(){
				// 获得胶囊按钮位置信息
				let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
				return headerBtnPosi
			},
			setSysteminfo(){
				let systeminfo;
				uni.getSystemInfo({ // 获取设备信息
					success: (res) => {
						systeminfo = res
					},
				})
				return systeminfo
			},
		},
		onShow() {
			this.$api.getStorage().then((resolve) =>{
				this.serviceProviderId = resolve.serviceProviderID
			})
		}
	}
</script>

<style lang="scss">
	page {
		height: auto;
		background:#F7F7F7;
	}
	.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;
			}	
		}
	}
	.clause{
		float: right;
		font-size: 24rpx;
		color: #999999;
		margin-top: 60rpx;
		margin-right: 24rpx;
		&.noclick{
			pointer-events: none;
		}
		.text{
			color: #1890f9;
			&.color-bg{
				color: #333333;
			}
		}
	}
</style>