前端在PC端实现支付思路流程

一.去支付

1.前端点击“去支付”按钮,请求订单详情接口,传递订单的id、订单号给后端和请求支付方式接口

2.后端返回支付信息和支付方式数据

二.弹出支付窗口

接收支付信息和支付方式数据后,前端弹出支付弹窗

三.确认支付

前端无论选择任何一种支付方式,点击“确认支付”按钮请求支付接口都要把订单信息传给后端。

1.余额支付

如果选择“余额”支付,后端则会直接返回支付成功信息

2.微信支付

如果选择“微信支付”,后端返回订单生成成功,待支付的信息,前端的弹窗需要把支付方式和确认支付按钮更换支付二维码

四.支付完成

1.每隔10秒钟请求以上提到的订单详情接口,根据后端返回的order_status字段来判断用户是否已经支付,如果为1是“已支付”,如果为0则是“未支付”。

2.如果已经支付则显示更替提示“当前订单已支付,请不要重复支付”,支付状态也更替“已支付”。

3.最后关闭弹窗销毁定时请求的订单详情接口。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VUE3实现好看的世界建筑中国建筑网站源码

文章目录 1.设计来源1.1 网站主界面1.2 登录界面1.3 注册界面1.4 特色建筑展览界面1.5 世界建筑介绍界面1.6 世界建筑介绍 - 详情界面1.7 中国建筑介绍界面1.8 中国建筑介绍 - 详情界面1.9 关于我们界面 2.效果和源码2.1 动态效果2.2 源代码2.3 目录结构 源码下载万套模板&…

「人眼视觉不再是视频消费的唯一形式」丨智能编解码和 AI 视频生成专场回顾@RTE2024

你是否想过,未来你看到的电影预告片、广告,甚至新闻报道,都可能完全由 AI 生成? 在人工智能迅猛发展的今天,视频技术正经历着一场前所未有的变革。从智能编解码到虚拟数字人,再到 AI 驱动的视频生成&#…

「QT」文件类 之 QTemporaryFile 临时文件类

✨博客主页何曾参静谧的博客📌文章专栏「QT」QT5程序设计📚全部专栏「Win」Windows程序设计「IDE」集成开发环境「UG/NX」BlockUI集合「C/C」C/C程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「UG/NX」NX定制…

和 Nostr 探索 Web5 的未来

Nostr 是一个我过去两年一直在关注的协议。跟所有社区一样,Nostr 的发展也是起起伏伏,有过一些破圈被主流熟悉的时刻,也有一些像现在这样可能让人会觉得有点沉寂的时刻。但我还是经常关注 Nostr,没有特别的原因,就是单…

论文学习——一种基于决策变量分类的动态约束多目标进化算法

