LocalLivingServicesUniapp/pages/merchantDish/orders/refund-record.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="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">{{ data.packageName || data.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 history-card">
				<text class="card-title">协商历史</text>
				<text class="history-status">{{ data.orderStatusName || '--' }}</text>
			</view>

			<view class="card info-card">
				<text class="card-title">订单信息</text>
				<view class="info-row avatar-row">
					<text class="info-label">用户昵称</text>
					<u-image
						width="60rpx"
						height="60rpx"
						border-radius="8rpx"
						:src="avatarUrl"
						mode="aspectFill"
					></u-image>
				</view>
				<view class="info-row">
					<text class="info-label">退货数量</text>
					<text class="info-value">{{ quantity }}份</text>
				</view>
				<view class="info-row">
					<text class="info-label">退货金额</text>
					<text class="info-value">￥{{ formatMoney(refundAmount) }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">联系人</text>
					<text class="info-value">{{ data.linkName || data.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 reason-value">{{ data.reason || data.refundReason || '--' }}</text>
				</view>

				<view v-if="showActions" class="actions">
					<view class="action-button reject-button" @click="onSubmit(0)">拒绝</view>
					<view class="action-button agree-button" @click="onSubmit(1)">同意</view>
				</view>
			</view>

			<view v-if="data.refuseReason !== null && data.refuseReason !== undefined && data.refuseReason !== ''" class="card refused-card">
				<view class="refused-header">
					<text class="card-title">商家拒绝退款</text>
					<text class="refused-time">{{ formatDateTime(data.refundTime) }}</text>
				</view>
				<view class="refused-row">拒绝原因：{{ getRefuseReasonText(data.refuseReason) }}</view>
				<view v-if="data.refuseReasonExplain" class="refused-row">补充说明：{{ data.refuseReasonExplain }}</view>
			</view>
		</scroll-view>

		<u-popup v-model="isRefuse" mode="bottom" :border-radius="32" :safe-area-inset-bottom="true">
			<view class="refuse-popup">
				<view class="popup-header">
					<text class="popup-title">拒绝原因</text>
					<u-icon class="popup-close" name="close" size="30" color="#4e5969" @click="onClose"></u-icon>
				</view>
				<view class="popup-content">
					<view
						v-for="(item, index) in reasonList"
						:key="item.value || index"
						class="reason-item"
						@click="onSelect(item, index)"
					>
						<text>{{ item.text }}</text>
						<view :class="['radio', { checked: item.check }]">
							<text v-if="item.check" class="radio-check">✓</text>
						</view>
					</view>

					<view class="explain-section">
						<text class="explain-title">补充说明（选填）</text>
						<view class="explain-box">
							<textarea
								v-model="rejectData.refuseReasonExplain"
								class="explain-input"
								:maxlength="50"
								placeholder="输入退款说明"
							></textarea>
							<text class="word-count">{{ rejectData.refuseReasonExplain.length }}/50</text>
						</view>
					</view>
				</view>

				<view class="popup-actions">
					<view class="popup-button cancel-button" @click="onClose">取消</view>
					<view class="popup-button confirm-button" @click="onRefund">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: {},
			query: {},
			reasonList: [],
			isRefuse: false,
			loading: true,
			rejectData: {
				refuseReason: '',
				refuseReasonExplain: ''
			}
		}
	},
	computed: {
		hasDetail() {
			return Object.keys(this.data || {}).length > 0
		},
		productImageUrl() {
			return this.resolveImage(this.data.productImage)
		},
		avatarUrl() {
			return this.resolveImage(this.data.userAvatar || this.data.avatar)
		},
		deliveryStatusText() {
			return this.data.deliveryStatusName || this.data.packageOrderStatusName || this.data.merchantOrderStatusName || this.data.statusName || '待送达'
		},
		dishDescription() {
			return this.data.dishName || this.data.packageContent || this.data.dishNames || '暂无菜品信息'
		},
		quantity() {
			return Number(this.data.packageNumber || this.data.buyNumber || this.data.quantity || 1)
		},
		itemPrice() {
			if (this.data.priceEach != null) return this.data.priceEach
			if (this.data.groupPrice != null) return this.data.groupPrice
			return this.data.price || 0
		},
		refundAmount() {
			if (this.data.refundAmount != null) return this.data.refundAmount
			if (this.data.refundPrice != null) return this.data.refundPrice
			return this.data.price || 0
		},
		containerFee() {
			if (this.data.containerFee != null) return this.data.containerFee
			if (this.data.boxFee != null) return this.data.boxFee
			return Number(this.data.boxPrice || 0) * this.quantity
		},
		userPhone() {
			return this.data.phone || this.data.maskedPhone || this.data.mobile || ''
		},
		showActions() {
			return this.data.orderStatusName === '售后申请中' || Number(this.data.fundStatus) === 2
		}
	},
	onLoad(query) {
		this.query = query || {}
		this.getData()
		this.getCodeList()
	},
	methods: {
		getData() {
			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.data = res.data.result || {}
			}).catch(() => {
				uni.showToast({ title: '协商记录加载失败', icon: 'none' })
			}).finally(() => {
				this.loading = false
			})
		},
		getCodeList() {
			this.$http.get('/sys/api/getManyDictItems?dictCodeList=reason_refusal').then((res) => {
				const list = res.data && res.data.reason_refusal
				this.reasonList = Array.isArray(list) ? list.map((item) => ({ ...item, check: false })) : []
			})
		},
		onSelect(item, index) {
			this.reasonList.forEach((reason) => {
				reason.check = false
			})
			this.reasonList[index].check = true
			this.rejectData.refuseReason = item.value
		},
		onRefund() {
			if (this.rejectData.refuseReason === '') {
				uni.showToast({ title: '请选择拒绝原因', icon: 'none' })
				return
			}
			this.$http.post('/groupmeal/merchantPackageOrder/refundRefuse', {
				...this.query,
				...this.rejectData
			}).then((res) => {
				if (res.data.code !== 200) {
					uni.showToast({ title: res.data.message || '拒绝失败', icon: 'none' })
					return
				}
				uni.showToast({ title: res.data.message || '拒绝成功', icon: 'success' })
				this.resetRejectData()
				this.onClose()
				this.getData()
			})
		},
		onSubmit(type) {
			if (type === 0) {
				this.isRefuse = true
				return
			}
			uni.showModal({
				title: '提示',
				content: '是否同意退款？',
				success: (modalRes) => {
					if (!modalRes.confirm) return
					this.$http.post('/groupmeal/merchantPackageOrder/refundAgree', { ...this.query }).then((res) => {
						if (res.data.code !== 200) {
							uni.showToast({ title: res.data.message || '操作失败', icon: 'none' })
							return
						}
						uni.showToast({ title: res.data.message || '商家已同意退款', icon: 'success' })
						this.getData()
					})
				}
			})
		},
		onClose() {
			this.isRefuse = false
		},
		resetRejectData() {
			this.rejectData = {
				refuseReason: '',
				refuseReasonExplain: ''
			}
			this.reasonList.forEach((reason) => {
				reason.check = false
			})
		},
		getRefuseReasonText(value) {
			const selected = this.reasonList.find((item) => String(item.value) === String(value))
			return selected ? selected.text : value
		},
		makePhoneCall(phone) {
			const phoneNumber = String(phone || '')
			if (!phoneNumber || phoneNumber.includes('*')) {
				uni.showToast({ title: '手机号暂不可拨打', icon: 'none' })
				return
			}
			uni.makePhoneCall({ phoneNumber })
		},
		resolveImage(value) {
			const image = String(value || '').split(',').filter(Boolean)[0] || ''
			if (!image || /^https?:\/\//.test(image)) return image
			return this.$config && this.$config.apiUrl ? `${this.$config.apiUrl}/${image}` : image
		},
		formatMoney(value) {
			const number = Number(value)
			if (!Number.isFinite(number)) return '0'
			return number.toFixed(2).replace(/\.00$/, '').replace(/(\.\d)0$/, '$1')
		},
		formatDateTime(value) {
			return value ? String(value).replace(/-/g, '.') : '--'
		}
	}
}
</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 {
	box-sizing: border-box;
	margin-bottom: 16rpx;
	padding: 32rpx;
	border-radius: 16rpx;
	background: #fff;
}

.product-row,
.product-title-row,
.product-desc-row,
.product-summary,
.refund-amount,
.history-card,
.info-row,
.phone-value,
.actions,
.refused-header,
.popup-header,
.reason-item,
.popup-actions {
	display: flex;
	align-items: center;
}

.product-row {
	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,
.history-card,
.info-row,
.refused-header,
.popup-header,
.reason-item {
	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 {
	font-size: 26rpx;
	font-weight: 600;
}

.refund-value {
	font-size: 36rpx;
	font-weight: 600;
}

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

.history-card {
	height: 108rpx;
}

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

.history-status {
	color: #f8b328;
	font-size: 28rpx;
}

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

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

.avatar-row {
	min-height: 60rpx;
}

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

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

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

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

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

.actions {
	justify-content: flex-end;
	gap: 24rpx;
}

.action-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 152rpx;
	height: 64rpx;
	border-radius: 64rpx;
	font-size: 26rpx;
}

.reject-button {
	background: rgba(51, 51, 53, 0.05);
	color: #1d2129;
}

.agree-button {
	background: linear-gradient(92deg, #10abfe 0%, #2260f6 100%);
	color: #fff;
}

.refused-card {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.refused-time {
	color: #86909c;
	font-size: 24rpx;
}

.refused-row {
	color: #4e5969;
	font-size: 26rpx;
}

.refuse-popup {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
	box-sizing: border-box;
	background: #fff;
}

.popup-header {
	position: relative;
	height: 100rpx;
	box-sizing: border-box;
	justify-content: center;
	padding: 25rpx 32rpx;
	border-bottom: 1rpx solid #e7e7e7;
}

.popup-title {
	color: #333;
	font-size: 36rpx;
	font-weight: 500;
	line-height: 50rpx;
}

.popup-close {
	position: absolute;
	right: 32rpx;
	top: 35rpx;
}

.popup-content {
	display: flex;
	flex-direction: column;
	gap: 32rpx;
	box-sizing: border-box;
	padding: 16rpx 32rpx 0;
}

.reason-item {
	height: 32rpx;
	color: #4e5969;
	font-size: 28rpx;
	line-height: 32rpx;
}

.radio {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32rpx;
	height: 32rpx;
	box-sizing: border-box;
	border: 1rpx solid #c9cdd4;
	border-radius: 50%;
}

.radio.checked {
	border-color: #168cff;
	background: #168cff;
}

.radio-check {
	color: #fff;
	font-size: 22rpx;
	font-weight: 600;
	line-height: 32rpx;
}

.explain-section {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.explain-title {
	color: #1d2129;
	font-size: 28rpx;
	font-weight: 500;
	line-height: 40rpx;
}

.explain-box {
	position: relative;
	box-sizing: border-box;
	height: 160rpx;
	padding: 16rpx;
	border-radius: 8rpx;
	background: #f8f8f8;
}

.explain-input {
	width: 100%;
	height: 88rpx;
	color: #1d2129;
	font-size: 24rpx;
	line-height: 34rpx;
}

.word-count {
	position: absolute;
	right: 16rpx;
	bottom: 16rpx;
	color: #86909c;
	font-size: 24rpx;
	line-height: 34rpx;
	text-align: right;
}

.popup-actions {
	gap: 32rpx;
	box-sizing: border-box;
	padding: 24rpx 48rpx;
	background: #fff;
}

.popup-button {
	display: flex;
	flex: 1;
	height: 88rpx;
	align-items: center;
	justify-content: center;
	border-radius: 140rpx;
	font-size: 32rpx;
}

.cancel-button {
	background: rgba(51, 51, 53, 0.05);
	color: #1d2129;
}

.confirm-button {
	background: linear-gradient(92deg, #10abfe 0%, #2260f6 100%);
	color: #fff;
}
</style>