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

注释

Browse Source
This commit is contained in:
xixingwl
2023-02-04 08:50:14 +08:00
commit 98cfbb0b77
89 changed files with 9508 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
pages/login/login.vue Normal file
View File

@@ -0,0 +1,277 @@
<template>
<view
style="height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;box-sizing: border-box;">
<button class="avatar-wrapper" open-type="chooseAvatar" @tap="onChooseAvatar">
<image class="avatar" :src="avatarUrl"></image>
</button>
<input type="nickname" class="weui-input" placeholder="请输入昵称" />
<button type="primary" block open-type="getUserInfo" @getuserinfo="appLoginWx">
微信一键登录
</button>
<button v-show="showPhone" type="primary" block open-type="getPhoneNumber" @getphonenumber="getPhone">
授权电话
</button>
</view>
</template>
<script>
export default {
data() {
return {
avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
openid: "",
loginstate: "0",
openid: "",
userEntity: null,
terminal: "",
osVersion: "",
phoneNumber: "",
showModal: false, //定义登录弹窗
}
},
onLoad: function() {},
methods: {
onChooseAvatar(e) {
console.log(e)
const {
avatarUrl
} = e.detail
this.avatarUrl = avatarUrl
},
// 授权获取微信用户信息
appLoginWx(res) {
console.log(res)
// 获取用户信息成功
if (res.detail.errMsg === 'getUserProfile:ok' || res.detail.errMsg === 'getUserInfo:ok') {
this.userInfo = res.detail.userInfo;
let _this = this;
uni.showLoading({
title: '获取用户信息...',
mask: true
});
// 获取jsCode
uni.login({
provider: 'weixin',
success(resLogin) {
console.log(resLogin);
if (resLogin.errMsg === "login:ok") {
// 获取jsCode成功，通过jsCode调用微信api获取用户openId
_this.wechatLogin(resLogin.code);
return
}
uni.hideLoading();
uni.showToast({
title: '获取用户信息失败，请重试',
icon: 'none',
duration: 2000
});
},
fail() {
uni.hideLoading();
uni.showToast({
title: '获取用户信息失败，请重试',
icon: 'none',
duration: 2000
});
}
});
}
},
wechatLogin(wxCode) {
// 这里一般让后端去调用微信api获取openId等信息，前端调用的话像会多下面这个请求
// 因为若果是后端去调用的话，后端拿到微信api返回的openId后可直接去数据库查询判断该用户是否已注册，
// 如果已经注册了就直接返回注册的用户信息，
// 如果未注册，则后端需要返回openId、sessionKeyde等信息，
// 然后前端页面弹出授权获取手机号码的按钮，用户点击后拿到手机号后进行解密后再把信息提交给后台进行注册
const params = {
appid: this.appId, // 小程序的appId（注意需要企业的appId，并且你目前是开发人员，不然后续无法获取到手机号码）
secret: '***************', // 企业小程序的secret
js_code: wxCode, // 注意jsCode动态获取的，使用一次后将失效
grant_type: 'authorization_code' // 这个参数固定写死
}
that.$ajax('index/index', {
code: resLogin.code
}).then(res => {
console.log(res)
})
// 调用微信api获取openid等信息
this.$get('https://api.weixin.qq.com/sns/jscode2session', params).then(res => {
console.log(res)
if (res.errcode) {
console.log('获取openId失败')
uni.hideLoading();
uni.showToast({
title: '获取用户信息失败',
icon: 'none',
duration: 2000
});
return
}
this.openId = res.openid
this.sessionKey = res.session_key
this.unionid = res.unionid
// 调用后端接口判断用户是否已注册过
this.$post('/login', {
openId: this.openId
}).then(res => {
uni.hideLoading();
// 若返回的参数中有token说明已经注册过
if (res.status === 200 && res.data.token) {
uni.showToast({
title: '登录成功！',
duration: 1000
});
// 缓存用户信息
uni.setStorageSync("token", res.data.token);
uni.setStorageSync("userInfo", res.data);
// 登录成功返回上一页
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 1000)
return
}
// 走到这里说明没有注册过，需要弹出授权获取用户手机号的弹框按钮让用户授权
if (res.status == 200) {
this.showPhone = true
return
}
uni.showToast({
title: res.message,
icon: 'none',
duration: 2000
});
}).catch(() => {
uni.hideLoading();
uni.showToast({
title: '登录失败，请稍后重试',
icon: 'none',
duration: 2000
});
})
}).catch(err => {
console.log(err)
uni.hideLoading();
uni.showToast({
title: '获取用户信息失败',
icon: 'none',
duration: 2000
});
})
// 下面注释的就是后端去调用微信api获取用户openId的提供给前端的接口
// this.$post('/login', {
// jsCode: wxCode
// }).then(res => {
// console.log(res);
// uni.hideLoading();
// // 若直接返回token说明已经注册
// if (res.status === 200 && res.data.token) {
// uni.showToast({
// title: '登录成功！',
// duration: 1000
// });
// uni.setStorageSync("token", res.data.token);
// this.saveUserInfo(res.data);
// setTimeout(() => {
// // this.goTabBar('/pages/index')
// uni.navigateBack({
// delta: 1
// })
// }, 1000)
// return
// }
// if (res.status == 200) {
// this.openId = res.data.openid
// this.sessionKey = res.data.session_key
// this.unionid = res.data.unionid
// this.id = res.data.id
// this.showPhone = true
// return
// }
// uni.showToast({
// title: res.message,
// icon: 'none',
// duration: 2000
// });
// }).catch(() => {
// uni.hideLoading();
// uni.showToast({
// title: '登录失败，请稍后重试',
// icon: 'none',
// duration: 2000
// });
// })
},
// 授权电话号回调 (这里千万注意：小程序必须要完成 微信认证才能获取到加密的手机号码)
getPhone(res) {
console.log(res)
if (res.detail.errMsg === 'getPhoneNumber:ok') {
const encryptedData = res.detail.encryptedData
console.log(123, sessionKey, encryptedData, iv)
const pc = new WXBizDataCrypt(this.appId, this.sessionKey)
const data = pc.decryptData(encryptedData, res.detail.iv) // 这里使用解密手机号的方法
console.log('解密后 data: ', data.phoneNumber)
this.phone = data.phoneNumber
this.showPhone = false
this.loginHandle()
} else {
this.showPhone = false
uni.showToast({
title: '获取手机号失败，请重试',
icon: 'none',
duration: 2000
});
}
},
// 用户注册
loginHandle() {
const data = {
"account": this.phone,
"icon": this.userInfo.avatarUrl,
"id": this.id,
"nickname": this.userInfo.nickName,
"openId": this.openId,
"phone": this.phone,
"unionid": this.unionid
}
console.log(data)
uni.showLoading({
title: '登录中...',
mask: true
});
this.$post('/login/login', data).then(res => {
console.log(res);
uni.hideLoading();
if (res.status == 200) {
uni.showToast({
title: '登录成功！',
duration: 1000
});
uni.setStorageSync("token", res.data.token);
uni.setStorageSync("userInfo", res.data);
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 1000)
} else {
uni.showToast({
title: res.message,
icon: 'none',
duration: 2000
});
}
});
},
}
}
</script>
<style>
</style>