317 lines
7.5 KiB
Vue
317 lines
7.5 KiB
Vue
|
<template>
|
||
|
|
<view class="whole">
|
||
|
|
<view class="colitem">
|
||
|
|
<view class="tit">1.请将退货物品寄到以下地址</view>
|
||
|
|
<view class="arrdbox">
|
||
|
|
<view class="arrd">
|
||
|
|
<text>{{refundInfo.refund_address_name}} {{refundInfo.refund_address_mobile || refundInfo.refund_address_tel}}</text><br>
|
||
|
|
<text>{{refundInfo.refund_address_province_name}}{{refundInfo.refund_address_city_name}}{{refundInfo.refund_address_area_name}}{{refundInfo.refund_address_detail}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="copybtn" @click="copyAddress()">复制</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="colitem">
|
||
|
|
<view class="tit">2.请填写退货物流单号<text></text></view>
|
||
|
|
<view class="cellbox">
|
||
|
|
<view class="cell cell1">
|
||
|
|
<text>快递单号</text>
|
||
|
|
<input class="inpt" type="text" v-model="express_no" placeholder="请输入快递单号"/>
|
||
|
|
<view @click="scanQrCode()">
|
||
|
|
<up-icon name="scan" :color="Color" size="20" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="cell" @click="showConpany = true">
|
||
|
|
<text>快递公司</text>
|
||
|
|
<view class="inpt" v-if="companyIndex === ''">请选择快递公司</view>
|
||
|
|
<view class="inpt" v-else>{{conpanyList[companyIndex].name}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="bottom">
|
||
|
|
<view class="btn" @click="toAfterSale()">确认提交</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 选择快递公司 -->
|
||
|
|
<up-popup :show="showConpany" :round="10" mode="bottom" close-on-click-overlay closeable @close="showConpany = false">
|
||
|
|
<view class="reasonbox">
|
||
|
|
<view class="title">请选择快递公司</view>
|
||
|
|
<view class="box">
|
||
|
|
<view class="row" v-for="(item, index) in conpanyList" @click="selectConpany(index)">
|
||
|
|
<view class="tit">{{item.name}}</view>
|
||
|
|
<span v-if="companyIndex === index" class="iconfont icon-checked"></span>
|
||
|
|
<span v-else class="iconfont icon-circle"></span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</up-popup>
|
||
|
|
|
||
|
|
<!-- 隐私协议弹窗 -->
|
||
|
|
<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { ref, reactive, toRefs } from 'vue'
|
||
|
|
import { showToast, judgePrivacy } from '@/components/common.js'
|
||
|
|
import { get, post } from '@/api/request.js'
|
||
|
|
import privacyPopup from '@/components/privacyPopup/index.vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
privacyPopup
|
||
|
|
},
|
||
|
|
setup() {
|
||
|
|
const data = reactive({
|
||
|
|
refundInfo: {},
|
||
|
|
express_no: '',
|
||
|
|
companyIndex: '',
|
||
|
|
refund_id: '',
|
||
|
|
showConpany: false,
|
||
|
|
conpanyList: [],
|
||
|
|
modify: false,
|
||
|
|
Color: uni.getStorageSync('theme_color'),
|
||
|
|
showPrivacy: false
|
||
|
|
})
|
||
|
|
|
||
|
|
async function scanQrCode() {
|
||
|
|
if(await judgePrivacy()) {
|
||
|
|
data.showPrivacy = true
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
uni.scanCode({
|
||
|
|
onlyFromCamera: false,
|
||
|
|
scanType: ['barCode', 'qrCode'],
|
||
|
|
success(res){
|
||
|
|
data.express_no = res.result
|
||
|
|
showToast('扫码成功')
|
||
|
|
},
|
||
|
|
fail(error){
|
||
|
|
showToast('扫码失败')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function toAfterSale() {
|
||
|
|
if(data.express_no === '') {
|
||
|
|
showToast('请填写快递单号')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if(data.companyIndex === '') {
|
||
|
|
showToast('请选择快递公司')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
let params = {
|
||
|
|
delivery_company_id: data.conpanyList[data.companyIndex].id,
|
||
|
|
delivery_code: data.conpanyList[data.companyIndex].code,
|
||
|
|
ship_sn: data.express_no
|
||
|
|
}
|
||
|
|
|
||
|
|
let url = '/api/v1/orderRefundApply/fillShip/'
|
||
|
|
if(data.modify) { //修改单号
|
||
|
|
url = '/api/v1/orderRefundApply/editShip/'
|
||
|
|
}
|
||
|
|
post(url + data.refund_id, params).then((res) => {
|
||
|
|
uni.hideLoading()
|
||
|
|
uni.navigateBack({
|
||
|
|
delta: 1
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取订单信息
|
||
|
|
async function getRefundInfo() {
|
||
|
|
await get(`/api/v1/orderRefundApply/${data.refund_id}`).then((res) => {
|
||
|
|
data.refundInfo = res.data
|
||
|
|
data.express_no = res.data.ship_sn
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
async function copyAddress() {
|
||
|
|
if(await judgePrivacy()) {
|
||
|
|
data.showPrivacy = true
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
let address = data.refundInfo.refund_address_name + ' ' +
|
||
|
|
(data.refundInfo.refund_address_mobile || data.refundInfo.refund_address_tel) + ' ' +
|
||
|
|
data.refundInfo.refund_address_province_name +
|
||
|
|
data.refundInfo.refund_address_city_name +
|
||
|
|
data.refundInfo.refund_address_area_name +
|
||
|
|
data.refundInfo.refund_address_detail
|
||
|
|
uni.setClipboardData({
|
||
|
|
data: address,
|
||
|
|
success: function () {
|
||
|
|
uni.showToast({
|
||
|
|
icon: 'none',
|
||
|
|
title: '地址信息已复制'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
fail: function () {
|
||
|
|
uni.showToast({
|
||
|
|
icon: 'none',
|
||
|
|
title: '复制失败'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
async function getConpanyList() {
|
||
|
|
await get('/api/v1/delivery/company').then((res) => {
|
||
|
|
data.conpanyList = res.data
|
||
|
|
if(data.refundInfo.delivery_company && data.refundInfo.delivery_company.id) {
|
||
|
|
res.data.forEach((item, index) => {
|
||
|
|
if(data.refundInfo.delivery_company.id == item.id) {
|
||
|
|
data.companyIndex = index
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function selectConpany(index) {
|
||
|
|
data.companyIndex = index
|
||
|
|
data.showConpany = false
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
...toRefs(data),
|
||
|
|
scanQrCode,
|
||
|
|
toAfterSale,
|
||
|
|
getConpanyList,
|
||
|
|
selectConpany,
|
||
|
|
getRefundInfo,
|
||
|
|
copyAddress
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async onLoad(options) {
|
||
|
|
this.refund_id = options.refund_id
|
||
|
|
this.modify = options.modify ? true : false
|
||
|
|
await this.getRefundInfo()
|
||
|
|
await this.getConpanyList()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.whole {
|
||
|
|
box-sizing: border-box;
|
||
|
|
.colitem{
|
||
|
|
padding: 30rpx;
|
||
|
|
background: #fff;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
.tit{
|
||
|
|
color: #333;
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.arrdbox{
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #303030;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 20rpx;
|
||
|
|
background: #F5F5F5;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
.arrd{
|
||
|
|
width: calc(100% - 140rpx);
|
||
|
|
text{
|
||
|
|
color: #7B7B7B;
|
||
|
|
line-height: 44rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.copybtn{
|
||
|
|
height: 48rpx;
|
||
|
|
padding: 0 30rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #333;
|
||
|
|
border: 1rpx solid #BBBBBB;
|
||
|
|
border-radius: 48rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.cellbox{
|
||
|
|
margin-top: 20rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
background: #F5F5F5;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
padding: 6rpx 0;
|
||
|
|
.cell{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 20rpx;
|
||
|
|
&.cell1{
|
||
|
|
border-bottom: 1rpx solid #E5E5E5;
|
||
|
|
}
|
||
|
|
text{
|
||
|
|
color: #000000;
|
||
|
|
margin-right: 40rpx;
|
||
|
|
}
|
||
|
|
.inpt{
|
||
|
|
width: calc(100% - 220rpx);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bottom{
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
bottom: 20rpx;
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 30rpx;
|
||
|
|
z-index: 10;
|
||
|
|
box-sizing: border-box;
|
||
|
|
.btn{
|
||
|
|
height: 80rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 30rpx;
|
||
|
|
width: 100%;
|
||
|
|
color: #fff;
|
||
|
|
border-radius: 80rpx;
|
||
|
|
background: v-bind('Color');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.reasonbox{
|
||
|
|
padding: 0 30rpx;
|
||
|
|
.title{
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #303030;
|
||
|
|
font-weight: bold;
|
||
|
|
padding: 30rpx 0;
|
||
|
|
border-bottom: 1rpx solid #E5E5E5;
|
||
|
|
}
|
||
|
|
.box{
|
||
|
|
padding-bottom: 100rpx;
|
||
|
|
min-height: 40vh;
|
||
|
|
max-height: 60vh;
|
||
|
|
overflow: auto;
|
||
|
|
.row{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 20rpx 0;
|
||
|
|
.tit{
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #707070;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.iconfont{
|
||
|
|
font-size: 22px;
|
||
|
|
}
|
||
|
|
.icon-checked{
|
||
|
|
color: v-bind('Color');
|
||
|
|
}
|
||
|
|
</style>
|