bocai_supplyChain_uni/root/person/idcardList.vue

<template>
	<view class="p-root-person-idlist g_bg_f_5 g_p_12" style="min-height: 100vh;overflow:hidden">
		<!-- 没有认证 -->
		<view v-if="user.idcardImgFront != null && user.idcardImgFront != '' && user.idcardImgFront != 'undefined' && user.idauth - 1 == 0" class="">
			<navigator url="/root/person/idcardForm?from=idauth" class="bgsfz">
				<image src="//matripe.oss-cn-beijing.aliyuncs.com/tuiguang/ghLogo.png"></image>
				<text class="g_ml_8 g_fs_18 g_c_3 g_fw_500">身份证</text>
				<view class="g_fs_12 g_c_6 g_mt_10" style="margin-left: 32px">{{ card }}</view>
				<view class="bottom" hover-class="thover"> 查看身份证照片 </view>
			</navigator>
		</view>
		<view class="auth-false g_position_rela" v-else @click="goForm">
			<view class="">
				<view class="g_flex_row_between">
					<view class="g_flex_none">
						<image src="//matripe.oss-cn-beijing.aliyuncs.com/tuiguang/ghLogo.png" class="logo"></image>
					</view>
					<view class="g_flex_row_between g_flex_1">
						<text class="g_ml_8 g_fs_18 g_c_3 g_fw_600 g_flex_1">身份证</text>
						<text class="g_fs_14 g_c_3 g_flex_none">未添加</text>
					</view>
				</view>
				<view>
					<view class="g_fs_12 g_c_6 g_mt_10" style="margin-left: 32px">添加照片以查看证件</view>
				</view>
				<view class="addbtn" hover-class="thover"> 添加并使用 </view>
			</view>
		</view>
		<!-- 已认证 -->
	</view>
</template>

<script>
export default {
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			user: uni.getStorageSync("apply-userinfo").user,
			card: "",
		};
	},
	onLoad() {
		this.card = this.subCard(this.user.idcard, 1, 1);
	},
	methods: {
		goForm() {
			uni.navigateTo({
				url: "/root/person/idcardForm",
			});
		},
		subCard(str, frontLen, endLen) {
			console.log(str);
			//str：要进行隐藏的变量  frontLen: 前面需要保留几位    endLen: 后面需要保留几位
			var len = str.length - frontLen - endLen;
			var xing = "";
			for (var i = 0; i != len; i++) {
				xing += "*";
			}
			let res = str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
			console.log(res);
			return res;
		},
	},
};
</script>

<style lang="less">
.p-root-person-idlist {
	.auth-false {
		top: 10px;
		left: 50%;
		transform: translateX(-50%);
		position: relative;
		width: calc(100% - 20px);
		height: 120px;
		background-image: url(//matripe.oss-cn-beijing.aliyuncs.com/tuiguang/sfz.png);
		background-size: cover;
		border-radius: 8px;
		padding: 10px;
		box-sizing: border-box;
		.logo {
			width: 24px;
			height: 24px;
			border-radius: 50%;
			display: inline-block;
			vertical-align: text-bottom;
		}
		.addbtn {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 38px;
			line-height: 38px;
			width: 100%;
			font-size: 14px;
			color: #333;
			text-align: center;
			background: rgba(0, 0, 0, 0.09);
			border-radius: 0px 0px 8px 8px;
		}
	}
	.bgsfz {
		position: relative;
		width: 100%;
		height: 120px;
		background-image: url(//matripe.oss-cn-beijing.aliyuncs.com/tuiguang/sfz.png);
		background-size: cover;
		border-radius: 8px;
		padding: 10px;
		box-sizing: border-box;
	}
	.bgsfz image {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		display: inline-block;
		vertical-align: text-bottom;
	}
	.bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 38px;
		line-height: 38px;
		width: 100%;
		font-size: 14px;
		color: #333;
		text-align: center;
		background: rgba(0, 0, 0, 0.09);
		border-radius: 0px 0px 8px 8px;
	}
}
</style>