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