yiliangyiyun-app/pages/attestation/indexThree.vue

<template>
	<view class="center">
		<view v-for="(item , index) in drivers" :Key="index" class="forList">
			<view class='flex' @click="navToDetailPage(item)">
				<view class="logo">
					{{item.logo}}
				</view>
				<view class="company">{{item.driverName}}</view>
				<view class="status" v-if="item.cover == '1'">
					已覆盖
				</view>
				<view v-else>
				<view class="status" v-if="item.authenticationStatus == '已认证'">
					<image src="../../static/img/authentication/cert-personal@3x.png"
						style="width: 16px;height: 16px;top:3px;"></image>
					{{item.authenticationStatus}}
				</view>
				<view class="status1" v-if="item.authenticationStatus == '审核中'">
					{{item.authenticationStatus}}
				</view>
				<view class="status2" v-if="item.authenticationStatus == '未通过'">
					{{item.authenticationStatus}}
				</view>
				<view class="status3" v-if="item.authenticationStatus == '已覆盖'">
					{{item.authenticationStatus}}
				</view>
				</view>
			</view>
			<view class="geren">{{item.driverPhone}}</view>
			<view class="flex options">
				<!-- <view class="yuan">
					<image src="../../static/img/authentication/selected(2).png"
						style="width: 16px;height: 16px;top: 3px;">设为默认</image>
				</view> -->
				<view class='but' v-if="item.authenticationStatus == '已覆盖'||item.authenticationStatus == '已认证'" @click="open(item)">更换手机号</view>
				<view class='but' v-if="item.authenticationStatus != '审核中'" @click="companyEdit(item)">修改</view>
				<view class='but' @click="deleteSJ(item)">删除</view>
			</view>
			<view v-if='pricestatus' class='shade'>
				<view class='shade-content'>
					<view class="titel">
						更换手机号
					</view>
					<view class="cancel" @click='pricestatus=false'>×</view>
					<view class='shade-content-item'>
						<input v-model='price' placeholder="请输入手机号" maxlength="11" type="number" class="tainput" >
					</view>
					<view>
						<!--<view style='width:50%;display:inline-block;' @click='pricestatus=false'>取消</view>
						<view style='width:50%;display:inline-block;' @click='amendprice'>确定</view> -->
						<view class="determine" @click="getcode">
							获取验证码
						</view>
					</view>
				</view>
			</view>
			<!-- 填写验证码 -->
			<view v-if='pricestatusTwo' class='shade'>
				<view class='shade-content'>
					<view class="titel">
						填写验证码
					</view>
					<text style="color:#AFB3BF;font-size: 14px;">验证码已发送至+86 {{price}}</text>
					<view class="cancel" @click='pricestatusTwo=false,pricestatus=false'>×</view>
					<view class='shade-content-item flex'>
						<input v-model='verifyCode' placeholder="填写验证码" type="number" class="tainput1" maxlength="6">
						<text style="color:#AFB3BF;font-size: 14px;" @click="resend()">{{sendText}}</text>
					</view>
					<view>
						<view class="flex">
							<text class="btns1 btn1" @click='pricestatusTwo=false'>取消</text>
							<view class="btns1 btn2" @click='amendprice(item)'>确定</view>
						</view>
						<!-- <view class="determine">
							获取验证码
						</view> -->
					</view>
				</view>
			</view>



		</view>
		<view v-if="drivers.length==0">
			<button class="btn btns"  @click="Add">新增</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: "buy",
		data() {
			return {
				businessman: {},
				identityAuthenticationInfo: {},
				drivers: {},
				pricestatus: false,
				pricestatusTwo: false,
				price: "",
				verifyCode: "",
				sendText: "60s后重发",
				id:"",
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onShow() {
			this.getList()
		},
		onPullDownRefresh() {
			this.getList()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			resend() {
				
				price
				
				if (this.sendText == "获取验证码") {
					this.getcode()
				}
			},
			open(item) {
				this.id = item.id
				this.pricestatus = !this.pricestatus
			},

			Add() {
				uni.navigateTo({
					url: `/pageD/identity/driverIdentity`
				})
			},
			getList() {
				this.identityAuthenticationInfo.commonId = this.userInfo.id
				this.$api.doRequest('get', '/driverViewInfo/selectDriverInfoPage', {
						pageSize: 10,
						currentPage: 1,
						commonId: this.userInfo.id,
						pcFlag: 0
					}, 'application/json;charset=UTF-8').then(res => {
						console.log(res.data.data.records)
						for(var i = 0 ; i < res.data.data.records.length ; i++){
							res.data.data.records[i].logo = res.data.data.records[i].driverName.substr(0,1)
						}
						
						this.drivers = res.data.data.records
					})
					.catch(res => {
						if(res.errmsg){
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							})
						}
						else{
							uni.showToast({
								title: "系统异常，请联系管理员",
								icon: 'none',
								duration: 2000
							})
						}
					});
			},
			amendprice(item) {
				var that = this
				that.identityAuthenticationInfo.driverPhone = that.price
				this.$api.doRequest('get', '/commonUser/loginVerifyCode', {
						phone: this.price,
						verifyCode: this.verifyCode
					}).then(res => {
						if (res.data.code == 200) {
							that.$api.doRequest('get','/driverViewInfo/selectPhone',that.identityAuthenticationInfo)
							.then(res => {
									if (res.data.code == '11018') {
										uni.showModal({
											title: '提示',
											content: '该手机号已认证过司机，再次认证将覆盖之前的认证信息，是否确定认证？',
											success: function(res) {										
												if (res.confirm) {
													that.identityAuthenticationInfo.id = item.id
													that.$api.doRequest('post','/driverViewInfo/api/modifyPhone',that.identityAuthenticationInfo).then(
														res => {
															uni.showToast({
																title: '提交成功',
																icon: 'none',
																duration: 2000
															})
															uni.navigateTo({
																url: `/pages/attestation/indexThree`,
															})
														}).catch(res => {
														uni.showToast({
															title: res.data.message,
															icon: 'none',
															duration: 2000
														})
													})
												} else if (res.cancel) {
													uni.showToast({
														title: '提交失败',
														icon: 'none',
														duration: 2000
													})
												}
											}
										});
									}else if(res.data.code == 200){
										that.identityAuthenticationInfo.id = item.id
										that.$api.doRequest('post','/driverViewInfo/api/modifyPhone',that.identityAuthenticationInfo).then(
											res => {
												uni.showToast({
													title: '提交成功',
													icon: 'none',
													duration: 2000
												})
												uni.navigateTo({
													url: `/pages/attestation/indexThree`,
												})
											}).catch(res => {
											uni.showToast({
												title: res.data.message,
												icon: 'none',
												duration: 2000
											})
										})
									}
								}).catch(res => {
									uni.showToast({
										title: res.data.message,
										icon: 'none',
										duration: 2000
									})
								})
							}
						})
			},
			getcode() {
					if (!this.price) {
						uni.showToast({
							title: '请填写手机号！',
							icon: 'none',
							duration: 2000
						})
						return
					}
				if (this.price.length != 11 ) {
					uni.showToast({
						title: '请正确填写手机号！',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.pricestatusTwo = true
				var that = this
				if (/^0?1[3|4|5|6|7|8][0-9]\d{8}$/.test(this.price)) {
					this.$api.doRequest('get', '/commonUser/sendVerifyCode', {
							phone: this.price
						}).then(res => {
							if (res.data.code == 200) {
								that.sendDisabled = true
								let sec = 60
								let interval = setInterval(() => {
									sec--;
									that.sendText = sec + 's后重发'
									if (sec <= 0) {
										that.sendDisabled = false
										that.sendText = "获取验证码"
										clearInterval(interval)
									}
								}, 1000)
							} else {
								uni.showToast({
									title: res.data.message,
									icon: 'none',
									duration: 2000
								})
							}
						})
						.catch(res => {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						});
				} else {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
				}
			},
			navToDetailPage(item) {
				uni.navigateTo({
					url: `/pageD/identity/driverIdentityLook?id=${item.id}`
				})
			},
			deleteSJ(item) {
				this.deletes = {}
				this.deletes.id = item.id
				uni.showModal({
					content: '身份信息删除后不可恢复，是否确定删除？',
					showCancel: true,
					confirmText: '确定',
					success: (e) => {
						if(e.confirm){
							this.$api.doRequest('post', '/driverViewInfo/api/deleteDriver', this.deletes,
									'application/json;charset=UTF-8').then(res => {
									if (res.data.code == 200) {
										this.$api.msg('删除成功！')
										this.getList()
										return
									}
								})
								.catch(res => {
									if(res.errmsg){
										uni.showToast({
											title: res.errmsg,
											icon: 'none',
											duration: 2000
										})
									}
									else{
										uni.showToast({
											title: "系统异常，请联系管理员",
											icon: 'none',
											duration: 2000
										})
									}
								});
						}
						
					},
					fail: () => {},
					complete: () => {}
				})
			},
			companyEdit(item) {
				uni.navigateTo({
					url: `/pageD/identity/driverIdentityEdit?id=${item.id}`
				})
			},
		}
	}
</script>

<style>
	.center {
		padding: 10px 20px;
		background-color: #F5F6FA;
	}

	.title {
		font-size: 22px;
		font-weight: 900;
		/* margin-top: 30px; */
		top: 50px;
		left: 24px;
		position: relative;

	}

	.company {
		font-size: 16px;
		font-weight: 600;
		margin-top: 10px;
		display: inline-block;
		margin-left: 10px;
	}

	.geren {
		color: #AFB3BF;
		font-size: 14px;
		margin-top: -10px;
		margin-left: 45px; 
		margin-bottom: 20px;
	}

	.infos {
		width: 100%;
		display: inline-table;
	}

	.info {
		line-height: 20px;
	}

	/* 	.but {
		border: 1px solid #CDCDCD;
		border-radius: 10px;
		
	} */

	.homePage {
		width: 101%;
		height: 200px;
		margin: 20px auto;
	}

	.logo {
		width: 35px;
		height: 35px;
		background-color: #FEECE6;
		color: #FE6430;
		font-weight: 600;
		font-size: 16px;
		text-align: center;
		line-height: 35px;
		padding: 0 3px;
		border-radius: 6px;
		display: inline-block;
		margin-top: 10px;
	}

	.forList {
		background: #FFFFFF;
		margin-top: 10px;
		padding: 10px 10px;
		border-radius: 16px;

	}

	.status {
		position: absolute;
		margin-top: 10px;
		right: 36px;
		color: #22C572;
	}

	.status1 {
		position: absolute;
		margin-top: 10px;
		right: 36px;
		color: #FE6430;
	}

	.status2 {
		position: absolute;
		margin-top: 10px;
		right: 36px;
		color: #FB1E1E;
	}

	.status3 {
		position: absolute;
		margin-top: 10px;
		right: 36px;
		color: #AFB3BF;
	}

	.btn {
		margin-top: 10px;
		background-color: #FFFFFF;
		border-radius: 25px;
		border: none;
	}

	.btns {
		background-color: #22C572;
		color: white;
	}

	.but {
		height: 33px;
		border: 1px solid #CDCDCD;
		border-radius: 20px;
		line-height: 30px;
		padding: 0 8px;
		text-align: center;
		margin-left: 20px;
		font-size: 14px;
		font-weight: 500;
	}

	.yuan {
		margin-top: 6px;
		font-size: 14px;
		font-weight: 500;
	}

	.shade-content {
		background: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		z-index: 999999;
		text-align: center;
		border-radius: 20px;
	}

	.shade-content-item {
		width: 277px;
		text-align: center;
		height: 121px;
		padding: 35px 10px;

	}

	.shade {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.1);
		height: 100%;
		z-index: 2;
	}

	.titel {
		font-size: 18px;
		font-weight: 600;
		margin-top: 20px;
	}

	.determine {
		width: 95px;
		height: 36px;
		background-color: #22C572;
		color: #FFFFFF;
		border-radius: 10px;
		margin: 0 auto;
		line-height: 36px;
		margin-top: -30px;
		margin-bottom: 20px;
	}

	.tainput {
		width: 70%;
		padding-left: 10px;
		margin: 0 auto;
		text-align: left;
		border-bottom: 1px solid #AFB3BF;
		border-radius: 3px;

	}

	.cancel {
		width: 20px;
		height: 20px;
		font-size: 20px;
		color: #8890B1;
		float: right;
		margin-right: 20px;
		margin-top: -25px;
	}

	.btns1 {
		width: 50%;
		font-size: 18px;
		line-height: 50px;
		text-align: center;
		border-top: 1px solid #EEEEEE;
		margin-top: -26px;
	}

	.btn1 {
		border-right: 1px solid #EEEEEE;
		color: #AFB3BF;
	}

	.btn2 {
		color: #22C572;
	}

	.tainput1 {
		width: 70%;
		padding-left: 10px;
		margin: 0 auto;
		text-align: left;
		border-radius: 3px;
	}
	.options{
		justify-content: flex-end;
	}
</style>