LocalLivingServicesUniapp/pages/merchantDish/orders/refund-details.vue

<template>
	<view class="page">
		<u-navbar title="退款详情" :autoBack="true" :placeholder="true" :border-bottom="false"></u-navbar>

		<view v-if="loading" class="state-tip">加载中...</view>
		<view v-else-if="!hasDetail" class="state-tip">暂无退款详情</view>
		<scroll-view v-else class="content" scroll-y>
			<view class="status-card">
				<text class="status-title">{{ product.orderStatusName || '--' }}</text>
				<text class="status-time">{{ statusTimeLabel }}：{{ formatApplyTime(refundTime) }}</text>
			</view>

			<view class="card product-card">
				<view class="product-row">
					<u-image
						width="120rpx"
						height="120rpx"
						border-radius="12rpx"
						:src="productImageUrl"
						mode="aspectFill"
					></u-image>
					<view class="product-info">
						<view class="product-title-row">
							<text class="product-name">{{ product.packageName || product.productName || '团餐套餐' }}</text>
							<text class="delivery-status">{{ deliveryStatusText }}</text>
						</view>
						<view class="product-desc-row">
							<text class="product-desc">{{ dishDescription }}</text>
							<text class="quantity">x{{ quantity }}</text>
						</view>
						<view class="item-price">
							<text class="currency">¥</text>
							<text>{{ formatMoney(itemPrice) }}</text>
						</view>
					</view>
				</view>

				<view class="product-summary">
					<text>餐盒费：{{ formatMoney(containerFee) }}元</text>
					<view class="refund-amount">
						<text class="refund-label">退款金额</text>
						<text class="refund-currency">￥</text>
						<text class="refund-value">{{ formatMoney(refundAmount) }}</text>
						<text class="refund-note">不包含餐盒费</text>
					</view>
				</view>
			</view>

			<view class="card negotiate-card" @click="goRecord">
				<text class="card-title">协商历史</text>
				<view class="negotiate-link">
					<text>查看详情</text>
					<u-icon name="arrow-right" size="22" color="#4e5969"></u-icon>
				</view>
			</view>

			<view class="card info-card">
				<text class="card-title">订单信息</text>
				<view class="info-row">
					<text class="info-label">订单号</text>
					<text class="info-value">{{ product.orderId || product.hostOrderId || '--' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">支付流水号</text>
					<text class="info-value">{{ product.tradeId || product.paymentNo || '--' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">用户姓名</text>
					<text class="info-value">{{ product.linkName || product.userName || '--' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">联系电话</text>
					<view class="phone-value" @click.stop="makePhoneCall(userPhone)">
						<text>{{ userPhone || '--' }}</text>
						<image v-if="userPhone" class="phone-icon" src="/static/merchantDish/call.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="info-row">
					<text class="info-label">下单时间</text>
					<text class="info-value">{{ formatDateTime(product.orderDate || product.createTime) }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">付款时间</text>
					<text class="info-value">{{ formatDateTime(product.paymentTime || product.payTime) }}</text>
				</view>
				<view v-if="product.completeTime" class="info-row">
					<text class="info-label">成团时间</text>
					<text class="info-value">{{ formatDateTime(product.completeTime) }}</text>
				</view>
				<view v-if="product.sendTime" class="info-row">
					<text class="info-label">送达时间</text>
					<text class="info-value">{{ formatDateTime(product.sendTime) }}</text>
				</view>
			</view>

			<view class="card info-card delivery-card">
				<text class="card-title">配送信息</text>
				<view class="info-row">
					<text class="info-label">配送团长</text>
					<text class="info-value">{{ product.nickName || product.headName || product.leaderName || '--' }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">联系方式</text>
					<view class="phone-value" @click.stop="makePhoneCall(deliveryPhone)">
						<text>{{ deliveryPhone || '--' }}</text>
						<image v-if="deliveryPhone" class="phone-icon" src="/static/merchantDish/call.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			query: {},
			product: {},
			loading: true
		}
	},
	computed: {
		hasDetail() {
			return Object.keys(this.product || {}).length > 0
		},
		productImageUrl() {
			const image = String(this.product.productImage || '').split(',').filter(Boolean)[0] || ''
			if (!image || /^https?:\/\//.test(image)) return image
			return this.$config && this.$config.apiUrl ? `${this.$config.apiUrl}/${image}` : image
		},
		statusTimeLabel() {
			return Number(this.product.fundStatus) === 1 ? '退款时间' : '申请时间'
		},
		refundTime() {
			return this.product.applyTime || this.product.refundApplyTime || this.product.refundTime || this.product.createTime
		},
		deliveryStatusText() {
			const statusMap = {
				0: '未成团',
				1: '已成团',
				2: '已出餐',
				3: '已送达',
				4: '成团失败',
				9: '已到达',
				10: '已取餐'
			}
			const orderStatus = this.product.orderStatus
			if (orderStatus !== '' && orderStatus != null && Object.prototype.hasOwnProperty.call(statusMap, Number(orderStatus))) {
				return statusMap[Number(orderStatus)]
			}
			const text = this.product.deliveryStatusName || this.product.packageOrderStatusName || this.product.merchantOrderStatusName || this.product.statusName
			if (text) return text
			const orderText = String(this.product.orderStatusName || '')
			return orderText && !orderText.includes('退款') && !orderText.includes('售后') ? orderText : '待送达'
		},
		dishDescription() {
			return this.product.dishName || this.product.packageContent || this.product.dishNames || '暂无菜品信息'
		},
		quantity() {
			return Number(this.product.packageNumber || this.product.buyNumber || this.product.quantity || 1)
		},
		itemPrice() {
			if (this.product.priceEach != null) return this.product.priceEach
			if (this.product.groupPrice != null) return this.product.groupPrice
			return this.product.price || 0
		},
		refundAmount() {
			if (this.product.refundAmount != null) return this.product.refundAmount
			if (this.product.refundPrice != null) return this.product.refundPrice
			return this.product.price || 0
		},
		containerFee() {
			if (this.product.containerFee != null) return this.product.containerFee
			if (this.product.boxFee != null) return this.product.boxFee
			return Number(this.product.boxPrice || 0) * this.quantity
		},
		userPhone() {
			return this.product.phone || this.product.maskedPhone || this.product.mobile || ''
		},
		deliveryPhone() {
			return this.product.nickPhone || this.product.leaderPhone || this.product.headPhone || ''
		}
	},
	onLoad(query) {
		this.query = query || {}
	},
	onShow() {
		this.getDetail()
	},
	methods: {
		getDetail() {
			if (!this.query.hostOrderId) {
				this.loading = false
				uni.showToast({ title: '缺少订单信息', icon: 'none' })
				return
			}
			this.loading = true
			this.$http.post('/groupmeal/merchantPackageOrder/refundDetails', this.query).then((res) => {
				if (res.data.code !== 200) {
					uni.showToast({ title: res.data.message || '退款详情加载失败', icon: 'none' })
					return
				}
				this.product = res.data.result || {}
			}).catch(() => {
				uni.showToast({ title: '退款详情加载失败', icon: 'none' })
			}).finally(() => {
				this.loading = false
			})
		},
		goRecord() {
			const query = this.$u.queryParams(this.query)
			uni.navigateTo({
				url: `/pages/merchantDish/orders/refund-record${query}`
			})
		},
		makePhoneCall(phone) {
			const phoneNumber = String(phone || '')
			if (!phoneNumber || phoneNumber.includes('*')) {
				uni.showToast({ title: '手机号暂不可拨打', icon: 'none' })
				return
			}
			uni.makePhoneCall({ phoneNumber })
		},
		formatMoney(value) {
			const number = Number(value)
			if (!Number.isFinite(number)) return '0'
			return number.toFixed(2).replace(/\.00$/, '').replace(/(\.\d)0$/, '$1')
		},
		formatDateTime(value) {
			if (!value) return '--'
			return String(value).replace(/-/g, '.')
		},
		formatApplyTime(value) {
			if (!value) return '--'
			const text = String(value).trim()
			const match = text.match(/^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})(.*)$/)
			return match ? `${match[1]}.${Number(match[2])}.${Number(match[3])}${match[4]}` : text
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background: #f7f8fa;
	overflow: hidden;
}

.content {
	flex: 1;
	height: 0;
	box-sizing: border-box;
	padding: 32rpx 32rpx calc(32rpx + env(safe-area-inset-bottom));
}

.state-tip {
	padding: 100rpx 24rpx;
	color: #86909c;
	font-size: 28rpx;
	text-align: center;
}

.card,
.status-card {
	box-sizing: border-box;
	margin-bottom: 16rpx;
	border-radius: 16rpx;
	background: #fff;
}

.status-card {
	display: flex;
	min-height: 164rpx;
	padding: 32rpx;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
}

.status-title {
	color: #1d2129;
	font-size: 40rpx;
	font-weight: 600;
}

.status-time {
	color: #86909c;
	font-size: 26rpx;
}

.card {
	padding: 32rpx;
}

.product-row {
	display: flex;
	align-items: stretch;
	gap: 20rpx;
}

.product-info {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	justify-content: space-between;
}

.product-title-row,
.product-desc-row,
.product-summary,
.refund-amount,
.negotiate-card,
.negotiate-link,
.info-row,
.phone-value {
	display: flex;
	align-items: center;
}

.product-title-row,
.product-desc-row,
.product-summary,
.negotiate-card,
.info-row {
	justify-content: space-between;
}

.product-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: #1d2129;
	font-size: 30rpx;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.delivery-status {
	flex-shrink: 0;
	margin-left: 16rpx;
	color: #86909c;
	font-size: 28rpx;
}

.product-desc {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: #86909c;
	font-size: 24rpx;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.quantity {
	flex-shrink: 0;
	margin-left: 16rpx;
	color: #86909c;
	font-size: 24rpx;
}

.item-price {
	color: #1d2129;
	font-size: 28rpx;
	font-weight: 600;
}

.currency {
	font-size: 20rpx;
}

.product-summary {
	margin-top: 16rpx;
	color: #333;
	font-size: 24rpx;
}

.refund-amount {
	align-items: baseline;
	white-space: nowrap;
}

.refund-label {
	margin-right: 6rpx;
}

.refund-currency {
	color: #1d2129;
	font-size: 26rpx;
	font-weight: 600;
}

.refund-value {
	color: #1d2129;
	font-size: 36rpx;
	font-weight: 600;
}

.refund-note {
	margin-left: 8rpx;
	color: #1c7cf9;
	font-size: 20rpx;
}

.negotiate-card {
	height: 108rpx;
}

.card-title {
	color: #1d2129;
	font-size: 32rpx;
	font-weight: 500;
}

.negotiate-link {
	color: #4e5969;
	font-size: 28rpx;
}

.info-card {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.info-row {
	gap: 24rpx;
	min-height: 32rpx;
	font-size: 28rpx;
}

.info-label {
	flex-shrink: 0;
	color: #4e5969;
}

.info-value,
.phone-value {
	min-width: 0;
	color: #1d2129;
	text-align: right;
}

.info-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.phone-value {
	justify-content: flex-end;
	gap: 12rpx;
}

.phone-icon {
	flex-shrink: 0;
	width: 32rpx;
	height: 32rpx;
}

.delivery-card {
	margin-bottom: 0;
}
</style>