caimei-applets-hehe/pages/user/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>
			<!-- 地址选择 -->
			<order-address ref="orderAddress" v-if="isRequest" :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>
			<!-- 底部button -->
			<order-button ref="orderButton" 
						  v-if= "isRequest" 
						  :status= "btnStatus" 
						  :shareCode= "shareCode"
						  :order="orderInfo" 
						   @buttonConfirm="handButtonConfirm">
			</order-button>
		</view>
		<!-- 操作弹窗 -->
		<tui-modal :show="modal" @click="handleClick" @cancel="hideMobel(1)" :content="contentModalText" color="#333" :size="32" shape="circle" :maskClosable="false"></tui-modal>
		<!-- 再次购买订单商品全部下架弹窗 -->
		<tui-modal :show="modal2" @click="handleClick2" @cancel="hideMobel(2)" shape="circle" content="订单内商品已全部下架，不能购买！" :button="button"></tui-modal>
		<!-- 再次购买部分商品失效弹窗 -->
		<tui-modal :show="modal3" @cancel="hideMobel(3)" :custom="true">
			<view class="tui-modal-custom">
				<view class="tui-modal-custom-text">
					<view class="title">以下商品已失效，不能进行购买；是否先将其他商品加入购物车？</view>
					<scroll-view scroll-y class="tui-modal-custom-list">
						<view class="custom-list" v-for="(invalid,index) in invalidList" :key="index">
							<view class="custom-list-image"><image :src="invalid.productImage" mode=""></image></view>
							<view class="custom-list-name">{{ invalid.name }}</view>
						</view>
					</scroll-view>
				</view>
				<view class="tui-modal-button">
					<button  class="modal-button cancel" @click="hideMobel(3)">我再想想</button>
					<button  class="modal-button confirm" @click="handleClick3">加入购物车</button>
				</view>
			</view>
		</tui-modal>
		<!-- 促销活动弹窗 -->
		<activi-popup :Promotion="handlerPros" :popupShow="popupShow"></activi-popup>
	</view>
</template>

