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 class="bottom-btn">
						<!--<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 {
		border: 1px solid #CDCDCD;
		border-radius: 20px;
		padding: 15rpx 30rpx;
		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: 160rpx;
		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;
	}

	.bottom-btn {
		display: flex;
		justify-content: center;
		margin-bottom: 50rpx;
	}

	.determine {
		width: 50%;
		background-color: #22C572;
		color: #FFFFFF;
		border-radius: 10px;
		padding: 15rpx 18rpx;
	}

	.tainput {
		width: 90%;
		padding-bottom: 15rpx;
		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>