uniProject/components/identification/identification.vue

<template>
	<view>
		<uni-popup ref="popupRef" type="dialog" :animation="false" :is-mask-click="false"
			mask-background-color="rgba(0, 0, 0, 0.4);">
			<uni-popup-dialog mode="input" class="phone-ksxz-dialog" title="身份确认" :duration="2000" :before-close="true"
				cancelText="修改" @close="handleClose" @confirm="handleConfirm">
				<view class="phone-ksxz-body">
					<view @click="handleCloseOnly" class="ksxz-close-icon" >
						<icon :style="{ backgroundImage: 'url(' + data.iconsArr.closeIcon + ')' }"></icon>
					</view>
					<view class="ksxz-content-box">
            <!--  Fixme 图形   -->
						<img class="phone-default-userImg ksxz-user-img" :src="data.icon" v-if="data.icon" alt=""/>
						<icon class="phone-default-userImg ksxz-user-img" v-else :style="{ backgroundImage: 'url(' + data.iconsArr.defaultUserImg + ')' }"></icon>
						<view :class="{isEmpty: !data.realName}">姓名：{{data.realName}}</view>
						<view :class="{isEmpty: !data.realName}">电话：{{data.userName}}</view>
						<view>职业：{{data.zyName}}</view>
						<view>等级：{{data.zyLevelName}}</view>
						<view :class="{isEmpty: !data.realName}">证件号：{{data.idcard}}</view>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {ref,reactive,onMounted} from "vue"
	import cacheManager from '@/utils/cacheManager.js';
	const popupRef = ref(null)
	const data = reactive({
		realName: '',
		userName: '',
		zyLevelName: '',
		zyName: '',
		idcard: '',
		icon: '',
		gender: '',
		userId: '',
		iconsArr:{
			closeIcon: '',
			defaultUserImg: '',
		}
	})

	const emits = defineEmits(['confirm', 'changeData'])
	onMounted(() => {
			data.iconsArr.closeIcon = cacheManager.get('projectImg').closeIcon;
			data.iconsArr.defaultUserImg = cacheManager.get('projectImg').user_default_img;
		});
	function handleCloseOnly() {
		popupRef.value.close()
	}

	function showDialog(options) {
		data.realName = options.realName;
		data.userName = options.userName;
		data.zyLevelName = options.zyLevelName;
		data.zyName = options.zyName;
		data.idcard = options.idcard;
		data.icon = options.icon;
		data.userId = options.userId;
		data.gender = options.gender; // 1男 2女 0未知

		popupRef.value.open()
	}

	function handleClose() {
		emits('changeData');
		popupRef.value.close()
	}

	function handleConfirm() {
		let arr = [];
		if (!data.realName) {
			arr.push('姓名');
		}
		if (!data.userName) {
			arr.push('电话');
		}
		if (!data.icon) {
			arr.push('头像');
		}
		if (!data.idcard) {
			arr.push('证件号');
		}
		if (!data.realName || !data.userName||!data.icon||!data.idcard) {
			uni.showToast({
				icon: 'none',
				title: `请完善${arr.join('、')}信息！`
			})
			return;
		}
		
		emits('confirm', data);
		popupRef.value.close()
	}

	defineExpose({
		showDialog
	})
</script>

<style scoped lang="scss">
.isEmpty {
	color: #ff0101;
}
</style>