From 450c6d021e339b46e6978f50ee7b5fe3eb8e7167 Mon Sep 17 00:00:00 2001
From: AnHanTech <admin@xixingwl.cn>
Date: Thu, 9 Feb 2023 21:00:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=99=BB=E5=BD=95=20?=
 =?UTF-8?q?=E6=B3=A8=E5=86=8C=201?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: AnHanTech <admin@xixingwl.cn>
---
 components/ywx-auth-model/ywx-auth-model.vue | 147 ++++++++++++-------
 1 file changed, 95 insertions(+), 52 deletions(-)

diff --git a/components/ywx-auth-model/ywx-auth-model.vue b/components/ywx-auth-model/ywx-auth-model.vue
index 07b0289..a2badfe 100644
--- a/components/ywx-auth-model/ywx-auth-model.vue
+++ b/components/ywx-auth-model/ywx-auth-model.vue
@@ -1,74 +1,81 @@
 <template>
 	<view>
 		<button @click="open">关闭</button>
-		<uni-popup ref="popupLogin" :mask-click="false" type="bottom">
-			<view class="content">
-				<uni-forms ref="form" :modelValue="formData" :rules="rules">
-					<uni-forms-item label="姓名" name="name">
-						<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
-					</uni-forms-item>
-					<uni-forms-item label="邮箱" name="email">
-						<uni-easyinput type="text" v-model="formData.email" placeholder="请输入用户名" />
-					</uni-forms-item>
-				</uni-forms>
-				<button @click="submit">Submit</button>
-				<view class="footer">
-					<uni-icons type="weixin" color="#00aa00" size="48"></uni-icons>
-					<uni-icons type="qq" color="#686868" size="48"></uni-icons>
-				</view>
-			</view>
-		</uni-popup>
-		<!-- <uni-popup ref="popupReg" :mask-click="false" type="bottom"> -->
+		<!-- <uni-popup ref="popupLogin" :mask-click="false" type="bottom"> -->
 		<view class="content">
-			<text>用户注册</text>
-			<uni-forms ref="form" :modelValue="formDataReg" :rules="rules">
-				<uni-forms-item label="头像" name="avatarUrl" labelWidth="80">
-					<button type="primary" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain>
-						<image class="avatar" :src="formDataReg.avatarUrl"></image>
-					</button>
+			<uni-forms ref="loginform" :modelValue="formData" :rules="rules" errShowType="modal">
+				<uni-forms-item name="account">
+					<uni-easyinput prefixIcon="person" type="text" v-model="formData.account" placeholder="请输入账号" />
 				</uni-forms-item>
-				<uni-forms-item label="昵称" name="nickname" labelWidth="80">
-					<uni-easyinput type="nickname" placeholder="请输入昵称" v-model="formDataReg.nickname"  suffixIcon="phone">
-					</uni-easyinput>
-				</uni-forms-item>
-				<uni-forms-item label="电话" name="mobile" labelWidth="80">
-					<uni-easyinput placeholder="请输入昵称" v-model="formDataReg.mobile" suffixIcon="phone"></uni-easyinput>
-					<button size="mini" type="primary" open-type="getPhoneNumber"
-						@getphonenumber="getPhoneNumber" plain>使用微信手机号</button>
-				</uni-forms-item>
-				<uni-forms-item label="密码" name="password" labelWidth="80">
-					<uni-easyinput type="password" placeholder="请输入密码" v-model="formDataReg.password"  suffixIcon="phone">
-					</uni-easyinput>
+				<uni-forms-item name="password">
+					<uni-easyinput prefixIcon="locked" type="password" v-model="formData.password"
+						placeholder="请输入密码" />
 				</uni-forms-item>
 			</uni-forms>
-			<button @click="submit">Submit</button>
+			<button @click="submitLogin">立 即 登 录</button>
+			<view class="footer">
+				<uni-icons type="weixin" color="#00aa00" size="48"></uni-icons>
+				<uni-icons type="qq" color="#686868" size="48"></uni-icons>
+			</view>
 		</view>
 		<!-- </uni-popup> -->
