工作台
This commit is contained in:
唐明明
304
pages/work/mailed.vue
Normal file
304
pages/work/mailed.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<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" @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
|
||||
}).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 != ''){
|
||||
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 : () => {
|
||||
if(this.deliverCount.length <= 1){
|
||||
this.$store.commit('setOrderId', this.$Route.query.orderId)
|
||||
}
|
||||
this.$Router.back()
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 选择物流公司
|
||||
onPicker(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>
|
||||
Reference in New Issue
Block a user