348 lines
16 KiB
Vue
348 lines
16 KiB
Vue
<template>
|
||
<view class="waper">
|
||
<u-navbar :autoBack="true" :placeholder="true" bgColor="#FBFBFB">
|
||
<view slot='center' class="navbar_title">填写退款信息</view>
|
||
</u-navbar>
|
||
<view class="waper_content" :style="'padding-bottom: ' + waperBottom1 + 'px;'" v-if="detail">
|
||
<view class="info">
|
||
<view class="title">{{detail.storeName}}</view>
|
||
<view class="goods">
|
||
<view class="img">
|
||
<image :src="$utils.setImgUrl(detail.goodsImage)" mode=""></image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="name">{{detail.goodsTitle}}</view>
|
||
<view class="tag">
|
||
<view>
|
||
<text v-if="detail.goodsSkuText">{{detail.goodsSkuText.split(',').join('-')}}</text>
|
||
</view>
|
||
<view>X{{detail.goodsNum}}</view>
|
||
</view>
|
||
<view class="num">总价：￥{{(detail.goodsNum * detail.goodsPrice).toFixed(2)}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="reason" @click="refund = true;">
|
||
<view class="left">退款原因<text>*</text></view>
|
||
<view class="right">
|
||
<view class="cont">
|
||
<input type="text" placeholder="请选择退款原因" v-model="refundReason.name" disabled placeholder-class="placeholder" />
|
||
</view>
|
||
<view class="icon">
|
||
<u-icon name="arrow-right" size="32rpx" color="#333"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-if="detail.type == 1">
|
||
<view class="reason" @click="express = true;">
|
||
<view class="left">快递公司<text>*</text></view>
|
||
<view class="right">
|
||
<view class="cont">
|
||
<input type="text" placeholder="请选择快递公司" v-model="refundExpress.name" disabled placeholder-class="placeholder" />
|
||
</view>
|
||
<view class="icon">
|
||
<u-icon name="arrow-right" size="32rpx" color="#333"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="reason">
|
||
<view class="left">快递单号<text>*</text></view>
|
||
<view class="right">
|
||
<view class="cont" style="padding-right: 0;">
|
||
<input type="text" placeholder="请输入快递单号" v-model="expressNo" placeholder-class="placeholder" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="money">
|
||
<view>
|
||
<text>退款商品金额</text>
|
||
<text>￥{{(detail.goodsNum * detail.goodsPrice).toFixed(2)}}</text>
|
||
</view>
|
||
<view>
|
||
<text>运费</text>
|
||
<text>用户自行承担</text>
|
||
</view>
|
||
</view>
|
||
<view class="describe">
|
||
<view class="list">
|
||
<view class="name">退款描述和凭证（选填）</view>
|
||
<view class="form">
|
||
<u--textarea v-model="content" border="none" placeholder="请详细填写内容，以便我们提供更好的帮助" count :maxlength="200" placeholderClass="placeholder"></u--textarea>
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<view class="name">上传凭证（选填）</view>
|
||
<view class="form">
|
||
<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="file" multiple :maxCount="5" width="156rpx" height="156rpx">
|
||
<image src="https://common/shop_refund_bg.png" class="img_list"></image>
|
||
</u-upload>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="button" :style="'bottom: ' + waperBottom + 'px;'">
|
||
<view @click="submitRefund">提交</view>
|
||
</view>
|
||
</view>
|
||
<u-popup :show="refund" mode="bottom" bgColor="transparent">
|
||
<view class="refund_waper">
|
||
<view class="title">请选择退款原因
|
||
<view class="icon" @click="closeRefund">
|
||
<u-icon name="close" size="32rpx" color="#333"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="cont">
|
||
<u-radio-group v-model="refundReason.value" iconPlacement="right" placement="column">
|
||
<u-radio v-for="(i, index) in refundReasonList" :key="index" activeColor="#03AE80" :name="i.dictValue" :label="i.dictLabel"></u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
<view class="btn" @click="confirmRefund">确定</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="express" mode="bottom" bgColor="transparent">
|
||
<view class="refund_waper">
|
||
<view class="title">请选择快递公司
|
||
<view class="icon" @click="closeExpress">
|
||
<u-icon name="close" size="32rpx" color="#333"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="cont">
|
||
<u-radio-group v-model="refundExpress.value" iconPlacement="right" placement="column">
|
||
<u-radio v-for="(i, index) in expressList" :key="index" activeColor="#03AE80" :name="i.code" :label="i.name"></u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
<view class="btn" @click="confirmExpress">确定</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import _config from '../../common/http/config.js'
|
||
export default {
|
||
data () {
|
||
return {
|
||
waperBottom: 0,
|
||
waperBottom1: 0,
|
||
fileList: [],
|
||
refund: false,
|
||
detail: null,
|
||
refundReason: {
|
||
name: '',
|
||
value: ''
|
||
},
|
||
refundReasonList: [],
|
||
content: '',
|
||
express: false,
|
||
refundExpress: {
|
||
name: '',
|
||
value: ''
|
||
},
|
||
expressList: [],
|
||
expressNo: ''
|
||
}
|
||
},
|
||
async onLoad (options) {
|
||
this.waperBottom = this.$safeAreaBottom + uni.upx2px(6);
|
||
this.waperBottom1 = this.$safeAreaBottom + uni.upx2px(110);
|
||
this.detail = JSON.parse(decodeURIComponent(options.info));
|
||
let info = await this.$http.common({ dictType: 'wcsc_refund_reason' });
|
||
this.refundReasonList = info.data;
|
||
if (this.detail.type == 1) {
|
||
let express = await this.$shop.getExpressList();
|
||
this.expressList = express.data;
|
||
}
|
||
},
|
||
methods: {
|
||
async submitRefund () {
|
||
if (!this.refundReason.value) {
|
||
uni.showToast({ mask: true, title: '请选择退款原因', icon: 'none' })
|
||
return false;
|
||
}
|
||
let data = { orderId: this.detail.orderId, orderItemId: this.detail.id, goodsId: this.detail.goodsId, reason: this.refundReason.value, content: this.content, totalPrice: (this.detail.goodsNum * this.detail.goodsPrice).toFixed(2), totalNum: this.detail.goodsNum, saleType: (this.detail.type == 0 ? 'refund' : 'return'), goodsSkuPriceId: this.detail.goodsSkuPriceId };
|
||
let image = [];
|
||
this.fileList.forEach((item) => {
|
||
image.push(item.url)
|
||
})
|
||
data.images = image.join(',');
|
||
if (this.detail.type == 1) {
|
||
if (!this.refundExpress.value) {
|
||
uni.showToast({ mask: true, title: '请选择快递公司', icon: 'none' })
|
||
return false;
|
||
}
|
||
data.expressName = this.refundExpress.name;
|
||
data.expressCode = this.refundExpress.value;
|
||
data.expressNo = this.expressNo;
|
||
}
|
||
let info = await this.$shop.applyRefundOrder(data);
|
||
uni.showToast({ mask: true, title: '操作成功', icon: 'success' });
|
||
setTimeout(() => {
|
||
uni.redirectTo({ url: '/pages/shop/refundReason?id=' + info.data })
|
||
}, 1500)
|
||
},
|
||
confirmRefund () {
|
||
if (!this.refundReason.value) {
|
||
uni.showToast({ mask: true, title: '请选择退款原因', icon: 'none' })
|
||
return false;
|
||
}
|
||
this.refundReasonList.forEach((item) => {
|
||
if (item.dictValue == this.refundReason.value) this.refundReason.name = item.dictLabel;
|
||
})
|
||
this.refund = false;
|
||
},
|
||
confirmExpress () {
|
||
if (!this.refundExpress.value) {
|
||
uni.showToast({ mask: true, title: '请选择快递公司', icon: 'none' })
|
||
return false;
|
||
}
|
||
this.expressList.forEach((item) => {
|
||
if (item.code == this.refundExpress.value) this.refundExpress.name = item.name;
|
||
})
|
||
this.express = false;
|
||
},
|
||
// 新增图片
|
||
async afterRead(event) {
|
||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||
let lists = [].concat(event.file)
|
||
let fileListLen = this.fileList.length
|
||
lists.map((item) => {
|
||
this.fileList.push({
|
||
...item,
|
||
status: 'uploading',
|
||
message: '上传中'
|
||
})
|
||
})
|
||
for (let i = 0; i < lists.length; i++) {
|
||
const result = await this.uploadFilePromise(lists[i].url)
|
||
let item = this.fileList[fileListLen]
|
||
this.fileList.splice(fileListLen, 1, Object.assign(item, {
|
||
status: 'success',
|
||
message: '',
|
||
url: JSON.parse(result).fileName
|
||
}))
|
||
fileListLen++
|
||
}
|
||
},
|
||
// 删除图片
|
||
deletePic(event) {
|
||
this.fileList.splice(event.index, 1)
|
||
},
|
||
uploadFilePromise(url) {
|
||
return new Promise((resolve, reject) => {
|
||
let a = uni.uploadFile({
|
||
url: _config.url + '/app/common/upload',
|
||
filePath: url,
|
||
header: { token: uni.getStorageSync("ztc_token") },
|
||
name: 'file',
|
||
success: (res) => {
|
||
setTimeout(() => {
|
||
resolve(res.data)
|
||
}, 1000)
|
||
}
|
||
});
|
||
})
|
||
},
|
||
closeRefund () {
|
||
this.refund = false;
|
||
},
|
||
closeExpress () {
|
||
this.express = false;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
.placeholder{ color: #999; }
|
||
.waper_content{
|
||
width: 100%; box-sizing: border-box; padding: 32rpx 24rpx 24rpx;
|
||
.info{
|
||
width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 28rpx 24rpx;
|
||
.title{ line-height: 38rpx; color: rgba(0,0,0,0.85); font-size: 32rpx; font-weight: 500; }
|
||
.goods{
|
||
width: 100%; margin-top: 25rpx; box-sizing: border-box; padding-left: 190rpx; position: relative; min-height: 170rpx;
|
||
.img{
|
||
width: 170rpx; height: 170rpx; position: absolute; left: 0; top: 0;
|
||
image{ border-radius: 10rpx; }
|
||
}
|
||
.text{
|
||
width: 100%;
|
||
.name{ line-height: 33rpx; color: rgba(0,0,0,0.85); font-size: 28rpx; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
|
||
.tag{
|
||
width: 100%; margin-top: 20rpx; display: flex; justify-content: space-between; align-items: center; height: 48rpx;
|
||
view{
|
||
&:nth-child(1){
|
||
display: flex; align-items: center;
|
||
text{ height: 48rpx; line-height: 48rpx; padding: 0 24rpx; box-sizing: border-box; background: #F4F4F4; border-radius: 2rpx; color: rgba(0,0,0,0.65); font-size: 24rpx; }
|
||
}
|
||
&:nth-child(2){ color: rgba(0,0,0,0.65); font-size: 24rpx; }
|
||
}
|
||
}
|
||
.num{ margin-top: 30rpx; text-align: right; color: rgba(0,0,0,0.85); font-size: 28rpx; line-height: 33rpx; }
|
||
}
|
||
}
|
||
}
|
||
.reason{
|
||
width: 100%; height: 90rpx; margin-top: 20rpx; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding-left: 198rpx; position: relative;
|
||
.left{
|
||
width: 198rpx; box-sizing: border-box; padding-left: 24rpx; position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; color: rgba(0,0,0,0.85); font-size: 28rpx;
|
||
text{ color: #FF5833; }
|
||
&::after{ content: ""; width: 2rpx; height: 24rpx; background: rgba(0,0,0,0.1); position: absolute; right: 20rpx; top: 50%; transform: translateY(-50%); }
|
||
}
|
||
.right{
|
||
width: 100%; height: 100%; box-sizing: border-box; padding-right: 80rpx; position: relative; display: flex; align-items: center;
|
||
.cont{
|
||
width: 100%; height: 100%; display: flex; align-items: center;
|
||
input{ width: 100%; height: 72rpx; font-size: 28rpx; color: #333; display: inline-block; vertical-align: top; }
|
||
}
|
||
.icon{ position: absolute; right: 24rpx; top: 50%; transform: translateY(-50%); }
|
||
}
|
||
}
|
||
.money{
|
||
width: 100%; margin-top: 20rpx; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 24rpx;
|
||
view{
|
||
width: 100%; display: flex; justify-content: space-between; align-items: center; height: 40rpx; color: rgba(0,0,0,0.85); font-size: 28rpx; margin-bottom: 20rpx;
|
||
&:last-child{ margin-bottom: 0; }
|
||
}
|
||
}
|
||
.describe{
|
||
width: 100%; margin-top: 20rpx; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx;
|
||
.list{
|
||
width: 100%; margin-bottom: 32rpx;
|
||
&:last-child{ margin-bottom: 0; }
|
||
.name{ line-height: 33rpx; color: rgba(0,0,0,0.85); font-size: 28rpx; }
|
||
.form{
|
||
margin-top: 24rpx; width: 100%;
|
||
.u-textarea{ background: #FBFBFB; }
|
||
.u-textarea__field{ font-size: 28rpx; line-height: 40rpx; }
|
||
.u-textarea__count{ background: transparent !important; }
|
||
.img_list{ width: 156rpx; height: 156rpx; }
|
||
.u-upload__deletable{ width: 40rpx; height: 40rpx; border-radius: 0; margin: 0; justify-content: center; align-items: center; background: #FF5833; }
|
||
.u-upload__deletable__icon{ position: static; }
|
||
.u-icon__icon{ font-size: 32rpx !important; }
|
||
}
|
||
}
|
||
}
|
||
.button{
|
||
position: fixed; left: 0; width: 100%; padding: 10rpx 32rpx 0; background: #FBFBFB; box-sizing: border-box;
|
||
view { height: 80rpx; background: #03AE80; border-radius: 64rpx; color: #fff; text-align: center; line-height: 80rpx; font-size: 30rpx; }
|
||
}
|
||
}
|
||
.refund_waper{
|
||
width: 100%; background: #fff; box-sizing: border-box; padding: 32rpx 24rpx 20rpx; border-radius: 30rpx 30rpx 0 0;
|
||
.title{
|
||
line-height: 42rpx; color: rgba(0,0,0,0.65); font-size: 36rpx; font-weight: 500; text-align: center; position: relative;
|
||
.icon{ position: absolute; right: 0; top: 0; }
|
||
}
|
||
.cont{
|
||
width: 100%; margin-top: 48rpx;
|
||
.u-radio{
|
||
line-height: 33rpx; margin-bottom: 24rpx;
|
||
&:last-child{ margin-bottom: 0; }
|
||
}
|
||
.u-radio__text{ color: rgba(0,0,0,0.85) !important; font-size: 28rpx !important; }
|
||
}
|
||
.btn{ width: 686rpx; height: 80rpx; background: #03AE80; border-radius: 66rpx; text-align: center; line-height: 80rpx; color: #fff; font-size: 32rpx; font-weight: 500; margin: 90rpx auto 0; }
|
||
}
|
||
</style> |