老师,我这个点击授权登录按钮为什么不弹出授权弹窗?
来源:9-8 用户权限组件开发
小章鱼丸
2019-10-13

index.vue:
Auth.vue:
5回答
-
X186
2020-04-21
请问解决了吗
00 -
小章鱼丸
提问者
2019-10-13
老师,打印的isAuth是false,并且返回的authSetting为空,没有scope.userInfo00 -
Sam
2019-10-13
你好,看了下你的日志提示,发现你已经授权成功,并且获取到用户信息了,所以没有弹出授权面板
012019-10-13 -
小章鱼丸
提问者
2019-10-13
index.vue:
<template>
<div>
<div class="home" v-if="isAuth">
<SearchBar
disabled
@onClick="onSearchBarClick"
:hot-search="hotSearch"
/>
<HomeCard :data="homeCard"/>
<HomeBanner
img="http://www.youbaobao.xyz/book/res/bg.jpg"
title="mpvue2.0实战多端小程序课程上线啦"
subTitle="立即体验"
@onClick="onBannerClick"
/>
<div :style="{marginTop: '23px'}">
<HomeBook
title="为你推荐"
:row="1"
:col="3"
:data="recommend"
mode="col"
btnText="换一批"
@onMoreClick="recommendChange('recommend')"
@onBookClick="onHomeBookClick"
/>
</div>
<div :style="{marginTop: '23px'}">
<HomeBook
title="免费阅读"
:row="2"
:col="2"
:data="freeRead"
mode="row"
btnText="换一批"
@onMoreClick="recommendChange('freeRead')"
@onBookClick="onHomeBookClick"
/>
</div>
<div :style="{marginTop: '23px'}">
<HomeBook
title="当前最热"
:row="1"
:col="4"
:data="hotBook"
mode="col"
btnText="换一批"
@onMoreClick="recommendChange('hotBook')"
@onBookClick="onHomeBookClick"
/>
</div>
<div :style="{marginTop: '23px'}">
<HomeBook
title="分类"
:row="3"
:col="2"
:data="category"
mode="category"
btnText="查看全部"
@onMoreClick="onCategoryMoreClick"
@onBookClick="onHomeBookClick"
/>
</div>
</div>
<Auth v-if="!isAuth" @getUserInfo="getUserInfo"/>
</div>
</template>
<script>
import SearchBar from '../../components/home/SearchBar'
import HomeBanner from '../../components/home/HomeBanner'
import HomeBook from '../../components/home/HomeBook'
import HomeCard from '../../components/home/HomeCard'
import Auth from '../../components/base/Auth'
import { getHomeData, recommend, freeRead, hotBook } from '../../api'
import { getSetting } from '../../api/wechat'
export default {
components: {
SearchBar,
HomeCard,
HomeBanner,
HomeBook,
Auth
},
data() {
return {
hotSearch: '',
homeCard: {},
banner: {},
recommend: [],
freeRead: [],
hotBook: [],
category: [],
isAuth: true
}
},
mounted() {
// this.getHomeData()
this.getSetting()
},
methods: {
recommendChange(key) {
switch(key) {
case 'recommend':
recommend().then(response => {
this.recommend = response.data.data
})
break
case 'freeRead':
freeRead().then(response => {
this.freeRead = response.data.data
})
break
case 'hotBook':
hotBook().then(response => {
this.hotBook = response.data.data
})
break
}
},
getHomeData() {
getHomeData({ openId: '1234' }).then(response => {
const {
data: {
hotSearch: {
keyword
},
shelf,
banner,
recommend,
freeRead,
hotBook,
category,
shelfCount
}
} = response.data
this.hotSearch = keyword
this.banner = banner
this.recommend = recommend
this.freeRead = freeRead
this.hotBook = hotBook
this.category = category
this.homeCard = {
bookList: shelf,
num: shelfCount,
userInfo: {
avatar: 'https://www.youbaobao.xyz/mpvue-res/logo.jpg',
nickname: '米老鼠'
}
}
})
},
onSearchBarClick() {
// 跳转到搜索页
},
onBannerClick() {
console.log('banner click')
},
onCategoryMoreClick() {
},
onBookMoreClick() {
console.log('more click')
},
onHomeBookClick() {
console.log('book click')
},
getUserInfo(e) {
console.log(this.isAuth)
// console.log('e',e)
this.getSetting()
},
getSetting() {
getSetting(
'userInfo',
() => {
this.isAuth = true
},
() => {
this.isAuth = false
}
)
}
}
}
</script>
<style scoped>
</style>
00 -
小章鱼丸
提问者
2019-10-13
Auth.vue:
<template>
<div class="auth-wrapper">
<div class="auth">
<div class="auth-info">
<div class="auth-img">
<ImageView
src="https://www.youbaobao.xyz/mpvue-res/logo.jpg"
round
/>
</div>
<div class="sub-title">登录小慕读书</div>
<div class="title">全场好书免费读</div>
</div>
<button
class="auth-btn"
open-type="getUserInfo"
@getuserinfo="getUserInfo"
>
授权登录
</button>
</div>
</div>
</template>
<script>
import ImageView from './imageView'
export default {
components: {
ImageView
},
methods: {
getUserInfo() {
this.$emit('getUserInfo')
}
}
}
</script>
<style scoped>
.auth-wrapper{
position: fixed;
left:0;
top:0;
width:100%;
height:100%;
background:#999;
z-index:1000;
display:flex;
justify-content: center;
align-items: center;
}
.auth{
position: absolute;
width:270px;
height:248px;
background:#f5f5f5;
border-radius:18px;
}
.auth-info{
margin-top:22.5px;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.auth-img{
width:74px;
}
.sub-title{
color:#999;
font-size:13px;
line-height:18.5px;
margin-top: 18px;
}
.title{
color:#333;
font-size:16px;
line-height:22.5px;
margin-top: 3.5px;
}
.auth-btn{
background-image: linear-gradient(90deg, #1ea3f5 0%, #0f87fc 100%);
border-radius: 0 0 18px 18px;
position:absolute;
bottom:0;
width:100%;
color:#fff;
font-size:15px;
height:49px;
line-height:49px;
}
</style>
00
相似问题
老师,打印的isAuth是false,并且返回的authSetting为空,没有scope.userInfo