微信小程序(黑马优购:登录)

1.点击结算进行条件判断

user.js

  //数据
  state: () =>({
    // address: {}
    address: JSON.parse(uni.getStorageSync('address') || '{}'),
    token: ''
  }),

 my-settle.vue

  computed: {
      ...mapGetters('m_cart',['checkedCount','total','checkedGoodsAmount']),
      ...mapGetters('m_user',['addstr']),
      ...mapState('m_user',['token'])

  //用户点击了结算按钮
      settlement(){
        if(!this.checkedCount) return uni.$showMsg('请选择要结算的商品!')
          
        if(!this.addstr) return uni.$showMsg('请选择收货地址')
        
        if(!this.token) return uni.$showMsg('请先登录!')
      }

2.创建登录(my-login)和用户信息组件(my-userinfo)

my-login.vue

 //绘制底部半圆的造型
    &::after{
      content: ' ';
      display: block;
      width: 100%;
      height: 40px;
      background-color: white;
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 100%;
      //往下移50%
      transform: translateY(50%);
    }

3.登录授权

如果没有显示下面的弹框,基础库设置为最低版本即可

  methods:{
      //用户授权之后,获取用户的基本信息
      getUserinfo(e){
        console.log(e);
        if(e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权!')
      }
    }

 3.将用户的基本信息存储到Vuex

  //数据
  state: () =>({
    // address: {}
    address: JSON.parse(uni.getStorageSync('address') || '{}'),
    token: '',
    //用户的信息对象
    userinfo: JSON.parse(uni.getStorageSync('userinfo') || '{}')
  }),

  saveUserInfoToStorage(state){
      uni.setStorageSync('userinfo',JSON.stringify(state.userinfo))
    }

 my-login.vue

<script>
  import {mapMutations} from 'vuex'
  export default {
    data() {
      return {
        
      };
    },
    methods:{
      ...mapMutations('m_user',['updateUserInfo']),
      //用户授权之后,获取用户的基本信息
      getUserinfo(e){  
        if(e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权!')
        console.log(e.detail.userInfo);
        this.updateUserInfo(e.detail.userInfo)
      }
    }
    
  }
</script>

4.调用uni.login

1)拿到code值

  //用户授权之后,获取用户的基本信息
      getUserinfo(e){  
        if(e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权!')
        console.log(e.detail.userInfo);
        this.updateUserInfo(e.detail.userInfo)
        this.getToken(e.detail)
      },
      async getToken(info){
        //获取code对应的值
        const [err,res] = await uni.login().catch(err => err)
        console.log(res);
        if( err || res.errMsg !== 'login:ok'){
          return uni.$showMsg('登录失败!')
        }
        console.log(res.code);
        console.log(info);
      } 
      

user.js

token: uni.getStorageInfoSync('token') || '',

updateToken(state,token){
      state.token = token
      this.commit('m_user/saveTokenToStorage')
    },
    saveTokenToStorage(state){
      uni.setStorage('token',state.token)
    }

...mapMutations('m_user',['updateUserInfo','updateToken']),

2)持久化存储token

await uni.$http.post('/api/public/v1/users/wxlogin',query)这里的接口不能获取到token值,

直接把token写死

my-login.vue

 data() {
      return {
         token : 'abc147258369jkl'
      };
    },

   async getToken(info){
        //获取code对应的值
        const [err,res] = await uni.login().catch(err => err)
        console.log(info);
        if( err || res.errMsg !== 'login:ok'){
          return uni.$showMsg('登录失败!')
        }
         console.log(res);
        //准备参数
        const query = {
          code: res.code,
          encryptedData: info.encryptedData,
          iv: info.iv,
          rawData: info.rawData,
          signature: info.signature
        }
       const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin',query)
       console.log(loginResult);
       if(loginResult.meta.status !== 200 ) {
             uni.$showMsg('登录成功')
              uni.setStorageSync('token',this.token);
             this.updateToken(this.token)
       }

4.获取用户信息

渲染头像和名称

<view class="top-box">
          <image :src="userinfo.avatarUrl" class="avatar"></image>
          <view class="nickname">{{userinfo.nickname}}</view>
      </view>

import { mapState } from 'vuex' 

computed:{
      ...mapState('m_user',['userinfo'])
    }

5.退出登录

  methods:{
      ...mapMutations('m_user',['updateAddress','updateUserInfo','updateToken']),
      async logout(){
        const [err,succ] = await uni.showModal({
          title: '提示',
          content: '确认退出登录吗?'
        }).catch(err => err)
        if(succ && succ.confirm){
          this.updateAddress({})
          this.updateUserInfo({})
          this.updateToken('')
        }
      }
      

6.如果用户没有登录,则3秒后自动跳转到登录页面

my-settle.vue

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

 //延时导航到my页面
      delayNavigate(){

        this.seconds = 3
          this.showTips(this.seconds)
          this.timer = setInterval(()=>{
            this.seconds--
            if(this.seconds <= 0){
              clearInterval(this.timer)
              uni.switchTab({
                url: '/pages/my/my'
              })
              return
            }
            this.showTips(this.seconds)
          },1000)
      },

 //展示倒计时的提示消息
      showTips(n){
        uni.showToast({
          icon: 'none',
          title: '请登录后再结算! '+n+' 秒之后自动跳转到登录页',
          mask: true,
          duration: 1500
        })
      

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

user.js

  //重定向的Object对象
    redirectInfo: null

  updateRedirectInfo(state,info){
      state.redirectInfo = info
      console.log(state.redirectInfo);
    }

my-login.vue

   computed:{
        ...mapState('m_user',['redirectInfo'])
    },

.methods:{
      ...mapMutations('m_user',['updateUserInfo','updateToken','updateRedirectInfo']),

  if(loginResult.meta.status !== 200 ) {
             uni.$showMsg('登录成功')
             this.updateToken('abc147258369jkl')
             this.navigateBack()
       }

 navigateBack(){
        // this.redirectInfo.openType === 'switchTab':重定向的方式是switchTab
        if(this.redirectInfo && this.redirectInfo.openType === 'switchTab'){
          uni.switchTab({
            url:this.redirectInfo.from,
            complete: ()=>{
              this.updateRedirectInfo(null)
            }
          })
        }
      }

my-settle.vue

 //延时导航到my页面
      delayNavigate(){
          this.seconds = 3
          this.showTips(this.seconds)
          this.timer = setInterval(()=>{
            this.seconds--
            if(this.seconds <= 0){
              clearInterval(this.timer)
              uni.switchTab({
                url: '/pages/my/my',
                success: () => {
                  this.updateRedirectInfo({
                    openType: 'switchTab',
                    from: '/pages/cart/cart'
                  })
                }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/505822.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

@JsonProperty和@JSONField注解的区别

JSON&#xff08;JavaScript Object Notation&#xff09; json是一种常见的数据交换的轻量级数据格式。HTTP协议传输数据可以有多种数据格式&#xff0c;比如下面几种常见数据传输格式&#xff0c;除此之外还有其他的数据交换格式。 数据传输类型编码类型示例表单格式applic…

Qt使用opencv,进行视频录制,功能打开、关闭摄像头,开始、结束录制视频,暂停、继续录制,并保存视频文件

1.效果图 2 代码实现 2.1 .h文件 #ifndef VIDEORECORDWIDGET_H #define VIDEORECORDWIDGET_H#include <QWidget>#include<QFileDialog>#include <QImage> #include <QLabel> #include <QTimer> #include <opencv2/opencv.hpp>using name…

金三银四面试题(九):JVM常见面试题(3)

今天我们继续探讨常见的JVM面试题。这些问题不比之前的问题庞大&#xff0c;多用于面试中JVM部分的热身运动&#xff0c;开胃菜&#xff0c;但是大家已经要认真准备。 你能保证GC 执行吗&#xff1f; 不能&#xff0c;虽然你可以调用System.gc() 或者Runtime.gc()&#xff0c…

JVM剖析

0.前言 Java 是当今世界使用最广泛的技术平台之一。使用 Java 或 JVM 的一些技术包括&#xff1a; Apache spark用于大数据处理&#xff0c;数据分析在JVM上运行;用于数据流的Apache NiFi在内部使用的也是 JVM;现代 Web 和移动应用程序开发中使用的React native使用 的也包含…

nginx的缓存和gzip

nginx的缓存 缓存的基本思想是利用客户端访问的时间局限性&#xff0c;将客户端访问过的内容做一个副本&#xff0c;在一定时间内存放到本地&#xff0c;当改数据下次被访问时&#xff0c;不必连接到后端服务器反复去查询数据&#xff0c;而是由本地保存的副本响应数据。 保存…

node:ReferenceError: XMLHttpRequest is not defined

node&#xff1a;ReferenceError: XMLHttpRequest is not defined 1 前言 node执行如下代码&#xff1a; new XMLHttpRequest()报错提示&#xff1a;ReferenceError: XMLHttpRequest is not defined 2 解决 2.1 可能原因是没有安装xmlhttprequest npm install xmlhttpreq…

空格隔开的多个数据,可以用多个scanf()读取,也可以用一个scanf()读取

概要&#xff1a; 如果输入数据有多个&#xff0c;且用空格隔开 读取的时候&#xff0c;可以用多个scanf()读取 也可以用一个scanf()读取&#xff0c;在这个scanf()内部使用空格即可 一、用多个scanf()读取 1、代码 #include<stdio.h> int main() {int line[3];int…

window配置RUST开发环境详解

1.先安装VS2022: 下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux (microsoft.com) 2.下载Rustup-init.exe Other Installation Methods - Rust Forge 3.运行rustup-init.exe开始安装rust开发环境: 安装成功出现下图所示 %USERPROFILE%\.cargo\bin 添加cargo安装路…

内网穿透时报错【Bad Request This combination of host and port requires TLS.】的原因

目录 前言&#xff1a;介绍一下内网穿透 1.内网直接https访问&#xff08;可以正常访问&#xff09; 程序配置的证书 2.内网穿透后,通过外网访问 3.原因 4.内网非https的Web应用&#xff0c;使用https后&#xff0c;也变成了https访问 5.题外话 感觉自己的web应用配置了…

155 Linux C++ 通讯架构实战10,工具telent 和 wireshark的使用

telnet工具使用介绍 windows 上开启telnet linux 上开始telnet 使用telnet //是一款命令行方式运行的客户端TCP通讯工具&#xff0c;可以连接到服务器端&#xff0c;往服务器端发送数据&#xff0c;也可以接收从服务器端发送过来的信息&#xff1b; //类似nginx5_1_1_clie…

3D检测:从pointnet,voxelnet,pointpillar到centerpoint

记录centerpoint学习笔记。目前被引用1275次&#xff0c;非常高。 地址&#xff1a;Center-Based 3D Object Detection and Tracking (thecvf.com) GitHub - tianweiy/CenterPoint CenterPoint&#xff1a;三维点云目标检测算法梳理及最新进展&#xff08;CVPR2021&#xff…

为 Linux 中的 Docker 配置阿里云和网易云国内镜像加速下载中心

由于默认情况下&#xff0c;Docker 的镜像下载中心默认为国外的镜像中心&#xff0c;使用该镜像中心拉去镜像会十分缓慢&#xff0c;所以我们需要配置国内的 Docker 镜像下载中心&#xff0c;加速 Docker 镜像的拉取。Docker 的国内镜像下载中心常用的有&#xff1a;阿里云、网…

精通Go语言文件上传:深入探讨r.FormFile函数的应用与优化

1. 介绍 1.1 概述 在 Web 开发中&#xff0c;文件上传是一项常见的功能需求&#xff0c;用于允许用户向服务器提交文件&#xff0c;如图像、文档、视频等。Go 语言作为一门强大的服务器端编程语言&#xff0c;提供了方便且高效的方式来处理文件上传操作。其中&#xff0c;r.F…

【EasyExcel】多sheet、追加列

业务-EasyExcel多sheet、追加列 背景 最近接到一个导出Excel的业务&#xff0c;需求就是多sheet&#xff0c;每个sheet导出不同结构&#xff0c;第一个sheet里面能够根据最后一列动态的追加列。原本使用的 pig4cloud 架子&#xff0c;使用 ResponseExcel注解方式组装返回数据…

手机无线投屏到windows11电脑

1 安装无线投影组件 2 电脑端打开允许其他设备投影的开关 3 手机找到投屏选项 4 手机搜索可用设备连接即可 这里的官方文档给的不太好,给了一些让人眼花撩乱的信息,以下是经过整合的有效信息

关系型数据库mysql(10)MHA的高可用

一. MHA 的相关知识 1. 什么是 MHA MHA&#xff08;MasterHigh Availability&#xff09;是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。MHA 的出现就是解决MySQL 单点的问题。MySQL故障切换过程中&#xff0c;MHA能做到0-30秒内自动完成故障切换操作。MHA能在故障…

《Java面试自救指南》(专题一)操作系统

文章目录 力推操作系统的三门神课操作系统的作用和功能线程、进程和协程的区别并行与并发的区别什么是文件描述符操作系统内核态和用户态的区别用户态切换到内核态的方式大内核和微内核的区别用户级线程和内核级线程的区别线程的七态模型进程调度算法有哪些进程间通信的七种方式…

鸿蒙实战开发-如何使用声明式UI编程框架的基础组件

介绍 在本教程中&#xff0c;我们将通过一个简单的样例&#xff0c;学习如何使用声明式UI编程框架的基础组件。本篇Codelab将会使用Image组件、Slider组件、Text组件共同实现一个可调节的风车动画&#xff0c;实现效果如图所示 相关概念 Text组件&#xff1a;文本组件&#x…

回收站删除以后还能撤销吗 回收站删除以后怎么找回 回收站清空了怎么恢复 easyrecovery数据恢复软件

回收站删除以后能撤销吗&#xff1f;有不少网友前一秒清空回收站&#xff0c;后一秒就开始在网上疯狂搜寻如何撤销删除回收站的办法。实际上&#xff0c;清空回收站并不可怕&#xff0c;被删除的数据仍然保存在我们的电脑硬盘中。今天我为大家介绍回收站删除以后怎么找回数据的…

数据可视化-Python

师从黑马程序员 Json的应用 Json的概念 Json的作用 Json格式数据转化 Python数据和Json数据的相互转化 注&#xff1a;把字典列表变为字符串用dumps,把字符串还原回字典或列表用loads import json#准备列表&#xff0c;列表内每一个元素都是字典&#xff0c;将其转化为Json …