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="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"> -->
		<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-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>
			</uni-forms>
			<button @click="submit">Submit</button>
		</view>
		<!-- </uni-popup> -->
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {
		name: "ywxAuthModel",
		computed: {
			...mapGetters({
			  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
			  sessionKey: 'getSessionKey'
			})
		},
		data() {
			return {
				// 表单数据
				formData: {
					name: 'LiMing',
					email: 'dcloud@email.com'
				},
				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: '请输入正确的邮箱地址',
						}]
					}
				},
				openid: "",
				loginstate: "0",
				openid: "",
				userEntity: null,
				terminal: "",
				osVersion: "",
				phoneNumber: "",
				showPhone: false,
				showModal: false, //定义登录弹窗  
			}
		},
		onLoad: function() {},
		methods: {
			onChooseAvatar(e) {
				console.log(e)
				const {
					avatarUrl
				} = e.detail

				this.formDataReg.avatarUrl = avatarUrl
			},
			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
						console.log(res.data)
					});
				}
			}
		}
	}
</script>

<style>
	.content {
		padding: 35rpx;
		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;
	}
</style>