完善登录 注册 1

Signed-off-by: AnHanTech <admin@xixingwl.cn>

components/ywx-auth-model/ywx-auth-model.vue

@@ -1,54 +1,61 @@
 <template>
 	<view>
 		<button @click="open">关闭</button>
-		<uni-popup ref="popupLogin" :mask-click="false" type="bottom">
+		<!-- <uni-popup ref="popupLogin" :mask-click="false" type="bottom"> -->
 		<view class="content">
-				<uni-forms ref="form" :modelValue="formData" :rules="rules">
+			<uni-forms ref="loginform" :modelValue="formData" :rules="rules" errShowType="modal">
-					<uni-forms-item label="姓名" name="name">
+				<uni-forms-item name="account">
-						<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
+					<uni-easyinput prefixIcon="person" type="text" v-model="formData.account" placeholder="请输入账号" />
 				</uni-forms-item>
-					<uni-forms-item label="邮箱" name="email">
+				<uni-forms-item name="password">
-						<uni-easyinput type="text" v-model="formData.email" placeholder="请输入用户名" />
+					<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> -->
-		<!-- <uni-popup ref="popupReg" :mask-click="false" type="bottom"> -->
+		<uni-popup ref="popupReg" :mask-click="false" type="bottom">
 			<view class="content">
 				<text>用户注册</text>
-			<uni-forms ref="form" :modelValue="formDataReg" :rules="rules">
+				<uni-forms ref="regForm" :modelValue="formDataReg" :rules="rules" errShowType="modal">
-				<uni-forms-item label="头像" name="avatarUrl" labelWidth="80">
+					<uni-forms-item name="avatarUrl">
-					<button type="primary" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain>
+						<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 label="昵称" name="nickname" labelWidth="80">
+					<uni-forms-item name="nickname">
-					<uni-easyinput type="nickname" placeholder="请输入昵称" v-model="formDataReg.nickname"  suffixIcon="phone">
+						<uni-easyinput prefixIcon="person" type="nickname" placeholder="请输入 您的昵称"
+							v-model="formDataReg.nickname">
 						</uni-easyinput>
 					</uni-forms-item>
-				<uni-forms-item label="电话" name="mobile" labelWidth="80">
+					<uni-forms-item name="mobile">
-					<uni-easyinput placeholder="请输入昵称" v-model="formDataReg.mobile" suffixIcon="phone"></uni-easyinput>
+						<uni-easyinput prefixIcon="phone" placeholder="请输入 手机号" v-model="formDataReg.mobile">
-					<button size="mini" type="primary" open-type="getPhoneNumber"
+						</uni-easyinput>
-						@getphonenumber="getPhoneNumber" plain>使用微信手机号</button>
+						<button size="mini" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
+							plain>使用微信手机号</button>
 					</uni-forms-item>
-				<uni-forms-item label="密码" name="password" labelWidth="80">
+					<uni-forms-item name="password">
-					<uni-easyinput type="password" placeholder="请输入密码" v-model="formDataReg.password"  suffixIcon="phone">
+						<uni-easyinput prefixIcon="locked" type="password" placeholder="请输入 用户密码"
+							v-model="formDataReg.password" suffixIcon="phone">
 						</uni-easyinput>
 					</uni-forms-item>
 				</uni-forms>
-			<button @click="submit">Submit</button>
+				<button @click="submitReg">立 即 注 册</button>
 			</view>
-		<!-- </uni-popup> -->
+		</uni-popup>
 	</view>
 </template>
 
 <script>
-	import {mapGetters} from 'vuex'
+	import {
+		mapGetters
+	} from 'vuex'
 	export default {
 		name: "ywxAuthModel",
 		computed: {
@@ -61,14 +68,14 @@
 			return {
 				// 表单数据
 				formData: {
-					name: 'LiMing',
+					account: 'LiMing',
-					email: 'dcloud@email.com'
+					password: 'dcloud@email.com'
 				},
 				formDataReg: {
 					nickname: '',
 					avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
-					mobile:'',
+					mobile: '',
-					password:""
+					password: ""
 				},
 				rules: {
 					// 对name字段进行必填验证
@@ -113,25 +120,49 @@
 
 				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=>{
+					}).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;
 
 	}
+
 	.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>