zhywpt-sp/subpackage/personal-center/baseMannager/base-change-people.vue

<template>
	<view class="content">
		<view class="item-tips">

			<view class="picture-wrapper">
				<view class="bg">
					<view class="">
						<view class="name">
							人像面
						</view>
						<view class="value">
							上传身份证的人像面
						</view>
						<view class="tip">
							<view class="tip-value">
								拍摄规范
							</view>
						</view>
					</view>
					<image class="icon" :src="`${$imgUrl}applyCard/renxiang.png`"></image>
				</view>
			</view>
			<view class="picture-wrapper">
				<view class="bg">
					<view class="">
						<view class="name">
							国徽面
						</view>
						<view class="value">
							上传身份证的国徽面
						</view>
						<view class="tip">
							<view class="tip-value">
								拍摄规范
							</view>
						</view>
					</view>
					<image class="icon" :src="`${$imgUrl}applyCard/guohui.png`"></image>
				</view>
			</view>

		</view>
		<view class="shibie-wrapper">
			<view class="title">
				个人信息
			</view>
			<view class="">
				<u-field required labelWidth="200" v-model="state.ocrData.conmpany" input-align='right' label="姓名">
				</u-field>
				<u-field required labelWidth="200" v-model="state.ocrData.type" input-align='right' label="性别">
				</u-field>
				<u-field required labelWidth="200" v-model="state.ocrData.card" input-align='right' label="证件号">
				</u-field>
				<u-field required labelWidth="200" v-model="state.ocrData.phone" input-align='right' label="地址">
				</u-field>
				<u-field required labelWidth="200" v-model="state.ocrData.phone" input-align='right' label="证件有效期">
				</u-field>
				<u-field required labelWidth="200" v-model="state.ocrData.phone" input-align='right' label="联系方式">
				</u-field>
			</view>
		</view>

		<view class="action">
			<button type="default" class="button" @click="savaHandle()">确认修改</button>
		</view>

	</view>
</template>

<script setup lang="ts">
	import {
		reactive
	} from "vue";

	const savaHandle = () => {
		console.log('执行点击事件')
		// uni.navigateTo({
		// 	url: '/pages/orders/car-release'
		// })
	};
	const tabChange = (val) => {
		if (val) {
			state.isMyPeopple = true;
		} else {
			state.isMyPeopple = false;
		}

	};


	const state = reactive({
		ocrData: {
			'conmpany': '贵州市空间加快速度公司',
			'type': '企业营业执照',
			'card': 'GZ2364174132894',
			'address': '贵州省贵阳市xxxxxxxxxxx',
			'phone': '18083636113'

		},
		isMyPeopple: true,
		buchongData: {
			'conmpany': '李某一',
			'type': '居民身份证',
			'card': '23728347626342332',
			'phone': ''


		},
	})
</script>

<style lang="scss" scoped>

	.content {
		padding: 50rpx 30rpx 50rpx 30rpx;

		.action {
			margin-top: 60rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-bottom: 30rpx;

			.button {
				height: 80rpx;
				background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 80rpx;
			}
		}

		.item-tips {
			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 24rpx;
			}

			.tip {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}
		}

		.picture-wrapper {
			margin-top: 40rpx;

			.bg {
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
				border-radius: 20rpx;
				padding: 40rpx;
				display: flex;
				// align-items: center;
				justify-content: space-between;

				.name {
					font-size: 34rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
					line-height: 34rpx
				}

				.value {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #999999;
					line-height: 24rpx;
				}

				.tip {
					margin-top: 20rpx;
					text-align: center;
					width: 110rpx;
					height: 40rpx;
					background: rgba(33, 190, 177, 0.2);
					border-radius: 6rpx;

					.tip-value {
						font-size: 20rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #0A8F8A;
						line-height: 40rpx;
						opacity: 1;
					}
				}
			}

			.icon {
				width: 294rpx;
				height: 188rpx;
			}
		}

		.shibie-wrapper {
			margin-top: 60rpx;

			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
			}
		}

		.buchong-wrapper {
			margin-top: 60rpx;

			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
			}
		}

		.green-tip {
			margin-top: 50rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #00B38B;
			line-height: 24rpx;
			margin-bottom: 60rpx;
		}
	}
</style>