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.
shop-app/pages/order/saleAfter/saleAfterEdit.vue

230 lines
5.9 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
* @Author: ch
* @Date: 2022-04-11 13:51:10
* @LastEditors: ch
* @LastEditTime: 2022-04-29 23:06:16
* @Description: file content
-->
<template>
<view>
<view class="box">
<UiCell title="货物状态" @click="receiveShow = true" v-if="params.refundType == 1">
<input class="input" slot="value" disabled placeholder="请选择" :value="receiveSelected.label"/>
</UiCell>
<UiCell title="退款原因" @click="refundShow=true">
<input class="input" slot="value" disabled placeholder="请选择" :value="refundSelected.label"/>
</UiCell>
<UiCell title="退款金额" :rightIcon="false">
<text class="price" slot="value">{{refundAmount}}</text>
</UiCell>
<view class="title">
<view>
<text>问题描述</text>
<text class="title--min">选填</text>
</view>
<text class="title--min">{{params.problemDescribe.length}}/45</text>
</view>
<textarea class="textarea" v-model="params.problemDescribe" maxlength="45" placeholder="请输入您申请退款的问题"></textarea>
</view>
<view class="box upload">
<view class="title">
<text>上传凭证</text>
<text class="title--min">{{fileList.length}}/9</text>
</view>
<u-upload
:fileList="fileList"
@afterRead="upload"
@delete="delImage"
multiple
:maxCount="9"
:previewFullImage="true"
></u-upload>
</view>
<UiButton class="btn" size="max" type="gradual" @click="apply">提交申请</UiButton>
<UiRadioPicker title="退款原因" :show.sync="refundShow"
:options="refundReasonData" v-model="refundSelected"></UiRadioPicker>
<UiRadioPicker title="货物状态" :show.sync="receiveShow"
:options="receiveStatusData" v-model="receiveSelected"></UiRadioPicker>
</view>
</template>
<script>
import UiButton from '../../../components/UiButton.vue';
import UiCell from "../../../components/UiCell.vue";
import UiRadioPicker from '../../../components/UiRadioPicker.vue';
import {ApiPostGetOssConfig} from '@/common/api/oss.js';
import {ApiPostEditSaleAfter, ApiGetSaleAfterOrderDetail} from '@/common/api/order.js';
export default {
components: { UiCell, UiButton, UiRadioPicker },
data() {
return {
fileList: [],
params : {
receiveStatus : '',
refundReason : '',
// 1仅退款2退款退货
refundType : this.$Route.query.type,
refundId : this.$Route.query.id,
problemDescribe : '',
evidenceImages : null
},
refundAmount : 0,
refundShow : false,
refundSelected : {},
refundReasonData : [
{label : '7天无理由退款', value: '1'},
{label : '不喜欢/效果不满意', value: '2'},
{label : '商品不符合描述', value: '3'},
{label : '其它原因', value: '4'},
],
receiveSelected : {},
receiveShow : false,
receiveStatusData : [
{label : '未收到货', value: '1'},
{label : '已收到货', value: '2'}
]
};
},
onShow(){
this.getSaleAfterInfo();
},
methods: {
async getSaleAfterInfo(){
const {error, result} = await ApiGetSaleAfterOrderDetail({
refundId:this.params.refundId
})
if(error){
uni.$u.toast(error.message);
return false;
}
this.params = {
...this.params,
receiveStatus : result.receiveStatus,
refundType : result.refundType,
refundReason : result.refundReason,
problemDescribe : result.problemDescribe,
evidenceImages : result.refundEvidences.map(i => ({url : i.fileUrl}))
}
this.refundAmount = result.refundAmount;
this.fileList = this.params.evidenceImages;
// console.log(this.params.evidenceImages);
this.receiveSelected = this.receiveStatusData.find(i => i.value == this.params.receiveStatus) || {};
this.refundSelected = this.refundReasonData.find(i => i.value == this.params.refundType) || {};
if(result.refundType == 2){
uni.setNavigationBarTitle({title:'修改退货退款申请'});
}else{
uni.setNavigationBarTitle({title:'修改退款申请'});
}
},
async getOssCon(){
const {error, result} = await ApiPostGetOssConfig({
configId : 'refund-evidence/',
serviceName : 'mall-trade'
});
if(error){
uni.$u.toast(error.message);
return false
}
return result;
},
async upload(val){
const file = val.file[0];
const oss = await this.getOssCon();
if(!oss) {
return false
}
uni.uploadFile({
name : 'file',
filePath : file.url,
url : oss.host,
formData : {
name : file.name,
key : `${oss.dir}${'${filename}'}`,
policy : oss.policy,
OSSAccessKeyId : oss.accessId,
success_action_status : 200,
signature : oss.signature
},
success:(res)=>{
this.fileList.push({
url : `${oss.host}/${oss.dir}${file.name}`
})
}
})
},
/**
* 删除凭证图片
*/
delImage(val){
this.fileList.splice(val.index , 1);
},
async apply(){
if(!this.receiveSelected.value){
uni.$u.toast('请选择货物状态');
return false;
}
if(!this.refundSelected.value){
uni.$u.toast('请选择退货原因');
return false;
}
this.params.receiveStatus = this.receiveSelected.value;
this.params.refundReason = this.refundSelected.value;
this.params.evidenceImages = this.fileList.map(i => i.url);
const {error, result} = await ApiPostEditSaleAfter(this.params);
if(error){
uni.$u.toast(error.message);
return false;
}
this.$Router.replace(`/saleAfterDetail?id=${this.params.refundId}`);
}
}
};
</script>
<style lang="scss">
page {
background: $color-grey1;
}
</style>
<style lang="scss" scoped>
.box{
padding: 0 40rpx;
margin: 20rpx 0;
background: $color-grey0;
}
.input{
font-size: $font-size-base;
text-align: right;
flex: 1;
}
.price{
color: $color-yellow4;
}
.title{
padding : 30rpx 0;
display: flex;
justify-content: space-between;
&--min{
font-size: $font-size-sm;
color: $color-grey4;
}
}
textarea{
height: 100rpx;
}
.upload{
padding-bottom: 20rpx;
}
.btn{
position: fixed;
bottom: 40rpx;
left: 30rpx;
width: 670rpx;
}
</style>