gxwebsoft/aishangjia-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

第一次提交

Browse Source
This commit is contained in:
gxwebsoft
2023-08-04 13:14:48 +08:00
commit 1b923e5cff
1030 changed files with 128016 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

456
pages/login/components/main.vue Executable file
View File

@@ -0,0 +1,456 @@
<template>
<view class="container">
<!-- 页面头部 -->
<view class="header">
<!-- <view class="title">
<text>账号登录</text>
</view> -->
<view class="logo">
<image src="https://file.wsdns.cn/20230801/84480e0c65b044ebb869f8f2754bc0b1.png" mode="widthFix"></image>
</view>
<!-- <view class="sub-title">
<text>未注册的手机号登录后将自动注册</text>
</view> -->
</view>
<!-- 表单 -->
<!-- #ifdef H5 -->
<view class="login-form">
<!-- 手机号 -->
<view class="form-item">
<input class="form-item--input" type="text" v-model="mobile" maxlength="20"
placeholder="请输入登录账号|手机号码|邮箱" />
</view>
<view class="form-item">
<input class="form-item--input" type="password" v-model="password" maxlength="30"
placeholder="请输入登录密码" />
</view>
<!-- 图形验证码 -->
<view class="form-item" style="display: none;">
<input class="form-item--input" type="text" v-model="captchaCode" maxlength="5"
placeholder="请输入图形验证码" />
<view class="form-item--parts">
<view class="captcha" @click="getCaptcha()">
<image class="image" :src="captcha.base64"></image>
</view>
</view>
</view>
<!-- 短信验证码 -->
<view class="form-item" style="display: none;">
<input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
<view class="form-item--parts">
<view class="captcha-sms" @click="handelSmsCaptcha()">
<text v-if="!smsState" class="activate">获取验证码</text>
<text v-else class="un-activate">重新发送({{ times }})秒</text>
</view>
</view>
</view>
<!-- 登录按钮 -->
<view class="login-button" @click="handleLogin">
<text>立即登录 找对象</text>
</view>
<view class="agree">
<view class="item">
<radio value="index" :checked="disabled" @click="onRadio" />已阅读并同意以下协议
<view class="xieyi" @click="$push('pages/article/detail/detail?id=114')">《服务协议》</view>
<view class="xieyi" @click="$push('pages/article/detail/detail?id=115')">《隐私政策》</view>
</view>
</view>
<!-- 企业微信授权登录 -->
<!-- <view class="login-button-ww" @click="onWWLogin">
<image src="@/static/login-wx-work.png"></image>
</view> -->
</view>
<!-- #endif -->
<!-- 微信授权手机号一键登录 -->
<!-- #ifdef MP-WEIXIN -->
<MpWeixinMobile :isParty="isParty" :partyData="partyData" />
<!-- #endif -->
<!-- <div id="ww_login" style="width: 100%; height: 100%"></div> -->
</view>
</template>
<script>
import store from '@/store'
import storage from '@/utils/storage'
import {
ACCESS_TOKEN,
USER_ID,
} from '@/store/mutation-types'
import {
appId,
tenantId
} from '@/config.js'
import {
getCaptcha,
login,
sendSmsCaptcha
} from '@/api/login.js'
import * as Verify from '@/utils/verify'
import http from '@/api'
import MpWeixinMobile from './mp-weixin-mobile'
// 倒计时时长(秒)
const times = 60
// 表单验证场景
const GET_CAPTCHA = 10
const SUBMIT_LOGIN = 20
export default {
components: {
MpWeixinMobile
},
props: {
// 是否存在第三方用户信息
isParty: {
type: Boolean,
default: () => false
},
// 第三方用户信息数据
partyData: {
type: Object
}
},
data() {
return {
// 正在加载
isLoading: false,
// 图形验证码信息
captcha: {},
// 短信验证码发送状态
smsState: false,
// 倒计时
times,
// 手机号
mobile: '',
password: '',
// 图形验证码
captchaCode: '',
// 短信验证码
smsCode: '',
disabled: false
}
},
/**
* 生命周期函数--监听页面加载
*/
created() {
// 获取图形验证码
this.getCaptcha()
},
methods: {
openXieyi(url){
console.log("url: ",url);
this.$navTo(url)
},
// 获取图形验证码
getCaptcha() {
const app = this
getCaptcha()
.then(result => app.captcha = result.data)
},
// 点击发送短信验证码
handelSmsCaptcha() {
const app = this
if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
app.sendSmsCaptcha()
}
},
// 表单验证
formValidation(scene = GET_CAPTCHA) {
const app = this
// 验证获取短信验证码
if (scene === GET_CAPTCHA) {
if (!app.validteMobile(app.mobile) || !app.validteCaptchaCode(app.captchaCode)) {
return false
}
}
// 验证提交登录
if (scene === SUBMIT_LOGIN) {
if (!app.validteMobile(app.mobile) || !app.validteSmsCode(app.smsCode)) {
return false
}
}
return true
},
// 验证手机号
validteMobile(str) {
if (Verify.isEmpty(str)) {
this.$toast('请先输入手机号')
return false
}
if (!Verify.isMobile(str)) {
// this.$toast('请输入正确格式的手机号')
// return false
}
return true
},
// 验证图形验证码
validteCaptchaCode(str) {
if (Verify.isEmpty(str)) {
this.$toast('请先输入图形验证码')
return false
}
return true
},
// 验证短信验证码
validteSmsCode(str) {
if (Verify.isEmpty(str)) {
// this.$toast('请先输入短信验证码')
// return false
}
return true
},
onRadio(){
this.disabled = !this.disabled
},
// 请求发送短信验证码接口
sendSmsCaptcha() {
const app = this
app.isLoading = true
sendSmsCaptcha({
phone: app.mobile
})
.then(result => {
// 显示发送成功
app.$toast(result.message)
// 执行定时器
app.timer()
})
.catch(() => app.getCaptcha())
.finally(() => app.isLoading = false)
},
// 执行定时器
timer() {
const app = this
app.smsState = true
const inter = setInterval(() => {
app.times = app.times - 1
if (app.times <= 0) {
app.smsState = false
app.times = times
clearInterval(inter)
}
}, 1000)
},
// 点击登录
handleLogin() {
const app = this
if (!app.isLoading && app.formValidation(SUBMIT_LOGIN)) {
app.submitLogin()
}
},
// 确认登录
submitLogin() {
const app = this
app.isLoading = true
console.log("登录: ", '登录');
store.dispatch('Login', {
username: app.mobile,
password: app.password
})
.then(result => {
// 一键登录成功
app.$toast(result.message)
// 跳转回原页面
setTimeout(() => {
uni.reLaunch({
url: '/pages/index/index',
complete(res) {
console.log(res)
}
})
}, 1000)
// // 显示登录成功
// app.$toast(result.message)
// // 跳转回原页面
// uni.redirectTo({
// url: 'pages/user/user'
// })
// setTimeout(() => {
// app.onNavigateBack(1)
// }, 2000)
})
.catch(err => {
// 跳转回原页面
if (err.result.data.isBack) {
setTimeout(() => app.onNavigateBack(1), 2000)
}
})
.finally(() => app.isLoading = false)
},
/**
* 登录成功-跳转回原页面
*/
onNavigateBack(delta = 1) {
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack({
delta: Number(delta || 1)
})
} else {
this.$navTo('pages/index/index')
}
},
onWWLogin() {
}
}
}
</script>
<style lang="scss" scoped>
.container {
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
// 页面头部
.header {
margin-bottom: 5rpx;
.title {
color: #191919;
font-size: 54rpx;
}
.sub-title {
margin-top: 20rpx;
color: #b3b3b3;
font-size: 28rpx;
}
}
// 输入框元素
.form-item {
display: flex;
padding: 18rpx;
border-bottom: 1rpx solid #f3f1f2;
margin-bottom: 30rpx;
height: 96rpx;
&--input {
font-size: 28rpx;
letter-spacing: 1rpx;
flex: 1;
height: 100%;
}
&--parts {
min-width: 100rpx;
height: 100%;
}
// 图形验证码
.captcha {
height: 100%;
.image {
display: block;
width: 192rpx;
height: 100%;
}
}
// 短信验证码
.captcha-sms {
font-size: 28rpx;
line-height: 50rpx;
padding-right: 20rpx;
.activate {
color: $main-bg;
}
.un-activate {
color: #9e9e9e;
}
}
}
.logo {
display: flex;
justify-content: center;
width: 180rpx;
height: 180rpx;
overflow: hidden;
border-radius: 20rpx;
margin: auto;
image {
width: 180rpx;
}
}
// 登录按钮
.login-button {
width: 100%;
height: 86rpx;
margin-top: 80rpx;
background: linear-gradient(#ff0077, #4d0d68);
// background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
color: $main-text;
border-radius: 80rpx;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
letter-spacing: 5rpx;
display: flex;
justify-content: center;
align-items: center;
}
.login-button-ww {
margin-top: 80rpx;
display: flex;
justify-content: center;
image {
height: 96rpx;
}
}
.agree{
text-align: center;
width: 750rpx;
color: rgba(75,13,99,1);
.item{
display: flex;
align-items: center;
justify-content: center;
image{
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
.xieyi{
text-decoration:underline;
}
}
}
</style>

312
pages/login/components/mp-weixin-mobile.vue Executable file
View File

@@ -0,0 +1,312 @@
<template>
<view class="weixin-login">
<!-- 微信授权手机号一键登录 -->
<view class="wechat-auth agree">
<button class="btn-normal" v-if="!disabled" @click="onAgree">
<view class="wechat-auth-container">
<!-- <image class="icon" src="../../../static/channel/wechat.png"></image> -->
<text class="title">手机号快捷登录</text>
</view>
</button>
<button v-else class="btn-normal" open-type="getPhoneNumber"
@getphonenumber="handelMpWeixinMobileLogin($event)" @click="clickPhoneNumber">
<view class="wechat-auth-container">
<!-- <image class="icon" src="../../../static/channel/wechat.png"></image> -->
<text class="title">手机号快捷登录</text>
</view>
</button>
</view>
<view class="agree-text" @click="onRadio">
<view class="item">
<!-- <image src="../../../static/icon/g.svg"></image> -->
<label>
<radio value="index" :checked="disabled" />已阅读并同意
</label>
<view class="xieyi" @click.stop="$push('pages/article/detail/detail?id=114')">《服务协议》</view>
<view class="xieyi" @click.stop="$push('pages/article/detail/detail?id=115')">《隐私政策》</view>
</view>
</view>
<u-popup :show="showAgree" mode="center" :round="10" :closeable="true" @close="showAgree = false">
<view class="offline">
<view class="head">
<view class="info">
<text class="title">请阅读并同意《用户协议》《隐私政策》</text>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import store from '@/store'
import storage from '@/utils/storage'
import {
isEmpty,
inArray
} from '@/utils/util'
export default {
props: {
// 是否存在第三方用户信息
isParty: {
type: Boolean,
default: () => false
},
// 第三方用户信息数据
partyData: {
type: Object
}
},
data() {
return {
// 微信小程序登录凭证 (code)
// 提交到后端，用于换取openid
code: '',
disabled: false,
showAgree: false
}
},
methods: {
// 按钮点击事件: 获取微信手机号按钮
// 实现目的: 在getphonenumber事件触发之前获取微信登录code
// 因为如果在getphonenumber事件中获取code的话,提交到后端的encryptedData会存在解密不了的情况
async clickPhoneNumber() {
this.code = await this.getCode()
},
// 微信授权获取手机号一键登录
// getphonenumber事件的回调方法
async handelMpWeixinMobileLogin(e) {
const {
detail
} = e;
const app = this
if (detail.errMsg != 'getPhoneNumber:ok') {
console.log('微信授权获取手机号失败', detail.errMsg)
// app.$error(detail.errMsg)
return
}
if (detail.errMsg == 'getPhoneNumber:ok') {
app.isLoading = true
store.dispatch('LoginMpWxMobile', {
code: detail.code,
encryptedData: detail.encryptedData,
iv: detail.iv,
isParty: app.isParty,
partyData: app.partyData,
refereeId: Number(storage.get('refereeId'))
})
.then(result => {
console.log("result: ", result);
// 显示登录成功
app.$toast(result.message)
// 跳转回原页面
setTimeout(() => {
uni.reLaunch({
url: '/pages/index/index',
complete(res) {
console.log(res)
}
})
}, 1000)
})
.catch(err => {
console.log("err: ", err);
// const resultData = err.result.data
// 显示错误信息
app.$error(err.message)
// if (isEmpty(resultData)) {
// app.$toast(err.result.message)
// }
// 跳转回原页面
// if (resultData.isBack) {
// setTimeout(() => app.onNavigateBack(1), 2000)
// }
})
.finally(() => app.isLoading = false)
}
},
onRadio() {
this.disabled = !this.disabled
},
// 获取微信登录的code
// https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
getCode() {
return new Promise((resolve, reject) => {
uni.login({
provider: 'weixin',
success: res => {
console.log('code', res.code)
resolve(res.code)
},
fail: reject
})
})
},
iAgree() {
this.disabled = !this.disabled
this.showAgree = false
},
onAgree() {
this.$error('请阅读并同意(勾选)《用户协议》《隐私政策》')
},
/**
* 登录成功-跳转回原页面
*/
onNavigateBack(delta = 1) {
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack({
delta: Number(delta || 1)
})
} else {
this.$navTo('pages/index/index')
}
}
}
}
</script>
<style lang="scss" scoped>
.agree {
background: linear-gradient(#27b0fd, #3f72f4);
// background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
}
// 微信授权登录
.wechat-auth {
width: 600rpx;
height: 86rpx;
margin: 100rpx auto 50rpx auto;
color: $main-text;
border-radius: 12rpx;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
letter-spacing: 5rpx;
display: flex;
justify-content: center;
align-items: center;
.btn-normal {
width: 580rpx;
}
.btn-normal-no {
width: 580rpx;
}
button {
background: none !important;
}
.wechat-auth-container {
display: flex;
justify-content: center;
display: flex;
align-items: center;
color: $main-text;
background: none !important;
.title {
color: #f3f3f3;
}
}
// 登录按钮
.login-button {
width: 100%;
height: 86rpx;
margin-top: 80rpx;
background: linear-gradient(#ff0077, #4d0d68);
// background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
color: $main-text;
border-radius: 80rpx;
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
letter-spacing: 5rpx;
display: flex;
justify-content: center;
align-items: center;
}
.icon {
width: 38rpx;
height: 38rpx;
margin-right: 15rpx;
}
.title {
font-size: 28rpx;
color: #666666;
}
}
.offline {
border-radius: 20rpx;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
height: 120rpx;
line-height: 120rpx;
padding: 30rpx;
.head {
padding-top: 10rpx;
width: 600rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
font-size: 28rpx;
font-weight: 600;
}
.sub-title {
padding-top: 8rpx;
padding-left: 40rpx;
color: #3f72f4;
font-size: 26rpx;
}
}
.desc {
color: #3f72f4;
display: flex;
font-size: 26rpx;
line-height: 3rem;
}
}
.agree-text {
text-align: center;
width: 750rpx;
font-size: 26rpx;
.item {
display: flex;
align-items: center;
justify-content: center;
image {
width: 30rpx;
height: 30rpx;
margin-right: 10rpx;
}
.xieyi {
color: #3f72f4;
// text-decoration:underline;
}
}
}
</style>

243
pages/login/components/mp-weixin.vue Executable file
View File

@@ -0,0 +1,243 @@
<template>
<view class="container">
<view class="wechatapp">
<view class="header">
<!-- <open-data class="avatar" type="userAvatarUrl"></open-data> -->
<image class="image"
:src="storeInfo && storeInfo.image_url ? storeInfo.image_url : '/static/default-avatar.png'"></image>
</view>
</view>
<view class="auth-title">申请获取以下权限</view>
<view class="auth-subtitle">获得你的公开信息（昵称、头像等）</view>
<view class="login-btn">
<!-- 获取微信用户信息 -->
<button class="button btn-normal" @click.stop="getUserProfile">授权登录</button>
</view>
<view class="no-login-btn">
<button class="button btn-normal" @click="handleCancel">暂不登录</button>
</view>
</view>
</template>
<script>
import store from '@/store'
import { isEmpty } from '@/utils/util'
import SettingModel from '@/common/model/Setting'
export default {
data() {
return {
// 商城基本信息
storeInfo: undefined,
// 微信小程序登录凭证 (code)
// 提交到后端，用于换取openid
code: ''
}
},
created() {
// 获取商城基本信息
this.getStoreInfo()
},
methods: {
// 获取商城基本信息
getStoreInfo() {
SettingModel.item('store').then(store => this.storeInfo = store)
// SettingModel.h5Url(true)
},
// 获取code
// https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
getCode() {
return new Promise((resolve, reject) => {
uni.login({
provider: 'weixin',
success: res => {
console.log('code', res.code)
resolve(res.code)
},
fail: reject
})
})
},
// 获取微信用户信息(新版)
getUserProfile() {
const app = this
wx.canIUse('getUserProfile') && wx.getUserProfile({
lang: 'zh_CN',
desc: '获取用户相关信息',
success({ userInfo }) {
console.log('用户同意了授权')
console.log('userInfo：', userInfo)
// 授权成功事件
app.onAuthSuccess(userInfo)
},
fail() {
console.log('用户拒绝了授权')
}
})
},
// 授权成功事件
// 这里分为两个逻辑:
// 1.将code和userInfo提交到后端，如果存在该用户 则实现自动登录，无需再填写手机号
// 2.如果不存在该用户, 则显示注册页面, 需填写手机号
// 3.如果后端报错了, 则显示错误信息
async onAuthSuccess(userInfo) {
const app = this
// 提交到后端
store.dispatch('LoginMpWx', {
partyData: {
code: await app.getCode(),
oauth: 'MP-WEIXIN',
userInfo
},
refereeId: store.getters.refereeId
})
.then(result => {
// 一键登录成功
app.$toast(result.message)
// 跳转回原页面
setTimeout(() => {
uni.reLaunch({
url: 'pages/index/index'
})
}, 1000)
// setTimeout(() => {
// app.$navTo('pages/user/user')
// }, 2000)
})
.catch(err => {
const resultData = err.result.data
// 显示错误信息
if (isEmpty(resultData)) {
app.$toast(err.result.message)
}
// 跳转回原页面
if (resultData.isBack) {
setTimeout(() => app.onNavigateBack(1), 2000)
}
// 判断还需绑定手机号
if (resultData.isBindMobile) {
app.onEmitSuccess(userInfo)
}
})
},
// 将oauth提交给父级
// 这里要重新获取code, 因为上一次获取的code不能复用(会报错)
async onEmitSuccess(userInfo) {
const app = this
app.$emit('success', {
oauth: 'MP-WEIXIN', // 第三方登录类型: MP-WEIXIN
code: await app.getCode(), // 微信登录的code, 用于换取openid
userInfo // 微信用户信息
})
},
/**
* 暂不登录
*/
handleCancel() {
// 跳转回原页面
this.onNavigateBack()
},
/**
* 登录成功-跳转回原页面
*/
onNavigateBack(delta = 1) {
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack({
delta: Number(delta || 1)
})
} else {
this.$navTo('pages/index/index')
}
}
}
}
</script>
<style lang="scss" scoped>
.container {
padding: 0 60rpx;
font-size: 32rpx;
background: #fff;
min-height: 100vh;
}
.wechatapp {
padding: 80rpx 0 48rpx;
border-bottom: 1rpx solid #e3e3e3;
margin-bottom: 72rpx;
text-align: center;
.header {
width: 190rpx;
height: 190rpx;
border: 4rpx solid #fff;
margin: 0 auto 0;
border-radius: 50%;
overflow: hidden;
box-shadow: 2rpx 0 10rpx rgba(50, 50, 50, 0.3);
.image {
display: block;
width: 100%;
height: 100%;
}
}
}
.auth-title {
color: #585858;
font-size: 34rpx;
margin-bottom: 40rpx;
}
.auth-subtitle {
color: #888;
margin-bottom: 88rpx;
font-size: 28rpx;
}
.login-btn {
padding: 0 20rpx;
.button {
height: 88rpx;
background: #04be01;
color: #fff;
font-size: 30rpx;
border-radius: 999rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.no-login-btn {
margin-top: 20rpx;
padding: 0 20rpx;
.button {
height: 88rpx;
background: #dfdfdf;
color: #fff;
font-size: 30rpx;
border-radius: 999rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>

124
pages/login/components/wx-official.vue Executable file
View File

@@ -0,0 +1,124 @@
<template>
<!-- 跳转到微信授权地址 -->
</template>
<script>
import queryStringify from '@/js_sdk/queryStringify'
import store from '@/store'
import { isEmpty, urlEncode } from '@/utils/util'
import * as Api from '@/api/wxofficial'
export default {
data() {
return {
// 页面来源是否为微信回调
isCallback: false
}
},
created() {
// 处理微信回调
this.onCallback()
// 跳转到微信授权
this.redirectUrl()
},
methods: {
// 处理微信回调
onCallback() {
// 接收微信传来的参数
const wxParam = queryStringify.parse(window.location.search)
if (!isEmpty(wxParam)) {
const url = window.location.href.replace(window.location.search, '')
window.location.href = url + '?' + urlEncode(wxParam)
return
}
// 获取code参数
const query = this.$route.query
if (isEmpty(query) || !query.code) {
return
}
// 请求后端获取微信用户信息
this.isCallback = true
Api.oauthUserInfo(query.code)
.then(({ data }) => {
console.log('用户同意了授权')
console.log('userInfo：', data)
// 授权成功事件
this.onAuthSuccess(data)
})
},
// 授权成功事件
// 这里分为两个逻辑:
// 1.将openid和userInfo提交到后端，如果存在该用户 则实现自动登录，无需再填写手机号
// 2.如果不存在该用户, 则显示注册页面, 需填写手机号
// 3.如果后端报错了, 则显示错误信息
async onAuthSuccess({ userInfo, encryptedData, iv }) {
const app = this
// 提交到后端
store.dispatch('LoginWxOfficial', {
partyData: { oauth: 'H5-WEIXIN', userInfo, encryptedData, iv },
refereeId: store.getters.refereeId
})
.then(result => {
// 一键登录成功
app.$toast(result.message)
// 跳转回原页面
setTimeout(() => app.onNavigateBack(), 2000)
})
.catch(err => {
const resultData = err.result.data
// 显示错误信息
if (isEmpty(resultData)) {
app.$toast(err.result.message)
}
// 判断还需绑定手机号
if (resultData.isBindMobile) {
app.onEmitSuccess({ userInfo, encryptedData, iv })
}
})
},
// 跳转到微信授权
redirectUrl() {
if (this.isCallback) {
return
}
const callbackUrl = window.location.href
Api.oauthUrl(callbackUrl)
.then(result => {
const url = result.data.redirectUrl
window.location.href = url
})
},
// 将oauth提交给父级
async onEmitSuccess({ userInfo, encryptedData, iv }) {
this.$emit('success', {
oauth: 'H5-WEIXIN', // 第三方登录类型: H5-WEIXIN
userInfo,
encryptedData,
iv
})
},
/**
* 登录成功-跳转回原页面
*/
onNavigateBack(delta = 1) {
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack({
delta: Number(delta || 1)
})
} else {
this.$navTo('pages/index/index')
}
}
}
}
</script>

102
pages/login/index.vue Executable file
View File

@@ -0,0 +1,102 @@
<template>
<view v-if="isLoad" class="login" :style="appThemeStyle">
<MpWeixin v-if="isMpWeixinAuth" @success="onGetUserInfoSuccess" />
<!-- <WxOfficial v-else-if="isWxOfficialAuth" @success="onGetUserInfoSuccess" /> -->
<Main v-else :isParty="isParty" :partyData="partyData" />
</view>
</template>
<script>
import Main from './components/main'
import MpWeixin from './components/mp-weixin'
import WxOfficial from './components/wx-official'
import SettingKeyEnum from '@/common/enum/setting/Key'
import SettingModel from '@/common/model/Setting'
export default {
components: {
Main,
MpWeixin,
WxOfficial
},
data() {
return {
// 数据加载完成 [防止在微信小程序端onLoad和view渲染同步进行]
isLoad: false,
// 注册设置 (后台设置)
setting: {},
// 是否显示微信小程序授权登录
isMpWeixinAuth: false,
// 是否显示微信公众号授权登录
isWxOfficialAuth: false,
// 是否存在第三方用户信息
isParty: false,
// 第三方用户信息数据
partyData: {}
}
},
/**
* 生命周期函数--监听页面加载
*/
async onLoad(options) {
// 获取注册设置
// await this.getRegisterSetting()
// 设置当前是否显示第三方授权登录
await this.setShowUserInfo()
// 数据加载完成
this.isLoad = true
},
methods: {
// 获取注册设置 [后台-客户端-注册设置]
async getRegisterSetting() {
await SettingModel.item(SettingKeyEnum.REGISTER.value, false)
.then(setting => this.setting = setting)
},
/**
* 设置当前是否显示第三方授权登录
* - 条件1: 只有对应的客户端显示获取用户信息按钮, 例如微信小程序、微信公众号
* - 条件2: 注册设置是否已开启该选项
*/
async setShowUserInfo() {
const app = this
// 判断当前客户端是微信小程序, 并且支持getUserProfile接口
const isMpWeixin = app.platform === 'MP-WEIXIN' && wx.canIUse('getUserProfile')
const isWxOfficial = app.platform === 'H5-WEIXIN'
// 判断是否显示第三方授权登录
app.isMpWeixinAuth = isMpWeixin && app.setting.isOauthMpweixin
app.isWxOfficialAuth = isWxOfficial && app.setting.isOauthWxofficial
},
// 获取到用户信息的回调函数
onGetUserInfoSuccess(result) {
// 记录第三方用户信息数据
this.partyData = result
// 显示注册页面
this.onShowRegister()
},
// 显示注册页面
onShowRegister() {
// 是否显示微信小程序授权登录
if (this.partyData.oauth === 'MP-WEIXIN') {
this.isMpWeixinAuth = false
}
// 是否显示微信小程序授权登录
if (this.partyData.oauth === 'H5-WEIXIN') {
this.isWxOfficialAuth = false
}
// 已获取到了第三方用户信息
this.isParty = true
}
}
}
</script>
<style lang="scss" scoped>
</style>