<template>
  <view class="userinfo-form">
	  <view class="context">
		  <view class="header_title">
		  	<view v-if="!tooken" class="title">请先进行注册绑定</view>
			<view v-else class="title">修改个人信息</view>
		  	<view class="header_text">上传照片（上传本人照片，可用于人脸通行）</view>
		  </view>
		  <view class="context_from">
				<view class="from_herdimg">
					<text class="herdimg_image">
						<van-uploader ref="upclick" :after-read="afterRead" v-model="fileList" :max-count="1" class="van_uploads">
							<image src="../../assets/images/待上传头像.png" class="imags"></image>
						</van-uploader>
					</text>
					<view class="herdimg_text">
						（点击拍摄/上传本人清晰正面照片）
					</view>
				</view>
		  		  <van-form @submit="onSubmit" label-align="top">
		  		    <van-cell-group inset class="van_groups">
		  		      <van-field
		  		        v-model="username"
		  		        name="user"
		  		        label="姓名 (必填)"
		  		        placeholder="填写姓名"
		  		        :rules="[{ required: true, message: '请填写用户名' }]"
						id="from_user"
		  		      />
		  		      <van-field
		  		        v-model="password"
		  		        type="password"
		  		        name="password"
		  		        label="手机号 (必填)"
		  		        placeholder="手机号"
		  		        :rules="[{ required: true, message: '请填写密码' }]"
						id="from_pass"
		  		      />
		  		    </van-cell-group>
		  		    <view class="from_sub">
		  		      <van-button round block type="primary" native-type="submit">
		  		        提交
		  		      </van-button>
		  		    </view>
		  		  </van-form>
		  </view>
		  
	  </view>
	 
	  
  </view>
  <Tabbar />
</template>

<script setup lang="ts">
import Tabbar from '@/components/Tabbar'

import { ref } from 'vue';
	const username = ref('');
    const password = ref('');
	const fileList = ref([
		
	])
	const tooken = ref(false);
	const upclick = ref(null)

	//上传头像
	const afterRead = (urls:any)=>{
		console.log(urls);
		console.log("asdaw");
	}
	
	const onSubmit = ()=>{
		
	}
</script>

<style lang="less" scoped="scoped">
@root_vw: 750;
.get_vw(@vw){
	@sty: (@vw/@root_vw) * 100vw;
}

.userinfo-form{
	.context{
		.context_from{
			margin-top: .get_vw(26)[@sty];
			.from_herdimg{
				position: relative;
				margin-left: .get_vw(30)[@sty];
				width: .get_vw(160)[@sty];
				height: .get_vw(160)[@sty];
				.herdimg_image{
					position: relative;
					top: .get_vw(0)[@sty];
					.imags{
						width: .get_vw(160)[@sty];
						height: .get_vw(160)[@sty];
					}
				}
				.herdimg_text{
					width: .get_vw(396)[@sty];
					height: .get_vw(33)[@sty];
					font-size: .get_vw(24)[@sty];
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #007BFC;
					line-height: .get_vw(33)[@sty];
					position: absolute;
					top:0;
					bottom:0;
					margin: auto .get_vw(172)[@sty];;
				}
			}
			.van_groups{
				margin-left: .get_vw(30)[@sty];
				.van-cell{
					padding-left: 0;
						/deep/ #from_user,/deep/ #from_pass{
							width: .get_vw(690)[@sty];
							height: .get_vw(88)[@sty];
							background: #F1F2F6;
							padding-left: .get_vw(40)[@sty];
					}
					&:after{
					transform: scaleY(0);
					}
				}
				
			}
			.from_sub{
				width: .get_vw(600)[@sty];
				height: .get_vw(88)[@sty];
				background: #2489F4;
				border-radius: .get_vw(44)[@sty];
				margin: .get_vw(120)[@sty] auto;
			}
		}
		.header_title{
			.header_text{
				width: .get_vw(560)[@sty];
				height: .get_vw(40)[@sty];
				font-size: .get_vw(28)[@sty];
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #424242;
				line-height: .get_vw(40)[@sty];
				margin-top: .get_vw(41)[@sty];
				margin-left: .get_vw(30)[@sty];
			}
			.title{
				width: .get_vw(288)[@sty];
				height: .get_vw(50)[@sty];
				font-size: .get_vw(36)[@sty];
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #112950;
				line-height: .get_vw(50)[@sty];
				margin-top: .get_vw(35)[@sty];
				color: rgba(17, 41, 80, 1);
				margin-left: .get_vw(30)[@sty];
			}
		}
	}
}
</style>
