caimei-applets-caimei/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"
		/>
		<tui-skeleton
			v-if="!skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		/>
		<view class="container-details" v-else :style="{ paddingTop: navbarHeight + 'px' }">
			<view class="status-text">
				<view class="view-type">{{ orderInfo.status | statusFilters }}</view>
				<text class="bage-buss" v-if="orderInfo.orderSubmitType == 3 || orderInfo.orderSubmitType == 4"
					>协销</text
				>
				<text
					class="bage-auto"
					v-if="
						orderInfo.orderSubmitType == 0 ||
						orderInfo.orderSubmitType == 1 ||
						orderInfo.orderSubmitType == 2"
					>自主</text>
			</view>
			<!-- 地址选择 -->
			<cm-address-temp ref="orderAddress" v-if="skeletonShow && !rechargeGoods" :addressData="addressData" />
			<!-- 特殊商品退货须知 -->
			<view class="return-instructions" v-if="returnGoodsStutas" v-html="helpContent"></view>
			<!-- 商品 -->
			<cm-goods-temp
				ref="goods"
				v-if="skeletonShow"
				:list="orderInfo.orderProductList"
				:orderInfo="orderInfo"
				@popupClick="hanldePopupFn"
			/>
			<!-- 订单信息 -->
			<cm-order-temp ref="orderInfo" v-if="skeletonShow" :orderInfo="orderInfo" />
			<!-- 发票信息 -->
			<cm-invice-temp ref="invoice" v-if="skeletonShow" :orderInvoice="orderInvoice" />
			<!-- 支付记录 -->
			<cm-payment-temp
				ref="payment"
				v-if="skeletonShow"
				:discernReceiptList="discernReceiptList"
				:receiptAmount="receiptAmount"
			/>
			<!-- 退款记录 -->
			<cm-refund-temp
				ref="refund"
				v-if="skeletonShow"
				:returnedPurchaseList="returnedPurchaseList"
				:returnedPurchaseFee="returnedPurchaseFee"
			/>
			<!-- 支付凭证记录 -->
			<cm-voucher-temp ref="voucher" v-if="skeletonShow && voucherList.length > 0" :list="voucherList" />
			<view
				class="clause"
				v-if="orderInfo.secondHandOrderFlag != 1 && !orderSubmitType"
				@tap.stop="openclauseConten(clauseData.id)"
				:class="clauseData.name == '无条款' ? 'noclick' : ''"
			>
				售后条款：<label class="text" :class="clauseData.name == '无条款' ? 'color-bg' : ''">{{
					clauseData.name
				}}</label>
			</view>
			<!-- 底部button -->
			<cm-details-button
				ref="orderButton"
				v-if="skeletonShow"
				:status="btnStatus"
				:shareCode="shareCode"
				:order="orderInfo"
				@buttonConfirm="handButtonConfirm"
			/>
		</view>
		<!-- 付款弹窗 -->
		<cm-orderpay-popup
			v-if="isPayModel"
			:payModelData="payModelData"
			:modelType="modelType"
			@cancelConfirm="hanldCancelConfirm"
			@paymentConfirm="hanldPaymentConfirm"
		/>
		<!-- 分享弹窗 -->
		<cm-share-popup :orderId="orderId" v-if="isShareModal" @shareConfirm="onShareAppMessage" />
		<!-- 促销活动弹窗 -->
		<cm-promote-popup :Promotion="handlerPros" :popupShow="popupShow" />
		<!-- 采美豆提示弹窗 -->
		<activityBean
			v-if="isActivityBean"
			:show="isActivityBean"
			:beansType="beansType"
			:beanNumber="beanNumber"
			@cancel="handleBeanlClick"
		/>
		<!-- 提示弹窗 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		/>
	</view>
</template>

