生活随笔
收集整理的這篇文章主要介紹了
pay支付页面
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
目錄
- 頂部導(dǎo)航條：復(fù)用head組件
- 美團(tuán)外賣圖片
- 支付剩余時間
- 訂單信息
- 支付方式
- 確定支付
- 蒙版
- scan掃描
虛擬DOM掛載到真實DOM上之后，從路由中獲取訂單id和商品價格，帶著訂單id調(diào)用后端接口，后端接口（1）查詢數(shù)據(jù)庫獲取訂單信息，（2）計算剩余時間：當(dāng)前時間-訂單信息中的訂單創(chuàng)建時間>=15min*50s=900s，說明超時了，將剩余時間置為0，否則設(shè)置剩余時間=900-(當(dāng)前時間-訂單信息中的訂單創(chuàng)建時間)，將剩余時間保存在訂單信息中并返回給前端，前端保存并從中取出商家信息、剩余時間，剩余時間為0，將overtime設(shè)為true，不為0，使用setInterval每隔1s計算剩余時間：（1）剩余時間-1，（2）計算倒計時（分鐘、秒數(shù)）
mounted() {let _this
= this;this.order_id
= this.$route
.query
.order_id
;this.price
= this.$route
.query
.price
;orderInfo({order_id
: this.order_id
}).then((response
) => {this.order_info
= response
.data
.data
;let remain_time
= response
.data
.data
.pay_remain_time
;this.restaurant_info
= this.order_info
.restaurant
;if (remain_time
=== false) {this.overtime
= true;}this.timer
= setInterval(function () {remain_time
--;_this
.calc_remain_time(remain_time
);}, 1000)})
}
orderInfo(data
){let req
= {url
: `v1/order/${data.order_id}`}return _get(req
);
}
_get(req
){return axios
.get(req
.url
, {params
: req
.data
})
}
calc_remain_time(remain_time
) {let minutes
= (remain_time
/ 60 % 60)this.minutes
= minutes
>= 10 ? minutes
+ '' : '0' + minutes
;let seconds
= (remain_time
% 60);this.seconds
= seconds
>= 10 ? seconds
+ '' : '0' + seconds
;if (!this.minutes
&& !this.seconds
) {clearInterval(this.timer
);this.overtime
= true;}
}
頂部導(dǎo)航條：復(fù)用head組件
<v-head title="支付訂單" goBack="true" bgColor="#f4f4f4"></v-head>
美團(tuán)外賣圖片
<div class="img"><img src="../../assets/pay_adv.png">
</div>
支付剩余時間
<h3>支付剩余時間
</h3><div class="remain-time" v-if="!overtime"><span>{{minutes.slice(0, 1)}}
</span><span>{{minutes.slice(1, 2)}}
</span><span>:
</span><span>{{seconds.slice(0, 1)}}
</span><span>{{seconds.slice(1, 2)}}
</span></div>
<span class="overtime" v-else>支付超時
</span>
訂單信息
展示餐廳圖片 商品價格 店鋪名 訂單號
<div
class="avatar"><img
:src
="restaurant_info.pic_url">
</div
>
<div
class="info"><span
class="price">￥
{{this.price
}}</span
><p
>{{restaurant_info
.name
}} - {{order_id
}}</p
>
</div
>
支付方式
<li @click="payType = '1'"><span class="pay-icon"><i class="iconfont" style="color:#3d91e4;"></i></span><span class="pay-way-name">支付寶
</span><span class="selected" v-if="payType === '1'"><i class="iconfont"></i></span><span class="select" v-else></span>
</li>
<li @click="payType = '2'"><span class="pay-icon"><i class="iconfont" style="color:#2aaf90;"></i></span><span class="pay-way-name">微信支付
</span><span class="selected" v-if="payType === '2'"><i class="iconfont"></i></span><span class="select" v-else></span>
</li>
確定支付
點擊確定支付后 判斷是否超時 超時了展示“支付超時” 沒超時將payWayShow設(shè)為true 展示蒙版：“手機(jī)掃碼支付”、“調(diào)起APP支付”
<div class="submit" @click="selectPayType()">確定支付
</div>
<script>selectPayType() {if (this.overtime) {this.alertText = '支付超時';this.showTip = true;return;}this.payWayShow = true;}
</script>
蒙版
點擊“確定支付”后 前端先判斷訂單是否正在提交 防止用戶重復(fù)提交若沒有 則繼續(xù)判斷訂單是否超時 若超時 顯示“支付超時” 否則前端調(diào)用自己的initPay方法 initPay會調(diào)用后端接口pay 執(zhí)行initPay方法：
如果前端傳來的order_id為空 后端返回給前端status為-1 錯誤信息：初始化支付失敗參數(shù)有誤后端查詢數(shù)據(jù)庫 若order_id已經(jīng)存在且在數(shù)據(jù)庫中的狀態(tài)為支付成功 則后端返回前端status為302 信息：該訂單已完成支付！若order_id已經(jīng)存在且在數(shù)據(jù)庫中的狀態(tài)為未支付 則刪除數(shù)據(jù)庫中的order_id 所以前端拿到后端返回的信息首先判斷狀態(tài)碼status 接下來 后端將訂單數(shù)據(jù) 如訂單編號、價格、支付方式等等信息使用md5加密若是掃碼支付 后端訪問另一個接口 獲取二維碼 若該接口的返回的code為0000 獲取成功 后端修改二維碼為：掃碼直接請求payNotice 將二維碼返回給前端 前端將二維碼傳給scan組件并展示scan組件若是調(diào)用APP支付 后端返回客戶端同步跳轉(zhuǎn)地址 前端會將這個地址放在表單中 然后調(diào)用app 提交表單
<transition name="fade"><div class="pay-channel" v-show="payWayShow"><div class="channel-select-container"><div class="scan" @click="method = 'trpay.trade.create.scan'"><i class="iconfont selected" v-if="method === 'trpay.trade.create.scan'"></i><i class="select" v-else></i><span>手機(jī)掃碼支付
</span></div><div class="wap" @click="method='trpay.trade.create.wap'"><i class="iconfont selected" v-if="method === 'trpay.trade.create.wap'"></i><i class="select" v-else></i><span>調(diào)起app支付
</span></div><div class="submit" :class="{disabled:preventRepeat}" @click="submit()">確定支付
</div></div><div class="close" @click="close();"><i class="iconfont icon-close"></i></div></div>
</transition>
<scan :payType="payType" :orderData="orderData" @close="scanShow = false;" v-show="scanShow"></scan>
<form action="http://pay.trsoft.xin/order/trpayGetWay" method="post" id="form" ref="form"><input type="hidden" name="amount" v-model=form_data.amount><input type="hidden" name="outTradeNo" v-model="form_data.outTradeNo"><input type="hidden" name="payType" v-model="payType"><input type="hidden" name="tradeName" v-model="form_data.tradeName"><input type="hidden" name="notifyUrl" v-model="form_data.notifyUrl"><input type="hidden" name="synNotifyUrl" v-model="form_data.synNotifyUrl"><input type="hidden" name="payuserid" v-model="form_data.payuserid"><input type="hidden" name="appkey" v-model="form_data.appkey"><input type="hidden" name="method" v-model="method"><input type="hidden" name="sign" v-model="form_data.sign"><input type="hidden" name="timestamp" v-model="form_data.timestamp"><input type="hidden" name="version" v-model="form_data.version">
</form>
<script>submit() {if (this.preventRepeat) return;if (this.overtime) {this.alertText = '支付超時';this.showTip = true;return;}this.preventRepeat = true;initPay({order_id: this.order_id, payType: this.payType, method: this.method}).then((response) => {let res = response.data;this.preventRepeat = false;if (res.status === -1) {this.alertText = res.message;this.showTip = true;return;}if (res.status === 302) {let _this = this;this.alertText = res.message;this.showTip = true;setTimeout(() => {_this.$router.push('/order');}, 1000)return;}if (this.method === 'trpay.trade.create.scan') {this.orderData = response.data.data;this.scanShow = true;} else {this.form_data = response.data.datathis.$nextTick(() => {this.$refs['form'].submit();})}})}initPay = (data) => {let req = {data,url: 'v1/pay'}return _post(req);}_post(req){return axios({method: 'post', url: `/${req.url}`, data: req.data})}
</script>
scan掃描
用戶掃碼會去調(diào)用notifyUrl
虛擬DOM掛載到真實DOM上面之后監(jiān)聽orderData數(shù)據(jù)的變化 最初orderData為null 父組件給scan組件傳入orderData 此時會執(zhí)行下面的方法 若已有QRCode對象 重新生成一個二維碼 否則創(chuàng)建QRCode對象并生成一個二維碼 然后監(jiān)聽訂單狀態(tài)
watch
: {orderData(val
) {this.orderData
= val
;if (this.qrcode
) {this.qrcode
.makeCode(val
.data
.qrcode
);} else {this.qrcode
= new QRCode(this.$refs
['qrcode'], {text
: val
.data
.qrcode
,width
: 200,height
: 200,});}this.listenStatus(val
.outTradeNo
);}
}
監(jiān)聽訂單的狀態(tài)：每隔3s執(zhí)行l(wèi)istenStatus方法 listenStatus會調(diào)用后端接口listen_status 實時監(jiān)聽支付狀態(tài) listen_status會使用訂單編號去數(shù)據(jù)庫查詢訂單的狀態(tài) 若狀態(tài)為200代表支付成功 后端向前端返回狀態(tài)碼200及“支付完成” 清空定時器 并在1s后跳轉(zhuǎn)到訂單詳情頁 否則返回狀態(tài)碼-1及“未支付”
listenStatus(outTradeNo
) {clearInterval(this.timer
);let _this
= this;this.timer
= setInterval(() => {listenStatus({outTradeNo
}).then((response
) => {if (response
.data
.status
=== 200) {clearInterval(this.timer
);this.alertText
= '支付成功，準(zhǔn)備跳轉(zhuǎn)';this.showTip
= true;setTimeout(()=>{_this
.$router
.push({path
: '/order_detail', query
: {id
: _this
.orderData
.order_id
}})},1000);}})}, 3000);
}
界面展示：
<div id="scan-container"><header><i class="iconfont pay-icon" :style="{color:payTypeObj[payType]['color']}"v-html="payTypeObj[payType]['icon']"></i><span class="pay-way-name">{{payTypeObj[payType]['name']}}
</span></header><div class="qrcode-container"><div id="qrcode" ref="qrcode"></div></div><div class="info-container"><ul><li><span>產(chǎn)品名稱：{{orderData.tradeName}}
</span></li><li><span>訂單編號：{{orderData.outTradeNo}}
</span></li><li><span>訂單金額：{{orderData.amount / 100}}
</span></li><li><span>實付金額：{{orderData.amount / 100}}
</span></li></ul></div><div class="close" @click="close();"><i class="iconfont icon-close"></i></div><alert-tip :text="alertText" :showTip.sync="showTip"></alert-tip>
</div>
<script>close() {clearInterval(this.timer)this.$emit('close');}
</script>
QrCode在vue中的使用
QRCode.js 是一個用于生成二維碼的 JavaScript 庫。主要是通過獲取 DOM 的標(biāo)簽,再通過 HTML5 Canvas 繪制而成,不依賴任何庫。
安裝：npm install qrcodejs2 --save引入：import QRCode from 'qrcodejs2'需要一個生成二維碼的div：<div id="qrcode" ref="qrcode"></div>生成二維碼
let qrcode
= new QRCode('qrcode', {width
: 132, height
: 132, text
: code
, colorDark
: "#000", colorLight
: "#fff", })
清除二維碼
qrcode
.clear();
生成另外一個二維碼
qrcode
.makeCode("http://www.w3cschool.cc");
QrCode的使用
在html中定義：<div id="qrcode"></div>在js中使用：new QRCode(document.getElementById("qrcode"), "http://www.runoob.com"); // 設(shè)置要生成二維碼的鏈接其他可選參數(shù)：
var qrcode
= new QRCode(document
.getElementById("qrcode"), {text
: "http://www.runoob.com",width
: 128,height
: 128,colorDark
: "#000000",colorLight
: "#ffffff",correctLevel
: QRCode
.CorrectLevel
.H
});
qrcode
.clear();
qrcode
.makeCode("http://www.w3cschool.cc");
總結(jié)
以上是生活随笔為你收集整理的pay支付页面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