<script>
	import authorize from '@/common/config/authorize.js'
	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 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/orderButton'			 //底部按钮
	
	export default {
		components:{
			headerBack,
			orderInformation,
			orderAddress,
			goodsList,
			transfeRecord,
			paymentRecord,
			refundRecord,
			orderButton,
		},
		data() {
			return {
				state:0,
				orderId:'',
				shareCode:'',				//分享码
				shareType:'',               //分享登录页过来记录的状态
				cellPhone:'',				//客服电话
				payStatus:0,
				btnStatus:0,				//按钮组件状态
				onlinePayFlag:'',
				isRequest:false,			//是否加载完成渲染子组件
				isOrderShare:false,
				isConfim:false,
				modelType:0,
				orderInfo:{},
				alertOrderInfo:{},
				addressData:{},				//地址信息初始化
				information:{},				//订单信息初始化
				shopOrderData:{},			//商品信息初始化
				orderInvoice:{},			//发票信息初始化
				returnedPurchaseList:{},	//退款信息初始化
				discernReceiptList:{},		//支付信息初始化
				receiptAmount:0,			//支付金额
				returnedPurchaseFee:0,		//退款金额
				navbarHeight:'',
				headerBtnPosi:	this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
				systeminfo: this.setSysteminfo(),		 //获取设备信息
				isIphoneX:this.$store.state.isIphoneX,
				CustomBar:this.CustomBar,// 顶部导航栏高度
				popupShow:false,
				handlerPros:{},
				nvabarData: {							 //顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
					title: '订单详情', // 导航栏 中间的标题
				},
				clauseData:{},
				orderSubmitType:false,//自主订单
				userId:0,
				modal:false,
				modal2:false,
				modal3:false,
				OperationType:'',
				contentModalText:'',
				button: [
					{
						text: '确定',
						type:'danger'
					}
				],
				invalidList:[]
			}
		},
		onLoad(option){
			console.log(option)
			this.$api.getStorage().then((resolve) =>{
				this.userId = resolve.userId ? resolve.userId : 0
			})
			this.shareType = option.type;
			this.orderId = option.orderId
			if(this.shareType ==='share'){
				this.state = 0
				this.isOrderShare = true
			}else if(option.type === 'confim' ||option.type === 'search'){
				this.state = 0
				this.isConfim = true
			}else{
				this.state = option.state
			}
			this.getHeaderTopHeight()
			this.GetOrderDetaileData()
		},
		filters:{
			TextFormat(status) {//处理金额
				let HtmlText,
					typeTextObject={
						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}`)
			},
			GetOrderDetaileData(){//初始化页面数据@参数：订单ID
				this.OrderService.QueryOrderDetails({ orderId : this.orderId }).then(response =>{
					let resData = response.data;
					this.isRequest = true
					this.orderInfo = resData.order
					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.payableAmount = resData.order.payableAmount
					this.shopOrderData = resData.shopOrderList
					this.orderInvoice = resData.orderInvoice
					this.onlinePayFlag = resData.order.onlinePayFlag
					this.returnedPurchaseList = resData.returnedPurchaseList
					this.discernReceiptList = resData.discernReceiptList
					this.receiptAmount = resData.order.receiptAmount
					this.returnedPurchaseFee = resData.order.returnedPurchaseFee
					this.clauseData = resData.clause
					if(this.information.orderSubmitType == 0 || this.information.orderSubmitType == 1 ||this.information.orderSubmitType == 2){
						this.orderSubmitType=true
					}else{
						this.orderSubmitType=false
					}
				}).catch(error =>{
					this.$util.modal('提示','订单查询失败，请稍后重试~','确定','',false,() =>{
						this.$api.switchTabTo('/pages/tabBar/index/index')
					})
				})
			},
			handButtonConfirm(data) {//获取点击
				console.log(data)
				this.hanldOrder = data
				this.btnoRderID = data.orderId
				this.OperationType = data.type
				this.handShowAlert(data)
			},
			handShowAlert(data) {//执行
				switch(data.type){
					case 'cancel':
						this.modal = true;
						this.contentModalText = '确认取消该订单吗？';
						break;
					case 'delete':
						this.modal = true;
						this.contentModalText = '确认删除该订单吗？';
						break;
					case 'confirm':
						this.modal = true;
						this.contentModalText = '是否确认收货？'	
						break;
					case 'query':
						this.isModalLayer = true;
						this.$api.navigateTo('/pages/user/order/order-logistics?orderId='+data.orderId)
						break;
					case 'again':
						this.handBuyAgainInfo()					
						break;
					case 'pay':
						this.MiniWxPayFor(data.order)
						break;
				}
			},
			handleClick(e) {//用户操作订单
				let index = e.index;
				if(index == 1){
					switch(this.OperationType){
						case 'delete':
							this.handOrderDetele(this.orderId);
							break
						case 'cancel':
							this.handCenceConfirm(this.orderId)
							break
						case 'confirm':
							this.handOrderConfirm(this.orderId);
							break
					}
				}
				this.modal = false;
			},
			handleClick2(){
				this.modal2 = false;
			},
			handleClick3(){
				this.handShoppingAgainCart()
				this.modal3 = false
			},
			hideMobel(index) {
				switch(index){
					case 1:this.modal = false;break;
					case 2:this.modal2 = false;break;
					case 3:this.modal3 = false;break;
				}
				
			},
			handBuyAgainInfo(){//再次购买初始化查询订单商品信息
				this.OrderService.GetOrderBuyAgain(
					{
						orderId:this.orderId,
					}
				)
				.then(response =>{
					this.handShoppingAgainCart()
				})
				.catch(error =>{
					console.log(error.data)
					if(error.data && error.data.length > 0){
						this.modal3 = true
						this.invalidList = error.data
					}else{
						this.modal2 = true
					}
				})
			},
			handShoppingAgainCart(){ //一键加入购物车
				this.ProductService.ShoppingAgainCart(
					{
						orderId:this.orderId,
					}
				)
				.then(response => {
					this.ProductService.QueryShoppingQuantity({userId:this.userId}).then(response => {
						this.$api.switchTabTo('/pages/tabBar/cart/index');
					}).catch(error =>{
						console.log('查询购物车数量错误信息',error)
					})
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			handOrderConfirm (id){//确认收货
				this.OrderService.ConfirmReceipt({orderId:id}).then(response =>{
					this.$util.msg(response.msg,2000,true,'success');
					setTimeout(() => {
						this.GetOrderDatainit(this.currentTab)
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			handOrderDetele(id){//删除订单
				this.OrderService.DeleteOrder({orderId:id}).then(response =>{
					this.$util.msg(response.msg,2000,true,'success');
					setTimeout(() => {
						this.GetOrderDatainit(this.currentTab)
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			handCenceConfirm(id){//取消订单
				this.OrderService.CancelOrder({orderId:id}).then(response =>{
					this.$util.msg(response.msg,2000,true,'success');
					setTimeout(() => {
						this.GetOrderDatainit(this.currentTab)
					},2000)
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			async MiniWxPayFor(data){
				const wechatCode = await authorize.getCode('weixin')
				this.PayService.WeChatMiniWxPay(
					{
						payAmount:data.payableAmount*100,
						payWay:"WEIXIN",
						code:wechatCode,
						orderId:data.orderId
					}
				)
				.then(response =>{
					let PayInfo = JSON.parse(response.data.data.payInfo);
					this.WxRequestPayment(PayInfo)
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			WxRequestPayment(data){
				let self = this
				wx.requestPayment({
					'timeStamp': data.timeStamp,
					'nonceStr': data.nonceStr,
					'package': data.package,
					'signType': data.signType,
					'paySign': data.paySign,
					'success':function(res){
						wx.reLaunch({url: '/pages/tabBar/index/index'});
					},
					'fail':function(res){
						console.log(res)
						console.log('ORDERiD',self.hanldOrder)
						self.$api.redirectTo(`/pages/user/order/success?data=${JSON.stringify({data:self.hanldOrder.order})}`)
					},
					'complete':function(res){
			
					}
				})
			},
			hanldePopupFn(data){//监听活动内容
				this.popupShow = true
				this.handlerPros = data
			},
			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() {

		}
	}
</script>

<style lang="scss">
	page {
		height: auto;
		background:#F7F7F7;
	}
	.details{
		padding-bottom: 130rpx;
	}
	.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:0 24rpx;
		background: #fff;
		font-size: $font-size-26;
		.view-type{
			float: left;
			color: $color-system;
		}
	}
	.tui-modal-custom-text{
		min-height: 300rpx;
		margin-bottom: 30rpx;
		.title{
			width: 100%;
			height: auto;
			font-size: $font-size-30;
			text-align: justify;
			color: #333333;
			line-height: 40rpx;
			margin-bottom: 30rpx;
		}
		.tui-modal-custom-list{
			width: 100%;
			height: 350rpx;
			overflow: hidden;
			.custom-list{
				width: 100%;
				height: 117rpx;
				box-sizing: border-box;
				float: left;
				padding: 15rpx 0;
				.custom-list-image{
					width: 86rpx;
					height: 86rpx;
					float: left;
					border-radius: 6rpx;
					box-sizing: border-box;
					border: 1px solid #e1e1e1;
					image{
						width: 84rpx;
						height: 84rpx;
						border-radius: 6rpx;
						display: block;
					}
				}
				.custom-list-name{
					width: 400rpx;
					height: 86rpx;
					float: right;
					line-height: 43rpx;
					font-size: $font-size-26;
					color: #666666;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
	.tui-modal-button{
		width: 100%;
		height: 72rpx;
		display: flex;
		.modal-button{
			width: 200rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 36rpx;
			box-sizing: border-box;
			&.cancel{
				border: 1px solid #b2b2b2;
				background: #FFFFFF;
				color: #333333;
			}
			&.confirm{
				background: $btn-confirm;
				color: #FFFFFF;
			}
		}
	}
</style>