You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
435 lines
8.9 KiB
435 lines
8.9 KiB
10 months ago
|
<template>
|
||
|
|
|
||
|
|
<BaseContainer class="refund-apply">
|
||
|
|
<NavBar title="申请退款" />
|
||
|
|
<view class="refund-apply" v-if="order.id">
|
||
|
|
<view class="goods" v-for="cart of order.cartInfo">
|
||
|
|
<view class="image">
|
||
|
|
<image mode="aspectFit" class="img" :src="cart.productInfo.image" />
|
||
|
|
</view>
|
||
|
|
<view class="text">
|
||
|
|
<view class="name">{{ cart.productInfo.store_name }}</view>
|
||
|
|
<view class="money">
|
||
|
|
<view class="price">
|
||
|
|
￥<span>{{ cart.productInfo.price }}</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="number">x{{ cart.cart_num }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="form">
|
||
|
|
<view class="form-bd">
|
||
|
|
<view class="label">
|
||
|
|
<view>退款金额</view>
|
||
|
|
<view class="readonly-value">{{ "￥" + order.pay_price }}</view>
|
||
|
|
</view>
|
||
|
|
<view class="label flex-between">
|
||
|
|
<view>退款原因</view>
|
||
|
|
<view class="flex flex-center-x">
|
||
|
|
<picker
|
||
|
|
mode="selector"
|
||
|
|
:range="reason"
|
||
|
|
range-key="reason_refund"
|
||
|
|
class="flex-auto"
|
||
|
|
@change="handleReasonChange"
|
||
|
|
>{{ refund_reason || "选择退款原因" }}
|
||
|
|
</picker>
|
||
|
|
<view class="iconfont iconxiangyou"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="label">
|
||
|
|
<view>备注说明</view>
|
||
|
|
<textarea
|
||
|
|
placeholder="填写备注信息"
|
||
|
|
auto-height
|
||
|
|
placeholder-class="input-placeholder"
|
||
|
|
v-model="remarks"
|
||
|
|
></textarea>
|
||
|
|
</view>
|
||
|
|
<view class="upload">
|
||
|
|
<view>
|
||
|
|
<view>上传凭证</view>
|
||
|
|
<view>（最多可上传3张）</view>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<view>
|
||
|
|
<view class="li" v-for="(pic, index) in pics">
|
||
|
|
<text
|
||
|
|
class="iconfont del-btn iconguanbi2"
|
||
|
|
@click="imgdel(index)"
|
||
|
|
></text>
|
||
|
|
<image mode="aspectFit" :src="pic" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="label" v-if="pics.length < 3" @click="handleUpload">
|
||
|
|
<view class="image">
|
||
|
|
<image mode="aspectFit" src="@/static/icon/camera.png" />
|
||
|
|
</view>
|
||
|
|
<view class="text">上传凭证</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="form-ft">
|
||
|
|
<view class="submit-button flex flex-center" @click="submit">提交</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</BaseContainer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getOrderRefundData } from "@/api/user";
|
||
|
|
import { getRefundReason, submitRefundApply } from "@/api/auth";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
order_id: "",
|
||
|
|
reason: [],
|
||
|
|
refund_reason: "",
|
||
|
|
remarks: "",
|
||
|
|
pics: [],
|
||
|
|
order: {},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad({ order_id }) {
|
||
|
|
this.order_id = order_id;
|
||
|
|
this.getData();
|
||
|
|
this.getRefundReason();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleUpload() {
|
||
|
|
this.$util.pickerOneImg().then((path) => {
|
||
|
|
path && this.pics.push(path);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
handleReasonChange({ detail }) {
|
||
|
|
this.refund_reason = this.reason[detail.value].reason_refund;
|
||
|
|
},
|
||
|
|
async getData() {
|
||
|
|
uni.showLoading();
|
||
|
|
|
||
|
|
try {
|
||
|
|
const { data } = await getOrderRefundData(this.order_id);
|
||
|
|
uni.hideLoading();
|
||
|
|
this.order = data.order;
|
||
|
|
} catch (err) {
|
||
|
|
uni.hideLoading();
|
||
|
|
this.$util.showMsg(err.msg);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
imgdel(index) {
|
||
|
|
this.pics.splice(index, 1);
|
||
|
|
},
|
||
|
|
getRefundReason() {
|
||
|
|
getRefundReason().then(({ data }) => {
|
||
|
|
this.reason = data;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
async submit() {
|
||
|
|
if (!this.refund_reason) {
|
||
|
|
return this.$util.showMsg("请选择退款原因");
|
||
|
|
}
|
||
|
|
|
||
|
|
uni.showLoading({ mask: true });
|
||
|
|
|
||
|
|
const data = {
|
||
|
|
refund_reason: this.refund_reason,
|
||
|
|
remarks: this.remarks,
|
||
|
|
pics: this.pics,
|
||
|
|
};
|
||
|
|
|
||
|
|
try {
|
||
|
|
const { code } = await submitRefundApply(this.order_id, data);
|
||
|
|
uni.hideLoading();
|
||
|
|
if (code === 200) {
|
||
|
|
this.$util.showMsg("申请成功");
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: "/pages/special/order?uni=" + this.order_id,
|
||
|
|
});
|
||
|
|
}, 500);
|
||
|
|
} else {
|
||
|
|
this.$util.showMsg("申请失败");
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
uni.hideLoading();
|
||
|
|
this.$util.showMsg("申请失败");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
page {
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-placeholder {
|
||
|
|
color: #bcbcbc;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
/* 申请退款 */
|
||
|
|
.refund-apply .goods {
|
||
|
|
display: flex;
|
||
|
|
padding: 30rpx;
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .goods .image {
|
||
|
|
width: 230rpx;
|
||
|
|
height: 128rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .goods .img {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
object-fit: cover;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .goods .text {
|
||
|
|
flex: 1;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
margin-left: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .goods .name {
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 28rpx;
|
||
|
|
line-height: 30rpx;
|
||
|
|
color: #343434;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .goods .money {
|
||
|
|
margin-top: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .goods .price,
|
||
|
|
.refund-apply .goods .vip-price {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .goods .price {
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #9a9a9a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .goods .price text {
|
||
|
|
font-size: 26rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .goods .vip-price {
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .goods .vip-price image {
|
||
|
|
display: inline-block;
|
||
|
|
width: 46rpx;
|
||
|
|
height: 21rpx;
|
||
|
|
pointer-events: none;
|
||
|
|
-webkit-touch-callout: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .goods .number {
|
||
|
|
font-size: 26rpx;
|
||
|
|
line-height: 30rpx;
|
||
|
|
color: #9a9a9a;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .form {
|
||
|
|
margin-top: 12rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .form-bd {
|
||
|
|
padding-left: 30rpx;
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .form-bd > .label {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
align-items: center;
|
||
|
|
padding-top: 30rpx;
|
||
|
|
padding-right: 30rpx;
|
||
|
|
padding-bottom: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .form-bd > .label view:first-child {
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #343434;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .form-bd > .label + .label {
|
||
|
|
border-top: 1px solid #eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.readonly-value,
|
||
|
|
.refund-apply .form-bd > .label input {
|
||
|
|
flex: 1;
|
||
|
|
font-family: inherit;
|
||
|
|
font-size: 30rpx;
|
||
|
|
text-align: right;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .form-bd > .label picker {
|
||
|
|
color: #bcbcbc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .form-bd > .label textarea {
|
||
|
|
flex: 1;
|
||
|
|
margin-left: 25rpx;
|
||
|
|
font-family: inherit;
|
||
|
|
font-size: 30rpx;
|
||
|
|
resize: none;
|
||
|
|
min-height: 5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.iconxiangyou {
|
||
|
|
margin-left: 25rpx;
|
||
|
|
font-size: 30rpx;
|
||
|
|
line-height: 1;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .form-bd > .label:nth-child(3) view:first-child {
|
||
|
|
align-self: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .upload {
|
||
|
|
border-top: 1px solid #eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .upload > view:first-child {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
align-items: center;
|
||
|
|
padding-top: 30rpx;
|
||
|
|
padding-right: 30rpx;
|
||
|
|
padding-bottom: 30rpx;
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #343434;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .upload > view:first-child > view:last-child {
|
||
|
|
color: #bcbcbc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .upload > view:last-child {
|
||
|
|
padding-right: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .upload > view:last-child::after {
|
||
|
|
content: " ";
|
||
|
|
display: block;
|
||
|
|
height: 0;
|
||
|
|
clear: both;
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .upload .label {
|
||
|
|
float: left;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
align-items: center;
|
||
|
|
width: 156rpx;
|
||
|
|
height: 156rpx;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 3rpx;
|
||
|
|
margin-right: 30rpx;
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .upload .label .image {
|
||
|
|
width: 47rpx;
|
||
|
|
height: 47rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .upload .label image {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .upload .label .text {
|
||
|
|
margin-top: 15rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #bcbcbc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .upload .li {
|
||
|
|
position: relative;
|
||
|
|
float: left;
|
||
|
|
width: 156rpx;
|
||
|
|
height: 156rpx;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 3rpx;
|
||
|
|
margin-right: 30rpx;
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .upload .li image {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
object-fit: cover;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .upload .li .del-btn {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 2;
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #2c8eff;
|
||
|
|
|
||
|
|
transform: translate(25%, -25%);
|
||
|
|
font-size: 40rpx;
|
||
|
|
line-height: 1;
|
||
|
|
color: #ffffff;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .form-ft {
|
||
|
|
padding: 30rpx;
|
||
|
|
margin-top: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.refund-apply .form-ft .submit-button {
|
||
|
|
width: 100%;
|
||
|
|
height: 86rpx;
|
||
|
|
border-radius: 43rpx;
|
||
|
|
background-color: #2c8eff;
|
||
|
|
font-family: inherit;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
</style>
|