前端在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,一经查实,立即删除!

相关文章

The 3rd Universal CupStage 15: Chengdu, November 2-3, 2024(2024ICPC 成都)

Problem L. Recover Statistics 题目意思&#xff1a; 给定a, b, c三个值&#xff0c;确保构造的数列中包含满足题目的数量 解题思路&#xff1a; 100 中 选择a 50个&#xff0c; b45个&#xff0c; c4个。 #include <iostream>using namespace std;using ll long …

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

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

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

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

和 Nostr 探索 Web5 的未来

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

提高数据处理效率:JavaScript 操作 XLSX 文件的最佳实践

前言 Excel 文件&#xff08;通常以 .xlsx 为后缀&#xff09;在各种业务场景中都有广泛应用&#xff0c;如数据分析、财务报告和其他数据表单处理。掌握如何在前端或后端使用 JavaScript 对这些 Excel 文件进行读取、创建和修改&#xff0c;能够显著提升我们的开发效率和数据…

使用Python实现对接Hadoop集群(通过Hive)并提供API接口

安装必要的库 首先&#xff0c;确保已经安装了以下库&#xff1a; pip install flask pip install pyhive代码实现 1. app.py&#xff08;主应用文件&#xff09; from flask import Flask, jsonify, request, abort from pyhive import hive import re from datetime impo…

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

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

Vue计算属性computed

在 Vue 中&#xff0c;计算属性&#xff08;computed properties&#xff09;是基于已有数据进行计算得出的属性&#xff0c;通常用于需要根据已有的 data 或其他属性来动态计算值时。 基本语法 计算属性通过 Vue 实例的 computed 选项来定义。与方法不同&#xff0c;计算属性…

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

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

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

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目标 具体实现 &#xff08;一&#xff09;环境 语言环境&#xff1a;Python 3.10 编 译 器: PyCharm 框 架: &#xff08;二&#xff09;具体步骤 1. 使…

vue2项目中在线预览csv文件

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

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

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

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

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

【Java Web】JSON 以及 JSON 转换

JSON&#xff08;JavaScript Object Notation&#xff09;一种灵活、高效、轻量级的数据交换格式&#xff0c;广泛应用于各种数据交换和存储场景。 基本特点 1、简单易用&#xff1a;JSON格式非常简单&#xff0c;易于理解和使用。 2、轻量级&#xff1a;相比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. 挂载仓库…

gitlab-development-kit部署gitlab《二》

gitlab-development-kit部署gitlab《一》 环境 mac 12.7.4 xcode 14.2 gdk 0.2.16 gitlab-foss 13.7 QA xcode源码安装 # https://crifan.github.io/xcode_dev_summary/website/xcode_dev/install_xcode/ # https://xcodereleases.comopenssl1.1 源码安装 # https://open…

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

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

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

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

摘要与登记

10.15:mysql 10.16:redis, 10.17:k8s,netty,dubbo,设计模式 10.18:juc、 10.21:rabbitMQ、ElasticSearch 10.22:docker 10.23:k8s 10.24:springsecurity 10.30:spring事务 11.01:mysql 11.05:redis 11.06:k8s 11.07:netty、docker 11.08:设计模式 11.09:juc 11.11:rabbitMQ、sp…