realty/virgo.wzfrontend/workark_wx/subPages/indexPage/orderDetail/orderDetail.vue

<template>
	<view class="order-detail">
		<view class="hui-detail">
			<view class="detail-box">
				<view class="title-box">
					<view class="title">{{orderData.title||'-'}}</view>
					<view class="date">{{orderData.createTime || '-'}}</view>
					<view class="title-icon">
						<uni-icons type="icon-hetongwendang" custom-prefix="iconfont" color="#fff" size="18">
						</uni-icons>
					</view>
				</view>
				<view class="other">
					<view class="item">
						<view class="label">订单编号</view>
						<view class="value"> {{orderData.orderNo ||'-'}}</view>
					</view>
					<view class="item">
						<view class="label">价格(元)</view>
						<view class="value color-error">{{orderData.totalFee || '-'}}</view>
					</view>
				</view>
				<view class="state">
					<view></view>
					<view class="tag">
						<view class="status-tag" :class="{
							'warning':orderData.orderStatus === '未支付',
							'success':orderData.orderStatus === '支付成功',
							'error':orderData.orderStatus === '超时已关闭'
						}">
							{{orderData.orderStatus}}
						</view>
					</view>
				</view>
			</view>
			<view class="detail-box" v-if="orderData.contractId">
				<view class="sub-title file-box">
					<uni-icons type="map-filled" class="inherit-icons" size="24" color="#08979c"></uni-icons>
					<text class="sub-label">订单合同</text>
				</view>
				<view class="other">
					<view class="item" v-if="orderData.contractId">
						<view class="label">合同编号</view>
						<view class="value">{{contractNode.contractNo}}</view>
					</view>
					<view class="item" v-if="orderData.contractId">
						<view class="label">合同内容</view>
						<view class="value">
							<text class="color-primary" @tap="lookContract">查看合同</text>
						</view>
					</view>
					<view class="item">
						<view class="label">合同状态</view>
						<view class="value">
							<uv-steps :current="current" direction="column" dot>
								<uv-steps-item title="服务商上传合同" :desc="contractNode.createDate"></uv-steps-item>
								<uv-steps-item title="客户确认" :desc="contractNode.confirmDate"></uv-steps-item>
								<uv-steps-item title="服务商盖章" :desc="contractNode.processDate"></uv-steps-item>
								<uv-steps-item title="客户盖章" :desc="contractNode.updateDate"></uv-steps-item>
								<uv-steps-item title="签约成功" :desc="contractNode.updateDate"></uv-steps-item>
							</uv-steps>
						</view>
					</view>
				</view>
			</view>
			<view class="detail-box" v-if="contractProcessList.length > 0">
				<view class="sub-title file-box">
					<uni-icons type="map-filled" class="inherit-icons" size="24" color="#08979c"></uni-icons>
					<text class="sub-label">订单过程</text>
				</view>
				<view class="other process-box">
					<process-item :list="contractProcessList"></process-item>
				</view>
			</view>
		</view>
		<view class="hui-button-box" v-if="operationBtn.length>0">
			<view class="hui-button" v-for="(item,index) in operationBtn" :key="index" @click="operation(item)">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		getBindContract,
		getProcessData,
		getOrderDetailByOrderNo,
		getWxPay,
		getOrderPayState
	} from '@/request/api/workark.js'
	import processItem from '@/subPages/indexPage/components/processItem.vue';
	import config from '@/config';
	export default {
		components: {
			processItem
		},
		data() {
			return {
				orderId: '',
				orderNo: '',
				orderData: {},
				operationBtn: [],
				contractNode: {},
				current: 0,
				contractProcessList: []
			};
		},
		onLoad(body) {
			this.orderId = body.orderId;
			this.orderNo = body.orderNo;
			this.init();
		},
		methods: {
			async init() {
				this.operationBtn = [];
				let orderData = {};
				if (this.orderId) {
					orderData = await getOrderDetail(this.orderId);
				} else if (this.orderNo) {
					orderData = await getOrderDetailByOrderNo(this.orderNo);
				}
				if (!orderData.state) return;
				this.orderData = orderData.data;
				this.current = this.returnCurrent();
				this.initProcessData();
				if (this.orderData.contractId) this.initBindContract();
				if (this.orderData.orderStatus === '未支付') this.operationBtn = [{
					id: 4,
					type: 'primary',
					name: '立即支付'
				}]
			},
			async initBindContract() {
				let contractNode = await getBindContract(this.orderData.contractId);
				if (!contractNode.state) return;
				this.contractNode = contractNode.data;
			},
			async initProcessData() {
				let contractProcess = await getProcessData(this.orderData.id);
				if (!contractProcess.state) return;
				this.contractProcessList = contractProcess.data;
				this.updateParentStatus(this.contractProcessList);
			},
			logout() {
				this.$chat.disConnect();
				uni.removeStorageSync('token');
				uni.removeStorageSync('chatToken');
				uni.removeStorageSync('vuex_state');
				this.$store.dispatch('app/changeOrganization', {});
				this.$store.dispatch('app/changeUser', {});
				uni.removeTabBarBadge({
					index: 3
				})
			},
			async operation(item) {
				if (item.id === 4) {
					if (!uni.getStorageSync('openId')) {
						this.$toast('未获取到OpenId，请重新登录');
						this.logout();
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							});
						}, 400)
						return;
					}
					uni.showLoading({
						title: '订单支付中...'
					})
					let wxConfig = await getWxPay(this.orderData.orderNo, uni.getStorageSync('openId'));
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: wxConfig.data.timeStamp,
						nonceStr: wxConfig.data.nonceStr,
						package: wxConfig.data.prepayId,
						signType: wxConfig.data.signType,
						paySign: wxConfig.data.paySign,
						success: async (res) => {
							let payStatus = await getOrderPayState(this.orderData.orderNo);
							if (payStatus.state) {
								this.init();
								uni.hideLoading();
							}
						},
						fail: err => {
							uni.hideLoading();
						}
					});
				}
			},
			returnCurrent() {
				if (!this.orderData.contractId) return 0;
				if (this.orderData.contractStatus === 0) return 1;
				if (this.orderData.contractStatus === 1) return 2;
				if (this.orderData.contractStatus === 2) return 3;
				if (this.orderData.contractStatus === 3) return 5;
			},
			lookContract() {
				let url = `${config.baseUrl}/file/workarkContract/pdf/show/${this.orderData.contractId}`;
				this.$navigateTo('/pages/pdf/pdf?fileUrl=' + url + '&titleName=' + this.contractNode.contractName);
			},
			updateParentStatus(nodes) {
				nodes.forEach(node => {
					if (node.type !== 3) {
						// 递归处理子节点
						let children = !node.children ? [] : node.children.filter(item => item.type != 3);
						if (children.length > 0) {
							this.updateParentStatus(node.children); // 先处理子节点
							// 获取所有子节点的 status
							const childStatusList = node.children.map(child => child.status);
							// 判断条件优先级：4 > 1/2 > 3
							if (childStatusList.some(status => status === 4)) {
								node.status = 4;
							} else if (childStatusList.some(status => status === 1 || status === 2)) {
								node.status = 1;
							} else if (childStatusList.every(status => status === 3)) {
								node.status = 3;
							} else if (childStatusList.some(status => status === 3)) {
								node.status = 1;
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>