yiliangyiyun-app/pages/attestation/indexTwo.vue

<template>
	<view class="center">
		<view v-for="(item , index) in businessman" :Key="index" class="forList">
			<view class='flex' @click="navToDetailPage(item)">
				<view class="logo">
					粮商
				</view>
				<view class="company">{{item.compName}}</view>
				<view class="company" v-if="item.customerTypeFlag == 1">{{item.customerName}}</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" v-if="item.customerTypeFlag == 1"> {{item.customerPhone}}</view>
			<view class="geren" v-if="item.customerTypeFlag == 2">{{item.customerName}}{{item.customerPhone}}
			</view>
			<hr style="margin: 10px 0;">
			<view class="flex">
				<view class="yuan flex">
					<view v-bind:class="defaults1" @click.stop="select(item)" v-if="item.basis == 'false'"></view>
					<view v-bind:class="defaults2" @click.stop="select(item)" v-if="item.basis == 'true'">√</view>
					<text style="font-size: 12px;" @click.stop="select(item)">设为默认</text>
				</view>
				<view class="options flex">
					<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="deleteLS(item)">删除</view>
				</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="请输入手机号" type="number" class="tainput" maxlength="11">
					</view>
					<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>
				</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: {},
				judge: "geren",
				pricestatus: false,
				pricestatusTwo: false,
				price: "",
				sendText: "60s后重发",
				verifyCode: "",
				loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				id: "",
				defaults1: "default1",
				defaults2: "default2",
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.getList()
			uni.stopPullDownRefresh()
		},
		methods: {
			resend() {
				if (this.sendText == "获取验证码") {
					this.getcode()
				}
			},
			select(item) {
				if (item.authenticationStatus == '已认证') {
					if (item.basis == "false") {
						for (var i = 0; i < this.businessman.length; i++) {
							if (this.businessman[i] == item) {
								item.basis = "true"
							} else {
								this.businessman[i].basis = "false"
							}
						}

						// this.defaults1 = "default2"
					} else if (item.basis == "true") {
						item.basis = "false"
						// this.defaults2 = "default1"
					}
					this.identityAuthenticationInfo.commonId = this.userInfo.id
					this.identityAuthenticationInfo.defaultFlag = 1
					this.identityAuthenticationInfo.id = item.id
					this.$api.doRequest('post', '/identityAuthenticationInfo/api/setDefault', this
							.identityAuthenticationInfo,
							'application/json;charset=UTF-8').then(res => {
							for (var i = 0; i < this.businessman.length; i++) {
								if (this.businessman.defaultFlag == 1) {
									this.defaults = "default2"
								} else {
									this.defaults = "default1"
								}
							}
							this.getList()
						})
						.catch(res => {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							})
						});
				} else {
					this.$api.msg('已认证的身份才能设为默认！')
				}
			},
			open(item) {
				this.id = item.id
				this.pricestatus = !this.pricestatus
			},

			Add() {
				uni.navigateTo({
					url: `/pageD/identity/companyIdentity`
				})
			},
			getList() {
				this.identityAuthenticationInfo.commonId = this.userInfo.id
				this.$api.doRequest('get', '/identityAuthenticationInfo/selectIdentityAuthenticationInfo', {
						pageSize: 10,
						currentPage: 1,
						commonId: this.userInfo.id,
						flag: 0
					}, 'application/json;charset=UTF-8').then(res => {
						for (var i = 0; i < res.data.data.records.length; i++) {
							res.data.data.records[i].basis = "false"
							if (res.data.data.records[i].defaultFlag == 1) {
								res.data.data.records[i].basis = "true"
							}
						}
						this.businessman = 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', '/identityAuthenticationInfo/api/modifyIdentityPhone', {
									customerPhone: 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()
										// uni.navigateTo({
										// 	url: '/pages/attestation/indexTwo'
										// });

									} else {
										uni.showToast({
											title: res.errmsg,
											icon: 'none',
											duration: 2000
										})
										return
									}
									if (res.data.code == "ERROR") {
										uni.showToast({
											title: res.message,
											icon: 'none',
											duration: 2000
										})
										return
									}
								})
								.catch(res => {
									uni.showToast({
										title: res.errmsg,
										icon: 'none',
										duration: 2000
									})
								});

							// uni.hideLoading()
						} else {
							// uni.hideLoading()1
							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
				// 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/companyIdentityLook?id=${item.id}`
				})
			},
			deleteLS(item) {
				uni.showModal({
					// title: '登录提示',
					content: '身份信息删除后不可恢复，是否确定删除？',
					showCancel: true,
					confirmText: '确定',
					success: (e) => {
						this.$api.doRequest('post',
								'/identityAuthenticationInfo/api/deleteIdentityAuthenticationInfo', {
									id: item.id
								}, 'application/json;charset=UTF-8').then(res => {
								// this.procurementPlanInfos = res.data.data.records
								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/companyIdentityEdit?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: 46px;
	}

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

	.info {
		line-height: 20px;
	}

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

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

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

	.logo {
		width: 35px;
		height: 35px;
		background-color: #E9F8F0;
		color: #22C572;
		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;
	}

	.shade-content {
		background: #fff;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		z-index: 2;
		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;
	}

	.tainput1 {
		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: #AFB3BF;
		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;
	}

	.default1 {
		width: 16px;
		height: 16px;
		border: 1px solid #AFB3BF;
		border-radius: 8px;
		text-align: center;
		line-height: 16px;
		color: #FFFFFF;
		margin-right: 3px;
		margin-top: 2px;
	}

	.default2 {
		width: 16px;
		height: 16px;
		border: 1px solid #AFB3BF;
		border-radius: 8px;
		text-align: center;
		line-height: 16px;
		color: #FFFFFF;
		margin-right: 3px;
		margin-top: 2px;
		background-color: #22C572;
	}

	.options {
		justify-content: flex-end;
	}
</style>