338 lines
8.2 KiB
Vue
338 lines
8.2 KiB
Vue
<template>
|
|
<view class="content">
|
|
<img class="expressImg" src="@/static/imgs/express-img.png">
|
|
<view class="expressCont">
|
|
<view class="express-write">
|
|
<view class="express-block express-adderss">
|
|
<view class="express-block-name">
|
|
邮寄地址
|
|
</view>
|
|
<view class="express-block-write express-block-grey">
|
|
{{adderss.full_address}}
|
|
</view>
|
|
</view>
|
|
<view class="express-block">
|
|
<view class="express-block-name">
|
|
物流公司
|
|
</view>
|
|
<view class="express-block-write">
|
|
<picker @change="companyChange" :value="companyIndex" :range="companyArray" range-key="name">
|
|
<view class="uni-input" v-if="companyArray[companyIndex]">{{companyArray[companyIndex].name}}</view>
|
|
</picker>
|
|
<img src="@/static/imgs/basic_down.png">
|
|
</view>
|
|
</view>
|
|
<view class="express-block">
|
|
<view class="express-block-name">
|
|
订单类型
|
|
</view>
|
|
<checkbox-group @change="typeChange" class="express-check">
|
|
<view class="express-block-check" v-for="(letterItem, typeIndex) in typeArray" :key="typeIndex">
|
|
<checkbox :value="letterItem.type.toString()" color="#4e7bfe" style="transform:scale(.6); margin-top: -3rpx;"/>
|
|
<text>{{letterItem.name}}</text>
|
|
</view>
|
|
</checkbox-group>
|
|
<!-- <view class="express-block-write">
|
|
<picker @change="typeChange" :value="typeIndex" :range="typeArray" range-key="name">
|
|
<view class="uni-input" v-if="typeArray[typeIndex]">{{typeArray[typeIndex].name}}</view>
|
|
</picker>
|
|
<img src="@/static/imgs/basic_down.png">
|
|
</view> -->
|
|
</view>
|
|
<view class="express-block">
|
|
<view class="express-block-name">
|
|
物流单号
|
|
</view>
|
|
<input class="express-block-write" v-model="number" type="text" placeholder="填写物流单号" placeholder-class="placeholderClass"/>
|
|
</view>
|
|
<view class="express-block">
|
|
<view class="express-block-name">
|
|
备注信息
|
|
</view>
|
|
<view class="express-block-textarea">
|
|
<textarea placeholder-style="color:#999999; font-size: 30rpx" maxlength="500" name="remark" placeholder="可将您的详细情况及诉求进行描述..." @input="remarkInput"/>
|
|
<text>{{cursor}}/500</text>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="express-block">
|
|
<view class="express-block-name">
|
|
上传凭证
|
|
</view>
|
|
<view class="express-photo">
|
|
<img class="camera" src="@/static/icon/cameraImg.png">
|
|
<view class="express-tips">上传图片</view>
|
|
</view>
|
|
</view>
|
|
-->
|
|
<!-- <view class="album-list">
|
|
<view class="album-list-li">
|
|
<image class="album-list-img" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic17.997788.com%2F_pic_search%2F00%2F04%2F13%2F26%2F4132653.jpg&refer=http%3A%2F%2Fpic17.997788.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670402044&t=c3a80087befa0d7db313ca904c870f23" mode="aspectFill"></image>
|
|
<view class="album-remove">删除
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<button class="idcardBtn" :disabled="disabled" @click="basicSubmit" >
|
|
确认提交
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getExpress, Send } from '@/apis/interfaces/user'
|
|
import { config } from '../../apis'
|
|
export default {
|
|
data() {
|
|
return {
|
|
disabled : false, // 按钮状态
|
|
companyArray : [],
|
|
companyIndex : 0,
|
|
typeArray : [],
|
|
typeIndex : [],
|
|
number : '',
|
|
remark : '',
|
|
cursor : 0,
|
|
adderss : '',
|
|
newMobile : '',
|
|
newmetarial : ''
|
|
}
|
|
},
|
|
onShow() {
|
|
// 获取物流公司
|
|
this.expressInfo()
|
|
this.adderss = this.$Route.query.adderss
|
|
this.newMobile = this.$Route.query.mobile
|
|
this.newmetarial = this.$Route.query.metarial
|
|
|
|
let newtypeArray = []
|
|
if(!this.$Route.query.mobile){
|
|
newtypeArray.push({
|
|
type: 1,
|
|
name: '电话卡'
|
|
})
|
|
}
|
|
if(!this.$Route.query.metarial){
|
|
newtypeArray.push({
|
|
type: 2,
|
|
name: '征信资料'
|
|
})
|
|
}
|
|
this.typeArray = newtypeArray
|
|
},
|
|
methods: {
|
|
// 物流公司选择
|
|
companyChange(e) {
|
|
this.companyIndex = e.detail.value
|
|
},
|
|
|
|
// 订单类型选择
|
|
typeChange(e) {
|
|
this.typeIndex = e.detail.value
|
|
},
|
|
|
|
// 备注信息
|
|
remarkInput(val) {
|
|
this.remark = val.detail.value
|
|
this.cursor = val.detail.cursor
|
|
},
|
|
|
|
// 物流公司
|
|
expressInfo(){
|
|
getExpress().then(res => {
|
|
this.companyArray = res
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
|
|
// 提交
|
|
basicSubmit() {
|
|
let data = {
|
|
business_order_id: this.$Route.query.id,
|
|
express_id : this.companyArray[this.companyIndex].express_id,
|
|
staff_address_id : this.adderss.address_id,
|
|
number : this.number,
|
|
type : this.typeIndex,
|
|
remark : this.remark
|
|
}
|
|
Send(this.$Route.query.id, data).then(res => {
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
icon: "none"
|
|
})
|
|
this.disabled = true
|
|
|
|
setTimeout(() => {
|
|
uni.navigateBack(1)
|
|
uni.hideLoading()
|
|
}, 1500)
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
background-color: #f4f6fa;
|
|
height: 100vh;
|
|
overflow-y: scroll;
|
|
}
|
|
.expressImg {
|
|
width: 100%;
|
|
}
|
|
.expressCont {
|
|
padding: 0 $padding $padding;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
margin-top: -($margin + 10);
|
|
.express-write {
|
|
background-color: #ffffff;
|
|
padding: $padding + 10 $padding + 20;
|
|
box-sizing: border-box;
|
|
border-radius: $radius;
|
|
}
|
|
}
|
|
.express-block {
|
|
margin-bottom: $margin + 20;
|
|
.express-block-name {
|
|
margin-bottom: $margin;
|
|
font-weight: 600;
|
|
}
|
|
.express-check {
|
|
display: flex;
|
|
width: 100%;
|
|
.express-block-check {
|
|
margin-right: $margin + 10;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
display: flex;
|
|
font-size: $title-size-m;
|
|
}
|
|
}
|
|
.express-block-write {
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
padding: 0 $padding;
|
|
border: 2rpx solid #ededed;
|
|
box-sizing: border-box;
|
|
border-radius: $radius-sm;
|
|
position: relative;
|
|
img {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
position: absolute;
|
|
right: $padding;
|
|
top: $padding;
|
|
}
|
|
picker {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.express-block-grey {
|
|
color: $text-gray;
|
|
height: auto;
|
|
line-height: 44rpx;
|
|
padding: $padding - 10 $padding;
|
|
box-sizing: border-box;
|
|
font-size: $title-size-m;
|
|
text-align: justify;
|
|
}
|
|
.express-block-textarea {
|
|
background-color: #ffffff;
|
|
padding: $padding;
|
|
box-sizing: border-box;
|
|
border: 2rpx solid #ededed;
|
|
border-radius: $radius-sm;
|
|
textarea {
|
|
width: 100%;
|
|
font-size: $title-size-m;
|
|
text-align: justify;
|
|
}
|
|
text {
|
|
color: #999999;
|
|
font-size: $title-size-sm;
|
|
width: 100%;
|
|
text-align: right;
|
|
display: block;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
.express-photo {
|
|
border-radius: $radius-sm;
|
|
border: 2rpx solid #ededed;
|
|
padding: 0 $padding;
|
|
position: relative;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
display: flex;
|
|
img {
|
|
width: 46rpx;
|
|
height: 46rpx;
|
|
margin-top: 24rpx;
|
|
}
|
|
.express-tips {
|
|
position: absolute;
|
|
right: $padding;
|
|
top: 0;
|
|
font-size: $title-size-m;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.album-list {
|
|
margin: $margin -10rpx 0;
|
|
display: flex;
|
|
.album-list-li {
|
|
position: relative;
|
|
width: calc(33.33% - 20rpx);
|
|
padding-top: calc(33.33% - 20rpx);
|
|
margin: 0 10rpx;
|
|
box-sizing: border-box;
|
|
.album-list-img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f5f5f5;
|
|
border-radius: 6rpx;
|
|
}
|
|
.album-remove{
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, .5);
|
|
color: white;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
width: 100%;
|
|
z-index: 9;
|
|
}
|
|
}
|
|
}
|
|
.idcardBtn {
|
|
margin: $margin*2 0 0;
|
|
background-image: linear-gradient(to right, #ff660b, #ff4330);
|
|
color: #ffffff;
|
|
border-radius: $radius-lg;
|
|
line-height: 90rpx;
|
|
text-align: center;
|
|
&[disabled] {
|
|
background-color: #eba5a5;
|
|
}
|
|
}
|
|
</style> |