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>
			<hr style="margin: 10px 0;">
			<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>
		<button class="btn btns" @click="Add">新增</button>
	</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'])
		},
		onLoad() {
			this.getList()
		},
		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 => {
						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 => {
						uni.showToast({
							title: res.errmsg,
							icon: 'none',
							duration: 2000
						})
					});
			},
			amendprice(item) {
				var that = this
				this.$api.doRequest('get', '/commonUser/loginVerifyCode', {
						phone: this.price,
						verifyCode: this.verifyCode
					}).then(res => {
						if (res.data.code == 200) {
							this.$api.doRequest('post', '/driverViewInfo/api/editInfo', {
									driverPhone: this.price,
									id: this.id,
									commonId: this.userInfo.id
								}, 'application/json;charset=UTF-8').then(res => {
									if (res.data.code == 200) {
										that.$api.msg('修改成功！')
										that.pricestatusTwo = false
										that.pricestatus = false
										that.getList()
									}
								})
								.catch(res => {
									uni.showToast({
										title: res.errmsg,
										icon: 'none',
										duration: 2000
									})
									return
								});
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
							return
						}
					})
					.catch(res => {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
							return
					});
			},
			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
				// this.pricestatusTwo = !this.pricestatusTwo
				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) => {
						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 => {
								uni.showToast({
									title: res.errmsg,
									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; 
	}

	.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;
	}

	.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>