LocalLivingServicesUniapp/pages/finance/orderDetails.vue

<template>
	<view class="order">
		<view class="fix">
			<view class="top"></view>
			<view class="head">
				<span class="cuIcon-back" @click="back"></span>
				<view class="case"> 结算详情 </view>
			</view>
		</view>

		<view class="order-card">
			<view class="order-header">
				<view class="amount">{{ orderInfo.payableToMerchant }}</view>
				<view class="title">应收金额</view>
			</view>
			<block v-if="jumpType == 'SETTLE_TSMAIN'">
				<view class="order-info">
					<view v-for="(item, index) in serveMealFields" :key="index" class="info">
						<view class="label">
							{{ item.title }}
							<image v-if="item.isShowTip" src="/static/finance/status/icon-remind.png" mode="aspectFit"
								style="width: 33rpx; height: 33rpx; margin-left: 8rpx"
								@click.stop="toggleTooltip(item.key)"></image>
							<view class="tooltip" v-show="showTooltip === item.key"> 商户占比{{ orderInfo[item.rateField] }}%
							</view>
						</view>
						<view class="value">{{ orderInfo[item.valueField] }}</view>
					</view>
				</view>
				<!-- 备注说明 -->
				<view class="remark line">注：应收金额=订单金额*商品分佣占比-平台优惠券成本-金豆成本</view>
				<!-- 表格 -->
				<uni-table
					class="service-table"
					border
					:empty-text="'暂无数据'"
					v-if="orderInfo.merchantServiceOrderDetailVoList && orderInfo.merchantServiceOrderDetailVoList.length"
				>
					<uni-tr>
						<uni-th align="center">服务名称/数量</uni-th>
						<uni-th align="center">实付总价</uni-th>
					</uni-tr>
					<uni-tr
						v-for="(item, index) in orderInfo.merchantServiceOrderDetailVoList"
						:key="item.serviceOrderSubNo || index"
					>
						<uni-td align="center">
							<text class="service-name">{{ item.serviceName }}</text>
						</uni-td>
						<uni-td align="center">{{ formatOrderMoney(item.orderMoney) }}</uni-td>
					</uni-tr>
				</uni-table>
			</block>
			<block v-else>
				<view class="order-info">
					<view v-for="(item, index) in orderFields" :key="index" class="info">
						<view class="label">
							{{ item.title }}
							<image v-if="item.isShowTip" src="/static/finance/status/icon-remind.png" mode="aspectFit"
								style="width: 33rpx; height: 33rpx; margin-left: 8rpx"
								@click.stop="toggleTooltip(item.key)"></image>
							<view class="tooltip" v-show="showTooltip === item.key"> 商户占比{{ orderInfo[item.rateField] }}%
							</view>
						</view>
						<view class="value">{{ orderInfo[item.valueField] }}</view>
					</view>
				</view>
				<!-- 备注说明 -->
				<view class="remark">注：应收金额=订单金额*商品分佣占比-邀新分佣成本-优惠券成本-会员折扣成本-金豆抵扣成本-推广分佣成本</view>
			</block>
		
		</view>
	</view>
</template>

