You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
355 lines
9.6 KiB
355 lines
9.6 KiB
<template> |
|
<view class="page"> |
|
<view class="wrap"> |
|
<image class="logo" src="@/static/image/logo.png" mode="widthFix"></image> |
|
<view class="hello">欢迎登录职站商城</view> |
|
<template v-if="isLogin"> |
|
<button class="btn phone" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"> |
|
<image src="@/static/image/phone.png" mode="widthFix"></image> |
|
{{ isReg ? '获取手机号' : '绑定手机'}} |
|
</button> |
|
<view class="tips">未注册或未绑定职站商城的手机号，将帮你注册新账号</view> |
|
</template> |
|
<template v-else> |
|
<view class="btn wechat" @click="login"> |
|
快捷登录 |
|
</view> |
|
</template> |
|
|
|
<view class="agree"> |
|
<uni-data-checkbox class="check" multiple v-model="agree" :localdata="agreeData"></uni-data-checkbox> |
|
<text @click="toAgreement(0)">《用户服务协议》</text> |
|
<text @click="toAgreement(1)">《用户隐私协议》</text> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { login, userBinding, getSessionKey, queryPartnerAccount, douYinLogin, douYinLoginByOpenid, douYinUserBinding } from '@/apis/modules/user.js' |
|
import WXBizDataCrypt from '@/libs/WXBizDataCrypt' |
|
export default { |
|
data() { |
|
return { |
|
isDy: uni.getSystemInfoSync().uniPlatform === 'mp-toutiao', // 抖音小程序标识 |
|
agree: [], |
|
agreeData: [{ |
|
text: '同意', |
|
value: 1 |
|
}], |
|
isLogin: false, // 是否已登录 |
|
isReg: false, // 是否是注册 |
|
sessionKey: '', |
|
openid: '', |
|
unionid: '', |
|
submiting: false |
|
} |
|
}, |
|
onShow() { |
|
// uni.setStorageSync('token', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyIiwiaWF0IjoxNjg2NzExNTA5LCJleHAiOjE2ODY3NTQ3MDksImFjY291bnRJZCI6IjEyNTU4In0.SX1sNFtb2JiCufgTz3ZmQkcJ-FtVci7Hp0DFd_mVk8E') |
|
// 先授权用户信息，再授权手机号 |
|
this.checkLogin() |
|
}, |
|
methods: { |
|
// 检查登录状态 |
|
checkLogin() { |
|
if (uni.getStorageSync('token')) { |
|
this.toIndex() |
|
} else { |
|
uni.clearStorageSync() |
|
this.isLogin = false |
|
} |
|
}, |
|
// 授权用户信息 |
|
login() { |
|
this.isReg = false |
|
if (this.agree.length) { |
|
if (this.submiting) return false |
|
const that = this |
|
uni.getUserProfile({ |
|
lang: 'zh_CN', |
|
desc: '登录', |
|
success: ({ userInfo }) => { |
|
uni.login({ |
|
success: async ({ code }) => { |
|
if (code) { |
|
this.submiting = true |
|
|
|
// 抖音登录 |
|
if (this.isDy) { |
|
try { |
|
const res = await douYinLogin(code) |
|
const { data, status } = res |
|
this.submiting = false |
|
this.sessionKey = data.sessionKey |
|
this.openid = data.openid |
|
this.unionid = data.unionid |
|
uni.setStorageSync('sessionKey', data.sessionKey) |
|
uni.setStorageSync('openid', data.openid) |
|
|
|
// const res1 = await douYinLoginByOpenid('_000P6jr9bt8gW0ySNSzGsNBnCB0er4KtN3M') |
|
// 如果没有绑定手机号，则显示绑定按钮，引导用户绑定，否则，直接跳到首页 |
|
if (data.state === 'login') { |
|
this.toIndex() |
|
uni.setStorageSync('token', data.token) |
|
} else { |
|
this.isLogin = true |
|
// this.isReg = true |
|
} |
|
} catch (e) { |
|
this.submiting = false |
|
} |
|
} else { |
|
// 微信小程序登录 |
|
try { |
|
const res = await login({ |
|
code, |
|
avatarUrl: userInfo.avatarUrl |
|
}) |
|
const { data, status } = res |
|
this.submiting = false |
|
// 用户不存在，则让用户授权手机号，直接去注册 |
|
if (status == 10028) { |
|
// 这里需要再调一次uni的login，因为code用过了一次，已经失效了 |
|
uni.login({ |
|
success: ({ code }) => { |
|
getSessionKey({ |
|
code, |
|
}).then(({ sessionKey }) => { |
|
this.sessionKey = sessionKey.session_key |
|
this.openid = sessionKey.openid |
|
this.isLogin = true |
|
}).catch(e => {}) |
|
this.isReg = true |
|
} |
|
}) |
|
} else { |
|
const e = data.sessionKey |
|
this.sessionKey = e.session_key |
|
this.openid = e.openid |
|
this.unionid = e.unionid |
|
uni.setStorageSync('sessionKey', e.session_key) |
|
uni.setStorageSync('openid', e.openid) |
|
// 如果没有绑定手机号，则显示绑定按钮，引导用户绑定，否则，直接跳到首页 |
|
if (data.state === 'login') { |
|
this.toIndex() |
|
uni.setStorageSync('token', data.token) |
|
} else { |
|
this.isLogin = true |
|
} |
|
} |
|
} catch (e) { |
|
this.submiting = false |
|
} |
|
} |
|
} else { |
|
this.submiting = false |
|
that.$util.errMsg('登录失败！') |
|
} |
|
} |
|
}) |
|
}, |
|
fail(res) { |
|
that.$util.errMsg('登录授权失败！') |
|
} |
|
}) |
|
} else { |
|
this.$util.errMsg('请先阅读勾选协议！') |
|
} |
|
}, |
|
// 绑定手机号 |
|
async onGetPhoneNumber(e){ |
|
if (this.submiting) return false |
|
const { encryptedData, iv } = e.detail |
|
// 获取手机号有两种方法，1.前端使用js完成；2.使用接口完成 (抖音) |
|
const appId = this.isDy ? 'tt2192572fbea04fe601' : uni.getAccountInfoSync().miniProgram.appId |
|
const pc = new WXBizDataCrypt(appId , this.sessionKey) |
|
const data = pc.decryptData(encryptedData , iv) |
|
this.submiting = true |
|
const phone = data.phoneNumber |
|
if (this.isReg) { // 注册 |
|
this.submiting = false |
|
this.$util.to(`../reg/reg?openid=${this.openid}&phone=${phone}`) |
|
} else { // 登录绑定手机号 |
|
try { |
|
const fn = this.isDy ? douYinUserBinding : userBinding |
|
const res = await fn({ |
|
openid: this.openid, |
|
phone, |
|
unionid: this.unionid, |
|
platformId: 4 |
|
}) |
|
const { token, status } = res |
|
if (status == 10014) { |
|
// 这里需要再调一次uni的login，因为code用过了一次，已经失效了 |
|
uni.login({ |
|
success: ({ code }) => { |
|
getSessionKey({ |
|
code, |
|
}).then(({ sessionKey }) => { |
|
this.sessionKey = sessionKey.session_key |
|
this.openid = sessionKey.openid |
|
this.$util.to(`../reg/reg?openid=${this.openid}&phone=${phone}`) |
|
}).catch(e => {}) |
|
this.isReg = true |
|
} |
|
}) |
|
} else { |
|
this.submiting = false |
|
uni.setStorageSync('token', token) |
|
this.toIndex() |
|
} |
|
} catch (e) { |
|
this.submiting = false |
|
uni.showToast({ |
|
title: e.message, |
|
icon: 'none' |
|
}) |
|
} |
|
} |
|
}, |
|
// 注册申请授权 |
|
toReg() { |
|
this.isReg = true |
|
if (this.agree.length) { |
|
const that = this |
|
uni.getUserProfile({ |
|
lang: 'zh_CN', |
|
desc: '登录', |
|
success: ({ userInfo }) => { |
|
uni.setStorageSync('userName', userInfo.nickName) |
|
uni.setStorageSync('avatar', userInfo.avatarUrl) |
|
uni.login({ |
|
success: ({ code }) => { |
|
if (code) { |
|
this.submiting = true |
|
getSessionKey({ |
|
code, |
|
}).then(({ sessionKey }) => { |
|
this.sessionKey = sessionKey.session_key |
|
this.openid = sessionKey.openid |
|
this.submiting = false |
|
this.isLogin = true |
|
}).catch(e => { |
|
this.submiting = false |
|
}) |
|
} else { |
|
this.submiting = false |
|
that.$util.errMsg('登录失败！') |
|
} |
|
} |
|
}) |
|
}, |
|
fail(res) { |
|
that.$util.errMsg('登录授权失败！') |
|
} |
|
}) |
|
} else { |
|
this.$util.errMsg('请先阅读勾选协议！') |
|
} |
|
}, |
|
toAgreement(id) { |
|
this.$util.to(id ? `/order/privacyAgreement/privacyAgreement` : `/order/serviceAgreement/serviceAgreement`) |
|
}, |
|
// 跳转到首页 |
|
toIndex() { |
|
uni.reLaunch({ |
|
url: '../home/home' |
|
}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.page { |
|
min-height: calc(100vh - 170rpx); |
|
padding-top: 170rpx; |
|
background: url(@/static/image/login1.png) 0 0/175rpx auto no-repeat, |
|
url(@/static/image/login2.png) bottom right/123rpx auto no-repeat; |
|
overflow: hidden; |
|
} |
|
.wrap { |
|
position: relative; |
|
height: 60vh; |
|
padding: 214rpx 74rpx 28rpx; |
|
margin: 0 61rpx; |
|
text-align: center; |
|
background-color: #fff; |
|
border-radius: 20rpx; |
|
.logo { |
|
width: 393rpx; |
|
} |
|
.hello { |
|
margin: 36rpx 0; |
|
font-size: 28rpx; |
|
color: #333; |
|
} |
|
.tips { |
|
margin-top: 30rpx; |
|
font-size: 26rpx; |
|
color: #adadad; |
|
text-align: left; |
|
} |
|
.btn { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: 100%; |
|
height: 88rpx; |
|
font-size: 32rpx; |
|
border-radius: 10rpx; |
|
image { |
|
width: 50rpx; |
|
margin-right: 15rpx; |
|
} |
|
} |
|
.wechat { |
|
margin-bottom: 38rpx; |
|
color: #fff; |
|
background-color: #007EFF; |
|
} |
|
.phone { |
|
color: #007EFF; |
|
border: 1px solid #007EFF; |
|
background-color: #fff; |
|
image { |
|
width: 40rpx; |
|
} |
|
} |
|
.reg { |
|
font-size: 28rpx; |
|
color: #e61717; |
|
text-align: right; |
|
} |
|
.agree { |
|
position: absolute; |
|
bottom: 28rpx; |
|
left: 0%; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: 100%; |
|
text-align: center; |
|
font-size: 24rpx; |
|
color: #ccc; |
|
text { |
|
color: #007EFF; |
|
} |
|
} |
|
/deep/.check { |
|
.checklist-box { |
|
margin: 0; |
|
} |
|
.checkbox__inner { |
|
width: 40rpx !important; |
|
height: 40rpx !important; |
|
border-radius: 50% !important; |
|
} |
|
.checkbox__inner-icon { |
|
top: 8rpx !important; |
|
left: 14rpx !important; |
|
} |
|
} |
|
} |
|
</style>
|
|
|