老师,我这个点击授权登录按钮为什么不弹出授权弹窗?

来源:9-8 用户权限组件开发

小章鱼丸

2019-10-13

图片描述
index.vue:

Auth.vue:

登录小慕读书
全场好书免费读
写回答

5回答

X186

2020-04-21

请问解决了吗

0
0

小章鱼丸

提问者

2019-10-13

//img.mukewang.com/szimg/5da31b8e09f2c88c21581240.jpg老师,打印的isAuth是false,并且返回的authSetting为空,没有scope.userInfo

0
0

Sam

2019-10-13

你好,看了下你的日志提示,发现你已经授权成功,并且获取到用户信息了,所以没有弹出授权面板

0
1
小章鱼丸
老师,我清除全部缓存之后还是这样 打印的isAuth是false,并且返回的authSetting为空,没有scope.userInfo
2019-10-13
共1条回复

小章鱼丸

提问者

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>



0
0

小章鱼丸

提问者

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>



0
0

零基础入门 实战mpvue2.0多端小程序框架

mpvue,一套代码搞定多个平台小程序,前端更易上手

819 学习 · 647 问题

查看课程