321 lines
6.8 KiB
Vue
321 lines
6.8 KiB
Vue
<template>
|
||
<view class="MallShipmentRefund">
|
||
<view class="mes-des">因您信誉良好 尊享：退货包运费·7天无理由退货</view>
|
||
<!-- 申请类型 -->
|
||
<view class="list">
|
||
<view class="list-left">申请类型</view>
|
||
<view class="list-right">申请退货</view>
|
||
</view>
|
||
<!-- 退货原因 -->
|
||
<view class="list">
|
||
<view class="list-left">退货原因</view>
|
||
<u-select v-model="show" :list="list" mode='single-column' @confirm="confirm"></u-select>
|
||
<view class="list-right" @click="show = true">{{title?title:'请选择退货'}}
|
||
<u-icon name="arrow-right" color="#cacaca" size="26" />
|
||
</view>
|
||
</view>
|
||
<!-- 退货图片 -->
|
||
<view class="list">
|
||
<view class="list-left">退货图片</view>
|
||
<view class="list-right-img">
|
||
<view class="upImg" v-for="(item,index) in pictures.showpath" :key="index">
|
||
<image @click="priviewImg(index)" mode="aspectFill" :src="item" />
|
||
<u-icon name="close" @click='closeImg(index)' class='closeImg' />
|
||
</view>
|
||
<view class="addImg" @click="updImgs">
|
||
<u-icon name="plus" label='上传图片' label-pos='bottom' size='50' margin-bottom='10' color='#606266'
|
||
label-size='26' />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 申请原因 -->
|
||
<view class="list1">
|
||
<view class="list-left">备注原因</view>
|
||
<u-input class="list-right" v-model="remark" maxlength='300' placeholder='请输入您的退货原因' type="textarea"
|
||
height='230' :border="true" :clearable='false' />
|
||
<view class="">
|
||
{{remark.length+'/'+300}}
|
||
</view>
|
||
</view>
|
||
<!-- 订单 -->
|
||
<view class="actions">
|
||
<view class="nowPay" @click="sure">确认退货</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mallShipmentsRefundInfo,
|
||
mallShipmentsRefund
|
||
} from '@/apis/interfaces/numberWeight'
|
||
import {
|
||
uploads
|
||
} from '@/apis/interfaces/uploading'
|
||
export default {
|
||
name: 'MallShipmentRefund',
|
||
data() {
|
||
return {
|
||
remark: '',
|
||
shipment_no: '', // 提货单no
|
||
title: '',
|
||
list: [],
|
||
show: false,
|
||
pictures: {
|
||
path: [],
|
||
showpath: []
|
||
}, // 退货单图片
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
this.shipment_no = e.no
|
||
this.getInfo(e.no)
|
||
},
|
||
methods: {
|
||
// 预览上传图片
|
||
priviewImg(index) {
|
||
uni.previewImage({
|
||
current: index,
|
||
urls: this.pictures.showpath
|
||
})
|
||
},
|
||
// 上传图片
|
||
updImgs(type) {
|
||
uni.chooseImage({
|
||
success: res => {
|
||
let path = res.tempFiles.map((val, index) => {
|
||
return {
|
||
name: 'uploads' + index,
|
||
uri: val.path
|
||
}
|
||
})
|
||
uploads(path).then(pathRes => {
|
||
this.pictures = {
|
||
path: [...this.pictures.path, ...pathRes.path],
|
||
showpath: [...this.pictures.showpath, ...pathRes.url]
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 删除图片
|
||
closeImg(index) {
|
||
this.pictures.path.splice(index, 1)
|
||
this.pictures.showpath.splice(index, 1)
|
||
},
|
||
// 获取退货的基本信息
|
||
getInfo(shipment_no) {
|
||
mallShipmentsRefundInfo(shipment_no).then(res => {
|
||
let list = res.title
|
||
let lists = []
|
||
list.map(item => {
|
||
let items = {
|
||
label: item
|
||
}
|
||
lists.push(items)
|
||
})
|
||
this.list = lists
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none',
|
||
mask : true
|
||
})
|
||
})
|
||
},
|
||
confirm(e) {
|
||
this.title = e[0].label
|
||
},
|
||
sure() {
|
||
let data = {
|
||
title: this.title,
|
||
shipment_no: this.shipment_no,
|
||
remark: this.remark,
|
||
pictures:this.pictures.path
|
||
}
|
||
if (data.title === '') {
|
||
uni.showToast({
|
||
title: '请选择退货原因',
|
||
icon : 'none',
|
||
mask : true
|
||
})
|
||
return;
|
||
}
|
||
if (data.remark === '') {
|
||
uni.showToast({
|
||
title: '请填写备注信息',
|
||
icon : 'none',
|
||
mask : true
|
||
})
|
||
return;
|
||
}
|
||
|
||
uni.showModal({
|
||
title: '哎呦，提醒你',
|
||
content: '您是否确认申请退货',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
mallShipmentsRefund(data).then(res => {
|
||
uni.setStorageSync('refresh', true)
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res,
|
||
showCancel:false,
|
||
success: ModalRes => {
|
||
if(ModalRes.confirm) uni.navigateBack()
|
||
}
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none',
|
||
mask : true
|
||
})
|
||
})
|
||
} else if (res.cancel) {
|
||
uni.showToast({
|
||
title: '放弃了~',
|
||
icon : 'none',
|
||
mask : true
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #fff;
|
||
}
|
||
|
||
//
|
||
.mes-des {
|
||
background-color: rgba($color: $mian-color, $alpha: .1);
|
||
color: $mian-color;
|
||
text-shadow: 0 0 6rpx rgba($color: #000000, $alpha:.1);
|
||
padding: 32rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
// 确认退货
|
||
.actions {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
flex-wrap: wrap;
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
padding: 30rpx;
|
||
color: #fff;
|
||
|
||
.nowPay {
|
||
padding: 20rpx 30rpx;
|
||
border-radius: 40rpx;
|
||
margin-left: 20rpx;
|
||
margin-top: 20rpx;
|
||
width: 600rpx;
|
||
font-size: 32rpx;
|
||
background-color: $mian-color;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.list1 {
|
||
font-size: 30rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 40rpx;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
|
||
u-input {
|
||
width: 100%;
|
||
margin-top: 30rpx;
|
||
}
|
||
.list-right {
|
||
width: 100%;
|
||
margin-top: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
font-size: 30rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 40rpx;
|
||
border-bottom: solid 1rpx #f7f7f7;
|
||
|
||
.list-right {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
flex: 1;
|
||
margin-left: 50rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.list-right-img {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
box-sizing: border-box;
|
||
flex: 1;
|
||
margin-left: 50rpx;
|
||
font-size: 30rpx;
|
||
|
||
.upImg {
|
||
width: 159rpx;
|
||
height: 159rpx;
|
||
margin: 4rpx;
|
||
position: relative;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.closeImg {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: 1;
|
||
padding: 20rpx;
|
||
}
|
||
}
|
||
|
||
.addImg {
|
||
width: 159rpx;
|
||
height: 159rpx;
|
||
background-color: #f7f7f7;
|
||
display: flex;
|
||
justify-content: center;
|
||
border:solid 1rpx $border-color;
|
||
}
|
||
}
|
||
}
|
||
</style>
|