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.
492 lines
12 KiB
492 lines
12 KiB
<template> |
|
<view class="page"> |
|
<view class="wrap"> |
|
<!-- <image class="logo" src="@/static/image/logo.png" mode="widthFix"></image> --> |
|
<view class="hello">幼教产业B2B产业平台登录</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> |
|
</template> |
|
<template v-else> |
|
<view class="btn wechat" @click="login"> |
|
快捷登录 |
|
</view> |
|
</template> |
|
<view class="tips">如果没有账号会自动创建账号</view> |
|
|
|
<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> |
|
|
|
<!-- 选择角色 --> |
|
<uni-popup ref="popup" :is-mask-click="false"> |
|
<view class="type-wrap"> |
|
<view class="title-wrap"> |
|
<view class="title">请选择注册类型</view> |
|
<!-- <uni-icons class="close" type="closeempty" size="20" color="#333"></uni-icons> --> |
|
</view> |
|
|
|
<view class="types"> |
|
<view class="item" @click="toReg(5)"> |
|
<view class="icon"> |
|
<image class="img" src="http://124.71.79.122/images/miniProgram/role-icon1.png" mode="widthFix" /> |
|
</view> |
|
<view class="text">我是幼儿园</view> |
|
</view> |
|
<view class="item item2" @click="toReg(6)"> |
|
<view class="icon"> |
|
<image class="img" src="http://124.71.79.122/images/miniProgram/role-icon2.png" mode="widthFix" /> |
|
</view> |
|
<view class="text">我是供应商</view> |
|
</view> |
|
<view class="item item3" @click="toReg(7)"> |
|
<view class="icon"> |
|
<image class="img" src="http://124.71.79.122/images/miniProgram/role-icon3.png" mode="widthFix" /> |
|
</view> |
|
<view class="text">我是个人</view> |
|
</view> |
|
</view> |
|
</view> |
|
</uni-popup> |
|
|
|
<!-- 上传头像 --> |
|
<uni-popup ref="uploadAvatarPop" background-color="#fff" type="bottom" :mask-click="false"> |
|
<view class="avatar-wrap"> |
|
<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> |
|
<image class="avatar" :src="avatar ? avatar : Common.avatar" mode=""></image> |
|
</button> |
|
<view class="text">请选择头像</view> |
|
<view class="btn" @click="showPlatform">下一步</view> |
|
</view> |
|
</uni-popup> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { login, userBinding, getSessionKey, kindergartenWeChatApplication, saveCertification, loginWithPhoneNumber, updateAvatars } from '@/apis/modules/user.js' |
|
import WXBizDataCrypt from '@/libs/WXBizDataCrypt' |
|
import OSS from '@/libs/Oss/upload' |
|
import Common from '@/config/common' |
|
export default { |
|
data() { |
|
return { |
|
Common, |
|
agree: [], |
|
agreeData: [{ |
|
text: '同意', |
|
value: 1 |
|
}], |
|
isLogin: false, // 是否已登录 |
|
isReg: false, // 是否是注册 |
|
sessionKey: '', |
|
openid: '', |
|
unionid: '', |
|
code: '', |
|
phone: '', |
|
submiting: false, |
|
teamName: '', |
|
// avatar: Common.avatar, |
|
avatar: '', |
|
} |
|
}, |
|
onShow() { |
|
// uni.setStorageSync('token', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyIiwiaWF0IjoxNzA0Nzg1NDg5LCJleHAiOjE3MDU2NDk0ODksImFjY291bnRJZCI6IjQ5ODMiLCJzaG9wSWQiOjYsInBsYXRmb3JtSWQiOjV9.B0gXKl9gOEi9oSNZl8M_gGcqFXf9hAYbqtVHygDoYxM') |
|
// uni.setStorageSync('openId', 'o3hKk60jbhAuLm4K3weIgQGFmv2g') |
|
// 先授权用户信息，再授权手机号 |
|
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.setStorageSync('userName', userInfo.nickName) |
|
uni.setStorageSync('avatar', userInfo.avatarUrl) |
|
uni.login({ |
|
success: ({ code }) => { |
|
if (code) { |
|
this.submiting = true |
|
login({ |
|
code, |
|
avatarUrl: userInfo.avatarUrl, |
|
}).then(({ data }) => { |
|
const { sessionKey, state } = data |
|
this.submiting = false |
|
// 用户不存在，则让用户授权手机号，直接让用户选择角色注册 |
|
if (state === 'bind') { |
|
this.submiting = false |
|
this.code = code |
|
this.openid = sessionKey.openid |
|
this.sessionKey = sessionKey.session_key |
|
this.isLogin = true |
|
this.isReg = true |
|
} else { |
|
const e = data.sessionKey |
|
uni.setStorageSync('token', data.token) |
|
uni.setStorageSync('platformId', data.platformId) |
|
uni.setStorageSync('openId', e.openid) |
|
this.handleTab(data.platformId) |
|
this.toIndex() |
|
} |
|
}).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 WXBizDataCrypt = require('@/libs/WXBizDataCrypt') |
|
const accountInfo = uni.getAccountInfoSync() // 获取小程序appid |
|
const pc = new WXBizDataCrypt(accountInfo.miniProgram.appId , this.sessionKey) |
|
const data = pc.decryptData(encryptedData , iv) |
|
this.submiting = true |
|
const phone = data.phoneNumber |
|
this.phone = phone |
|
if (this.isReg) { // 注册 |
|
// 传手机号获取该手机号是否绑定了用户 |
|
const res = await loginWithPhoneNumber({ |
|
code: this.code, |
|
openId: this.openid, |
|
phone |
|
}) |
|
if (res.data && res.data.platformId) { |
|
uni.setStorageSync('token', res.data.token) |
|
uni.setStorageSync('platformId', +res.data.platformId) |
|
uni.setStorageSync('openId', res.data.openId) |
|
// uni.setStorageSync('teamId', data.teamId) |
|
} else { |
|
this.$refs.uploadAvatarPop.open() |
|
this.submiting = false |
|
} |
|
} else { // 登录绑定手机号 |
|
userBinding({ |
|
openid: this.openid, |
|
phone, |
|
unionid: this.unionid, |
|
platformId: 4 |
|
}).then(res => { |
|
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' |
|
}) |
|
}) |
|
} |
|
}, |
|
// 注册申请授权 |
|
async toReg(platformId) { |
|
if (this.submiting) return false |
|
this.submiting = true |
|
try { |
|
const { data } = await kindergartenWeChatApplication({ |
|
code: this.code, |
|
openId: this.openid, |
|
platformId, |
|
phone: this.phone |
|
}) |
|
this.teamName = data.teamName |
|
uni.setStorageSync('token', data.token) |
|
uni.setStorageSync('platformId', platformId) |
|
uni.setStorageSync('openId', data.openId) |
|
uni.setStorageSync('teamId', data.teamId) |
|
|
|
// 选择的是供应商或者幼儿园，则加一个未提交的审核状态 |
|
if (platformId === 5 || platformId === 6) { |
|
await saveCertification({ |
|
openId: data.openId, |
|
auditStatus: 0, |
|
platformSource: platformId, |
|
companyName: this.teamName |
|
}) |
|
} |
|
this.handleTab(platformId) |
|
|
|
// 有上传头像则调上传头像接口 |
|
if (this.avatar) { |
|
await updateAvatars({ |
|
url: this.avatar, |
|
userName: '', |
|
openId: data.openId, |
|
platformId |
|
}) |
|
} |
|
this.toIndex() |
|
} catch(e) { |
|
this.submiting = false |
|
} |
|
}, |
|
toAgreement(id) { |
|
this.$util.openFile(id) |
|
}, |
|
// 供应商需要隐藏tab里的供应商入口 |
|
handleTab(platformId) { |
|
platformId == 6 && uni.setTabBarItem({ |
|
index: 1, |
|
visible: false |
|
}) |
|
}, |
|
// 跳转到首页 |
|
toIndex() { |
|
uni.reLaunch({ |
|
url: '../index/index' |
|
}) |
|
}, |
|
// 上传头像回调 |
|
onChooseAvatar(e) { |
|
OSS(e.detail.avatarUrl, async ({ url }) => { |
|
this.avatar = url |
|
}) |
|
}, |
|
// 弹出选择角色弹框 |
|
showPlatform() { |
|
this.$refs.uploadAvatarPop.close() |
|
this.$refs.popup.open('bottom') |
|
}, |
|
} |
|
} |
|
</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: 24rpx; |
|
color: #adadad; |
|
text-align: right; |
|
} |
|
.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; |
|
} |
|
} |
|
} |
|
.type-wrap { |
|
width: 100%; |
|
padding: 30rpx 30rpx 60rpx; |
|
background-color: #fff; |
|
border-top-left-radius: 16px; |
|
border-top-right-radius: 16px; |
|
box-sizing: border-box; |
|
.title-wrap { |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
.title { |
|
font-size: 28rpx; |
|
color: #333; |
|
} |
|
.types { |
|
width: 95%; |
|
margin: 0 auto; |
|
font-size: 24rpx; |
|
color: #fff; |
|
text-align: center; |
|
} |
|
.item { |
|
display: flex; |
|
align-items: center; |
|
height: 150rpx; |
|
padding: 0 50rpx; |
|
margin-top: 30rpx; |
|
border-radius: 12px; |
|
background: url('http://124.71.79.122/images/miniProgram/role-bg1.png') 0 0/100% 100% no-repeat; |
|
box-sizing: border-box; |
|
} |
|
.icon { |
|
display: inline-flex; |
|
justify-content: center; |
|
align-items: center; |
|
padding: 10rpx; |
|
margin-right: 20rpx; |
|
background-color: #fff7f1; |
|
border-radius: 50%; |
|
} |
|
.img { |
|
width: 80rpx; |
|
} |
|
.text { |
|
font-size: 24rpx; |
|
color: #fff; |
|
} |
|
.item2 { |
|
background-image: url('http://124.71.79.122/images/miniProgram/role-bg2.png'); |
|
} |
|
.item3 { |
|
background: #ffb150; |
|
.img { |
|
width: 70rpx; |
|
} |
|
} |
|
} |
|
.avatar-wrap { |
|
padding: 30rpx 0; |
|
.avatar-btn { |
|
padding: 0; |
|
line-height: 0; |
|
border: 0 !important; |
|
background-color: transparent; |
|
outline: none; |
|
border-radius: 50%; |
|
&:after { |
|
display: none; |
|
} |
|
} |
|
.avatar { |
|
width: 120rpx; |
|
height: 120rpx; |
|
border: 0; |
|
border-radius: 50%; |
|
} |
|
.text { |
|
margin-top: 10rpx; |
|
font-size: 26rpx; |
|
text-align: center; |
|
color: #7d7d7d; |
|
} |
|
|
|
.btn { |
|
width: 300rpx; |
|
padding: 20rpx 0; |
|
margin: 30rpx auto 0; |
|
font-size: 28rpx; |
|
color: #fff; |
|
text-align: center; |
|
background-color: $uni-primary; |
|
border-radius: 20px; |
|
} |
|
} |
|
</style>
|
|
|