vue项目支付功能

Bertha 。 2023-10-01 11:41 23阅读 0赞

**目录**

1.支付宝方式：

代码：

2.微信支付

二维码展示代码：

请求后端的支付二维码接口

--------------------

### 1.**支付宝方式：** ###

> **支付宝方式：**点击支付宝支付, 调用后台接口(携带订单号)，后台返回一个form表单(HTML字符串结构)，
> 
> 提交form就可以调用支付宝支付

#### 代码： ####

//  alipayWap: 后台接口返回的form 片段
    <div v-html="alipayWap" ref="alipayWap"></div>
    
    methods: {
    	toAlipay () {
    		this.$axios.get('xxx').then (res = > {
    			this.alipayWap = res;
                 // 等待dom更新, 等页面中有这个form表单了
    			this.$nextTick(() => {
                	this.$refs.alipayWap.children[0].submit()
              	})
    		})
    	}
    }

#### ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16][] ####

--------------------

###  2.微信支付 ###

> 大部分工作量是后端的事情，订单的生成由后端去和腾讯对接的，**前端只需要负责将后端返回来的支付二维码**（由后端生成的，有些情况也可以前端去对接订单生成之后由前端自己生成二维码，这种情况比较少）**展示在终端供用户扫码即可**
> 
> **需要自己根据后台返回的url生成二维码页面，如图所示**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_14_color_FFFFFF_t_70_g_se_x_16][]

#### 二维码展示代码： ####

#### ![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16 1][]请求后端的支付二维码接口 ####

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

最后，扫码支付后，即可完成。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f78f63ddb5bc4ecf8a8610d5fc4daafc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f200423746924d00baaed28013ec5826.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/16a0a0469109487991d602f6009e2b7c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/92b2867689b341099755114e290974af.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_20,color_FFFFFF,t_70,g_se,x_16