web3-202226701037/chexnet-master-MP/pages/login/login.vue

<template>
	<view>
		<view v-if="register" style="font-size: 15px; font-weight:550;">
			<view class="top-back"></view>
			<view class="container">
				<view class="content">	
					<view class="margin-top" >
						<uv-gap height="10" ></uv-gap>
						
						<!-- <p style="font-size: 25px;">个人信息</p> -->
						<uv-divider class="head-text" text="个人资料" textSize="26" textColor="#000"></uv-divider>
						
						<uv-gap height="10" ></uv-gap>
						
						<view class="margin-top"><!-- 昵称 -->
							<view class="title">昵称</view>
							<uv-gap height="10" ></uv-gap>
							
							<view class="flex justify-between">
								<input maxlength=20 class="" type="nickname" style="width: 60%;" v-model="user.name" placeholder-style="color: #cccccc; font-size: 24px; font-weight: 100;" placeholder="请输入昵称" />
								<image src="../../static/img/user.png" style="background-color: #fff;width: 15vw;height: 15vw;margin: 0 30px 5px;"></image>
							</view>
						</view>
						<uv-divider customStyle="margin: 0 0"></uv-divider>
						
						<uv-gap height="20" ></uv-gap>
						
						<view><!-- 性别 -->
							<view class="">
								<view class="title">性别</view>
								<uv-gap height="10" ></uv-gap>
								<view class="flex justify-between">
									<input placeholder="请选择性别" disabled="disabled" style="width: 60%;" name="input" v-model="gender" placeholder-style="color: #cccccc; font-size: 24px; font-weight: 100;" @click="changegender"></input>
									<image @click="confirm({'indexs': [0]})" src="../../static/img/man.png" style="background-color: #fff;width: 15vw;height: 15vw;"></image>
									<image @click="confirm({'indexs': [1]})" src="../../static/img/woman.png" style="background-color: #fff;width: 15vw;height: 15vw;"></image>
								</view>
							</view>
							<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
						</view>
						<uv-divider customStyle="margin: 0 0"></uv-divider>
						
						<uv-gap height="20" ></uv-gap>
						
						<view class="" style="margin-bottom: -20upx;"><!-- 年龄 -->
							<view class="title">年龄</view>
							<uv-gap height="10" ></uv-gap>
							<input class="weui-input" type="number" v-model="user.age" placeholder-style="color: #cccccc; font-size: 24px; font-weight: 100;" placeholder="请输入年龄" />
						</view>
						<uv-divider customStyle="margin: 0 0"></uv-divider>
						
						<uv-gap height="10" ></uv-gap>
						
					</view>	
					<uv-modal width=260 ref="modal" title="请将信息填写完整"  @confirm="confirm"></uv-modal>				
				</view>
				
				<uv-button @click="update()" customStyle="position: fixed; bottom: 40px;width: calc(100vw - 30px);" shape="circle" size="large" color="#1296db">保存</uv-button>
			</view>
		</view>
		<view v-else>
			<button style="background-color:#07c160; width: 65%; color: white; font-size: 20px; font-weight:550;
			margin-top: 50%;" @click="login()">
			<text style="font-size: 23px; padding-right: 5px;" class="cuIcon-weixin"></text>微信一键登陆
			</button>	
		</view>
	</view>
</template>

<script>
	import website from '@/data/website.js';
	export default {
		data() {
			return {
				user:{
					name: '',
					gender: '',
					age: '',
				},
				gender: '',
				columns: [['男','女']],
				register:0,
				request:1,
			}
		},
		methods: {	
			changegender() {
				this.$refs.picker.open();
			},
			confirm(e) {
				this.user.gender = e['indexs'][0];
				this.gender = this.user.gender === 0 ? '男' : '女';
			},
			bindblur(e) {
				console.log('获取微信昵称', e);
				this.name = e.detail.value; // 获取微信昵称
			},
			login(){
				if(this.request){
					this.request = 0;
					uni.showLoading({title: '加载中...'});
					console.log('this.user: ',this.user);
					this.$user_api.user_login()
						.then((res) => {
							uni.hideLoading();
							if(res == 'new'){
								this.register = 1;
								this.request = 1;
							}	
							if(res == 'old'){
								uni.showToast({duration:1000,icon:'success',title: '登陆成功 !'});
								setTimeout(() => {this.request = 1; uni.navigateBack();}, 1300);
							}
						}).catch((err) => {  
							this.request = 1;
							uni.hideLoading();
							uni.showToast({icon:"error",title: '登陆失败 !'});
						});
				}
			},
			update(){
				if(this.user.name.length > 0){
					//用户名必须由1到20个字符组成，并且只能包含字母和数字。
					const regex = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$/;
					const isValid = regex.test(this.user.name);
					
					if (isValid) {
						console.log("用户名有效");
						
						if(this.request){
							this.request = 0;
							uni.showLoading({title: '加载中...'});
							this.$user_api.user_update(this.$util.removeNullValues(this.user))
								.then((res) => {
									uni.hideLoading();
									uni.showToast({duration:1000,icon:'success',title: '保存成功 !'});
									setTimeout(() => {this.request = 1; uni.navigateBack();}, 1300);
									
								}).catch((err) => {  
									this.request = 1;
									uni.hideLoading();
									uni.showToast({icon:"error",title: '保存失败 !'});
								});
						}
						
					} else {
						console.log("用户名无效");
						uni.showToast({duration:1500,icon:"none",title: '用户名只能包含字母和数字'});
					}
				}
				else{
					uni.showToast({duration:1500,icon:"none",title: '请输入用户名'});
				}
			}
		}
	}
</script>

<style>
	page {
		height: 100vh;
	}
	.top-back{
		height: 25px;
		background-color: #1296db;
		color: #fff;
		margin-bottom: -5vh;
	}
	.top-back p{
		height: 7.5vh;
		display: flex; /* 使用flex布局来实现居中 */
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
		font-size: 20px;
		letter-spacing: 10px;
		margin-left: 10px;
		font-weight: 600;
	}
	
	.container {
	  padding: 0 15px;
	  border-radius: 25px;
	  border: none;
	  background-color: #ffffff;
	}
	.head-text{
		letter-spacing: 5px;
		font-weight: 600;
	}
	.title{
		letter-spacing: 2px;
		color: #8c92ad;
		font-size: 18px;
	}
	input {
		letter-spacing: 1px;
	    width: 100%;
		height: 8vh;
	    padding-bottom: 5px;
	    font-size: 24px;
		font-weight: 600;
		font-weight: 400;
		color: #000;
	    outline: none; /* 移除聚焦时的默认边框 */
	}
	.content {
	  padding: 0 20rpx;
	  border-radius: 20rpx;
	}
	.content image:active {
		transform: translateY(2px) translateX(2px);
	}

</style>