shop-app/pages/order/saleAfter/saleAfterDetail/components/SubmitLogistics.vue

<!--
 * @Author: ch
 * @Date: 2022-04-14 13:44:30
 * @LastEditors: ch
 * @LastEditTime: 2022-04-18 18:08:29
 * @Description: file content
-->
<template>
	<view>
		<UiWhiteBox>
			<view class="title">商家已同意退货申请，请尽早退货。</view>
			<u-cell class="address" :border="false">
				<view slot="title" class="address--title">{{data.refundLogistics.recipientAddress}}</view>
				<image class="address--icon" slot="icon" src="@/static/order/dw.png" />
				<view slot="label" class="address--label">
					<text>收货人：{{data.refundLogistics.recipientName}}</text>
					<text>{{data.refundLogistics.recipientPhone}}</text>
				</view>
			</u-cell>
		</UiWhiteBox>
		<UiWhiteBox>
			<view class="title title__normal">退货说明：拒收到付</view>
			<view class="content">
				<view>•未与商家协商一致，请勿使用到付或平邮，以免商家拒签货物</view>
				<view>•请填写真实退货物流信息，逾期未填写，退货申请将关闭</view>
			</view>
			<view class="footer">
				<UiButton size="min" @click="cancelShow = true">撤销申请</UiButton>
			</view>
		</UiWhiteBox>
		<UiWhiteBox class="box">
			<UiCell title="物流公司" @click="logisticsShow = true">
				<input class="cell-input" v-model="params.companyName" placeholder="请选择物流公司" slot="value" />
			</UiCell>
			<UiCell title="物流单号" :rightIcon="false">
				<input class="cell-input" v-model="params.trackingNo" placeholder="请填写物流单号" slot="value" />
			</UiCell>
			<view class="cell-title">
				<view>
					<text>备注说明</text>
				</view>
				<text class="cell-title--min">{{params.remark.length}}/45</text>
			</view>
			<textarea class="cell-textarea" v-model="params.remark" maxlength="45" placeholder="请输入您申请退款的问题"></textarea>
		</UiWhiteBox>
		<UiWhiteBox class="box">
			<view class="cell-title">
				<text>上传凭证</text>
				<text class="cell-title--min">（0/9）</text>
			</view>
			<u-upload
				:fileList="fileList"
				@afterRead="upload"
				@delete="delImage"
				multiple
				:maxCount="9"
				:previewFullImage="true"
			></u-upload>
		</UiWhiteBox>
		<UiButton class="submit-btn" size="max" type="gradual" @click="submit">确认提交</UiButton>
		<u-picker :show="logisticsShow" :columns="company" keyName="companyName" @confirm="confirmCompany" @cancel="logisticsShow = false"></u-picker>
		<u-modal :show="cancelShow" @confirm="cancelSaleAfter" showCancelButton @cancel="cancelShow = false" 
			content="你将撤销本次申请，撤销后，保障期内你可以再次申请售后服务" cancelText="我再想想"></u-modal>
	</view>
</template>
<script>
import UiButton from '../../../../../components/UiButton.vue'
import UiCell from '../../../../../components/UiCell.vue'
import UiWhiteBox from '../../../../../components/UiWhiteBox.vue'
import {ApiPostCancelSaleAfter, ApiPutLogisticsInfo} from '@/common/api/order.js';
import {ApiPostGetOssConfig} from '@/common/api/oss.js';
export default {
	components: { UiWhiteBox, UiButton, UiCell },
	props:{
		data : {
			type : Object,
			default : ()=>({})
		},
		company : {
			type : Array,
			default : ()=>([])
		}
	},
	data(){
		return {
			cancelShow : false,
			logisticsShow : false,
			fileList : [],
			params : {
				companyCode : '',
				companyName : '',
				logisticsImages : [],
				refundId : this.$Route.query.id,
				remark : '',
				trackingNo : ''
			}
		}
	},
	methods:{
		async cancelSaleAfter(){
			const {error, result} = await ApiPostCancelSaleAfter({refundId : this.data.refundId});
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			this.$emit('reload');
			this.cancelShow = false;
		},
		confirmCompany(val){
			this.params = {...this.params, ...val.value[0]}
			this.logisticsShow = false;
		},
		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 submit(){
			this.params.logisticsImages = this.fileList.map(i => i.url);
			const {error, result} = await ApiPutLogisticsInfo(this.params);
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			this.$emit('reload');
		}
	}
}
</script>
<style lang="scss" scoped>
.box{
	padding: 0 30rpx;
}
.address{
	/deep/.u-cell__body__content{
		padding: 10rpx 0;

	}
	&--title{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 500rpx;
		&__grey{
			color: $color-grey4;
		}
	}
	&--icon{
		width: 28rpx;
		height: 34rpx;
		margin-right: 30rpx;
	}
	&--label{
		margin-top: 26rpx;
		text{
			font-size: $font-size-sm;
			color: $color-grey4;
			margin-right: 40rpx;
		}
	}
}
.title{
	height: 98rpx;
	line-height: 98rpx;
	padding-left: 30rpx;
	border-bottom: 2rpx solid $color-grey2;
	color: $color-yellow3;
	&__normal{
		color: $color-grey6;
	}
}
.content{
	padding: 30rpx 30rpx 0;
	view{
		line-height: 34rpx;
		color: $color-grey4;
		font-size: $font-size-sm;
		margin-bottom: 28rpx;
	}
}
.footer{
	padding: 0 30rpx 30rpx;
	text-align: right;
	.btn{
		margin-left: 20rpx;
	}
}

.cell-title{
	padding : 30rpx 0;
	display: flex;
	justify-content: space-between;
	&--min{
		font-size: $font-size-sm;
		color: $color-grey4;
	}
}
.cell-input{
	text-align: right;
	flex: 1;
}
.cell-textarea{
	height: 100rpx;
}
.submit-btn{
	position: fixed;
	bottom: 30rpx;
	left: 30rpx;
	z-index:999
}
</style>