6. 个人中心

6-1 获取用户信息+ 展示

1. npm install wafer2-client-sdk --save
2. util.js 文件加上 登录成功小弹窗
   // 工具函数库

import config from './config'

export function get (url) {
return new Promise((resolve, reject) => {
wx.request({
url: config.host + url,
success: function (res) {
if (res.data.code === 0) {
resolve(res.data.data)
} else {
reject(res.data)
}
}
})
})
}

export function showSuccess(text){
wx.showToast({
title: text,
icon: 'success'
})
}

3. config.js 文件加上 loginurl
   // 配置项

const host = 'http://localhost:5757'

const config = {
host,
loginUrl: ${host}/weapp/login
}

export default config

4. 在登录页面加上以下代码。

<template>

<div class="container">
<div class="userinfo" >
<img :src="userinfo.avatarUrl" alt="">
<p>{{userinfo.nickName}}</p>
</div>
<YearProgress></YearProgress>
<button v-if='userinfo.openId' @click='scanBook' class='btn'>添加图书</button>
<button v-else open-type="getUserInfo" lang="zh_CN" class='btn' @getuserinfo="login">点击登录</button>

</div>

</template>
<script>
import qcloud from 'wafer2-client-sdk'
import YearProgress from '@/components/YearProgress'
import {showSuccess} from '@/util'
import config from '@/config'
export default {
components: {
YearProgress
},
data () {
return {
userinfo: {
avatarUrl: 'http://image.shengxinjing.cn/rate/unlogin.png',
nickName: ''
}
}
},
methods: {

scanBook () {
  wx.scanCode({
    success: (res) => {
      if (res.result) {
        console.log(res.result)
      }
    }
  })
},
loginSuccess (res) {
  showSuccess('登录成功')
  wx.setStorageSync('userinfo', res)
  this.userinfo = res
},
login () {
  wx.showToast({
    title: '登录中',
    icon: 'loading'
  })
  qcloud.setLoginUrl(config.loginUrl)
  const session = qcloud.Session.get()
  if (session) {
    qcloud.loginWithCode({
      success: res => {
        console.log('没过期的登录', res)
        this.loginSuccess(res)
      },
      fail: err => {
        console.error(err)
      }
    })
  } else {
    qcloud.login({
      success: res => {
        console.log('登录成功', res)
        this.loginSuccess(res)
      },
      fail: err => {
        console.error(err)
      }
    })
  }
}

},
onShow () {
wx.showShareMenu()
let userinfo = wx.getStorageSync('userinfo')
if (userinfo) {
this.userinfo = userinfo
}
}
}
</script>
<style lang='scss'>
.container{
padding:0 30rpx;
}
.userinfo{
margin-top:100rpx;
text-align:center;
img{
width: 150rpx;
height:150rpx;
margin: 20rpx;
border-radius: 50%;
}
}
</style>