317 lines
8.2 KiB
Vue
317 lines
8.2 KiB
Vue
<template>
|
||
<view class="refund-page v12-px-3 v12-pt-3">
|
||
<!-- 退款金额部分 -->
|
||
<view class="refund-amount-section">
|
||
<view class="v12-justify-between v12-align-center">
|
||
<view>
|
||
<view class="v12-font-28 v12-font-bold">退款金额</view>
|
||
<view class="return-method">退回原支付方</view>
|
||
</view>
|
||
<view class="v12-font-32 v12-primary-text v12-font-bold">¥{{ displayRefundAmount }}</view>
|
||
</view>
|
||
<u-divider></u-divider>
|
||
<view class="order-amount">
|
||
<text class="v12-font-28 v12-font-bold">订单支付金额</text>
|
||
<text class="v12-font-32 v12-font-bold">¥{{ displayOrderAmount }}</text>
|
||
</view>
|
||
<view class="deduction-amount v12-mt-2">
|
||
<text class="v12-font-24 v12-primary-text">退款违约金</text>
|
||
<text class="v12-primary-text">¥{{ displayDeductionAmount }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 退款原因部分 -->
|
||
<view class="refund-reason-section v12-mt-3">
|
||
<view class="reason-title">退款原因（单选）</view>
|
||
<view class="reason-options">
|
||
<view
|
||
v-for="(reason, index) in refundReasons"
|
||
:key="index"
|
||
class="reason-item"
|
||
:class="{'selected': selectedReason === reason}"
|
||
@click="selectReason(reason)"
|
||
>
|
||
{{reason}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 其他原因输入框 -->
|
||
<view class="other-reason-section v12-mt-3" v-if="selectedReason === '其他'">
|
||
<view class="other-reason-title">其他个人原因</view>
|
||
<textarea
|
||
class="reason-input"
|
||
v-model="otherReason"
|
||
placeholder="请输入其他退款原因"
|
||
maxlength="200"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="v12-mt-3">
|
||
<button
|
||
class="submit-btn v12-primary v12-white-text v12-radius-100 v12-font-32"
|
||
:class="{ 'submit-btn-disabled': isSubmitDisabled }"
|
||
:disabled="isSubmitDisabled"
|
||
block
|
||
@click="submitRefund"
|
||
>点击确认退款</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { fetchSojoumOrderDetail, sojoumOrderRefundInfo, sojoumOrderRefund } from '@/api/sojoumOrder.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
refundAmount: '',
|
||
orderAmount: '',
|
||
deductionAmount: '',
|
||
refundStatus: 0,
|
||
refundReasons: [
|
||
'行程变更',
|
||
'定错时间/地址',
|
||
'实际与页面不符',
|
||
'个人突发情况',
|
||
'沟通问题',
|
||
'其他'
|
||
],
|
||
selectedReason: '',
|
||
otherReason: '',
|
||
key: '',
|
||
submitting: false
|
||
}
|
||
},
|
||
computed: {
|
||
displayRefundAmount() {
|
||
return this.formatMoney(this.refundAmount)
|
||
},
|
||
displayOrderAmount() {
|
||
return this.formatMoney(this.orderAmount)
|
||
},
|
||
displayDeductionAmount() {
|
||
return this.formatMoney(this.deductionAmount)
|
||
},
|
||
isSubmitDisabled() {
|
||
return this.submitting || Number(this.refundStatus) === 3
|
||
}
|
||
},
|
||
onLoad(opts) {
|
||
this.key = opts.id
|
||
this.getRefundInfo(opts.id)
|
||
},
|
||
methods: {
|
||
async getRefundInfo(id) {
|
||
try {
|
||
const [refundRes, orderRes] = await Promise.all([
|
||
sojoumOrderRefundInfo({
|
||
orderId: id
|
||
}),
|
||
fetchSojoumOrderDetail({
|
||
key: id
|
||
})
|
||
])
|
||
const refundData = refundRes && refundRes.status === 200 ? (refundRes.data || {}) : {}
|
||
const orderData = orderRes && orderRes.status === 200 ? (orderRes.data || {}) : {}
|
||
const orderAmount = this.pickFirstValidValue(refundData.payPrice, orderData.payPrice, 0)
|
||
const deductionAmount = this.pickFirstValidValue(refundData.penalty, orderData.penalty, 0)
|
||
this.refundAmount = this.resolveRefundAmount(refundData.refundPrice, orderAmount, deductionAmount)
|
||
this.orderAmount = orderAmount
|
||
this.deductionAmount = deductionAmount
|
||
this.refundStatus = Number(this.pickFirstValidValue(orderData.refundStatus, refundData.refundStatus, 0))
|
||
} catch (e) {
|
||
}
|
||
},
|
||
selectReason(reason) {
|
||
if (this.isSubmitDisabled) {
|
||
return
|
||
}
|
||
this.selectedReason = reason
|
||
},
|
||
hasValidValue(value) {
|
||
return value !== '' && value !== null && value !== undefined
|
||
},
|
||
pickFirstValidValue(...values) {
|
||
for (let index = 0; index < values.length; index += 1) {
|
||
if (this.hasValidValue(values[index])) {
|
||
return values[index]
|
||
}
|
||
}
|
||
return ''
|
||
},
|
||
formatMoney(value) {
|
||
return this.$force2Decimal(Number(value || 0))
|
||
},
|
||
resolveRefundAmount(refundPrice, orderAmount, deductionAmount) {
|
||
if (this.hasValidValue(refundPrice)) {
|
||
return refundPrice
|
||
}
|
||
const orderPriceNumber = Number(orderAmount || 0)
|
||
const deductionNumber = Number(deductionAmount || 0)
|
||
return Math.max(orderPriceNumber - deductionNumber, 0)
|
||
},
|
||
submitRefund() {
|
||
if (this.isSubmitDisabled) {
|
||
uni.showToast({
|
||
title: '退款申请已被驳回',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
// TODO: 实现退款提交逻辑
|
||
// orderId string 订单号
|
||
// refundReasonWap string 选择的退款原因
|
||
// refundReasonWapExplain string 退款原因说明（其他个人原因）
|
||
const refundData = {
|
||
orderId: this.key,
|
||
refundReasonWap: this.selectedReason,
|
||
refundReasonWapExplain: this.selectedReason === '其他' ? this.otherReason : ''
|
||
}
|
||
if(!this.selectedReason) {
|
||
uni.showToast({
|
||
title: '请选择退款原因',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if(this.selectedReason === '其他' && !this.otherReason) {
|
||
uni.showToast({
|
||
title: '请输入其他退款原因',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask: true,
|
||
})
|
||
this.submitting = true
|
||
sojoumOrderRefund(refundData).then(res => {
|
||
if (res.status === 200) {
|
||
uni.showToast({
|
||
title: '退款申请已提交',
|
||
icon: 'success'
|
||
})
|
||
uni.navigateTo({
|
||
url: '/pkg_product/views/sojoumOrderDetails?id=' + this.key
|
||
})
|
||
}
|
||
}).finally(() => {
|
||
this.submitting = false
|
||
uni.hideLoading();
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.refund-page {
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
|
||
.refund-amount-section {
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.amount-title {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.return-method {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.amount {
|
||
font-size: 60rpx;
|
||
font-weight: bold;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.order-amount, .deduction-amount {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.refund-reason-section {
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.reason-title {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.reason-options {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx;
|
||
|
||
.reason-item {
|
||
padding: 15rpx 20rpx;
|
||
border-radius: 16rpx;
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
background-color: #fff;
|
||
border: 2rpx solid #333;
|
||
&.selected {
|
||
color: #fff;
|
||
border-color: #F22535;
|
||
background-color: #F22535;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.other-reason-section {
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.other-reason-title {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.reason-input {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
padding: 20rpx;
|
||
font-size: 26rpx;
|
||
background-color: #f5f5f5;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
|
||
.submit-btn {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
border-radius: 40rpx;
|
||
border: none;
|
||
letter-spacing: 4rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.submit-btn-disabled {
|
||
background-color: #c0c4cc !important;
|
||
color: #ffffff !important;
|
||
}
|
||
}
|
||
</style>
|