vue-insagent-app/pages/user/userInfoImage.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<service-widget @btnClick="btn_click"></service-widget>
		<public-module></public-module>
		<view class="IDcardInfo p-3 my-3" style="background-color: #FFFFFF;">
			<view class="cardImages d-flex j-sb">
				<view>

					<view class="imgArea" :class="(IdCardBefore=='')?'idCardBefore':'imageBorder'">
						<template v-if="IdCardBefore!=''">
							<image :src="IdCardBefore" mode="aspectFill"></image>
						</template>
					</view>
					<view class="d-flex a-center j-center mt-2 font-weight main-text-color">身份证人像面</view>
				</view>
				<view>

					<view class="imgArea" :class="(IdCardAfter=='')?'idCardAfter':'imageBorder'">
						<template v-if="IdCardAfter!=''">
							<image :src="IdCardAfter" mode="aspectFill"></image>
						</template>
					</view>
					<view class="d-flex a-center j-center mt-2 font-weight main-text-color">身份证国徽面</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				IdCardBefore: "",
				IdCardAfter: "",
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad() {
			this.$http.get('/insTaskImage/findById?imgtype=T1&taskid=' + this.userInfo.sysUser.id).then(res => {
				if (res.data.imgList.length > 0) {
					this.IdCardBefore = res.data.imgList[0];
				} else {
					this.IdCardBefore = '';
				}

			})

			this.$http.get('/insTaskImage/findById?imgtype=T2&taskid=' + this.userInfo.sysUser.id).then(res => {
				if (res.data.imgList.length > 0) {
					this.IdCardAfter = res.data.imgList[0];
				} else {
					this.IdCardAfter = '';
				}
			})
		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.idCardBefore {
		background: rgba($themeColor, 0.1) url('/static/image/user/identy2.png') center center no-repeat;
		background-size: auto 70%;
		padding: 10upx;
		box-sizing: border-box;
	}

	.idCardAfter {
		background: rgba($themeColor, 0.1) url('/static/image/user/identy1.png') center center no-repeat;
		background-size: auto 70%;
		padding: 10upx;
		box-sizing: border-box;
	}

	.imageBorder {
		border: 2px solid #ddd;
		box-sizing: border-box;
		padding: 10upx;
	}

	.cardImages .imgArea {
		// width: 100%;
		// height: 420rpx;
		width: 310rpx;
		height: 260upx;
	}

	.cardImages .imgArea>image {
		width: 100%;
		height: 100%;
	}
</style>