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="status-visible"> {{ information.orderSeen == 2 ? '订单对机构不可见' : '订单对机构可见' }} </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>
			<!-- 支付记录 -->
			<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" 
					 :shareType="isShareType"
					 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 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,
		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,
			isShareType:2,
			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;
	}
	.status-visible{
		float: left;
		color: #999999;
		margin-left: 20rpx;
	}
	.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;
		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;
		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;
		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, 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>