XiXingWL/AnHanNET-UniAPP
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加微信手机号获取注册

Browse Source 
Signed-off-by: YangWork <yang@xixingwl.cn>
This commit is contained in:
YangWork
2023-02-09 18:46:36 +08:00
parent d54351449c
commit e25dce6a72
2 changed files with 81 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
components/ywx-auth-model/ywx-auth-model.vue
View File

@@ -2,7 +2,7 @@
<view>
<button @click="open">关闭</button>
<uni-popup ref="popupLogin" :mask-click="false" type="bottom">
<view style="padding: 35rpx; background-color: aliceblue;">
<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="请输入姓名" />
@@ -12,44 +12,51 @@
</uni-forms-item>
</uni-forms>
<button @click="submit">Submit</button>
<view style="display:flex;align-items:center;justify-content:space-evenly; padding: 30rpx;">
<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 style="padding: 35rpx; background-color: aliceblue;">
<text>用户注册</text>
<uni-forms ref="form" :modelValue="formDataReg" :rules="rules">
<uni-forms-item label="姓名" name="avatarUrl">
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="formDataReg.avatarUrl"
style="width: 320rpx; height: 320rpx; margin: auto;"></image>
</button>
</uni-forms-item>
<uni-forms-item label="姓名" name="nickname">
<uni-easyinput type="nickname" placeholder="请输入昵称" v-model="formDataReg.nickname">
</uni-easyinput>
</uni-forms-item>
<uni-forms-item label="姓名" name="mobile">
<uni-easyinput placeholder="请输入昵称" v-model="formDataReg.mobile"></uni-easyinput>
<button v-show="showPhone" type="primary" block open-type="getPhoneNumber"
@getphonenumber="getPhone">
授权电话
</button>
</uni-forms-item>
</uni-forms>
<button @click="submit">Submit</button>
</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 {
// 表单数据
@@ -60,6 +67,8 @@
formDataReg: {
nickname: '',
avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
mobile:'',
password:""
},
rules: {
// 对name字段进行必填验证
@@ -101,7 +110,7 @@
const {
avatarUrl
} = e.detail
this.formDataReg.avatarUrl = avatarUrl
},
open() {
@@ -109,11 +118,51 @@
},
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>

3
store/modules/user.js
View File

@@ -23,6 +23,9 @@ export default {
},
userIsLogin(state){
return state.isLogin;
},
getSessionKey(state){
return state.sessionKey;
}
},
mutations: {