shop-app/pages/order/saleAfter/saleAfterEdit.vue

<!--
 * @Author: ch
 * @Date: 2022-04-11 13:51:10
 * @LastEditors: ch
 * @LastEditTime: 2022-04-14 16:42:51
 * @Description: file content
-->
<template>
	<view>
		<view class="box">
			<UiCell title="货物状态" @click="receiveShow = true" v-if="!$Route.query.status">
				<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) || {};
		},
		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;
}
</style>