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

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

@@ -2,7 +2,7 @@
<view> <view>
<button @click="open">关闭</button> <button @click="open">关闭</button>
<uni-popup ref="popupLogin" :mask-click="false" type="bottom"> <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 ref="form" :modelValue="formData" :rules="rules">
<uni-forms-item label="姓名" name="name"> <uni-forms-item label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" /> <uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
@@ -12,44 +12,51 @@
</uni-forms-item> </uni-forms-item>
</uni-forms> </uni-forms>
<button @click="submit">Submit</button> <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="weixin" color="#00aa00" size="48"></uni-icons>
<uni-icons type="qq" color="#686868" size="48"></uni-icons> <uni-icons type="qq" color="#686868" size="48"></uni-icons>
</view> </view>
</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 style="padding: 35rpx; background-color: aliceblue;"> <view class="content">
<text>用户注册</text> <text>用户注册</text>
<uni-forms ref="form" :modelValue="formDataReg" :rules="rules"> <uni-forms ref="form" :modelValue="formDataReg" :rules="rules">
<uni-forms-item label="姓名" name="avatarUrl"> <uni-forms-item label="头像" name="avatarUrl" labelWidth="80">
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> <button type="primary" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain>
<image class="avatar" :src="formDataReg.avatarUrl" <image class="avatar" :src="formDataReg.avatarUrl"></image>
style="width: 320rpx; height: 320rpx; margin: auto;"></image>
</button> </button>
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="姓名" name="nickname"> <uni-forms-item label="昵称" name="nickname" labelWidth="80">
<uni-easyinput type="nickname" placeholder="请输入昵称" v-model="formDataReg.nickname"> <uni-easyinput type="nickname" placeholder="请输入昵称" v-model="formDataReg.nickname" suffixIcon="phone">
</uni-easyinput> </uni-easyinput>
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="姓名" name="mobile"> <uni-forms-item label="电话" name="mobile" labelWidth="80">
<uni-easyinput placeholder="请输入昵称" v-model="formDataReg.mobile"></uni-easyinput> <uni-easyinput placeholder="请输入昵称" v-model="formDataReg.mobile" suffixIcon="phone"></uni-easyinput>
<button size="mini" type="primary" open-type="getPhoneNumber"
<button v-show="showPhone" type="primary" block open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" plain>使用微信手机号</button>
@getphonenumber="getPhone"> </uni-forms-item>
授权电话 <uni-forms-item label="密码" name="password" labelWidth="80">
</button> <uni-easyinput type="password" placeholder="请输入密码" v-model="formDataReg.password" suffixIcon="phone">
</uni-easyinput>
</uni-forms-item> </uni-forms-item>
</uni-forms> </uni-forms>
<button @click="submit">Submit</button> <button @click="submit">Submit</button>
</view> </view>
</uni-popup> <!-- </uni-popup> -->
</view> </view>
</template> </template>
<script> <script>
import {mapGetters} from 'vuex'
export default { export default {
name: "ywxAuthModel", name: "ywxAuthModel",
computed: {
...mapGetters({
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
sessionKey: 'getSessionKey'
})
},
data() { data() {
return { return {
// 表单数据 // 表单数据
@@ -60,6 +67,8 @@
formDataReg: { formDataReg: {
nickname: '', nickname: '',
avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
mobile:'',
password:""
}, },
rules: { rules: {
// 对name字段进行必填验证 // 对name字段进行必填验证
@@ -109,11 +118,51 @@
}, },
close() { close() {
this.$refs.popup.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> </script>
<style> <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> </style>

3
store/modules/user.js
View File

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