zhywpt-sp/personal-center/setting/personal-information/user-card.vue

<template>
	<view class="main" :style="{height: height+'px'}">
		<view class="item-row">
			<view class="item-left">
				<view class="title">身份证人像面</view>
				<view class="desc">补传身份证人像面</view>
				<view class="flag"><text>拍摄示例</text> </view>
			</view>
			<view class="item-right" @click="chooseImage(1)">
				<view class="empty-node"></view>
				<image :src="state.headstockImg ?? defHeadstockImg" :data-url="state.headstockImg ?? defHeadstockImg" ></image>
			</view>
		</view>
		<view class="item-row">
			<view class="item-left">
				<view class="title">身份证国徽面</view>
				<view class="desc">补传身份证国徽面</view>
				<view class="flag"><text>拍摄示例</text> </view>
			</view>
			<view class="item-right" @click="chooseImage(2)">
				<view class="empty-node"></view>
				<image :src="state.installImg ?? defInstallImg" ></image>
			</view>
		</view>
		<view class="btn">
			<submit-button @submit="saveHandle" title="保存" ></submit-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from "vue";
	import { msg, navTo } from '@/utils/utils';
	import {fileURL} from "@/datas/fileURL.js";
	const height = uni.getSystemInfoSync().windowHeight
	const defHeadstockImg = `${fileURL}image/applyCard/renxiang.png`;
	const defInstallImg = `${fileURL}image/applyCard/guohui.png`;
	
	const state = reactive({
		headstockImg:null,
		installImg:null 
	});
	
	//选择图片
	const chooseImage = (type:number) => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			//sourceType: ['album','camera'], 
			success: function (res) {
				console.log(res.tempFilePaths);
				if (type === 1) {
					state.headstockImg = res.tempFilePaths[0];
				} else{
					state.installImg = res.tempFilePaths[0];
				}
			}
		});
	}
	
	//下一步
	const saveHandle = ()=>{
		if(!state.headstockImg || !state.installImg){
			msg('请按照要求上传图片！');
			return;
		}
		msg('保存成功')
	}
</script>

<style>
	page{
		background: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	.main{
		overflow: hidden;
		.item-row{
			width: calc(100% - 60rpx);
			margin-left: 30rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			background: white;
			padding: 30rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223,223,223,0.8);
			.item-left{
				.title{
					font-size: 34rpx;
					color: #333;
					font-weight: bold;
				}
				.desc{
					font-size: 24rpx;
					color: #999;
					margin: 10rpx 0;
				}
				.flag{
					width: 110rpx;
					height: 45rpx;
					line-height: 42rpx;
					color: #0A8F8A;
					margin-top: 16rpx;
					border-radius: 6rpx;
					text-align: center;
					font-size: 20rpx;
					background: #D9F8F1;
				}
			}
			.item-right{
				width: 295rpx;
				height: 188rpx;
				position: relative;
				image{
					position: relative;
					z-index: 10;
					width: 100%;
					height: 188rpx;
				}
				&::before{
					content:'';
					position: absolute;
					width: 22rpx;
					height: 22rpx;
					border: 4rpx solid #21BEB1;
					border-bottom: none;
					border-right: none;
					z-index: 0;
					left:-4rpx;
					top: -4rpx;
				}
				&::after{
					content:'';
					position: absolute;
					width: 22rpx;
					height: 22rpx;
					border: 4rpx solid #21BEB1;
					border-top: none;
					border-right: none;
					z-index: 0;
					left: -4rpx;
					bottom: -4rpx;
				}
			}
			.empty-node{
				position: absolute;
				z-index: 0;
				width: 100%;
				height: 100%;
				&::before{
					content:'';
					position: absolute;
					width: 22rpx;
					height: 22rpx;
					border: 4rpx solid #21BEB1;
					border-left: none;
					border-bottom: none;
					z-index: 0;
					right:-4rpx;
					top: -4rpx;
				}
				&::after{
					content:'';
					position: absolute;
					width: 22rpx;
					height: 22rpx;
					border: 4rpx solid #21BEB1;
					border-top: none;
					border-left: none;
					z-index: 0;
					right: -4rpx;
					bottom: -4rpx;
				}
			}
		}
		.hint{
			display: flex;
			flex-direction: row;
			justify-content: center;
			font-size: 26rpx;
			color: #666666;
			padding: 0px 30rpx;
			margin-top: 60rpx;
			
			.icon{
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
			view{
				width: calc(100% - 36rpx);
			}
		}
		.btn{
			margin:470rpx 40rpx 30rpx;
		}
	}
</style>