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

<template>
	<view>
		<button @click="open">关闭</button>
		<!-- <uni-popup ref="popupLogin" :mask-click="false" type="bottom"> -->
		<view class="content">
			<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 name="password">
					<uni-easyinput prefixIcon="locked" type="password" v-model="formData.password"
						placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<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,
		mapMutations
	} from 'vuex'
	export default {
		name: "ywxAuthModel",
		computed: {
			...mapGetters({
				sessionKey: 'getSessionKey',
				openId: 'getOpenId'
			})
		},
		data() {
			return {
				// 表单数据
				formData: {
					account: 'xiaoxiao',
					password: '20mylove'
				},
				formDataReg: {
					nickname: '',
					avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
					mobile: '',
					password: ""
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 3,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					// 对email字段进行必填验证
					email: {
						rules: [{
							format: 'email',
							errorMessage: '请输入正确的邮箱地址',
						}]
					}
				},

				loginstate: "0",

				userEntity: null,
				terminal: "",
				osVersion: "",
				phoneNumber: "",
				showPhone: false,
				showModal: false, //定义登录弹窗  
			}
		},
		onLoad: function() {},
		methods: {
			...mapMutations(["updateUserInfo"]),
			onChooseAvatar(e) { 
				const {
					avatarUrl
				} = e.detail
				this.formDataReg.avatarUrl = avatarUrl
			},
			submitLogin(loginform) {
				let self = this;
				// #ifdef MP-WEIXIN
				this.formData.openId = this.openId
				// #endif
				this.$refs.loginform.validate().then(res => {
					console.log('表单数据信息：', res);
					self.$ajax.post("User/login", self.formData)
						.then(e => {
							if (e.code == 0) {
								self.updateUserInfo(e.data.userinfo);
								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() {},
			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", {
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						sessionKey: this.sessionKey,
						openId: this.openId,
					}).then(res => {
						this.formDataReg.mobile = res.data.phoneNumber 
					});
				}
			}
		}
	}
</script>

<style>
	.content {
		padding: 55rpx;
		background-color: aliceblue;
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		padding: 30rpx;
	}

	.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>