Init project
This commit is contained in:
lifizer
@@ -0,0 +1,264 @@
|
||||
<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">上传图片</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">退款理由</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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user