vue項目支付功能代碼詳解
更新時間：2022年01月05日 16:05:52 作者：接著奏樂接著舞。
這篇文章主要介紹了vue項目支付功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1.支付寶方式：
支付寶方式：點擊支付寶支付, 調(diào)用后臺接口(攜帶訂單號)，后臺返回一個form表單(HTML字符串結(jié)構(gòu))，
提交form就可以調(diào)用支付寶支付
代碼：
// 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()
})
})
}
}
2.微信支付
大部分工作量是后端的事情，訂單的生成由后端去和騰訊對接的，前端只需要負責(zé)將后端返回來的支付二維碼（由后端生成的，有些情況也可以前端去對接訂單生成之后由前端自己生成二維碼，這種情況比較少）展示在終端供用戶掃碼即可
需要自己根據(jù)后臺返回的url生成二維碼頁面，如圖所示
二維碼展示代碼：
請求后端的支付二維碼接口
最后，掃碼支付后，即可完成。
到此這篇關(guān)于vue項目支付功能的文章就介紹到這了,更多相關(guān)vue支付功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
props屬性是父子組件之間的通信橋梁。這篇文章主要介紹了Vue中props的使用,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了在vue-cli3中使用axios獲取本地json操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了分享9個Vue的巧妙冷技巧，文章首先通過巧用$attrs和$listeners的技巧展開，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
大家應(yīng)該都知道vue是單向數(shù)據(jù)流，一般我們也不會在子組件里面修改父組件傳進來的值，但總有需要修改的時候，這篇文章主要介紹了vue中修改props傳進來的值,需要的朋友可以參考下2022-12-12
vue新玩法VueUse工具庫具體用法@vueuse/core詳解
這篇文章主要介紹了vue新玩法VueUse-工具庫@vueuse/core,VueUse不是Vue.use，它是一個基于?Composition?API?的實用函數(shù)集合，下面是具體的一些用法，需要的朋友可以參考下2022-08-08![詳解vue.js+UEditor集成 [前后端分離項目]](http://img.jbzj.com/images/xgimg/bcimg5.png)
本篇文章主要介紹了詳解vue.js+UEditor集成 [前后端分離項目] ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了 vue 動態(tài)組件component ，vue提供了一個內(nèi)置的<component>,專門用來實現(xiàn)動態(tài)組件的渲染，這個標簽就相當于一個占位符，需要使用is屬性指定綁定的組件，想了解更多詳細內(nèi)容的小伙伴請參考下面文章的具體內(nèi)容2021-11-11
這篇文章主要介紹了vue上傳圖片到oss的方法示例（圖片帶有刪除功能），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在vue中，有時候你需要對data中的數(shù)據(jù)進行處理，或者對抓取的數(shù)據(jù)進行處理之后再掛載呈現(xiàn)到標簽中，這時候你就需要計算屬性了，當然看到這里你可能還是不了解那下面我舉幾個實例并附代碼解釋2023-02-02
Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程
這篇文章主要介紹了Vue中transition單個節(jié)點過渡與transition-group列表過渡全過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04