bind_card.vue 2.6 KB
<template>
	<view style="background-color: #f5f5f5; height: 100vh;">
		<view class="title_bg" :style="'padding-top:' + (common.statusBarH + 10)+ 'px; '">

			<image style="width: 40rpx; height: 40rpx;" src='../../static/common/icon_back.png' @click="onBack()">
			</image>

			<text style="color: white; font-size: 36rpx; font-weight: 700; margin-left: 15rpx;">绑定身份证</text>

			<image style="width: 40rpx; height: 40rpx;">
			</image>

		</view>

		<view :style="'height: ' + titleHeight + 'px'"></view>
		
		<view style="font-size: 32rpx; color: #393939; padding: 20rpx; margin-bottom: 3rpx; background-color: white;">
			<text>用于实名认证,修改个人信息.非常非常重要。</text>
		</view>
		
		<view class="item">
			<text class="text1">&nbsp;&nbsp;&nbsp;名:</text>
			<view class="input-class">
				<input  placeholder="请填写真实姓名"/>
			</view>
		</view>
		
		<view class="item">
			<text class="text1">身份证:</text>
			<view class="input-class" >
				<input type="idcard" :value="idCard"  placeholder="请填写身份证号" />
			</view>
		</view>
		
		<button :class="userInfo.IdCard ? 'un-button-class' : 'button-class'">{{userInfo.IdCard ? "无法修改" : "修改"}}</button>
		
	</view>
</template>

<script>
	import common from '@/utils/common.js'
	import loginHelper from "../../utils/loginHelper.js"
	export default {
		data() {
			return {
				titleHeight: 60,
				common,
				idCard: "",
				userInfo: {}
			}
		},
		onReady() {

			var this_ = this
			uni.createSelectorQuery()
				.in(this)
				.select('.title_bg')
				.boundingClientRect((rect) => {
					if (rect) {
						this_.titleHeight = rect.height
						console.log("rect.height:" + rect.height)
					}
				})
				.exec();

			this.userInfo = loginHelper.getUserInfo()
			this.idCard = this.userInfo.IdCard
		},
		methods: {

		}
	}
</script>

<style>
	.title_bg {
		background: linear-gradient(90deg, #FF6F38 0%, #FFA04B 100%);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-bottom: 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
	
	.item {
		display: flex; 
		align-items: center;  
		padding: 20rpx;
		background-color: white;
	}
	
	.text1 {
		color: #393939;
		font-size: 32rpx;
	}
	
	.input-class {
		border: 2px solid #F39801;
		border-radius: 6rpx;
		background-color: white;
		flex: 1;
		padding: 15rpx;
	}
	
	.button-class {
		margin: 30rpx;
		background-color: #F39801;
	}
	
	.un-button-class {
		margin: 30rpx;
		background-color: #7a7a7a;
	}
</style>