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