chuangte_bike_newxcx/page_user/renzheng/jiashizheng.vue

<template>
	<view class="page">
		<u-navbar title="驾驶证认证" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
        <view class="box">
			<view class="inp">
				<view class="">
					姓名
				</view>
				<input type="text" v-model="name" placeholder="请输入姓名"/>
			</view>
			<view class="inp">
				<view class="">
					驾驶证号
				</view>
				<input type="text" v-model="no" placeholder="请输入驾驶证号"/>
			</view>
        	<view class="name">
        		请上传叉车驾驶证
        	</view>
			<view class="one" @click="btn(1)">
				<image :src="zhengpic" mode="aspectFill"></image>
			</view>
			<view class="one" @click="btn(2)">
				<image :src="fanpic" mode="aspectFill"></image>
			</view>
        </view>
		<view class="tj" v-if="status == 1" style="background-color: #ccc;" @click="btntj">
			审核中
		</view>
		<view class="tj" v-else @click="btntj">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				token:'',
				zhengpic:'https://api.ccttiot.com/smartmeter/img/static/u5bmLA43Lcf8YKaiyXXW',
				fanpic:'https://api.ccttiot.com/smartmeter/img/static/ui6c1D4VlthQkYLnZ76F',
				name:'',
				no:'',
				status:3
			}
		},
		onLoad() {
           this.getQiniuToken()
		   this.getcha()
		},
		methods: {
			getcha(){
				this.$u.get(`/app/driver/last`).then(res =>{
					if(res.code == 200){
						if(res.data){
							this.name = res.data.name
							this.no = res.data.no
							this.fanpic = res.data.pictureBack
							this.zhengpic = res.data.pictureFront
							this.status = res.data.status
						}
					}
				})
			},
			btntj(){
				let data = {
					no:this.no,
					name:this.name,
					pictureFront:this.zhengpic,
					pictureBack:this.fanpic
				}
				this.$u.post("/app/driver",data).then((res) => {
					if (res.code == 200) {
						this.token = res.data
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 2000
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			getQiniuToken() {
				this.$u.get("/common/qiniuToken").then((res) => {
					if (res.code == 200) {
						this.token = res.data
					}
				})
			},
			btn(num) {
				let _this = this
				let math = 'static/' + _this.$u.guid(20)
				uni.chooseImage({
					count: 9,
					type: 'all',
					success(res) {
						const tempFilePaths = res.tempFiles
						wx.uploadFile({
							url: 'https://up-z2.qiniup.com',
							name: 'file',
							filePath: tempFilePaths[0].path,
							formData: {
								token: _this.token, //后端返回的token
								key: 'smartmeter/img/' + math
							},
							success: function(res) {
								console.log(res, 'resres');
								let str = JSON.parse(res.data)
								console.log(str,num);
								if(num == 1){
									_this.zhengpic = 'https://api.ccttiot.com/' + str.key
								}else{
									_this.fanpic = 'https://api.ccttiot.com/' + str.key
								}
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
    .box{
		width: 672rpx;
		margin: auto;
		padding-bottom: 200rpx;
		box-sizing: border-box;
		.inp{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			input{
				width: 530rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 10rpx;
				border: 1px solid #808080;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
		}
		.name{
			width: 100%;
			font-weight: 600;
			font-size: 32rpx;
			color: #3D3D3D;
			margin-top: 46rpx;
		}
		.one{
			margin-top: 48rpx;
			width: 672rpx;
			height: 478rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx dashed #808080;
			text-align: center;
			position: relative;
			image{
				position: absolute;
				transform: 50%;
				top: 16rpx;
				transform: translateX(-50%);
				width: 640rpx;
				height: 440rpx;
			}
		}
	}
	.tj{
		width: 680rpx;
		height: 90rpx;
		background: #4297F3;
		border-radius: 54rpx 54rpx 54rpx 54rpx;
		font-weight: 600;
		font-size: 40rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 50rpx;
	}
</style>