744 lines
17 KiB
Vue
744 lines
17 KiB
Vue
<!-- 新增线下订单-->
|
||
<template>
|
||
<view class="content">
|
||
<view style="width: 100%; height: 44px;"></view>
|
||
<view class="top-heder">
|
||
<view class="t-left" @click="getback()">
|
||
<uni-icons type="left" size="18"></uni-icons>
|
||
</view>
|
||
<view class="t-title">
|
||
<text>新增线下订单</text>
|
||
</view>
|
||
<view class="t-you"></view>
|
||
</view>
|
||
|
||
<view class="mub">
|
||
<view class="top-ail">
|
||
<u-upload
|
||
:fileList="fileList"
|
||
@afterRead="afterRead1"
|
||
@delete="deletePic1"
|
||
multiple
|
||
:maxCount="1"
|
||
>
|
||
<view class="dlanniu" style="width: 345px;">
|
||
<uni-icons type="scan" size="20" color="#ffffff"></uni-icons>
|
||
<text style="margin-left: 10px;">行驶证扫描</text>
|
||
</view>
|
||
|
||
</u-upload>
|
||
|
||
<!-- 名称 -->
|
||
|
||
<view class="box-list">
|
||
<view class="list-box">
|
||
<view class="l-left">客户姓名</view>
|
||
<view class="l-right">
|
||
<input type="text" v-model="buyName" placeholder="请输入客户姓名">
|
||
</view>
|
||
</view>
|
||
<view class="list-box">
|
||
<view class="l-left">住址</view>
|
||
<view class="l-right">
|
||
<input type="text" v-model="userAddress" placeholder="请输入住址">
|
||
</view>
|
||
</view>
|
||
<view class="list-box">
|
||
<view class="l-left"><text style="color: red;font-weight: bold;text-align: center;">* </text>车牌号</view>
|
||
<view class="l-right">
|
||
<input type="text" v-model="carNum" placeholder="请输入车牌号">
|
||
</view>
|
||
</view>
|
||
<view class="list-box">
|
||
<view class="l-left" @click="showzhi = true">使用性质 <text class="xixi">点击选择</text></view>
|
||
<view class="l-right">
|
||
<input type="text" v-model="carNature" placeholder="请输入使用性质">
|
||
</view>
|
||
</view>
|
||
<view class="list-box">
|
||
<view class="l-left">品牌型号</view>
|
||
<view class="l-right">
|
||
<input type="text" v-model="carModel" placeholder="请输入品牌型号">
|
||
</view>
|
||
</view>
|
||
<view class="list-box">
|
||
<view class="l-left">车辆识别代号</view>
|
||
<view class="l-right">
|
||
<input type="text" v-model="carIdNo" placeholder="请输入车辆识别代号">
|
||
</view>
|
||
</view>
|
||
<view class="list-box">
|
||
<view class="l-left" @click="show = true"><text style="color: red;font-weight: bold;text-align: center;">* </text>客户来源<text class="xixi">点击选择</text></view>
|
||
<view class="l-right">
|
||
<input type="text" v-model="customerSource" placeholder="请输入客户来源">
|
||
</view>
|
||
|
||
</view>
|
||
<view class="list-box" >
|
||
<view class="l-left" @click="showgoods = true"><text style="color: red;font-weight: bold;text-align: center;">* </text>商品选择<text class="xixi">点击选择</text></view>
|
||
<view class="l-right">
|
||
<text>{{goodstext}}</text>
|
||
<!-- <input type="text" v-model="goodstext" placeholder="请选择商品"> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-box" >
|
||
<view class="l-left" @click="showxin = true">新旧车 <text class="xixi">点击选择</text> </view>
|
||
<view class="l-right">
|
||
<input type="text" v-model="carStatus" placeholder="请输入新旧车">
|
||
</view>
|
||
</view>
|
||
<view class="list-box">
|
||
<view class="l-left">联系方式</view>
|
||
<view class="l-right">
|
||
<input type="text" v-model="buyPhone" placeholder="请输入联系方式">
|
||
</view>
|
||
</view>
|
||
<view class="list-box">
|
||
<view class="l-left">单位</view>
|
||
<view class="l-right">
|
||
<input type="text" v-model="unitName" placeholder="请输入单位">
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
|
||
<view class="dlanniu" @click="getgoodes()" >
|
||
<text>开始检测</text>
|
||
</view>
|
||
<u-picker :show="show" :columns="columns" @confirm="confirms" @cancel="cancels" keyName="label"></u-picker>
|
||
|
||
<u-picker :show="showgoods" ref="uPicker" :columns="goodsone" @confirm="confirmgoods" @cancel="cancelgoods" @change="changeHandler" keyName="label"></u-picker>
|
||
|
||
<u-picker :show="shownature" :columns="nature" @confirm="confirmsnature" @cancel="cancelsnature" keyName="label"></u-picker>
|
||
|
||
<u-picker :show="showxin" :columns="xinlist" @confirm="confirmxin" @cancel="cancelxin" keyName="label"></u-picker>
|
||
<u-picker :show="showzhi" :columns="zhilist" @confirm="confirmzhi" @cancel="cancelzhi" keyName="label"></u-picker>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部 -->
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '@/config';
|
||
import request from '../../utils/request';
|
||
import upload from '@/utils/upload.js'
|
||
import { getToken, getTenantId } from '@/utils/auth'
|
||
export default {
|
||
data() {
|
||
return {
|
||
imagePath:'',
|
||
fileList: [],
|
||
customerSource:'',
|
||
buyName:'',
|
||
buyPhone:'',
|
||
userAddress:'',
|
||
carNum:'',
|
||
carStatus:'',
|
||
carIdNo:'',
|
||
carModel:'',
|
||
carNature:'',
|
||
show:false,
|
||
shownature:false,
|
||
showgoods:false,
|
||
showxin:false,
|
||
showzhi:false,
|
||
skuId:0,
|
||
columns: [],
|
||
options:[],
|
||
nature:[],
|
||
goodsone:[],
|
||
goodstwo:[],
|
||
columnData:[],
|
||
xinlist:[],
|
||
zhilist:[],
|
||
baseUrl:this.$baseImageUrl,
|
||
goodsId:'',
|
||
msg:'3',
|
||
tapnum:0,
|
||
fenlist:[],
|
||
goodstext:'',
|
||
ftitle:null,
|
||
shopImages:[],
|
||
shoplist:{},
|
||
province:'',
|
||
unitName:'',
|
||
kehui:'',
|
||
naturetext:'',
|
||
customerData:[]
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getinitialize()
|
||
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
|
||
methods: {
|
||
changeHandler(e) {
|
||
console.log(e)
|
||
const {
|
||
columnIndex,
|
||
value,
|
||
values, // values为当前变化列的数组内容
|
||
index,
|
||
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
||
picker = this.$refs.uPicker
|
||
} = e
|
||
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
||
if (columnIndex === 0) {
|
||
// picker为选择器this实例，变化第二列对应的选项
|
||
console.log(this.columnData[index])
|
||
picker.setColumnValues(1, this.columnData[index])
|
||
}
|
||
},
|
||
confirms(e){
|
||
console.log(e);
|
||
this.customerSource = e.value[0].label
|
||
this.show= false
|
||
},
|
||
cancels(){
|
||
this.show= false
|
||
},
|
||
// xin
|
||
confirmxin(e){
|
||
console.log(e);
|
||
this.carStatus = e.value[0].label
|
||
this.showxin= false
|
||
},
|
||
cancelxin(){
|
||
this.showxin= false
|
||
},
|
||
//zhi
|
||
confirmzhi(e){
|
||
console.log(e);
|
||
this.carNature = e.value[0].label
|
||
this.showzhi= false
|
||
},
|
||
cancelzhi(){
|
||
this.showzhi= false
|
||
},
|
||
|
||
confirmsnature(e){
|
||
this.naturetext = e.value[0].label
|
||
this.shownature = false
|
||
},
|
||
cancelsnature(){
|
||
this.shownature = false
|
||
},
|
||
confirmgoods(e){
|
||
this.goodstext = e.value[1].label
|
||
this.skuId = e.value[1].value
|
||
console.log(e);
|
||
this.showgoods= false
|
||
},
|
||
cancelgoods(){
|
||
this.showgoods= false
|
||
},
|
||
async getinitialize(){
|
||
let res = await request({
|
||
url:'/partnerOwn/partner/getCustomerSource',
|
||
method: 'get',
|
||
|
||
})
|
||
this.columns.push(res.data)
|
||
let rescar = await request({
|
||
url:'/rescue/dict/data/type/car_nature',
|
||
method: 'get',
|
||
})
|
||
this.nature.push(rescar.data)
|
||
let resx = await request({
|
||
url:'/system/inspectionGoods/partnerGoodsListCol',
|
||
method: 'get',
|
||
})
|
||
this.goodsone.push(resx.data.goodsList)
|
||
this.goodsone.push(resx.data.skuList[0])
|
||
this.columnData = resx.data.skuList
|
||
console.log('赋值',this.goodsone,this.columnData);
|
||
let resxin = await request({
|
||
url:'/rescue/dict/data/type/car_status',
|
||
method: 'get',
|
||
})
|
||
this.xinlist.push(resxin.data)
|
||
let reszhi = await request({
|
||
url:'/rescue/dict/data/type/car_use_nature',
|
||
method: 'get',
|
||
})
|
||
this.zhilist.push(reszhi.data)
|
||
|
||
},
|
||
async getgoodes(){
|
||
if(this.carNum == ''|| this.customerSource == "" || this.skuId == ''){
|
||
uni.showToast({
|
||
title:'车牌号 客户来源 商品 必填！',
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
|
||
let data = {
|
||
partnerId:uni.getStorageSync('partnerId'),
|
||
buyName:this.buyName,
|
||
buyPhone:this.buyPhone,
|
||
userAddress:this.userAddress,
|
||
unitName:this.unitName,
|
||
carNum:this.carNum,
|
||
carModel:this.carModel,
|
||
carStatus:this.carStatus,
|
||
carIdNo:this.carIdNo,
|
||
customerSource:this.customerSource,
|
||
skuId :this.skuId,
|
||
carNature:this.carNature,
|
||
}
|
||
|
||
let res = await request({
|
||
url:'/system/info/add',
|
||
method: 'post',
|
||
data:data
|
||
})
|
||
console.log(res);
|
||
if(res.code == 200){
|
||
uni.showToast({
|
||
title:"检测已开始"
|
||
})
|
||
}
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 2000);
|
||
|
||
|
||
|
||
},
|
||
|
||
// 提交
|
||
async getgoods(){
|
||
|
||
let res = await request({
|
||
url:'/partnerOwn/partner/editPartnerInfo',
|
||
method: 'post',
|
||
data : this.shoplist
|
||
})
|
||
console.log(res);
|
||
if(res.code == 200){
|
||
uni.showToast({
|
||
title:"修改成功"
|
||
})
|
||
}
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 2000);
|
||
},
|
||
getxz(e){
|
||
this.releasebox.goodsCategoryId = e.value[0].id
|
||
console.log( e.value[0].categoryName)
|
||
this.ftitle = e.value[0].categoryName
|
||
},
|
||
gettapindex(index){
|
||
this.tapnum = index
|
||
},
|
||
getback(){
|
||
uni.navigateBack()
|
||
},
|
||
getyes(){
|
||
this.show = false
|
||
},
|
||
open() {
|
||
console.log('open');
|
||
},
|
||
close() {
|
||
this.guige = false
|
||
},
|
||
deletePic1(event) {
|
||
this[`fileList${event.name}`].splice(event.index, 1)
|
||
},
|
||
async afterRead1(event) {
|
||
console.log(event,this[`fileList${event.name}`]);
|
||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||
let lists = [].concat(event.file)
|
||
let fileListLen = this[`fileList${event.name}`].length
|
||
lists.map((item) => {
|
||
this[`fileList${event.name}`].push({
|
||
...item,
|
||
|
||
})
|
||
})
|
||
for (let i = 0; i < lists.length; i++) {
|
||
const result = await this.uploadFilePromise1(lists[i].url)
|
||
let item = this[`fileList${event.name}`][fileListLen]
|
||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||
status: 'success',
|
||
message: '',
|
||
url: result
|
||
}))
|
||
fileListLen++
|
||
}
|
||
},
|
||
uploadFilePromise1(url) {
|
||
uni.showLoading({
|
||
|
||
title: '扫描中',
|
||
|
||
});
|
||
|
||
return new Promise((resolve, reject) => {
|
||
let a = uni.uploadFile({
|
||
url: this.$baseUrl+'/common/uploadImg', // 仅为示例，非真实的接口地址
|
||
filePath: url,
|
||
name: 'file',
|
||
header: {
|
||
'Tenant-Id': getTenantId(),
|
||
'Authorization': 'Bearer ' + getToken()
|
||
},
|
||
formData: {
|
||
user: 'test'
|
||
},
|
||
success: (res) => {
|
||
try {
|
||
let img = JSON.parse(res.data);
|
||
this.imagePath = img.data.url
|
||
|
||
setTimeout(() => {
|
||
this.vehicleLicenseOCR()
|
||
}, 1000)
|
||
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
setTimeout(() => {
|
||
resolve(res.data.data)
|
||
}, 1000)
|
||
}
|
||
});
|
||
})
|
||
},
|
||
async vehicleLicenseOCR(){
|
||
let data = {
|
||
imagePath :this.baseUrl +'/'+ this.imagePath
|
||
//imagePath :'http://www.nuoyunr.com/lananRsc/detection/jsz.jpg'
|
||
}
|
||
console.log(this.baseUrl + this.imagePath,"1212")
|
||
let res = await request({
|
||
url:'/partnerOwn/partner/vehicleLicenseOCR',
|
||
method: 'post',
|
||
params : data
|
||
})
|
||
this.buyName = res.data.FrontInfo.Owner
|
||
this.userAddress = res.data.FrontInfo.Address
|
||
this.carNum = res.data.FrontInfo.PlateNo
|
||
this.carModel = res.data.FrontInfo.Model
|
||
this.carIdNo=res.data.FrontInfo.Vin
|
||
this.carNature=res.data.FrontInfo.UseCharacter
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '识别成功',
|
||
});
|
||
|
||
console.log(res);
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: calc(100vh);
|
||
background: white;
|
||
}
|
||
|
||
.top-heder{
|
||
width: 100%;
|
||
height: 46px;
|
||
background: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 5px 15px;
|
||
}
|
||
.t-title{
|
||
font-size: 17px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
.t-left{
|
||
width: 10%;
|
||
}
|
||
.t-you{
|
||
height: 100%;
|
||
width: 20%;
|
||
}
|
||
.t-input{
|
||
width: 80%;
|
||
height: 36px;
|
||
background: #F0F0F0;
|
||
border-radius: 50px;
|
||
box-sizing: border-box;
|
||
padding: 0 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
}
|
||
.top-ail{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
background-color: #F4F4F4;
|
||
// height: calc(100vh);
|
||
}
|
||
.mub{
|
||
background-color: #F4F4F4;
|
||
height: calc(100vh);
|
||
}
|
||
.dix{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.upimg{
|
||
width: 100%;
|
||
height: 126px;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
|
||
background-color: white;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.box-list{
|
||
width: 100%;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
background-color: white;
|
||
margin: 10px auto;
|
||
}
|
||
.list-box{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 15px 5px;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
}
|
||
.l-left{
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
.l-right{
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
text-align: right;
|
||
}
|
||
.xiaolan{
|
||
// width: 109px;
|
||
// height: 30px;
|
||
background: #E2EAFF;
|
||
border-radius: 50px;
|
||
display: flex;
|
||
align-content: center;
|
||
justify-self: center;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #0D2E8D;
|
||
}
|
||
.xiaohui{
|
||
// width: 141px;
|
||
// height: 30px;
|
||
box-sizing: border-box;
|
||
padding: 0px 10px;
|
||
background: #F7F7F7;
|
||
border-radius: 50px ;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 10px ;
|
||
|
||
}
|
||
.hui-right{
|
||
border-left:1px solid #DDDDDD;
|
||
padding: 5px;
|
||
margin-left: 5px;
|
||
}
|
||
.wrap-box{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.bottom-di{
|
||
width: 100%;
|
||
height: 56px;
|
||
background: #FFFFFF;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0px 20px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.thui{
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
margin-top: 10px;
|
||
margin-left: 8px;
|
||
}
|
||
.imgs{
|
||
box-sizing: border-box;
|
||
margin-top: 20px;
|
||
}
|
||
.p-box{
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
width: 100%;
|
||
background-color: white;
|
||
}
|
||
.p-top{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 17px;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
margin-bottom: 20px;
|
||
}
|
||
.on-input{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
|
||
}
|
||
.ipt-kuang{
|
||
width: 70%;
|
||
height: 30px;
|
||
background: #FFFFFF;
|
||
border-radius: 8px 8px 8px 8px;
|
||
opacity: 1;
|
||
border: 1px solid #DDDDDD;
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 10px auto;
|
||
box-sizing: border-box;
|
||
padding: 0px 10px;
|
||
}
|
||
.t-left{
|
||
width: 20%;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
}
|
||
.dlanniu{
|
||
width: 80%;
|
||
height: 45px;
|
||
background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
|
||
border-radius: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 20px auto;
|
||
color: white;
|
||
}
|
||
.da{
|
||
font-size: 16px;
|
||
}
|
||
//
|
||
.top{
|
||
box-sizing: border-box;
|
||
padding: 0px 15px;
|
||
width: 100%;
|
||
border-radius: 10px;
|
||
margin: 10px auto;
|
||
background-color: white;
|
||
}
|
||
.top-box{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 20px 0px;
|
||
}
|
||
.tb-left{
|
||
height: 100%;
|
||
width: 80%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.uicon{
|
||
width: 18px;
|
||
height: 18px;
|
||
border-radius: 4px;
|
||
color: white;
|
||
background: orangered;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
margin-right: 6px;
|
||
}
|
||
.tb-right{
|
||
width: 20px;
|
||
height: 26px;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.text1{
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #363636;
|
||
}
|
||
.hong1{
|
||
margin-top: 5px;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: #FF5453;
|
||
}
|
||
.hong2{
|
||
margin-top: 5px;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
|
||
}
|
||
.tinput{
|
||
width: 100%;
|
||
display: flex;
|
||
background: white;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 16px;
|
||
margin-top: 14px;
|
||
}
|
||
.xixi{
|
||
font-size: 12px;
|
||
color: #0D2E8D;
|
||
margin-left: 10px;
|
||
}
|
||
</style>
|