cloud_admin_app/pages/userCenter/personneldentification/personneldentification.vue

<template>
	<view class="section">
		<view class="cu-card margin-top-sm padding-top-xs" @click="goAdd" v-if="listData.realNameAuthFlag != 1">
			<view class="cu-item shadow padding-lr-sm">
				<view class="flex padding-tb-sm moreBox">
					<view class="flex">
						<view>
							<image class="add" src="../../../static/user/bind.png" mode="scaleToFill"></image>
						</view>
						<view class="padding-left-xs">个人认证</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-card " v-if="listData != null" style="margin-top: 20rpx;">
			<view class="cu-item shadow padding-lr-sm" @click="edit">
				<view class="flex padding-tb-sm justify-between">
					<view class="flex">
						<view class="padding-right-xs">
							<image class="addCar" src="https://www.zzpower.net/admin-api/infra/file/4/get/883b825c0549e5745783d6b79ae40ab301e34e95e74f584654bf209da99d8d0a.svg" mode="scaleToFill"></image>
						</view>
						<view class="padding-left-xs dis_small">
							<view class="num">身份证号码：{{listData.idCard}}</view>
							<view class="vinNum margin-top-xs">
								手机号：{{listData.mobile}}
							</view>
						</view>
					</view>
					<!-- 右侧 -->
					<view class="flex align-center">
						<view
							:class=" {'passState' : listData.realNameAuthFlag== 1 ,'stateFont' : listData.realNameAuthFlag== 0,'reState': listData.realNameAuthFlag== 2}">
							{{['未通过','审核通过','审核中'][listData.realNameAuthFlag === '' ? '--' : listData.realNameAuthFlag] }}
						</view>
						<view v-if="listData.realNameAuthFlag  == 0" class="unLock margin-left-xs"
							@click.stop="goAdd()">
							<view class="text-blue"> 去认证 </view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" :showCancelButton="true" @confirm="confirm" @cancel="cancel" confirmText="确认">
			<view>
				<view>请确认是否解绑!</view>
			</view>
		</u-modal>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom,
		onHide,
		onUnload,
		onPullDownRefresh
	} from "@dcloudio/uni-app";

	const pageSize = ref(1)
	const userLocal = reactive([])
	const totalPage = ref()
	const listData = ref(null)
	const show = ref(false)
	const vinUnlock = ref()

	onLoad(() => {})

	onShow(() => {
		getList()
	})
	onHide(() => {
		// console.log('hide');
	})
	onUnload(() => {
		// console.log('none');
	})
	const getList = async (type) => {
		let customerVehiclePageUrl = config.baseUrl + "app-api/member/user/get";
		await uni.$request({
			url: customerVehiclePageUrl,
		}).then((res) => {
			// console.log(res, '获取身份信息')
			listData.value = res.data.data
		})
	}
	const unLock = (data) => {
		
	}
	const goAdd = () => {

		uni.navigateTo({
			url: '../personnelCertification/personnelCertification'
		})
	}
	const cancel = () => {
		show.value = false
	}
	const confirm = () => {
		let data = {
			vin: vinUnlock.value
		}
		uni.$request({
			url: config.wxUrl_pay + 'app-rest/customerVehicle/unbind',
			data: data,
			method: 'POST',
		}).then((res) => {
			// console.log('cccccc', res);
			pageSize.value = 1
			getList()
		})
		show.value = false
	}
	const edit = () => {
		let auth = {
			idFront: listData.value.idFront,
			idBack: listData.value.idBack,
			idCard: listData.value.idCard,
			name: listData.value.nickname,
			id: 1
		}
		uni.navigateTo({
			url: '../personnelCertification/personnelCertification?data=' + JSON.stringify(auth)
		})
	}
</script>

<style lang="scss" scoped>
	.section {
		width: 100%;
		// height: 100vh;
		// overflow: hidden;
		// overflow-y: auto;
		background: #F7F8FA;
	}
	.dis_small {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	.add {
		width: 40rpx;
		height: 40rpx;
	}

	.moreBox {
		justify-content: center;
		align-items: center;
	}

	.stateFont {
		color: #4C91FF;
		padding: 8rpx 16rpx;
		border: 1px solid #4C91FF;
		border-radius: 6px;
		background-color: rgba(76, 145, 255, 0.1);
		font-size: 28rpx;
	}

	.passState {
		color: #2ECB53;
		padding: 8rpx 16rpx;
		border: 1px solid #2ECB53;
		border-radius: 6px;
		background-color: rgba(46, 203, 83, 0.1);
		font-size: 28rpx;
	}

	.reState {
		color: #F23E2C;
		padding: 8rpx 16rpx;
		border: 1px solid #F23E2C;
		border-radius: 6px;
		background-color: rgba(242, 62, 44, 0.1);
		font-size: 28rpx;
	}

	.num {
		font-size: 22rpx;
		color: #333;
	}

	.vinNum {
		color: #808080;
		font-size: 20rpx;
	}

	.addCar {
		width: 80rpx;
		height: 80rpx;
	}

	.cu-card>.cu-item {
		margin: 0 30rpx 30rpx 30rpx;
	}

	.unLock {
		// border: 1px solid #4C91FF;
		// border-radius: 6px;
		// padding: 8rpx 16rpx;
		font-size: 23rpx;
		// margin-left: ;
	}
</style>
<style lang="scss">
	page {
		background-color: #F7F8FA;
	}
</style>