<script>
import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义导航
import cmAddressTemp from './components/details/cm-address-temp' //地址信息
import cmGoodsTemp from './components/details/cm-goods-temp' //商品列表
import cmOrderTemp from './components/details/cm-order-temp' //订单信息
import cmInviceTemp from './components/details/cm-invice-temp' //发票信息
import cmPaymentTemp from './components/details/cm-payment-temp' //支付记录
import cmRefundTemp from './components/details/cm-refund-temp' //退款记录
import cmVoucherTemp from './components/details/cm-voucher-temp' //支付凭证记录
import cmDetailsButton from './components/cm-details-button' //底部按钮
import cmSharePopup from './components/cm-share-popup' //分享弹窗
import cmOrderpayPopup from './components/cm-orderpay-popup' //付款弹窗
import cmPromotePopup from './components/details/cm-promote-popup' //促销活动弹窗
import activityBean from '@/components/cm-module/activity/activityBean.vue'

export default {
	components: {
		headerBack,
		cmAddressTemp,
		cmGoodsTemp,
		cmOrderTemp,
		cmInviceTemp,
		cmPaymentTemp,
		cmRefundTemp,
		cmVoucherTemp,
		cmDetailsButton,
		cmSharePopup,
		cmOrderpayPopup,
		cmPromotePopup,
		activityBean
	},
	data() {
		return {
			state: 0,
			userId: '',
			orderId: 0,
			shopOrderId: 0,
			shareCode: '', //分享码
			shareType: '', //分享登录页过来记录的状态
			payStatus: 0,
			btnStatus: 0, //按钮组件状态
			onlinePayFlag: '',
			skeletonShow: false, //是否加载完成渲染子组件
			isOrderShare: false,
			isShareModal: false,
			isPayModel: false,
			modelType: 0,
			alertOrderInfo: {},
			payModelData: {},
			addressData: {}, //地址信息初始化
			orderInfo: {}, //订单信息初始化
			shopOrderData: {}, //商品信息初始化
			orderInvoice: {}, //发票信息初始化
			returnedPurchaseList: {}, //退款信息初始化
			discernReceiptList: {}, //支付信息初始化
			voucherList:[], // 线下支付凭证
			receiptAmount: 0, //支付金额
			returnedPurchaseFee: 0, //退款金额
			rechargeGoods: false,
			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, //自主订单
			beansType: 1,
			beanNumber: 0,
			isActivityBean: false,
			handleModelEven: 0,
			modal: false,
			contentModalText: '订单查询失败,请稍候重试~', //操作文字提示语句
			modalButton: [
				{
					text: '确定',
					customStyle: {
						color: '#fff',
						bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)'
					},
					plain: false
				}
			],
			returnGoodsStutas: false,
			helpContent: ''
		}
	},
	onLoad(option) {
		console.log(option)
		this.shareType = option.type
		this.shopOrderId = option.shopOrderId
		if (this.shareType === 'share') {
			this.state = 0
			this.isOrderShare = true
		} else if (option.type === 'confim' || option.type === 'search') {
			this.state = 0
		} else {
			this.state = option.state
		}
		this.getHeaderTopHeight()
		this.initOrderDetaileData()
	},
	filters: {
		statusFilters(value) {
			//处理订单状态显示
			const map = {
				0: '待确认',
				4: '交易完成',
				5: '订单完成',
				6: '已关闭',
				7: '交易全退',
				77: '交易全退',
				11: '待付款待发货',
				12: '待付款部分发货',
				13: '待付款已发货',
				21: '部分付款待发货',
				22: '部分付款部分发货',
				23: '部分付款已发货',
				31: '已付款待发货',
				32: '已付款部分发货',
				33: '已付款已发货',
				111: '待付款待发货'
			}
			console.log('value', map[value])
			return map[value]
		}
	},
	methods: {
		// 获取订单详情
		async initOrderDetaileData() {
			try {
				const userInfo = await this.$api.getStorage()
				this.userId = userInfo.userId ? userInfo.userId : 0
				const res = await this.OrderService.QueryOrderDetails({
					shopOrderId: this.shopOrderId,
					userId: this.userId
				})
				const data = res.data
				this.skeletonShow = true
				this.orderInfo = data.shopOrder
				// this.shareCode = data.shareCode
				this.addressData = data.userInfo
				this.rechargeGoods = data.shopOrder.rechargeGoods
				this.btnStatus = data.shopOrder.status
				this.payStatus = data.shopOrder.payStatus
				this.payableAmount = data.shopOrder.payableAmount
				this.shopOrderData = data.orderProductList
				this.orderInvoice = data.orderInvoice
				this.onlinePayFlag = data.shopOrder.onlinePayFlag
				this.returnedPurchaseList = data.returnedPurchaseList
				this.discernReceiptList = data.discernReceiptList
				this.voucherList = data.voucher
				this.receiptAmount = data.shopOrder.receiptAmount
				this.returnedPurchaseFee = data.shopOrder.returnedPurchaseFee
				this.clauseData = data.clause
				// 特殊商品退货须知
				this.returnGoodsStutas = data.returnGoodsStutas && data.returnGoodsStutas === 2 // 1:可以 2:不可以
				this.helpContent = data.helpContent
				if (
					this.orderInfo.orderSubmitType == 0 ||
					this.orderInfo.orderSubmitType == 1 ||
					this.orderInfo.orderSubmitType == 2
				) {
					this.orderSubmitType = true
				} else {
					this.orderSubmitType = false
				}
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		//判断点击的按钮类型并执行...
		handButtonConfirm(data) {
			switch (data.type) {
				case 'cancel': //取消订单
					this.modal = true
					this.contentModalText = '确认取消该订单吗？'
					this.handleModelEven = 1
					break
				case 'confirm': //确认收货
					this.modal = true
					this.contentModalText = '确认收货吗？'
					this.handleModelEven = 2
					break
				case 'delete': //删除订单
					this.modal = true
					this.contentModalText = '确认删除该订单吗？'
					this.handleModelEven = 3
					break
				case 'confirmation': // 确认订单
					this.modal = true
					this.contentModalText = '确认此订单吗？'
					this.handleModelEven = 4
					break
				case 'payment': //打款给供应商
					this.modal = true
					this.contentModalText = '确定委托采美平台打款给供应商吗？确定之前请务必确保货品完好!'
					this.handleModelEven = 5
					break
				case 'pay':
					this.getOrderPaymentValidation(data)
					break
				case 'query':
					this.$api.navigateTo('/pages/user/order/order-logistics?shopOrderId=' + this.shopOrderId)
					break
			}
		},
		handleClick(e) {
			//确认操作
			if (e.index == 1) {
				switch (this.handleModelEven) {
					case 1: //取消订单
						this.cancelOrder(this.shopOrderId)
						break
					case 2: //确认收货
						this.confirmReceipt(this.shopOrderId)
						break
					case 3: //删除订单
						this.deleteOrder(this.shopOrderId)
						break
					case 4: //确认订单
						this.affirmOrder(this.shopOrderId)
						break
					case 5: //打款给供应商
						this.confirmpayment(this.shopOrderId)
						break
				}
			}
			this.modal = false
		},
		//取消订单
		async cancelOrder(shopOrderId) {
			try {
				const res = await this.OrderService.CancelOrder({ shopOrderId: shopOrderId, userIdentity: 0 })
				this.$util.msg(res.msg, 2000, true, 'success')
				setTimeout(() => {
					this.initOrderDetaileData()
				}, 2000)
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		//确认收货
		async confirmReceipt(shopOrderId) {
			try {
				const res = await this.OrderService.ConfirmReceipt({ shopOrderId: shopOrderId })
				this.beansType = 7
				this.beanNumber = 100
				this.isActivityBean = true
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		//删除订单
		async deleteOrder(shopOrderId) {
			try {
				const res = await this.OrderService.DeleteOrder({ shopOrderId: shopOrderId })
				this.$util.msg(res.msg, 2000, true, 'success')
				setTimeout(() => {
					if (this.shareType === 'share') {
						this.$api.switchTabTo('/pages/tabBar/home/index')
					} else {
						this.$api.redirectTo(`/pages/user/order/order-list?type=detele&state=${this.state}`)
					}
				}, 2000)
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		//确认订单
		async affirmOrder(shopOrderId) {
			try {
				const res = await this.OrderService.AffirmOrder({ shopOrderId: shopOrderId })
				this.$util.msg(res.msg, 2000, true, 'success')
				setTimeout(() => {
					this.initOrderDetaileData()
				}, 2000)
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		//确认打款给供应商
		async confirmpayment(shopOrderId) {
			try {
				const res = await this.OrderService.confirmpayment({ shopOrderId: shopOrderId })
				this.$util.msg(res.msg, 2000, true, 'success')
				setTimeout(() => {
					this.initOrderDetaileData()
				}, 2000)
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		//监听根据付款状态做操作
		async getOrderPaymentValidation(data) {
			try {
				const res = await this.OrderService.OrderPaymentValidation({ shopOrderId: data.shopOrderId })
				const data = res.data
				this.payModelData = data
				if (data.balanceFlag == 1) {
					// 0可以走余额抵扣，1不能走余额抵扣
					this.$api.navigateTo(`/pages/user/order/order-pay-list?orderId=${data.orderId}`)
				} else {
					switch (data.code) {
						case 1:
							this.isPayModel = true
							this.modelType = 1
							break
						case 2:
							this.isPayModel = true
							this.modelType = 2
							break
						case -1:
							this.$util.modal('', '订单已申请全部退款，无需再付款！', '确定', '', false, () => {})
							break
						default:
							this.$api.navigateTo(`/pages/user/order/order-pay-list?orderId=${data.orderId}`)
					}
				}
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		//余额抵扣跳转
		async hanldPaymentConfirm(data) {
			try {
				await this.OrderService.OrderBalanceDeduction({ shopOrderId: data.order.shopOrderId })
				const data = { shopOrderId: data.order.shopOrderId }
				if (data.type === 2) {
					this.$api.navigateTo(
						`/pages/user/order/success?type=deduction&data=${JSON.stringify({ data: data })}`
					)
				} else {
					this.$api.navigateTo(`/pages/user/order/order-pay-list?orderId=${data.order.orderId}`)
				}
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		//不使用余额抵扣直接跳转收银台
		hanldCancelConfirm(data) {
			this.$api.navigateTo(`/pages/user/order/order-pay-list?orderId=${data.orderId}`)
		},
		// 查看售后条款
		openclauseConten(id) {
			this.$api.navigateTo(`/pages/service/sellconten?clauseId=${id}`)
		},
		//分享订单
		onShareAppMessage(res) {
			this.isShareModal = false
			if (res.from === 'button') {
				// 来自页面内转发按钮
			}
			return {
				title: '您有新的分享订单，快来查看吧~',
				path: `/pages/user/order/order-sharelogin?shopOrderId=${this.shopOrderId}&userId=${this.userId}`,
				imageUrl: 'https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_SABnOFABZCgCzFV_g063.png'
			}
		},
		// 监听活动内容
		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() {
			return uni.getMenuButtonBoundingClientRect()
		},
		setSysteminfo() {
			let systeminfo
			uni.getSystemInfo({
				// 获取设备信息
				success: res => {
					systeminfo = res
				}
			})
			return systeminfo
		},
		handleBeanlClick() {
			//关闭采美豆弹窗
			this.isActivityBean = false
			this.initOrderDetaileData()
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	height: auto;
	background: #f7f7f7;
}
.details {
	padding-bottom: 130rpx;
}
.return-instructions {
	font-size: 26rpx;
	color: #ff5b00;
	line-height: 42rpx;
	padding: 32rpx 50rpx;
	background-color: #fffaf8;
	text-align: justify;
}
.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;
	}
	.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;
	}
}
</style>