<script>
	import api from '@/api/account';
	import {
		orderFields,
		serveMealFields
	} from './dictionary';

	export default {
		name: 'OrderDetails',
		data() {
			return {
				orderId: '',
				orderInfo: {},
				showTooltip: null,
				tooltipTimer: null,
				orderFields,
				serveMealFields,
				orderType: '',
				jumpType: ''
			};
		},
		mounted() {
			// 点击其他区域隐藏提示
			document.addEventListener('click', this.handleClickOutside);
		},
		beforeUnmount() {
			// 移除事件监听
			document.removeEventListener('click', this.handleClickOutside);
			// 清除定时器
			if (this.tooltipTimer) {
				clearTimeout(this.tooltipTimer);
			}
		},
		onLoad(options) {
			console.log('options', options)
			if (options.jumpType) {
				this.jumpType = options.jumpType;
			}
			if (options.id) {
				this.orderId = options.id;
			}
			if (options.orderType) {
				this.orderType = options.orderType;
			}
		},
		onShow() {
			this.getOrderDetails(this.orderId, this.orderType);
		},
		methods: {
			getOrderDetails(id, orderType) {
				if (this.jumpType == 'SETTLE_TSMAIN') {
					api.groupSeverDetail(id, orderType).then((res) => {
						if (res.data.code === 200) {
							this.orderInfo = res.data.result;
						}
					});
				} else {
					api.orderClearDetail(id, orderType).then((res) => {
						if (res.data.code === 200) {
							this.orderInfo = res.data.result;
						}
					});
				}

			},
			back() {
				uni.navigateBack({
					delta: 1,
				});
			},
			// 处理点击事件，显示提示并设置10秒自动隐藏
			toggleTooltip(key) {
				// 清除之前的定时器
				if (this.tooltipTimer) {
					clearTimeout(this.tooltipTimer);
				}
				// 显示当前提示，隐藏其他提示
				this.showTooltip = this.showTooltip === key ? null : key;

				// 如果是显示状态，设置10秒后自动隐藏
				if (this.showTooltip) {
					this.tooltipTimer = setTimeout(() => {
						this.showTooltip = null;
					}, 10000); // 10秒自动隐藏
				}
			},
			formatOrderMoney(money) {
				if (money === null || money === undefined || money === '') {
					return '--';
				}
				const num = Number(money);
				if (Number.isNaN(num)) {
					return '--';
				}
				return `¥ ${num.toFixed(2)}`;
			},
			// 点击其他区域隐藏提示
			handleClickOutside(event) {
				// 检查点击目标是否在提示或图片上
				const tooltipElements = document.querySelectorAll('.tooltip, image[src*="icon-remind.png"]');
				let isClickOnTooltip = false;

				tooltipElements.forEach((element) => {
					if (element.contains(event.target)) {
						isClickOnTooltip = true;
					}
				});

				// 如果点击的不是提示或图片，隐藏所有提示
				if (!isClickOnTooltip) {
					this.showTooltip = null;
					// 清除定时器
					if (this.tooltipTimer) {
						clearTimeout(this.tooltipTimer);
					}
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.order {
		background: #f7f8fc;
		min-height: 100vh;
		font-family: Source Han Sans SC;
		font-weight: 500;

		.fix {
			position: sticky;
			top: 0;

			/*#ifdef APP-PLUS*/
			.top {
				width: 100%;
				height: var(--status-bar-height);
				background: #fff;
			}

			/*#endif*/

			.head {
				width: 100%;
				height: 112rpx;
				padding: 20rpx;
				display: flex;
				align-items: center;
				background: #fff;
				position: relative;
				border-bottom: 1rpx solid #eeeeee;

				.cuIcon-back {
					font-size: 40rpx;
					margin-right: 40rpx;
				}

				.case {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					font-weight: 500;
					font-size: 38rpx;
					color: #333333;
				}
			}
		}

		.order-card {
			padding: 42rpx 31rpx 85rpx;
			overflow: hidden;
			background: #ffffff;
			height: 95vh;
		}
	}

	.order-header {
		display: flex;
		flex-direction: column;
		align-items: center;

		.amount {
			font-size: 63rpx;
			color: #1f1f1f;
		}

		.title {
			font-size: 28rpx;
			color: #666666;
			margin: 11rpx 0 42rpx;
		}
	}

	.order-info {
		.info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 21rpx;

			.label {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 31rpx;
				color: #666666;
				position: relative;

				.tooltip {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 158rpx;
					height: 42rpx;
					background: rgba(0, 0, 0, 0.6);
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #ffffff;
					margin-left: 10rpx;

					&::after {
						content: '';
						position: absolute;
						right: 158rpx;
						bottom: 14rpx;
						width: 0;
						height: 0;
						border-bottom: 10rpx solid transparent;
						border-right: 10rpx solid rgba(0, 0, 0, 0.6);
						border-top: 10rpx solid transparent;
						border-left: 0;
					}
				}
			}

			.value {
				font-size: 31rpx;
				color: #333333;
			}
		}
	}

	.remark {
		font-weight: 400;
		font-size: 25rpx;
		color: #666666;
		margin-top: 10rpx;
	}
	.line{
		color: #449AFF;
	}

	.service-table {
		margin-top: 31rpx;
		border-radius: 8rpx;
		overflow: hidden;
		font-family: PingFang SC;
		font-weight: 400;

		.service-name {
			font-size: 27rpx;
			color: #666666;
		}
	}

	::v-deep .service-table {
		.uni-table-th {
			height: 67rpx !important;
			background: #f5f7fa;
			font-size: 29rpx;
			color: #333333;
		}
		.uni-table-td {
			height: 54rpx !important;
			text-align: center !important;
			font-size: 27rpx !important;
			color: #666666 !important;
		}
		.table--border {
			border-color: #ebeef5 !important;
		}
	}
</style>