论文题目: A dynamic constrained multiobjective evolutionary algorithm based on decision variable classification 一种基于决策变量分类的动态约束多目标进化算法(Yinan Guo a,b, Mingyi Huang a, Guoyu Chen a,*, Dunwei Gong c, Jing Liang d, …

数据分析案例-笔记本电脑价格数据可视化分析

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

第T7周:Tensorflow实现咖啡豆识别

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 目标 具体实现 (一)环境 语言环境:Python 3.10 编 译 器: PyCharm 框 架: (二)具体步骤 1. 使…

vue2项目中在线预览csv文件

简介 希望在项目中,在线预览.csv文件,本以为插件很多,结果都只是支持excel(.xls、.xlsx)一到.csv就歇菜。。。 关于文件预览 vue-office:文档、 查看在线演示demo,支持docx、.xlsx、pdf、ppt…

【Excel】身份证号最后一位“X”怎么计算

大多数人身份证号最后一位都是数字,但有个别号码最后一位却是“X"。 如果你查百度,会得到如下答案: 当最后一位编码是10的时候,因为多出一位,所以就用X替换。 可大多数人不知道的是,这个10是怎么来的…

【HAProxy09】企业级反向代理HAProxy高级功能之压缩功能与后端服务器健康性监测

HAProxy 高级功能 介绍 HAProxy 高级配置及实用案例 压缩功能 对响应给客户端的报文进行压缩,以节省网络带宽,但是会占用部分CPU性能 建议在后端服务器开启压缩功能,而非在HAProxy上开启压缩 注意:默认Ubuntu的包安装nginx开…

【Java Web】JSON 以及 JSON 转换

JSON(JavaScript Object Notation)一种灵活、高效、轻量级的数据交换格式,广泛应用于各种数据交换和存储场景。 基本特点 1、简单易用:JSON格式非常简单,易于理解和使用。 2、轻量级:相比XML等其他数据格…

第四十一章 Vue之初识VueX

目录 一、引言 1.1. vuex的概念 1.2. vuex使用场景 1.3. 优势 二、创建演示项目 2.1. 构建项目步骤 2.2. 项目最终生成结构 2.3. 创建项目文件 2.3.1. App.vue 2.3.2. Son1.vue 2.3.3. Son2.vue 三、创建一个空仓库 3.1. 安装vuex 3.2. 新建仓库 3.3. 挂载仓库…

编程之路,从0开始:内存函数

Hello大家好!很高兴我们又见面了。 给生活添点passion,开始今天的编程之路! 今天我们来讲C语言中的内存函数。 目录 1、memcpy内存复制 2、memmove可重叠内存拷贝 3、memset设置字符 4、memcmp比较 1、memcpy内存复制 memcpy就是内存复制…

【C语言】值传递和地址传递

值传递 引用传递(传地址,传引用)的区别 传值,是把实参的值赋值给行参 ,那么对行参的修改,不会影响实参的值。 传地址,是传值的一种特殊方式,只是他传递的是地址,不是普通…

Springboot采用jasypt加密配置

目录 前言 一、Jasypt简介 二、运用场景 三、整合Jasypt 2.1.环境配置 2.2.添加依赖 2.3.添加Jasypt配置 2.4.编写加/解密工具类 2.5.自定义加密属性前缀和后缀 2.6.防止密码泄露措施 2.61.自定义加密器 2.6.2通过环境变量指定加密盐值 总结 前言 在以往的多数项目中&#xff0…

axios平替!用浏览器自带的fetch处理AJAX(兼容表单/JSON/文件上传)

fetch 是啥? fetch 函数是 JavaScript 中用于发送网络请求的内置 API,可以替代传统的 XMLHttpRequest。它可以发送 HTTP 请求(如 GET、POST 等),并返回一个 Promise,从而简化异步操作 基本用法 /* 下面是…

贪吃蛇小游戏设计

贪吃蛇小游戏 1.引言1.1 背景1.2 目的1.3 意义1.4 任务1.5 技术可行性分析1.5.1执行平台1.5.2 语言特性与功能方面 2.需求分析2.1 环境需求2.2开发环境分析2.3游戏功能分析2.4 游戏性能分析2.5 数据流图2.6 数据字典 3.概要设计3.1 设计思路3.2 游戏界面设计3.3 总设计模块的划…

DNS面临的4大类共计11小类安全风险及防御措施

DNS在设计之初,并未考虑网络安全限制,导致了许多问题。DNS安全扩展(DNSSEC)协议的开发旨在解决DNS的安全漏洞,但其部署并不广泛,DNS仍面临各种攻击。接下来我们一起看下DNS都存在哪些安全攻击及缓解措施,旨在对DNS安全…

【大数据学习 | flume】flume的概述与组件的介绍

1. flume概述 Flume是cloudera(CDH版本的hadoop) 开发的一个分布式、可靠、高可用的海量日志收集系统。它将各个服务器中的数据收集起来并送到指定的地方去,比如说送到HDFS、Hbase,简单来说flume就是收集日志的。 Flume两个版本区别: ​ 1&…

Jmeter中的定时器(一)

定时器 1--固定定时器 功能特点 固定延迟:在每个请求之间添加固定的延迟时间。精确控制:可以精确控制请求的发送频率。简单易用:配置简单,易于理解和使用。 配置步骤 添加固定定时器 右键点击需要添加定时器的请求或线程组。选…