278 lines
8.1 KiB
Vue
278 lines
8.1 KiB
Vue
<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>
|