+		<uni-popup ref="popupReg" :mask-click="false" type="bottom">
+			<view class="content">
+				<text>用户注册</text>
+				<uni-forms ref="regForm" :modelValue="formDataReg" :rules="rules" errShowType="modal">
+					<uni-forms-item name="avatarUrl">
+						<button type="primary" class="avatar-wrapper" open-type="chooseAvatar"
+							@chooseavatar="onChooseAvatar" plain>
+							<image class="avatar" :src="formDataReg.avatarUrl"></image>
+						</button>
+					</uni-forms-item>
+					<uni-forms-item name="nickname">
+						<uni-easyinput prefixIcon="person" type="nickname" placeholder="请输入 您的昵称"
+							v-model="formDataReg.nickname">
+						</uni-easyinput>
+					</uni-forms-item>
+					<uni-forms-item name="mobile">
+						<uni-easyinput prefixIcon="phone" placeholder="请输入 手机号" v-model="formDataReg.mobile">
+						</uni-easyinput>
+						<button size="mini" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
+							plain>使用微信手机号</button>
+					</uni-forms-item>
+					<uni-forms-item name="password">
+						<uni-easyinput prefixIcon="locked" type="password" placeholder="请输入 用户密码"
+							v-model="formDataReg.password" suffixIcon="phone">
+						</uni-easyinput>
+					</uni-forms-item>
+				</uni-forms>
+				<button @click="submitReg">立 即 注 册</button>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
-	import {mapGetters} from 'vuex'
+	import {
+		mapGetters
+	} from 'vuex'
 	export default {
 		name: "ywxAuthModel",
 		computed: {
 			...mapGetters({
-			  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
-			  sessionKey: 'getSessionKey'
+				// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
+				sessionKey: 'getSessionKey'
 			})
 		},
 		data() {
 			return {
 				// 表单数据
 				formData: {
-					name: 'LiMing',
-					email: 'dcloud@email.com'
+					account: 'LiMing',
+					password: 'dcloud@email.com'
 				},
 				formDataReg: {
 					nickname: '',
 					avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
-					mobile:'',
-					password:""
+					mobile: '',
+					password: ""
 				},
 				rules: {
 					// 对name字段进行必填验证
@@ -113,26 +120,50 @@
 
 				this.formDataReg.avatarUrl = avatarUrl
 			},
+			submitLogin(loginform) {
+				let self = this;
+				this.$refs.loginform.validate().then(res => {
+					console.log('表单数据信息：', res);
+					self.$ajax.post("User/login", self.formData)
+					.then(e => {
+						if(e.code == 0)
+							uni.reLaunch({
+								url: "/pages/tabbar/home/home"
+							})
+
+					});
+				}).catch(err => {
+					console.log('表单错误信息：', err);
+				})
+			},
+			submitReg(loginform) {
+				let self = this;
+				this.$refs.loginform.validate().then(res => {
+					console.log('表单数据信息：', res);
+				}).catch(err => {
+					console.log('表单错误信息：', err);
+				})
+			},
 			open() {
 				this.$refs.popupReg.open()
 			},
 			close() {
 				this.$refs.popup.close()
 			},
-			submit(){},
+			submit() {},
 			getPhoneNumber(e) {
 				console.log(e.detail)
 				console.log(e.detail.errMsg) // 判断用户是否允许获取手机号
 				console.log(e.detail.iv) // 参数 iv
 				console.log(e.detail.encryptedData) // 参数encryptedData
 				if (e.detail.errMsg == "getPhoneNumber:ok") { // 用户允许或去手机号
-					uni.$ajax("/WechatMini/decrypt",{
+					uni.$ajax("/WechatMini/decrypt", {
 						encryptedData: e.detail.encryptedData,
 						iv: e.detail.iv,
 						sessionKey: this.sessionKey,
 						openId: this.openId,
-					}).then(res=>{
-						this.formDataReg.mobile  = res.data.phoneNumber
+					}).then(res => {
+						this.formDataReg.mobile = res.data.phoneNumber
 						console.log(res.data)
 					});
 				}
@@ -143,7 +174,7 @@
 
 <style>
 	.content {
-		padding: 35rpx;
+		padding: 55rpx;
 		background-color: aliceblue;
 	}
 
@@ -153,16 +184,28 @@
 		justify-content: space-evenly;
 		padding: 30rpx;
 	}
-	.avatar-wrapper{
+
+	.avatar-wrapper {
 		display: flex;
 		align-items: center;
 		width: 300rpx;
-		padding: 20rpx  5rpx;
-		
+		padding: 20rpx 5rpx;
+
 	}
+
 	.avatar {
 		width: 260rpx;
 		height: 260rpx;
 		margin: auto;
 	}
+
+	.uni-forms-item button {
+		line-height: 36rpx;
+	}
+
+	.uni-forms-item {
+		position: relative;
+		display: flex;
+		margin-bottom: 10rpx;
+	}
 </style>