305 lines
6.9 KiB
Vue
305 lines
6.9 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="mailed-back"></view>
|
|
<view class="receive" v-if="address != ''" @click="onCopy(address.name + ' ' + address.mobile + ' ' + address.full_address)">
|
|
<text class="receive-icon">收</text>
|
|
<view class="receive-text">
|
|
<view class="receive-name">{{address.name}}<text>{{address.mobile}}</text></view>
|
|
<view class="receive-add">{{address.full_address}}</view>
|
|
</view>
|
|
<uni-icons class="receive-right" type="right" color="gray"></uni-icons>
|
|
</view>
|
|
<view class="material">
|
|
<view class="material-title">
|
|
<text class="material-title-text">邮寄物品</text>
|
|
<u-checkbox-group @change="onAll" v-model="checkboxAll">
|
|
<u-checkbox name="all" activeColor="#446EFE" shape="circle" label="全选" labelSize="14" labelColor="#111"></u-checkbox></text>
|
|
</u-checkbox-group>
|
|
</view>
|
|
<u-checkbox-group
|
|
v-model="checkboxValue"
|
|
iconPlacement="right"
|
|
placement="column"
|
|
@change="onCheckboxChange"
|
|
>
|
|
<view class="material-item" v-for="(item, index) in deliverCount" :key="index">
|
|
<u-checkbox :name="item.value" activeColor="#446EFE" shape="circle" :label="item.title" labelSize="14" labelColor="#111"></u-checkbox>
|
|
</view>
|
|
</u-checkbox-group>
|
|
</view>
|
|
<view class="from">
|
|
<view class="from-flex">
|
|
<label>物流单号</label>
|
|
<view class="from-inputs">
|
|
<input class="from-inputs-input" v-model="no" type="text" placeholder="请填写">
|
|
<uni-icons type="scan" color="#111" size="36rpx" @click="onScan"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="from-flex">
|
|
<label>物流公司</label>
|
|
<view class="from-inputs">
|
|
<picker :range="expressArr" range-key="name" :value="expressIndex" @change="onPicker">
|
|
<view class="from-inputs-input" :class="{ 'hide': expressIndex == null }">{{expressIndex == null ? '请选择': expressArr[expressIndex].name}}</view>
|
|
</picker>
|
|
<uni-icons type="right" color="#999999" size="36rpx"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="from-btn">
|
|
<button @click="onSubmit">提交</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { express, orderAddress, submitExpresses } from '@/apis/interfaces/mailed.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
address : '',
|
|
no : '',
|
|
expressIndex : null,
|
|
expressArr : [],
|
|
checkboxAll : [],
|
|
checkboxValue: [],
|
|
deliverCount : []
|
|
};
|
|
},
|
|
created() {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
Promise.all([orderAddress(this.$Route.query.orderId),express()]).then(res => {
|
|
let addressData = res[0],
|
|
expressData = res[1],
|
|
deliverOption = []
|
|
|
|
for(let key in addressData.deliver_count){
|
|
if(key == 'mobile' && !addressData.deliver_count[key]){
|
|
deliverOption.push({
|
|
value: 1,
|
|
title: '电话卡'
|
|
})
|
|
}
|
|
if(key == 'metarial' && !addressData.deliver_count[key]){
|
|
deliverOption.push({
|
|
value: 2,
|
|
title: '征信资料'
|
|
})
|
|
}
|
|
}
|
|
this.expressArr = expressData
|
|
this.deliverCount = deliverOption
|
|
this.address = addressData.address
|
|
uni.hideLoading()
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
// 选择框
|
|
onCheckboxChange(e){
|
|
this.checkboxAll = e.length == this.deliverCount.length ? ['all'] : []
|
|
this.checkboxValue = e;
|
|
},
|
|
// 全选
|
|
onAll(e){
|
|
if(e.length > 0){
|
|
this.checkboxValue = this.deliverCount.map(val => {
|
|
return val.value
|
|
})
|
|
}else{
|
|
this.checkboxValue = []
|
|
}
|
|
},
|
|
// 提交订单物流
|
|
onSubmit(){
|
|
if(this.checkboxValue.length <= 0){
|
|
uni.showToast({
|
|
title: '请选择邮寄的物品',
|
|
icon : 'none'
|
|
})
|
|
return
|
|
}
|
|
if(this.expressIndex == null){
|
|
uni.showToast({
|
|
title: '请选择物流公司',
|
|
icon : 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
submitExpresses(this.$Route.query.orderId, {
|
|
express_id : this.expressArr[this.expressIndex].express_id,
|
|
number : this.no,
|
|
type : this.checkboxValue,
|
|
staff_address_id: this.address.address_id
|
|
}).then(res => {
|
|
uni.showModal({
|
|
content : '材料已邮寄',
|
|
showCancel : false,
|
|
success : () => {
|
|
this.$store.commit('setOrderId', this.$Route.query.orderId)
|
|
this.$Router.back()
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 选择物流公司
|
|
onPicker(e){
|
|
console.log(e)
|
|
this.expressIndex = e.detail.value
|
|
},
|
|
// 扫码
|
|
onScan(){
|
|
uni.scanCode({
|
|
scanType: ['barCode', 'qrCode'],
|
|
success: res => {
|
|
let { result } = res;
|
|
this.no = result;
|
|
}
|
|
})
|
|
},
|
|
// 复制地址
|
|
onCopy(e){
|
|
uni.setClipboardData({
|
|
data: e,
|
|
success: res => {
|
|
uni.showToast({
|
|
title: '地址已复制',
|
|
icon : 'none'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.mailed-back{
|
|
background: $main-color;
|
|
height: 150rpx;
|
|
}
|
|
// 按钮
|
|
.from-btn{
|
|
padding: 30rpx;
|
|
button{
|
|
background: $main-color;
|
|
color: white;
|
|
font-size: 32rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
padding: 0;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
// 表单
|
|
.from{
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
padding: 10rpx 30rpx;
|
|
margin: 30rpx;
|
|
.from-flex{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
label{
|
|
width: 150rpx;
|
|
line-height: 90rpx;
|
|
}
|
|
.from-inputs{
|
|
width: calc(100% - 150rpx);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
.from-inputs-input{
|
|
font-size: 30rpx;
|
|
text-align: right;
|
|
margin-right: 30rpx;
|
|
flex: 1;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
&.hide{
|
|
color: gray;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 邮寄物品
|
|
.material{
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
margin: 30rpx;
|
|
.material-title{
|
|
padding-bottom: 20rpx;
|
|
font-size: 30rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
&-text{
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.material-item{
|
|
padding: 20rpx 0;
|
|
}
|
|
}
|
|
// 邮寄信息
|
|
.receive{
|
|
background-color: white;
|
|
margin: -130rpx 30rpx 0;
|
|
border-radius: 20rpx;
|
|
padding: $padding;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.receive-icon{
|
|
background: $main-color;
|
|
color: white;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
border-radius: 10rpx;
|
|
display: inline-block;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
}
|
|
.receive-text{
|
|
width: calc(100% - 130rpx);
|
|
.receive-name{
|
|
padding-bottom: 5rpx;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
text{
|
|
font-size: 90%;
|
|
margin-left: 20rpx;
|
|
font-weight: normal;
|
|
color: #111;
|
|
}
|
|
}
|
|
.receive-add{
|
|
font-size: 28rpx;
|
|
color: #111;
|
|
}
|
|
}
|
|
.receive-right{
|
|
color: gray;
|
|
}
|
|
}
|
|
</style>
|