270 lines
8.4 KiB
Vue
270 lines
8.4 KiB
Vue
<template>
|
||
<view class="pkg-orders-refund">
|
||
<u--form :model="form" errorType="toast" ref="refundForm">
|
||
<view class="upload-section">
|
||
<u-form-item prop="refundReasonWapImg">
|
||
<view class="title"><text class="require-txt">*</text>上传图片</view>
|
||
<view class="upload-box">
|
||
<u-upload
|
||
:fileList="pics"
|
||
@afterRead="afterRead"
|
||
@delete="deletePic"
|
||
name="pics"
|
||
multiple
|
||
:maxCount="9"
|
||
width="210rpx"
|
||
height="210rpx"
|
||
>
|
||
<view class="tips tips-zero flex flex-col jc-center ai-center" v-if="pics.length===0">
|
||
<u-icon name="photo-fill" color="#333" size="30"></u-icon>
|
||
<view style="font-size: 32rpx;line-height: 48rpx">请上传图片</view>
|
||
<view style="font-size: 22rpx;line-height: 32rpx;color:#666">最多可上传9张图</view>
|
||
</view>
|
||
<view class="tips flex flex-col jc-center ai-center" v-else>
|
||
<u-icon name="photo-fill" color="#333" size="30"></u-icon>
|
||
<view style="font-size: 28rpx;line-height: 48rpx">可再加{{ 9 - pics.length }}张</view>
|
||
</view>
|
||
</u-upload>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<view class="cause-section">
|
||
<u-form-item prop="refundReasonWapExplain">
|
||
<view class="title"><text class="require-txt">*</text>退款理由</view>
|
||
<view class="input-box row">
|
||
<u--textarea v-model="form.refundReasonWapExplain" placeholder="请输入退款理由..."
|
||
border="none"></u--textarea>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<view class="options-section">
|
||
<view class="title">收货状态</view>
|
||
<u-form-item prop="refundIsDelivery">
|
||
<view class="row flex jc-between ai-center">
|
||
<view class="option flex jc-center ai-center" :class="{'selected':form.refundIsDelivery===1}"
|
||
@click="form.refundIsDelivery=1">未收到货
|
||
</view>
|
||
<view class="option flex jc-center ai-center" :class="{'selected':form.refundIsDelivery===2}"
|
||
@click="form.refundIsDelivery=2">已收到货
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
|
||
<view class="title">处理方式</view>
|
||
<u-form-item prop="refundType">
|
||
<view class="row flex jc-between ai-center">
|
||
<view class="option flex jc-center ai-center" :class="{'selected':form.refundType===1}"
|
||
@click="form.refundType=1">不退货，仅退款
|
||
</view>
|
||
<view class="option flex jc-center ai-center" :class="{'selected':form.refundType===2}"
|
||
@click="form.refundType=2">退货退款
|
||
</view>
|
||
</view>
|
||
</u-form-item>
|
||
</view>
|
||
|
||
<view class="btn-submit flex jc-center ai-center bold" @click="onSubmit">申请退款</view>
|
||
</u--form>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {uploadImage} from "@/utils";
|
||
import {postOrderRefund} from "@/api/order";
|
||
|
||
export default {
|
||
name: "refund.vue",
|
||
data() {
|
||
return {
|
||
pics: [],
|
||
form: {
|
||
uni: null, // 订单号
|
||
refundReasonWapImg: "", // 图片,逗号分隔
|
||
refundReasonWapExplain: "", // 退款理由
|
||
refundIsDelivery: null, // 收货状态 1.未收到货，2.已收到货
|
||
refundType: null // 处理方式 1.不退货，仅退款，2.退货退款
|
||
},
|
||
rules: {
|
||
'refundReasonWapImg': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请上传图片',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'refundReasonWapExplain': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写退款理由',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'refundIsDelivery': {
|
||
type: 'number',
|
||
required: true,
|
||
message: '请选择收货状态',
|
||
trigger: ['blur', 'change']
|
||
},
|
||
'refundType': {
|
||
type: 'number',
|
||
required: true,
|
||
message: '请选择处理方式',
|
||
trigger: ['blur', 'change']
|
||
}
|
||
}
|
||
}
|
||
},
|
||
onReady() {
|
||
this.$refs.refundForm.setRules(this.rules);
|
||
},
|
||
onLoad(options) {
|
||
this.form.uni = options.id || null;
|
||
},
|
||
methods: {
|
||
// 删除图片
|
||
deletePic(event) {
|
||
this[`${event.name}`].splice(event.index, 1)
|
||
},
|
||
|
||
// 添加图片
|
||
afterRead(event) {
|
||
let that = this;
|
||
if (event.file.length > 0) {
|
||
event.file.map(item => {
|
||
uploadImage(item.url, img => {
|
||
that.pics.push({url: img})
|
||
})
|
||
})
|
||
}
|
||
},
|
||
|
||
onSubmit() {
|
||
if (!this.form.uni) return;
|
||
|
||
this.form.refundReasonWapImg = "";
|
||
this.pics.map(item => {
|
||
this.form.refundReasonWapImg += (item.url + ",");
|
||
})
|
||
this.form.refundReasonWapImg = this.form.refundReasonWapImg.substring(0, this.form.refundReasonWapImg.length - 1);
|
||
|
||
this.$refs.refundForm.validate().then(() => {
|
||
// 校验通过
|
||
postOrderRefund(this.form).then(res => {
|
||
if (res.status === 200) {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
success: () => {
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 3000)
|
||
}
|
||
})
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.msg,
|
||
icon: "none",
|
||
duration: 5000
|
||
})
|
||
})
|
||
}).catch(() => {
|
||
// 校验失败
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.pkg-orders-refund {
|
||
min-height: 100vh;
|
||
background: #fff;
|
||
}
|
||
|
||
.title {
|
||
margin: 0 32rpx;
|
||
padding-top: 20rpx;
|
||
line-height: 48rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.row {
|
||
margin: 0 32rpx;
|
||
}
|
||
|
||
.upload-section {
|
||
width: 750rpx;
|
||
background-image: linear-gradient(to right, #F7E9DF, #E4F0EE);
|
||
|
||
.upload-box {
|
||
margin: 30rpx 32rpx;
|
||
|
||
.tips {
|
||
width: 210rpx;
|
||
height: 210rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 10rpx;
|
||
background: #fff;
|
||
color: #333;
|
||
}
|
||
|
||
.tips-zero {
|
||
width: 686rpx;
|
||
height: 240rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cause-section {
|
||
padding-bottom: 20rpx;
|
||
background: #F6F6F6;
|
||
|
||
.input-box {
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
.options-section {
|
||
padding-bottom: 100rpx;
|
||
background: #fff;
|
||
|
||
.title {
|
||
margin-bottom: 0;
|
||
text {
|
||
color: #FF564A;
|
||
}
|
||
}
|
||
|
||
.option {
|
||
width: 322rpx;
|
||
height: 80rpx;
|
||
box-sizing: border-box;
|
||
border: 2rpx solid #707070;
|
||
border-radius: 12rpx;
|
||
color: #333;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.selected {
|
||
background: rgba(255, 86, 74, 0.04);
|
||
border: 2rpx solid #FF564A;
|
||
color: #FF564A;
|
||
}
|
||
}
|
||
|
||
.btn-submit {
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 750rpx;
|
||
height: 80rpx;
|
||
background: #FF564A;
|
||
color: #fff;
|
||
font-size: 36rpx;
|
||
}
|
||
.require-txt {
|
||
color: #FF564A;
|
||
}
|
||
</style> |