合并 微信小程序登录获取用户详细信息功能

This commit is contained in:
lemon橪
2021-05-21 16:48:05 +08:00
2 changed files with 62 additions and 36 deletions

View File

@@ -20,7 +20,7 @@ Lilishop 是一款Java开发基于SpringBoot的B2B2C多用户商城前端
**产品文档**需求、架构、使用、部署、开发https://docs.pickmall.cn
### 项目链接
### 项目链接(gitee)
**Java后台**https://gitee.com/beijing_hongye_huicheng/lilishop.git
@@ -30,6 +30,16 @@ Lilishop 是一款Java开发基于SpringBoot的B2B2C多用户商城前端
**docker一键部署**https://gitee.com/beijing_hongye_huicheng/docker.git
### 项目链接(github)
**Java后台**https://github.com/hongyehuicheng/lilishop.git
**Vue后台前端** https://github.com/hongyehuicheng/lilishop-ui.git
**Uni-app**https://github.com/hongyehuicheng/lilishop-uniapp.git
**docker一键部署**https://github.com/hongyehuicheng/docker.git
### 演示地址
**运营后台**https://admin-b2b2c.pickmall.cn 账号admin/123456
@@ -44,6 +54,8 @@ Lilishop 是一款Java开发基于SpringBoot的B2B2C多用户商城前端
### 3行命令搭建本地环境
温馨提示由于服务较多如果笔记本环境启动内存没有32g可能无法启动成功macbookpro 2020 16g内存启动无法成功台式机在16g内存、AMD 3700x 的ubuntu系统成功运行。
##### 下载docker脚本
`git clone https://gitee.com/beijing_hongye_huicheng/docker.git `
##### 部署基础环境
@@ -51,6 +63,10 @@ Lilishop 是一款Java开发基于SpringBoot的B2B2C多用户商城前端
##### 部署应用
`docker-compose -f docker-compose-application.yml up -d`
##### 各个地址
| API | 地址 |
| -------------- | --------------- |
| 买家api | http://127.0.0.1:8888 |
@@ -215,4 +231,4 @@ Lilishop 是一款Java开发基于SpringBoot的B2B2C多用户商城前端
</table>
### 授权
Lilishop学习免费限制商用如果需要商业使用请联系我们。QQ3409056806
Lilishop学习免费限制商用如果需要商业使用请联系我们。QQ3409056806

View File

@@ -1,7 +1,6 @@
<template>
<view class="container">
<u-modal v-model="showWxAuth" :title="projectName+'商城'" :show-confirm-button="false">
<u-modal v-model="phoneAuthPopup" :title="projectName+'商城'" :show-confirm-button="false">
<div class="tips">
为了更好地用户体验需要您授权手机号
</div>
@@ -13,15 +12,14 @@
<div class="box">
<view class="logo-info">
<text class="title">欢迎进入{{ projectName }}商城</text>
</view>
<view class="small-tips">
<view>为您提供优质服务,{{ projectName }}需要获取以下信息</view>
<view>您的公开信息昵称头像</view>
<view>您的公开信息昵称头像</view>
</view>
<view class="btns">
<button type="primary" open-type="getUserInfo" class="btn-auth"
@getuserinfo="hidenWxAuth()">确认微信授权</button>
<button type="primary" bindtap="getUserProfile" @click="getUserProfile()"
class="btn-auth">确认微信授权</button>
</view>
</div>
</view>
@@ -40,9 +38,8 @@
export default {
data() {
return {
show: true,
// 默认不显示
showWxAuth: false,
// 是否展示手机号码授权弹窗,默认第一步不展示,要先获取用户基础信息
phoneAuthPopup: false,
// 授权信息展示,商城名称
projectName: "LiLi",
//微信返回信息用于揭秘信息获取sessionkey
@@ -53,40 +50,54 @@
image: '',
};
},
components: {},
props: {},
//微信小程序进入页面先获取code否则几率出现code和后续交互数据不对应情况
mounted() {
let that = this;
//获取code
uni.login({
success: (res) => {
that.code = res.code;
},
});
},
methods: {
hidenWxAuth() {
this.showWxAuth = true;
let that = this;
//------执行Login---------
uni.login({
success: (res) => {
that.code = res.code;
uni.getUserInfo({
provider: "weixin",
success: function(infoRes) {
that.nickName = infoRes.userInfo.nickName;
that.image = infoRes.userInfo.avatarUrl;
},
});
},
});
//获取用户信息
getUserProfile(e) {
let that = this;
// 推荐使用wx.getUserProfile获取用户信息开发者每次通过该接口获取用户个人信息均需用户确认
uni.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
that.nickName = res.userInfo.nickName;
that.image = res.userInfo.avatarUrl;
//展示手机号获取授权
this.phoneAuthPopup = true;
},
fail: (res) => {
that.nickName = "微信用户";
that.image =
"https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132";
//展示手机号获取授权
this.phoneAuthPopup = true;
}
})
},
//获取手机号授权
getPhoneNumber(e) {
let that = this;
let iv = e.detail.iv;
let encryptedData = e.detail.encryptedData;
if (!e.detail.encryptedData) {
uni.showToast({
title: "请授予手机号码获取权限!",
title: "请授予手机号码权限,手机号码会和会员系统用户绑定",
icon: "none",
});
return;
}
let code = this.code;
let image = this.image;
}
let code = this.code;
let image = this.image;
let nickName = this.nickName;
mpAutoLogin({
encryptedData,
@@ -115,7 +126,6 @@
});
},
},
};