uni-app 小程序项目五点击结算进行条件判断、登录界面（token）和用户信息、三秒跳转、微信支付、打包发布

最新推荐文章于 2023-09-08 10:36:21 发布

Hyman-ya

最新推荐文章于 2023-09-08 10:36:21 发布

阅读量2.9k

点赞数 1

分类专栏： uni-app 小程序项目文章标签： uni-app

本文链接：https://blog.csdn.net/m0_55170432/article/details/118861098

版权

创建 settle 分支

git checkout -b settle

1.0 点击结算按钮进行条件判断

说明：用户点击了结算按钮之后，需要先后判断1. 是否勾选了要结算的商品、2. 是否选择了收货地址、3. 是否登录。

在 my-settle 组件中，为结算按钮绑定点击事件处理函数：

<!-- 结算按钮 -->
<view class="btn-settle" @click="settlement">结算({
   {
   checkedCount}})</view>

在 my-settle 组件的 methods 节点中声明 settlement 事件处理函数如下：

// 点击了结算按钮
settlement() {
   
  // 1. 先判断是否勾选了要结算的商品
  if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！')

  // 2. 再判断用户是否选择了收货地址
  if (!this.addstr) return uni.$showMsg('请选择收货地址！')

  // 3. 最后判断用户是否登录了
  if (!this.token) return uni.$showMsg('请先登录！')
}

在 my-settle 组件中，使用 mapGetters 辅助函数，从 m_user 模块中将 addstr 映射到当前组件中使用：

export default {
   
  computed: {
   
    ...mapGetters('m_cart', ['total', 'checkedCount', 'checkedGoodsAmount']),
    // addstr 是详细的收货地址
    ...mapGetters('m_user', ['addstr']),
    isFullCheck() {
   
      return this.total === this.checkedCount
    },
  },
}

在 store/user.js 模块的 state 节点中，声明 token 字符串：

export default {
   
  // 开启命名空间
  namespaced: true,

  // state 数据
  state: () => ({
   
    // 收货地址
    address: JSON.parse(uni.getStorageSync('address') || '{}'),
    // 登录成功之后的 token 字符串
    token: '',
  }),

  // 省略其它代码
}

在 my-settle 组件中，使用 mapState 辅助函数，从 m_user 模块中将 token 映射到当前组件中使用：

// 按需从 vuex 中导入 mapState 辅助函数
import {
    mapGetters, mapMutations, mapState } from 'vuex'

export default {
   
  computed: {
   
    ...mapGetters('m_cart', ['total', 'checkedCount', 'checkedGoodsAmount']),
    ...mapGetters('m_user', ['addstr']),
    // token 是用户登录成功之后的 token 字符串
    ...mapState('m_user', ['token']),
    isFullCheck() {
   
      return this.total === this.checkedCount
    },
  },
}

2.0 登录

2.1 定义 my 页面的编译模式

点击微信开发者工具工具栏上的编译模式下拉菜单，选择添加编译模式：
勾选启动页面的路径之后，点击确定按钮：

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

在 components 目录中新建登录组件： my-login 目录
在 components 目录中新建用户信息组件： my-userinfo 目录
在 my.vue 页面中，通过 mapState 辅助函数，导入需要的 token 字符串：

import badgeMix from '@/mixins/tabbar-badge.js'
// 1. 从 vuex 中按需导入 mapState 辅助函数
import {
    mapState } from 'vuex'

export default {
   
  mixins: [badgeMix],
  computed: {
   
    // 2. 从 m_user 模块中导入需要的 token 字符串
    ...mapState('m_user', ['token']),
  },
  data() {
   
    return {
   }
  },
}

在 my.vue 页面中，实现登录组件和用户信息组件的按需展示：

<template>
  <view>

    <!-- 用户未登录时，显示登录组件 -->
    <my-login v-if="!token"></my-login>

    <!-- 用户登录后，显示用户信息组件 -->
    <my-userinfo v-else></my-userinfo>

  </view>
</template>

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

为 my-login 组件定义如下的 UI 结构：

<template>
  <view class="login-container">
    <!-- 提示登录的图标 -->
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    <!-- 登录按钮 -->
    <button type="primary" class="btn-login">一键登录</button>
    <!-- 登录提示 -->
    <view class="tips-text">登录后尽享更多权益</view>
  </view>
</template>

美化登录组件的样式：

.login-container {
   
  // 登录盒子的样式
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;

  // 绘制登录盒子底部的半椭圆造型
  &::after {
   
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 0;
    background-color: white;
    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;
  }
}

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

需求描述：需要获取微信用户的头像、昵称等基本信息。

为登录的 button 按钮绑定 open-type=“getUserInfo” 属性，表示点击按钮时，希望获取用户的基本信息：

<!-- 登录按钮 -->
<!-- 可以从 @getuserinfo 事件处理函数的形参中，获取到用户的基本信息 -->
<button type="primary" class="btn-login" open-type="getUserInfo" @getuserinfo="getUserInfo">一键登录</button>

在 methods 节点中声明 getUserInfo 事件处理函数如下：

methods: {
   
  // 获取微信用户的基本信息
  getUserInfo(e) {
   
    // 判断是否获取用户信息成功
    if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权！')

    // 获取用户信息成功， e.detail.userInfo 就是用户的基本信息
    console.log(e.detail.userInfo)
  }
}

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

在 store/user.js 模块的 state 节点中，声明 userinfo 的信息对象如下：

// state 数据
state: () => ({
   
  // 收货地址
  // address: {}
  address: JSON.parse(uni.getStorageSync('address') || '{}'),
  // 登录成功之后的 token 字符串
  token: '',
  // 用户的基本信息
  userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}')
}),

在 store/user.js 模块的 mutations 节点中，声明如下的两个方法：

// 方法
mutations: {
   
  // 省略其它代码...

  // 更新用户的基本信息
  updateUserInfo(state, userinfo) {
   
    state.userinfo = userinfo
    // 通过 this.commit() 方法，调用 m_user 模块下的 saveUserInfoToStorage 方法，将 userinfo 对象持久化存储到本地
    this.commit('m_user/saveUserInfo

最低0.47元/天解锁文章

Hyman-ya

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
uni-app 小程序项目五点击结算进行条件判断、登录界面（token）和用户信息、三秒跳转、微信支付、打包发布

创建 settle 分支git checkout -b settle1.0 点击结算按钮进行条件判断说明：用户点击了结算按钮之后，需要先后判断1. 是否勾选了要结算的商品、2. 是否选择了收货地址、3. 是否登录。在 my-settle 组件中，为结算按钮绑定点击事件处理函数：<view class="btn-settle" @click="settlement">结算({{checkedCount}})</view>在 m
复制链接

扫一扫