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/saleAfterDetail/components/SubmitLogistics.vue

253 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-14 13:44:30
* @LastEditors: ch
* @LastEditTime: 2022-04-24 11:02:34
* @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="cancelSaleAfter"></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" />
</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 {
logisticsShow : false,
fileList : [],
params : {
companyCode : '',
companyName : '',
logisticsImages : [],
refundId : '',
remark : '',
trackingNo : ''
}
}
},
methods:{
async cancelSaleAfter(){
this.$msb.confirm({
content : '你将撤销本次申请,撤销后,保障期内你可以再次申请售后服务',
cancelTxt : '我再想想',
confirm : async ()=> {
const {error, result} = await ApiPostCancelSaleAfter({refundId : this.data.refundId});
if(error){
uni.$u.toast(error.message);
return false;
}
this.$emit('reload');
}
})
},
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);
this.params.refundId = this.data.refundId;
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;
width: 670rpx;
}
</style>