124 lines
2.3 KiB
Vue
124 lines
2.3 KiB
Vue
<template>
|
|
<view class="container">
|
|
<text class="title">退款申请</text>
|
|
<form>
|
|
<!-- 订单编号 -->
|
|
<view class="form-group">
|
|
<text class="label">订单编号</text>
|
|
<uni-easyinput v-model="orderId" :disabled="true" />
|
|
</view>
|
|
<!-- 退款原因 -->
|
|
<view class="form-group">
|
|
<text class="label">退款原因</text>
|
|
<textarea v-model="reason" placeholder="请输入退款原因" class="textarea" required />
|
|
</view>
|
|
<!-- 申请退款按钮 -->
|
|
<view class="padding flex flex-direction">
|
|
<button class="cu-btn bg-blue margin-tb-sm lg" @click="submitRefund">申请退款</button>
|
|
</view>
|
|
</form>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue';
|
|
import {
|
|
onLoad
|
|
} from "@dcloudio/uni-app";
|
|
import * as api from '@/utils/api.js';
|
|
import {
|
|
showModelMessage
|
|
} from "@/utils/tools.js";
|
|
|
|
const orderId = ref(''); // 假设订单编号是静态的
|
|
const reason = ref(''); // 退款原因
|
|
|
|
onLoad((options) => {
|
|
orderId.value = options.orderId;
|
|
})
|
|
|
|
// 处理表单提交
|
|
const submitRefund = () => {
|
|
if (!reason.value.trim()) {
|
|
uni.showToast({
|
|
title: '请填写退款原因',
|
|
icon: 'none',
|
|
});
|
|
return;
|
|
}
|
|
const params = {
|
|
"orderId": orderId.value,
|
|
"reason": reason.value
|
|
}
|
|
api.callPaymentApi("wxPayment/refundApply", params).then(res => {
|
|
if (res.code == 200) {
|
|
// 显示退款成功的提示
|
|
uni.showToast({
|
|
title: '退款成功',
|
|
icon: 'success',
|
|
duration: 2000 // 提示显示的时长
|
|
});
|
|
|
|
// 提示结束后，调整首页
|
|
setTimeout(() => {
|
|
uni.navigateTo({
|
|
url: "/pages/user/home/home"
|
|
})
|
|
}, 2000); // 延迟时间与提示时间相同
|
|
} else {
|
|
showModelMessage("退款失败！");
|
|
}
|
|
|
|
})
|
|
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
padding: 20px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.title {
|
|
font-size: 20px;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.label {
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.input,
|
|
.textarea {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.textarea {
|
|
height: 100px;
|
|
resize: none;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
padding: 12px;
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
</style> |