detection-business/pages/index/Neworder.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 class="list-box" @click="toSelectProject()" >
					<view class="l-left">检测流程</view>
					<view class="l-right">

						<input type="textarea" v-model="inspectionWorkNodeStr"  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,
				inspectionWorkNodes:[],
				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:[],
				inspectionWorkNodeStr:""
			}
		},
		onLoad() {
		this.getinitialize()
		uni.$on('selectProject', (data) => {
			 this.inspectionWorkNodes = data
			 for (var i = 0; i < this.inspectionWorkNodes.length; i++) {
			 		this.inspectionWorkNodeStr = this.inspectionWorkNodeStr + this.inspectionWorkNodes[i].projectName +"  "
					this.inspectionWorkNodes[i].orderNum = i+1
			 }


		});
		},
		onShow() {

		},

		methods: {
			    changeHandler(e) {
			                const {
			                    columnIndex,
			                    value,
			                    values, // values为当前变化列的数组内容
			                    index,
								// 微信小程序无法将picker实例传出来，只能通过ref操作
			                    picker = this.$refs.uPicker
			                } = e
			                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
			                if (columnIndex === 0) {
			                    // picker为选择器this实例，变化第二列对应的选项
			                    picker.setColumnValues(1, this.columnData[index])
			                }
			            },
			confirms(e){
				this.customerSource = e.value[0].label
				this.show= false
			},
			cancels(){
				this.show= false
			},
			// xin
			confirmxin(e){
				this.carStatus = e.value[0].label
				this.showxin= false
			},
			cancelxin(){
				this.showxin= false
			},
			//zhi
			confirmzhi(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
			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
				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)

			},
			toSelectProject(){
				uni.navigateTo({
					url: '/pages/index/selectProject'
				})
			},
			async getgoodes(){
				if(this.carNum == ''|| this.customerSource == "" || this.skuId == ''){
					uni.showToast({
						title:'车牌号 客户来源 商品 必填！',
						icon:'none'
					})
					return
				}
				if(this.inspectionWorkNodes.length == 0){
					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,
					inspectionWorkNodes:this.inspectionWorkNodes
				}

				let res = await request({
					url:'/system/info/add',
					method: 'post',
					data:data
				})
				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
				})
				if(res.code == 200){
					uni.showToast({
						title:"修改成功"
					})
				}
				setTimeout(() => {
				  uni.navigateBack()
				}, 2000);
			},
			getxz(e){
				this.releasebox.goodsCategoryId = e.value[0].id
				this.ftitle = e.value[0].categoryName
			},
			gettapindex(index){
				this.tapnum = index
			},
			getback(){
				uni.navigateBack()
			},
			getyes(){
				this.show = false
			},
			open() {
			    },
			close() {
			    this.guige = false
			    },
				deletePic1(event) {
					this[`fileList${event.name}`].splice(event.index, 1)
				},
				async afterRead1(event) {
						// 当设置 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'
				}
				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: '识别成功',
				});


			}




		}
	}
</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>