[商城整个模块，及个人中心相应的模块调整]
This commit is contained in:
341
pages/user/order/mallShipmentsRefund.vue
Normal file
341
pages/user/order/mallShipmentsRefund.vue
Normal file
@@ -0,0 +1,341 @@
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<!-- <u-toast ref="uToast" /> -->
|
||||
<u-toast ref="uToast" />
|
||||
</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 = this.$route.params.no
|
||||
// this.getInfo(this.shipment_no)
|
||||
this.shipment_no = e.no
|
||||
this.getInfo(e.no)
|
||||
},
|
||||
methods: {
|
||||
// 预览上传图片
|
||||
priviewImg(index) {
|
||||
console.log(index, this.pictures.showpath)
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: this.pictures.showpath
|
||||
})
|
||||
},
|
||||
// 上传图片
|
||||
updImgs(type) {
|
||||
uni.chooseImage({
|
||||
success: res => {
|
||||
console.log(res)
|
||||
let path = res.tempFiles.map((val, index) => {
|
||||
return {
|
||||
name: 'uploads' + index,
|
||||
uri: val.path
|
||||
}
|
||||
})
|
||||
uploads(path).then(pathRes => {
|
||||
// console.log(pathRes)
|
||||
this.pictures = {
|
||||
path: [...this.pictures.path, ...pathRes.path],
|
||||
showpath: [...this.pictures.showpath, ...pathRes.url]
|
||||
}
|
||||
console.log(this.pictures)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 删除图片
|
||||
closeImg(index) {
|
||||
console.log(index)
|
||||
this.pictures.path.splice(index, 1)
|
||||
this.pictures.showpath.splice(index, 1)
|
||||
|
||||
console.log(this.pictures);
|
||||
},
|
||||
// 获取退货的基本信息
|
||||
getInfo(shipment_no) {
|
||||
mallShipmentsRefundInfo(shipment_no).then(res => {
|
||||
let list = res.title
|
||||
let lists = []
|
||||
list.map(item => {
|
||||
let items = {
|
||||
label: item
|
||||
}
|
||||
lists.push(items)
|
||||
})
|
||||
console.log(lists)
|
||||
this.list = lists
|
||||
}).catch(err => {
|
||||
this.$refs.uToast.show({
|
||||
title: err.message,
|
||||
type: 'error',icon:false,
|
||||
duration: 3000
|
||||
})
|
||||
})
|
||||
},
|
||||
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 === '') {
|
||||
this.$refs.uToast.show({
|
||||
title: '请选择退货原因',
|
||||
type: 'error',icon:false,
|
||||
duration: 3000
|
||||
})
|
||||
return;
|
||||
}
|
||||
if (data.remark === '') {
|
||||
this.$refs.uToast.show({
|
||||
title: '请填写备注信息',
|
||||
type: 'error',icon:false,
|
||||
duration: 3000
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: '哎呦，提醒你',
|
||||
content: '您是否确认申请退货',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
mallShipmentsRefund(data).then(res => {
|
||||
console.log(res)
|
||||
this.$refs.uToast.show({
|
||||
title: res,
|
||||
type: 'error',icon:false,
|
||||
duration: 3000
|
||||
})
|
||||
uni.setStorageSync('refresh', true)
|
||||
setTimeout(res => {
|
||||
uni.navigateBack()
|
||||
}, 2000)
|
||||
}).catch(err => {
|
||||
this.$refs.uToast.show({
|
||||
title: err.message,
|
||||
type: 'error',icon:false,
|
||||
duration: 3000
|
||||
})
|
||||
})
|
||||
} else if (res.cancel) {
|
||||
this.$refs.uToast.show({
|
||||
title: '放弃了~',
|
||||
type: 'error',icon:false,
|
||||
duration: 3000
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
//
|
||||
.mes-des {
|
||||
background-color: rgba($color: #ff0000, $alpha: .1);
|
||||
color: #ff0000;
|
||||
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: $main-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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user