青橙优购——登录登录 1 定义 my 页面的编译模式勾选启动页面的路径之后，点击确定按钮： 2 实现登录和用户信息组件

用户信息

1 实现用户头像昵称区域的基本布局

在 my-userinfo 组件中，定义如下的 UI 结构：

美化当前组件的样式：

2 渲染用户的头像和昵称

在 my-userinfo 组件中，通过 mapState 辅助函数，将需要的成员映射到当前组件中使用：

// 按需导入 mapState 辅助函数
import { mapState } from 'vuex'

export default {
  computed: {
    // 将 m_user 模块中的 userinfo 映射到当前页面中使用
    ...mapState('m_user', ['userinfo']),
  },
  data() {
    return {}
  },
}

将用户的头像和昵称渲染到页面中：

<!-- 头像昵称区域 -->
<view class="top-box">
  <image :src="userinfo.avatarUrl" class="avatar"></image>
  <view class="nickname">{{userinfo.nickName}}</view>
</view>

3 渲染面板区域

在 my-userinfo 组件中，定义如下的 UI 结构：

4 实现退出登录的功能

为第三个面板区域中的 退出登录 项绑定 click 点击事件处理函数：

<view class="panel-list-item" @click="logout">
  <text>退出登录</text>
  <uni-icons type="arrowright" size="15"></uni-icons>
</view>

在 my-userinfo 组件的 methods 节点中定义 logout 事件处理函数，清空state中的数据，使用 mapMutations 辅助方法，将需要用到的 mutations 方法映射到当前组件中：

三秒后自动跳转

1 三秒后自动跳转到登录页面

需求描述：在购物车页面，当用户点击 “结算” 按钮时，如果用户没有登录，则 3 秒后自动跳转到登录页面

在 my-settle 组件的 methods 节点中，声明一个叫做 showTips 的方法，专门用来展示倒计时的提示消息：

在 data 节点中声明倒计时的秒数：

data() {
  return {
    // 倒计时的秒数
    seconds: 3
  }
}

改造 结算 按钮的 click 事件处理函数，如果用户没有登录，则预调用一个叫做 delayNavigate 的方法，进行倒计时的导航跳转：

未登录就要跳转到登录页定义 delayNavigate 方法，初步实现倒计时的提示功能：

重置是防止用户未登录点击结算定时器变成负数，在0的时候就要清除定时器开始跳转

在 data 节点中声明定时器的 Id 如下：

data() {
  return {
    // 倒计时的秒数
    seconds: 3,
    // 定时器的 Id
    timer: null
  }
}

2 登录成功之后再返回之前的页面

核心实现思路：在自动跳转到登录页面成功之后，把返回页面的信息存储到 vuex 中，从而方便登录成功之后，根据返回页面的信息重新跳转回去。

返回页面的信息对象，主要包含 { openType, from } 两个属性，其中 openType 表示以哪种方式导航回之前的页面；from 表示之前页面的 url 地址；

在 store/user.js 模块的 state 节点中，声明一个叫做 redirectInfo 的对象如下：

在 store/user.js 模块的 mutations 节点中，声明一个叫做 updateRedirectInfo 的方法：

mutations: {
  // 更新重定向的信息对象
  updateRedirectInfo(state, info) {
    state.redirectInfo = info
  }
}

在 my-settle 组件中，通过 mapMutations 辅助方法，把 m_user 模块中的 updateRedirectInfo 方法映射到当前页面中使用：

methods: {
  // 把 m_user 模块中的 updateRedirectInfo 方法映射到当前页面中使用
  ...mapMutations('m_user', ['updateRedirectInfo']),
}

改造 my-settle 组件 methods 节点中的 delayNavigate 方法，当成功跳转到 my 页面 之后，将重定向的信息对象存储到 vuex 中：

在 my-login 组件中，通过 mapState 和 mapMutations 辅助方法，将 vuex 中需要的数据和方法，映射到当前页面中使用
改造 my-login 组件中的 getToken 方法，当登录成功之后，预调用 this.navigateBack() 方法返回登录之前的页面
在 my-login 组件中，声明 navigateBack 方法如下：

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 20天，点击查看活动详情

青橙优购——登录

登录

1 定义 my 页面的编译模式

2 实现登录和用户信息组件的按需展示

3 实现登录组件的基本布局

4 点击登录按钮获取微信用户的基本信息

5 将用户的基本信息存储到 vuex

6 登录获取 Token 字符串

7 将 Token 存储到 vuex