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

一.去支付

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

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

二.弹出支付窗口

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

三.确认支付

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

1.余额支付

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

2.微信支付

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

四.支付完成

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

STM32 51单片机设计半导体制冷片温控设计

目录 前言 一、本设计主要实现哪些很“开门”功能? 二、电路设计原理图 1.电路图采用Altium Designer进行设计: 三、实物设计图 四、程序源代码设计 五、获取资料内容 前言 基于STM32与51单片机的半导体制冷片温控设计 前言 随着现代工业、医疗…

开源大模型技术路线及趋势

1. 三个维度 大模型研发力量 学术机构 大模型创业公司 科技大厂 旗舰开源模型的形态/模态 基础大模型 -> instruct大模型 -> 多模态(VL大模型 -> 类gpt-4o大模型) 时间线 23年上半年 23年下半年 24年 25年 2. 核心观察 学术机构及…

Vue学习笔记

Vue学习笔记 以下内容为黑马SpringbootVue3中的Vue3教程部分 Vue概述 什么是Vue? Vue 是一款用于构建用户界面的渐进式的JavaScript框架。(官方:https://cn.vuejs.org/) 快速入门 准备 准备html页面,并引入Vue模块(官…

Java 使用MyBatis-Plus数据操作关键字冲突报错You have an error in your SQL syntax问题

问题 这个报错是出现在Java Spring boot项目中,使用MyBatis-Plus通过创建的实体类对数据库的操作过程中,通过实体创建数据库表是没有问题的,而在接口调用服务类操作数据库的时候,会出现报错。报错详情如下: 服务请求异…

Chrome DevTools Protocol 进阶: Page域

前言 本章开始我们将进一步学习 Chrome DevTools Protocol(CDP),首先切入的内容是 CDP 中的域。 在 Chrome DevTools Protocol(CDP) 中,Page 域 是一个至关重要的部分,它负责控制浏览器页面的…

电动采光排烟大窗施工常见问题

电动采光排烟天窗施工常见问题可能涉及多个方面,包括施工前的准备、施工过程中的操作以及施工后的维护等。以下是对这些常见问题的归纳和分析。 一、施工前的准备问题 1、现场勘查不足,可能导致天窗尺寸、形状和材质不符合建筑设计要求; 2…

关于VUE NPM安装失败的问题

最近使用 npm install --registryhttps://registry.npmmirror.com 安装一个新项目的依赖,各种失败。 最后发现是package-lock里面有老的淘宝的域名,整体替换掉就行了

51单片机应用开发---LCD1602显示应用

实现目标 1、了解LCD1602液晶屏; 2、掌握驱动程序的编写; 3. 具体目标:在屏幕上显示字符。 一、LCD1206概述 1.1 定义 LCD1602(Liquid Crystal Display)液晶显示屏是一种字符型液晶显示模块,可以显示ASCII码的标准字符和其它的一些内置…

解决Clion相对路径失效的问题

Clion相对路径失效的可能原因 工作目录不对相对路径错误 解决方法 设置工作目录 点击 工作文件 将工作路径置空 (或设置正确的工作路径) 之后便可完美解决 设置全局路径 这样即可解决 希望能帮助到你

香港电讯连续蝉联香港01「大湾区企业同创大奖」

香港电讯非常荣幸地连续第四年荣获「香港01大湾区企业同创大奖」殊荣,以表扬我们在大湾区业务所取得的卓越成绩,以及我们积极促进区内跨境业务方面的贡献。 面对企业拓展业务的迫切需求,香港电讯提供全面的跨境数码方案,包括SD-WA…

Vue3.js - 一文看懂Vuex

1. 前言 Vuex 是 Vue.js 的官方状态管理库,用于在 Vue 应用中管理组件之间共享的状态。Vuex 适用于中大型应用,它将组件的共享状态集中管理,可以避免组件间传递 props 或事件的复杂性。 2. 核心概念 我们可以将Vuex想象为一个大型的Vue&…

PdServer:调用MidjourneyAPI完成静夜思图文生成

欢迎沟通讨论,WX: cdszsz。公号:AIGC中文站。 今天我们将使用PdServer,通过Qwen大模型完成古诗的解析与prompt的生成,然后调用MidjourneyAPI完成图片的生成。有了文案和图片,我们就可以将其生成为一个古诗讲读视频。从…

融合创新:CNN+LSTM在深度学习中的高效应用,助力科研发表高影响因子文章!

2024深度学习发论文&模型涨点之——CNNLSTM 结合CNN(卷积神经网络)和LSTM(长短期记忆网络)是一种常见的深度学习模型组合,广泛应用于各种任务,特别是时间序列预测和序列数据处理。 CNNLSTM是一种深度学…

20241114在飞凌的OK3588-C的核心板上跑Linux R4时通过iperf3测试以太网卡的实际网速

20241114在飞凌的OK3588-C的核心板上跑Linux R4时通过iperf3测试以太网卡的实际网速 2024/11/14 21:09 《OK3588-C_Linux5.10.66Qt5.15.2_用户使用手册_V1.2_20240321.pdf》 飞凌文档上的配置有点不一样,需要修正: 3.2.15 以太网配置 OK3588-C板载两个千…

鸿蒙开发,Arkts 如何调用接口

面向万物互联时代,华为提出了“一次开发多端部署、可分可合自由流转、统一生态原生智能”三大应用与服务开发理念。针对多设备、多入口、服务可分可合等特性,华为提供了多种能力协助开发者降低开发门槛。在此背景下,HarmonyOS基于JS/TS语言体…

JavaScript方法修改 input type=file 样式

html中的<input type "file">的样式很难修改&#xff0c;又跟页面风格很不匹配。我就尝试了几种方法&#xff0c;但是不管是用label还是用opacity:0都很麻烦&#xff0c;还老是出问题&#xff0c;所以最后还是用JavaScript来解决。 下面附上代码&#xff1a;…

安装仓库,ssh以及NFS

安装仓库 1、源码安装 >自定义组件 2、软件包安装&#xff1a;rpm / dpkg ↓ (.rpm) / (.deb) 3、apt / yum >仓库 apt仓库&#xff1a; 安装源 >在线 / 离线 >包含可用的deb包 ↓ 元信息>包与包之间的依赖关系 在线源&#xff1a;必须要联网&#xff0c;包…

[Docker#9] 存储卷 | Volume、Bind、Tmpfs | -v/mount | MySQL 灾难恢复 | 问题

目录 1. 什么是存储卷? 2. 生活案例 3. 为什么需要存储卷? 4. 存储卷分类 一. 管理卷 Volume 创建卷 通过 -v 或 --mount 指定 1. -v 语法 命令格式 参数说明 2. --mount 语法 命令格式 参数说明 验证 二. 绑定卷 (Bind Mount) 1. 绑定卷概述 2. 创建绑定卷…

CVPR2024-6-可学习点云采样“LTA-PCS: Learnable Task-Agnostic Point Cloud Sampling”

文章摘要&#xff1a; 最近&#xff0c;许多方法直接对不同任务的点云进行操作。当点云尺寸较大时&#xff0c;这些方法的计算量和存储要求更高。为了减少所需的计算和存储&#xff0c;一种可能的解决方案是对点云进行采样。在本文中&#xff0c;我们提出了第一个可学习的与任务…

react + ts定义接口类型写法

接口&#xff08;未进行ts定义&#xff09; export async function UserList(params: {// keyword?: string;current?: number;pageSize?: number;},// options?: { [key: string]: any }, ) {return request<API1.UserList>(http://geek.itheima.net/v1_0/mp/artic…