daijia/司机端/pages/my/owner/index.vue

<template>
	<view class="pb-60">
		<u-cell-item title="报名城市" :class="[iscity?'':'active']" :value="city" :arrow="iscity" @click="show=true,type=1"></u-cell-item>
		<u-cell-item title="居住地" :class="[isaddress?'':'active']" :value="address" :arrow="isaddress" @click="show=true,type=2"></u-cell-item>
		<view class="w100" style="height: 20rpx;background: #F8F8F8;"></view>
		<u-cell-item title="车辆品牌" :class="[isbrand?'':'active']" :value="model" :arrow="isbrand" @click="goOwner"></u-cell-item>
		<u-cell-item title="车牌号" :class="[isplateNo?'':'active']" :arrow="isplateNo" :value="plateNo" @tap="plateShow = true">
			<!-- <view slot="right-icon" class="input">
				<input type="text" :disabled="true" v-model.trim="plateNo" placeholder="请输入车牌号" />
			</view> -->
		</u-cell-item>
		<plate-input v-if="plateShow" :plate="plateNo" @export="setPlate" @close="plateShow = false" />
		<view class="mlr-36">
			<view class="mt-40 size-32">
				上传证件
			</view>
			<view class="img text-center mt-30">
				<image :src="img1" mode="" @click="chooseImg1"></image>
			</view>
			<view class="size-28 text-center mt-10">
				点击上传<text class="ml-10" style="color: #FF5C50;">行驶证正页</text>
			</view>
			<view class="img text-center mt-60">
				<image :src="img2" mode="" @click="chooseImg2"></image>
			</view>
			<view class="size-28 text-center mt-10">
				点击上传<text class="ml-10" style="color: #FF5C50;">行驶证副页</text>
			</view>
		</view>
		<view class="center mt-40">
			<view class="radio center">
				<view class="radio-circle">
					
				</view>
			</view>
			<view class="size-26 ml-10">
				阅读并同意代驾司机加盟须知
			</view>
		</view>
		<u-button type="primary" :disabled="!sign_areas || !areas || !brand || !name || !plateNo || !imgurl1 || !imgurl2" class="mt-60" @click="submit">提交审核</u-button>
		<!-- 选择地区 -->
		<u-picker v-model="show" mode="region" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import {upload} from '../../../common/common.js'
	import plateInput from '@/components/uni-plate-input/uni-plate-input.vue';
	export default {
		data() {
			return {
				type:1,//1=报名城市，2=居住地
				iscity:true,//是否选择报名城市
				city:'请选择',//报名城市
				sign_areas:'',//市区号
				isaddress:true,//是否选择居住地
				address:'请选择',//居住地
				areas:'',//区(县)的区号
				isbrand:true,//是否选择车辆品牌
				model:'请选择车辆品牌',//车辆品牌
				brand:'',//车牌
				name:'',//车型
				isplateNo:true,//是否输入车牌号
				plateNo: '请输入车牌号',//车牌号
				plateShow: false,//自定义车牌号键盘开关
				img1:'../../../static/owner-1.png',
				imgurl1:'',
				img2:'../../../static/owner-2.png',
				imgurl2:'',
				show:false,
				submitbtn:true
			}
		},
		components: {
			plateInput
		},
		onLoad() {
			uni.$on('brand',res=>{
				console.log(res);
				this.brand = res.brand
				this.name = res.name
				this.model = res.brand + ' ' + res.name
				this.isbrand = false
			})
		},
		methods: {
			// 填写车牌号
			setPlate(plate) {
				if (plate.length >= 7) this.plateNo = plate;
				this.plateShow = false;
				this.isplateNo = false
			},
			//选择车辆品牌
			goOwner(){
				uni.navigateTo({
					url:'/pages/my/owner/owner'
				})
			},
			confirm(e){
				console.log(e);
				if(this.type==1){
					this.iscity = false
					this.sign_areas = e.city.value + '00'
					if(e.province.label == "北京市" || e.province.label == "天津市" || e.province.label == "上海市" || e.province.label == "重庆市"){
						this.city = e.province.label
					}else{
						this.city = e.province.label + '-' + e.city.label
					}
				}else{
					this.isaddress = false
					this.areas = e.area.value
					if(e.province.label == "北京市" || e.province.label == "天津市" || e.province.label == "上海市" || e.province.label == "重庆市"){
						this.address = e.province.label + '-' + e.area.label
					}else{
						this.address = e.province.label + '-' + e.city.label + '-' + e.area.label
					}
				}
			},
			chooseImg1(){
				upload().then(data=>{
					this.img1 = data[0].img1
					this.imgurl1 = data[0].img2
				})
			},
			chooseImg2(){
				upload().then(data=>{
					this.img2 = data[0].img1
					this.imgurl2 = data[0].img2
				})
			},
			submit(){
				if(this.submitbtn == true){
					this.submitbtn = false
					this.$http('/addons/ddrive/user/verified',{
						type:3,
						truename: '',
						idcard: '',
						front_card_image: '',
						back_card_image: '',
						sign_areas: this.sign_areas,
						areas: this.areas,
						driver_license: '',
						driver_front_image: '',
						driver_back_image: '',
						card_brand: this.brand,
						card_type: this.name,
						number_plate: this.plateNo,
						card_front_image: this.imgurl1,
						card_back_image: this.imgurl2
					},"POST").then(data=>{
						this.$store.dispatch('updateUserInfo')
						uni.showToast({
							title: '提交成功,请耐心等待',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({})
						},1000)
					}).catch(data=>{
						this.submitbtn = true
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-btn{
		height: 96rpx !important;
	}
	
	/deep/.u-primary-hover {
		background-color: $blue !important;
	}
	
	/deep/.u-btn--primary--disabled {
		background-color: $bg-1 !important;
	}
	.active{
		/deep/.u-cell__value {
			color: $gray !important;
		}
	}
	.input{
		input{
			text-align: right;
			font-size: 26rpx;
		}
	}
	.img{
		image{
			width: 398rpx;
			height: 254rpx;
		}
	}
	.radio{
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1rpx solid #999;
		.radio-circle{
			width: 22rpx;
			height: 22rpx;
			background: $blue;
			border-radius: 50%;
		}
	}
</style>