yanyan
3 years ago
7 changed files with 153 additions and 199 deletions
@ -1,106 +0,0 @@ |
|||||
<template> |
|
||||
<view class="login-container"> |
|
||||
<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons> |
|
||||
<button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button> |
|
||||
<text class="tips-text">登录后尽享更多权益</text> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import { mapMutations, mapState } from 'vuex' |
|
||||
|
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
|
|
||||
}; |
|
||||
}, |
|
||||
computed: { |
|
||||
...mapState('m_user', ['redirectInfo']) |
|
||||
}, |
|
||||
methods: { |
|
||||
...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']), |
|
||||
// 用户授权之后，获取用户的基本信息 |
|
||||
getUserInfo(e) { |
|
||||
console.log(e) |
|
||||
|
|
||||
if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！') |
|
||||
|
|
||||
console.log(e.detail.userInfo) |
|
||||
this.updateUserInfo(e.detail.userInfo) |
|
||||
|
|
||||
this.getToken(e.detail) |
|
||||
}, |
|
||||
async getToken(info) { |
|
||||
// 获取 code 对应的值 |
|
||||
const [err, res] = await uni.login().catch(err => err) |
|
||||
|
|
||||
if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败！') |
|
||||
|
|
||||
// 准备参数 |
|
||||
const query = { |
|
||||
code: res.code, |
|
||||
encryptedData: info.encryptedData, |
|
||||
iv: info.iv, |
|
||||
rawData: info.rawData, |
|
||||
signature: info.signature |
|
||||
} |
|
||||
|
|
||||
const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query) |
|
||||
if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！') |
|
||||
|
|
||||
// 直接把 token 保存到 vuex 中 |
|
||||
this.updateToken(loginResult.message.token) |
|
||||
this.navigateBack() |
|
||||
}, |
|
||||
navigateBack() { |
|
||||
if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') { |
|
||||
uni.switchTab({ |
|
||||
url: this.redirectInfo.from, |
|
||||
complete: () => { |
|
||||
this.updateRedirectInfo(null) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
.login-container { |
|
||||
height: 750rpx; |
|
||||
background-color: #F8F8F8; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
position: relative; |
|
||||
overflow: hidden; |
|
||||
|
|
||||
&::after { |
|
||||
content: ' '; |
|
||||
display: block; |
|
||||
width: 100%; |
|
||||
height: 40px; |
|
||||
background-color: white; |
|
||||
position: absolute; |
|
||||
bottom: 0; |
|
||||
left: 0; |
|
||||
border-radius: 100%; |
|
||||
transform: translateY(50%); |
|
||||
} |
|
||||
|
|
||||
.btn-login { |
|
||||
width: 90%; |
|
||||
border-radius: 100px; |
|
||||
margin: 15px 0; |
|
||||
background-color: #C00000; |
|
||||
} |
|
||||
|
|
||||
.tips-text { |
|
||||
font-size: 12px; |
|
||||
color: gray; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,74 +0,0 @@ |
|||||
<template> |
|
||||
<view class="search"> |
|
||||
<view class="search-title">请选择演练场景</view> |
|
||||
<view class="my-search-container" @click="searchBoxHandler"> |
|
||||
<view class="my-search-box" :style="{ 'border-radius': radius + 'px' }"> |
|
||||
<uni-search-bar @confirm="search" @input="input"></uni-search-bar> |
|
||||
<!-- 使用 uni-ui 提供的图标组件 --> |
|
||||
<uni-icons type="search" size="17" color="" ></uni-icons> |
|
||||
<text class="placeholder">搜索场景</text> |
|
||||
</view> |
|
||||
</view> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
// 背景颜色 |
|
||||
bgcolor: { |
|
||||
type: String, |
|
||||
default: 'white' |
|
||||
}, |
|
||||
// 圆角尺寸 |
|
||||
radius: { |
|
||||
type: Number, |
|
||||
default: 4 // px |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
|
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
searchBoxHandler() { |
|
||||
this.$emit('click') |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
.search-title{ |
|
||||
font-family: 'Courier New', Courier, monospace; |
|
||||
color: #67676a; |
|
||||
margin-left: 8px; |
|
||||
margin-top: 6px; |
|
||||
} |
|
||||
.my-search-container { |
|
||||
|
|
||||
height: 50px; |
|
||||
// background-color: #C00000; |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
padding: 0 10px; |
|
||||
|
|
||||
.my-search-box { |
|
||||
height: 36px; |
|
||||
border: 0.5px solid #969696; |
|
||||
background-color: #FFFFFF; |
|
||||
// border-radius: 18px; |
|
||||
width: 100%; |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
|
|
||||
.placeholder { |
|
||||
font-size: 12px; |
|
||||
margin-left: 4px; |
|
||||
color: #969696; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,110 @@ |
|||||
|
<template> |
||||
|
<view class="login-container"> |
||||
|
<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons> |
||||
|
<button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button> |
||||
|
<text class="tips-text">登录后尽享更多权益</text> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapMutations, mapState } from 'vuex' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState('m_user', ['redirectInfo']) |
||||
|
}, |
||||
|
methods:{ |
||||
|
...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']), |
||||
|
getUserInfo(e) { |
||||
|
console.log(e) |
||||
|
|
||||
|
if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！') |
||||
|
|
||||
|
// console.log(e.detail.userInfo) |
||||
|
// this.updateToken("11111") |
||||
|
// uni.switchTab({ |
||||
|
// url: '/pages/index/index' |
||||
|
// }) |
||||
|
console.log(e.detail.userInfo) |
||||
|
this.updateUserInfo(e.detail.userInfo) |
||||
|
|
||||
|
this.getToken(e.detail) |
||||
|
}, |
||||
|
async getToken(info) { |
||||
|
// 获取 code 对应的值 |
||||
|
const [err, res] = await uni.login().catch(err => err) |
||||
|
|
||||
|
if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败！') |
||||
|
|
||||
|
// 准备参数 |
||||
|
const query = { |
||||
|
code: res.code, |
||||
|
encryptedData: info.encryptedData, |
||||
|
iv: info.iv, |
||||
|
rawData: info.rawData, |
||||
|
signature: info.signature |
||||
|
} |
||||
|
|
||||
|
const { data: loginResult } = await uni.$http.post('/small/wechat/login', query) |
||||
|
if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败！') |
||||
|
|
||||
|
// 直接把 token 保存到 vuex 中 |
||||
|
this.updateToken(loginResult.data) |
||||
|
//this.navigateBack() |
||||
|
}, |
||||
|
navigateBack() { |
||||
|
if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') { |
||||
|
uni.switchTab({ |
||||
|
url: this.redirectInfo.from, |
||||
|
complete: () => { |
||||
|
this.updateRedirectInfo(null) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.login-container { |
||||
|
height: 750rpx; |
||||
|
background-color: #F8F8F8; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
&::after { |
||||
|
content: ' '; |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 40px; |
||||
|
background-color: white; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
border-radius: 100%; |
||||
|
transform: translateY(50%); |
||||
|
} |
||||
|
|
||||
|
.btn-login { |
||||
|
width: 90%; |
||||
|
border-radius: 100px; |
||||
|
margin: 15px 0; |
||||
|
background-color: #aba9d0; |
||||
|
} |
||||
|
|
||||
|
.tips-text { |
||||
|
font-size: 12px; |
||||
|
color: gray; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue