caimei-applets-caimei/pages/seller/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'}">
			<view class="status-text">
				<view class="view-type">{{ information.status | TextFormat }}</view>
					<view class="Rebate " v-if="information.rebateFlag==1">返佣</view>
					<text class="bage-buss btn" v-if="information.orderSubmitType == 3 || information.orderSubmitType == 4">协销</text>
					<text class="bage-auto btn" v-if="information.orderSubmitType == 0 || information.orderSubmitType == 1 ||information.orderSubmitType == 2">自主</text>
					
			</view>
			<!-- 地址选择 -->
			<order-address ref="orderAddress" v-if="isRequest && !rechargeGoods" :addressData="addressData"></order-address>
			<!-- 商品 -->
			<goods-list ref='goods' v-if="isRequest" :shopOrderData="shopOrderData" :information="information" @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>
			<!-- 转账信息 -->
			<!-- <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" v-if="information.secondHandOrderFlag!=1" @click="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"
						  :serviceProviderId = "serviceProviderId"
						  :secondHandOrderFlag = "information.secondHandOrderFlag"
						   @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 class="aganBj" v-show="showAgan">
			<view class="alertAgan">
				<text class="title">{{ promptitle }}</text>
				<view class="goods">
					<view class="list" v-for="(item,index) in failList"  :key="index">
						<image class="image-left" :src="item.image"></image>
						<view class="name-right">{{item.name}}</view>
					</view>
				</view>
				<view class="BtnAll">
					<view class="closebtn btn" @click="closeBtn">取消</view>
					<view class="cancel btn" @click="cancelBtn">确定</view>
				</view>
			</view>
		</view>
	</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'		//促销活动弹窗
	
	export default {
		components:{
			headerBack,
			orderInformation,
			orderAddress,
			invoiceTent,
			goodsList,
			transfeRecord,
			paymentRecord,
			refundRecord,
			orderButton,
			shareAlert,
			orderModel,
			activiPopup
		},
		data() {
			return {
				nvabarData: {							 //顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
					title: '订单详情', // 导航栏 中间的标题
				},
				state:0,
				userId:'',
				orderId:'',
				clubUserId:0,
				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:{},
				clauseData:{},
				showAgan:false,
				failList:[],	// 再来一单可购买商品
				promptitle:'',
				aganOrderId:0	// 再来一单商品id
			}
		},
		onLoad(option){
			console.log(option)
			this.shareType = option.type
			this.orderId = option.orderId
			this.clubUserId = option.userId
			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()
		},
		filters:{
			NumFormat(value) {//处理金额
				return Number(value).toFixed(2)
			},
			TextFormat(status) {//处理金额
				let HtmlText,
					typeTextObject={
						0:'待确认',
						4:'交易完成',
						5:'订单完成',
						6:'已关闭',
						7:'交易全退',
						77:'交易全退',
						11:'待付款待发货',
						12:'待付款部分发货',
						13:'待付款已发货',
						21:'部分付款待发货',
						22:'部分付款部分发货',
						23:'部分付款已发货',
						31:'已付款待发货',
						32:'已付款部分发货',
						33:'已付款已发货',
						111:'待付款待发货',
					}
				
				Object.keys(typeTextObject).forEach(key => {
					if(key == status){
						HtmlText = typeTextObject[key]
					}
				})
				return HtmlText
			},
		},
		methods: {
			openclauseConten(id){
				this.$api.navigateTo(`/pages/service/sellconten?clauseId=${id}`)
			},
			initOrderDetaileData(){//初始化页面数据@参数：订单ID
				this.OrderService.QueryOrderDetails(
					{ 
						orderId : this.orderId ,
						userId : this.clubUserId,
					}
				).then(response =>{
					let data = response.data
					this.isRequest = true
					this.userId = data.order.userId
					this.shareCode = data.shareCode
					this.addressData = data.userInfo
					this.information = data.order
					this.rechargeGoods = data.order.rechargeGoods
					this.btnStatus = data.order.status
					this.payStatus = data.order.payStatus
					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.ableUserMoney = data.ableUserMoney
					this.clauseData = data.clause
					if(this.clauseData && this.clauseData.name.length>10){
						this.clauseData.name = this.clauseData.name.substr(0,10)+'...'
					}
				}).catch(error =>{
					this.$util.modal('提示','订单查询失败，请稍后重试~','确定','',false,() =>{
						this.$api.switchTabTo('/pages/seller/index/index')
					})
				})
			},
			handButtonConfirm(data){//监听点击时间的按钮类型并执行...
				this.handShowAlert(data)
			},
			handShowAlert(data){//判断点击的按钮类型并执行...
				switch(data.type){
					case 'query':
						this.isModalLayer = true
						this.$api.navigateTo('/pages/user/order/order-logistics?orderId='+data.orderId)
						break
					case 'delete':
						this.handOrderDetele()
						break
					case 'cancel':
						this.handCenceConfirm()
						break
					case 'confirm':
						this.handOrderConfirm(data)
						break
					case 'balance':
						this.getOrderPaymentValidation(data)
						break
					case 'again':
						this.handOrderAgain(data.orderId)
						break		
				}
			},
			handOrderAgain(orderId){
				this.aganOrderId = orderId
				this.SellerService.SellerCreateOrderAgain(
					{
						confirmFlag:0,	
						orderId:this.aganOrderId,
						serviceProviderId:this.serviceProviderId
					}
				).then(res =>{
					if(res.code==0){
						this.$api.setStorage('orderUserInfo',{clubID:res.data.clubId,againBuyProductIds:res.data.productIds,userID:res.data.userId})
						this.$api.navigateTo('/pages/seller/cart/cart')
					}
				}).catch(error =>{
					if(error.code== -3){
						this.showAgan = true
						this.promptitle = error.msg
						this.failList = error.data
					}else if(error.code== -2){
						this.$util.modal('',error.msg,'确定','',false,() =>{})
					}else{
						this.$util.msg(error.msg,2000)
					}
				})
			},
			closeBtn(){//
				this.showAgan = false
			},
			cancelBtn(){// 再来一单弹窗
				this.SellerService.SellerCreateOrderAgain(
					{
						serviceProviderId:this.serviceProviderId,
						orderId:this.aganOrderId,
						confirmFlag:1,
					}
				).then(res =>{
					if(res.code==0){
						this.$api.navigateTo('/pages/seller/cart/cart')
						this.showAgan = false
					}
				})
			},
			handOrderConfirm(data){//确认订单
				this.$util.modal('提示','确认此订单？','确定','取消',true,() =>{
					this.OrderService.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,() =>{
					this.OrderService.DeleteOrder({orderId:this.orderId}).then(response =>{
						this.$util.msg(response.msg,2000,true,'success')
						setTimeout(() => {
							if(this.shareType ==='share'){
								this.$api.navigateTo('/pages/seller/index/index')
							}else{
								this.$api.navigateTo(`/pages/seller/order/order-list?type=detele&listType=${this.listType}`)
							}
						},500)
					}).catch(error =>{
						this.$util.msg(error.msg,2000)
					})
				})
			},
			handCenceConfirm(){//取消订单
				this.$util.modal('提示','确认取消该订单吗？','确定','取消',true,() =>{
					this.OrderService.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 ? resolve.serviceProviderId : 0
			})
		}
	}
</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;
			}
		}
	}
	.status-text{
		overflow: hidden;
		padding: 24rpx;
		background: #fff;
		font-size: $font-size-26;
		.view-type{
			float: left;
			color: #ff2a2a;
		}
		.bage-buss{
			display: inline-block;
			width: 72rpx;
			height: 32rpx;
			background:radial-gradient(circle,rgba(255,39,180,1) 0%,rgba(193,77,245,1) 100%);
			border-radius: 6rpx;
			line-height: 32rpx;
			text-align: center;
			color: #FFFFFF;
			margin-top: 10rpx;
			float: right;
			font-size: $font-size-24;
		}
		.bage-auto{
			display: inline-block;
			width: 72rpx;
			height: 32rpx;
			background:radial-gradient(circle,rgba(255,180,39,1) 0%,rgba(245,142,77,1) 100%);
			border-radius: 6rpx;
			line-height: 32rpx;
			text-align: center;
			color: #FFFFFF;
			margin-top: 10rpx;
			float: right;
			font-size: $font-size-24;
		}
		.Rebate{
			display: inline-block;
			width: 72rpx;
			height: 32rpx;
			background:#ff7a51;
			border-radius: 6rpx;
			line-height: 32rpx;
			text-align: center;
			color: #FFFFFF;
			margin-top: 10rpx;
			float: right;
			font-size: $font-size-24;
			margin-left: 20rpx;
		}
	}
	.aganBj {
	    position: fixed;
	    left: 0;
	    top: 0;
	    bottom: 0;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0, 0, 0, .5);
	    z-index: 999999;
		.alertAgan {
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    width:580rpx;
		    background-color: #fff;
		    border-radius: 16rpx;
			.title{
				font-size: 30rpx;
				color: #333333;
				line-height: 42rpx;
				padding: 30rpx;
				display: block;
			}
			.goods{
				padding: 0 30rpx;
				.list{
					padding: 10px 0;
					border-bottom: 1rpx solid #e1e1e1;
					margin: 10rpx 0;
					.image-left{
						width: 86rpx;
						height: 86rpx;
						border: 2rpx solid #e1e1e1;
						border-radius: 6rpx;
						display: inline-block;
						vertical-align: middle;
					}
					.name-right{
						display: inline-block;
						width: 416rpx;
						margin-left: 15rpx;
						font-size: 26rpx;
						color: #666666;
						vertical-align: middle;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-inline-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
			.BtnAll{
				margin-top: 30rpx;
				.btn{
				 	display: inline-block;
					width: 290rpx;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					&.closebtn{
						border-radius: 0px 0px 0px 10px;
						color:#999999 ;
						background: #efefef;
					}
					&.cancel{
						border-radius: 0px 0px 8px 0px;
						background: $btn-confirm;
						color: #fff;
					}
				}
			}
		}
	}
</style>