13 changed files with 342 additions and 253 deletions
-
3src/App.vue
-
12src/js/server.js
-
3src/main.js
-
14src/pages.json
-
275src/pages/index/index.vue
-
43src/store/actions.js
-
9src/store/index.js
-
13src/store/mutations.js
-
190src/subpackage/authorization/components/login.vue
-
7src/subpackage/authorization/js/api.js
-
10src/subpackage/authorization/js/server.js
-
16src/subpackage/authorization/pages/index.vue
-
BINsrc/subpackage/authorization/static/images/author_modal.png
@ -0,0 +1,190 @@ |
|||||
|
<template> |
||||
|
<view class="authorization-login" v-show="isShow"> |
||||
|
<view class="ic-author-modal"> |
||||
|
<view class="iam-title">微信授权</view> |
||||
|
<view class="iam-tip">您的信息和数据将受到保护</view> |
||||
|
<image class="iam-pic" mode="aspectFit" src="../static/images/author_modal.png"></image> |
||||
|
<view class="iam-btns"> |
||||
|
<button plain hover-class="hover-active" @click="hide">取消</button> |
||||
|
|
||||
|
<button |
||||
|
v-if="isProfile" |
||||
|
plain |
||||
|
hover-class="hover-active" |
||||
|
@click="profileConfirm" |
||||
|
>授权并登录</button> |
||||
|
<button |
||||
|
v-else |
||||
|
plain |
||||
|
hover-class="hover-active" |
||||
|
open-type="getUserInfo" |
||||
|
lang="zh_CN" |
||||
|
@getuserinfo="confirmAuthor" |
||||
|
>授权并登录</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { promisify, showModal, showNone, showLoad, hideLoad } from "@/utils/util"; |
||||
|
import { AUTHOR_API } from "../js/api"; |
||||
|
import server from "../js/server"; |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
isShow: false, |
||||
|
initData: { |
||||
|
/** |
||||
|
* @param {Object} data |
||||
|
* @param {Function} data.success |
||||
|
* @param {Function} data.fail |
||||
|
* */ |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
alert(data){ |
||||
|
this.isShow = true; |
||||
|
this.initData = data ?? {}; |
||||
|
}, |
||||
|
hide(){ |
||||
|
this.isShow = false; |
||||
|
}, |
||||
|
isProfile(){ |
||||
|
return !!uni.getUserProfile |
||||
|
}, |
||||
|
// 新获取用户信息 |
||||
|
profileConfirm(){ |
||||
|
uni.getUserProfile({ |
||||
|
lang: 'zh_CN', desc: '授权登陆', |
||||
|
success: res => { this.confirmAuthor({detail: {...res}}) }, |
||||
|
fail: err => { |
||||
|
showModal({ content: '获取用户信息失败！请重试' }); |
||||
|
console.warn('subpackage authorization components login getUserProfile Err ->', err) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
async confirmAuthor(userRes){ |
||||
|
if(!userRes.detail.userInfo){ |
||||
|
this.hide(); |
||||
|
return showModal({ content: '获取用户信息失败！请稍后重试' }); |
||||
|
} |
||||
|
|
||||
|
let loginRes = await promisify(uni.login)(); |
||||
|
if(!loginRes.code){ |
||||
|
this.hide(); |
||||
|
return showModal({ content: '获取登陆凭证失败！请稍后重试' }); |
||||
|
} |
||||
|
this.serverLogin({ userRes, loginRes }) |
||||
|
}, |
||||
|
getLoginQuery({ |
||||
|
userInfo, |
||||
|
loginRes |
||||
|
}){ |
||||
|
return { |
||||
|
appid: uni.getAccountInfoSync?.()?.miniProgram?.appId ?? '', |
||||
|
code: loginRes?.code ?? '', |
||||
|
encryptedData: userInfo?.encryptedData ?? '', |
||||
|
// is_details: 1, |
||||
|
// 后端解密错误，直接传用户信息 |
||||
|
user_info: userInfo?.userInfo ?? {}, |
||||
|
user_raw_data: userInfo?.rawData ?? {}, |
||||
|
...(userInfo?.userInfo ?? {}), |
||||
|
} |
||||
|
}, |
||||
|
serverLogin({ userRes, loginRes }){ |
||||
|
showLoad(); |
||||
|
return server.post({ |
||||
|
url: AUTHOR_API.wechatMiniAppLoginAndSync, |
||||
|
data: this.getLoginQuery({ |
||||
|
userInfo: userRes.detail, |
||||
|
loginRes |
||||
|
}), |
||||
|
isDefaultGet: false, |
||||
|
}) |
||||
|
.then(res=>{ |
||||
|
hideLoad(); |
||||
|
let _data = res.data || {}; |
||||
|
if(_data.code == 0){ |
||||
|
if(_data.data == '')return util.routeTo(`/pages/login/login`,'rL'); |
||||
|
showNone(_data?.message || '登陆成功！'); |
||||
|
this.$store.commit('setLoginState', { loginState: true, token: _data.data }); |
||||
|
this.initData?.success?.(_data); |
||||
|
this.hide(); |
||||
|
return _data; |
||||
|
}else{ |
||||
|
// util.showNone(_data.message || '后台登陆失败！'); |
||||
|
// setTimeout(_=>this.closeAuthor(), 1200); |
||||
|
return Promise.reject(_data); |
||||
|
} |
||||
|
}) |
||||
|
.catch(err=>{ |
||||
|
hideLoad(); |
||||
|
showModal({ content: err?.message || '后台登陆失败！' }); |
||||
|
console.warn('subpackage authorization components login serverLogin Err ->', err); |
||||
|
if(this.initData?.fail)return this.initData?.fail?.(err); |
||||
|
return Promise.reject(err); |
||||
|
}) |
||||
|
}, |
||||
|
cancelAuthor(){ |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.authorization-login{ |
||||
|
position: fixed; |
||||
|
left: 0; |
||||
|
top: var(--window-top); |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background-color: rgba(0, 0, 0, .5); |
||||
|
} |
||||
|
|
||||
|
.ic-author-modal{ |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
padding-top: 60upx; |
||||
|
width: 662upx; |
||||
|
height: 884upx; |
||||
|
border-radius: 10upx; |
||||
|
background-color: #fff; |
||||
|
.iam-title{ |
||||
|
margin-bottom: 22upx; |
||||
|
text-align: center; |
||||
|
@include flcw(44upx, 60upx, #1a1a1a, 500); |
||||
|
} |
||||
|
.iam-tip{ |
||||
|
margin-bottom: 52upx; |
||||
|
text-align: center; |
||||
|
@include flcw(28upx, 40upx, #9c9c9f); |
||||
|
} |
||||
|
.iam-pic{ |
||||
|
margin: 0 auto 62upx; |
||||
|
display: block; |
||||
|
width: 488upx; |
||||
|
height: 416upx; |
||||
|
} |
||||
|
.iam-btns{ |
||||
|
@include ctf(center); |
||||
|
>button{ |
||||
|
margin: 0 20upx; |
||||
|
width: 240upx; |
||||
|
height: 92upx; |
||||
|
text-align: center; |
||||
|
border-radius: 46upx; |
||||
|
border: 2upx solid $mColor; |
||||
|
@include flcw(32upx, 88upx, $mColor); |
||||
|
&+button{ |
||||
|
background-color: $mColor; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,7 @@ |
|||||
|
import { ORIGIN } from '@/js/api'; |
||||
|
|
||||
|
export const AUTHOR_API = { |
||||
|
wechatMiniAppLoginAndSync: `${ORIGIN}/assistant/WechatMiniAppGetToken`, // 小程序授权获取token，为空就登录
|
||||
|
} |
||||
|
|
||||
|
export default AUTHOR_API; |
||||
@ -0,0 +1,10 @@ |
|||||
|
import { Server } from '@/js/server'; |
||||
|
|
||||
|
class _Server extends Server { |
||||
|
constructor(props){ |
||||
|
super(props) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
export default new _Server(); |
||||
@ -0,0 +1,16 @@ |
|||||
|
<template> |
||||
|
<!-- 需要定义一个页面以及在pagesjson里声明才能生成static文件夹 --> |
||||
|
<view> </view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
page{ |
||||
|
background: #fff; |
||||
|
} |
||||
|
</style> |
||||
|
After Width: 488 | Height: 416 | Size: 14 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue