【vue+ant-design-vue+a-list】微信扫码登录pc端，后台页面增加微信绑定和微信解绑功能

兜兜转转，修修改改，又是缝缝补补了几天，终于完成此功能
大致思路：点击绑定微信，出现微信扫码页面，扫码后跳出弹窗，发送验证码验证后可绑定
点击解绑，confirm弹窗确认是否解绑，点击解绑，发送验证码后解绑成功

这里主要用的是a-list，官网上示例如下：

父页面

    <a-list itemLayout="horizontal" :dataSource="data"><a-list-item slot="renderItem" slot-scope="item, index" :key="index"><a-list-item-meta><a slot="title">{{ item.title }}</a><span slot="description"><span class="security-list-description">{{ item.description }}</span>                 <span v-if="item.title == '绑定第三方账号'" class="security-third-bdwx"><imgstyle="margin:10px 0 0 10px,width35px,height:35px":src="fVcImageUrl"alt=""/></span>        </span></a-list-item-meta><template v-if="item.actions"><a slot="actions" @click="item.actions.callback">{{ item.actions.title }}</a></template></a-list-item></a-list><a-row v-if="wxLoginFlag && qrcodeFlag"><div class="wx_dialog_toiast"><a-icon type="close" class="wx_dialog_close" @click="closeWx()" /><div class="wx_dialog_dl">绑定微信</div><div id="qrcode" class="qr-code"></div><div class="wx_dialog_sm">请使用微信扫一扫上方二维码进行验证</div><div class="wx_dialog_success" v-if="successFlag">验证成功</div></div></a-row><wxsearch-login-modules ref="wxsearchLoginModules" />

import WxsearchLoginModules from './modules/WxsearchLoginModules'
import QRCode from 'qrcodejs2'
components: {WxsearchLoginModules,},

 data() {return {data: [],//list列表数据源losebind: '',   bindwxFalg: false,fVcImageUrl: '',//用户头像地址fVcName: '',//用户昵称wxLoginFlag: false,qrcodeFlag: true,settimer: 60,smsBtninterval: 0,timeintval: 0,}},

created() {this.initData()this.updateInfo()},async initData() {const res =  await getWxuser();console.log(res, '查询用户初始信息')//这个接口如果有用户信息，会返我昵称、头像地址等用户信息。如果没有用户信息，什么都不返回if (res) {this.fVcImageUrl = res.fVcImageUrl//用户头像地址this.fVcName = res.fVcName//用户昵称this.data[3].actions.title = '解绑'//001,如果有用户信息，代表要解绑，文字变为解绑this.$forceUpdate()} else {this.fVcName = ''this.fVcImageUrl = require('../../../assets/icons/icon_method_wxpay.png')                 this.data[3].actions.title = '绑定微信'//001,如果没有用户信息，代表要绑定微信，文字为绑定微信this.$forceUpdate()         }},updateInfo() {    this.data = [{title: 'xx',description: 'xx',value: 'xx',actions: {title: 'xx',callback: () => {this.$refs.passwordModal.add()},},},{title: 'xx',description: 'xx',value: formatPhone(this.user.loginName),},{title: 'xx',description: this.user.email ? 'xx' : 'xx',value: this.user.email,actions: {title: this.user.email ? 'xx' : 'xx',callback: () => {this.$refs.emailModal.add()},},},{title: '绑定第三方账号',description: this.fVcImageUrl,value: this.fVcImageUrl,actions: {title: '解绑',//这里会遇到一个问题，函数执行顺序的问题，会导致解绑和绑定微信切换的时候，数据已更新，视图却没有更新，解决办法往上看001callback: () => {if (this.data[3].actions.title == '绑定微信') {               this.wxLoginFlag = true//打开二维码页面this.qrcodeFlag = true//打开二维码页面，写一个变量就行，这里是历史遗留问题，没删this.qrcode()//调用生成微信二维码} else if (this.data[3].actions.title == '解绑') {this.$refs.wxsearchLoginModules.add(this.fVcName)//打开短信验证弹窗}},},},]},

 // 二维码关闭按钮closeWx() {this.qrcodeFlag = falsethis.wxLoginFlag = falseif (this.timeintval) {this.clearTime(this.timeintval)}this.settimer = 60},// 生成二维码qrcode() {getWxappid().then((res) => {let qrcode = new QRCode('qrcode', {width: 190,height: 190,text: res.data, // 二维码地址colorDark: '#000',colorLight: '#fff',})qrcode._el.title = ''//隐藏二维码的标题const vm = thisvar timezero = setTimeout(function () {vm.getWeixinAllogin()}, 3000)    })},// 3秒后调已登录接口getWeixinAllogin() {alreadyWxlogin().then((res) => {if (res && res.code == 0) {if (res.authorization_flag == -1) {const vm = thisvm.timeintval = setInterval(function () {vm.settimer--         vm.recirleLogin(vm.timeintval)if (vm.settimer == 0) {vm.clearTime(vm.timeintval)vm.settimer = 60}}, 3000)} else if (res.authorization_flag == 0) {this.$refs.wxsearchLoginModules.add(this.fVcName)this.wxLoginFlag = falsethis.messageFlag = truethis.clearTime(this.timeintval)this.settimer = 60} else {this.wxLoginFlag = false// this.messageFlag = truethis.$message.error('该手机号已绑定过其他账号，不可重复绑定！')this.visible = falsethis.qrcodeFlag = falsethis.clearTime(this.timeintval)this.settimer = 60return}} else {this.$message.error(res.msg)this.qrcode()}})},// 生成二维码，未扫码时轮巡recirleLogin(timer) {alreadyWxlogin().then((res) => {if (res.authorization_flag == 1) {this.wxLoginFlag = false       this.$message.error('该手机号已绑定过其他账号，不可重复绑定！')this.visible = falsethis.qrcodeFlag = falsethis.clearTime(timer)return} else if (res.authorization_flag == 0) {this.$refs.wxsearchLoginModules.add(this.fVcName)this.wxLoginFlag = falsethis.messageFlag = truethis.clearTime(timer)}})},// 清除定时器clearTime(timer) {clearInterval(timer)},

子页面短信验证的代码，前面的文章中有写过，重复率太高，就不全贴了，贴一些仅供参考

  add(flag) {  this.confirmFlag = flag     if (flag) {//解绑         this.visible = falsethis.submitDisabel = trueif (this.timeintval) {clearInterval(this.timeintval) //关闭轮询二维码定时器this.settimer = 60}if (this.smsBtninterval) {        clearInterval(this.smsBtninterval) //关闭按钮倒计时60秒定时器this.state.smsSendBtn = falsethis.state.time = 60}let that = thisthis.$confirm(`解绑微信后你将无法使用微信登录xxx，你确定要解绑吗？`, '', {confirmButtonText: '解绑',cancelButtonText: '暂不解绑',type: 'warning',center: true,}).then(() => {that.visible = truethat.messageFlag = true})} else {//绑定微信     if (this.smsBtninterval) {         clearInterval(this.smsBtninterval) //关闭按钮倒计时60秒定时器this.state.smsSendBtn = falsethis.state.time = 60}this.qrcodeFlag = truethis.wxLoginFlag = true}},

【vue+ant-design-vue+a-list】微信扫码登录pc端，后台页面增加微信绑定和微信解绑功能相关推荐

【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）
这两周的需求是通过微信扫码登录pc端,刚定下需求原型图还没出来前,后端特意发了微信开发平台的链接给我,关于如何生成二维码的文档,以及扫码跳转后如何传code给他. 请戳这里准备工作|微信开放文档我最 ...
利用webSocket实现扫码登录PC端
利用webSocket实现扫码登录PC端业务需求需求分析效果演示需求实现业务流程图业务流转图代码实现 1.数据库设计 2.代码实现 1.web端代码 2. APP端代码业务需求在ap ...
微信扫码登陆PC端（Vue）（小程序）
本文章基于Vue项目并且已经开发一个完整上线的微信小程序,制作PC端时实现微信小程序扫码登陆PC端. 一.向后端请求token 1.后端会定时生成并更新的一个token 2.正常的接口请求从后端拿到这 ...
PHP 微信扫码登录 pc网站
第一步准备工作: 微信开放平台,需要企业认证,个人无法实现,因为网站审核的时候要有公司盖章. 并且开发人员资质也是要公司资质. 要交300元的认证费. 审核过程挺快,第一天申请,第二天就可以,写代码 ...
php微信扫码支付pc端,PC端（电脑端）微信扫码支付和支付宝在线支付（ThinkPHP3）...
操作步骤: 1.修改配置文件 Application/common/conf/config.php $arr = array( 'DB_TYPE' => 'mysql', 'DB_HOST' = ...
微信开放平台开发——网页微信扫码登录（OAuth2.0）
1.OAuth2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用. 允许用户提供 ...
Spring学习笔记（二十三）——实现网站微信扫码登录获取微信用户信息Demo
目录微信扫码登录介绍开发步骤微信扫码登录示例微信开放文档遇到的问题使用第三方工具实现网站微信扫码登录开发前介绍开发步骤微信扫码登录获取微信用户信息Demo实现流程实现效果实现过程 ...
应用网站微信扫码登录处理逻辑解析
应用网站微信扫码登录处理逻辑解析近日刚刚进行了网站应用微信扫码登录的功能开发.开发前看了不少文档,但感觉都很偏技术术语,太过于专业.对于刚刚想涉及这方面的菜鸟来说,看的一脸懵逼. 趁着自己刚刚动手的 ...
springboot实现微信扫码登录和绑定
前言:系统中若用到微信扫码登录,则要进行微信公众账号授权,所以在开发功能之前, 需要到微信公众平台申请一个服务号,当然仅仅只是作为开发者,则使用测试公众账号也行. 有了公众号后,则需登录公众后台进行一 ...

【vue+ant-design-vue+a-list】微信扫码登录pc端，后台页面增加微信绑定和微信解绑功能

【vue+ant-design-vue+a-list】微信扫码登录pc端，后台页面增加微信绑定和微信解绑功能相关推荐

最新文章

热门文章