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

<!--
* @Author: ch
* @Date: 2022-04-11 13:51:10
* @LastEditors: ch
* @LastEditTime: 2022-04-22 18:53:25
* @Description: file content
-->
<template>
<view>
<view class="box">
3 years ago
<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) || {};
3 years ago
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>