目錄

• 頂部導航條：復用head組件
• 美團外賣圖片
• 支付剩余時間
• 訂單信息
• 支付方式
• 確定支付
• 蒙版
• scan掃描
• • QrCode在vue中的使用
  • QrCode的使用

虛擬DOM掛載到真實DOM上之后，從路由中獲取訂單id和商品價格，帶著訂單id調用后端接口，后端接口（1）查詢數據庫獲取訂單信息，（2）計算剩余時間：當前時間-訂單信息中的訂單創建時間>=15min*50s=900s，說明超時了，將剩余時間置為0，否則設置剩余時間=900-(當前時間-訂單信息中的訂單創建時間)，將剩余時間保存在訂單信息中并返回給前端，前端保存并從中取出商家信息、剩余時間，剩余時間為0，將overtime設為true，不為0，使用setInterval每隔1s計算剩余時間：（1）剩余時間-1，（2）計算倒計時（分鐘、秒數）

mounted() {let _this = this;// 從路由中獲取訂單id和商品價格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) {// 剩余時間為0 到時間了 overtime設為truethis.overtime = true;}this.timer = setInterval(function () {remain_time--;// 每一秒 剩余時間-1s_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;//支付超時} }

頂部導航條：復用head組件

<v-head title="支付訂單" goBack="true" bgColor="#f4f4f4"></v-head>

美團外賣圖片

<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;">&#xe60f;</i></span><span class="pay-way-name">支付寶</span><!--如果你點了支付寶 此時payType=1 展示√這個iconfont--><span class="selected" v-if="payType === '1'"><i class="iconfont">&#xe6da;</i></span><!--否則展示一個空白圓圈--><span class="select" v-else></span> </li> <li @click="payType = '2'"><!--微信圖標--><span class="pay-icon"><i class="iconfont" style="color:#2aaf90;">&#xe62a;</i></span><span class="pay-way-name">微信支付</span><!--如果你點了微信 此時payType=2 展示√這個iconfont--><span class="selected" v-if="payType === '2'"><i class="iconfont">&#xe6da;</i></span><!--否則展示一個空白圓圈--><span class="select" v-else></span> </li>

確定支付

點擊確定支付后 判斷是否超時 超時了展示“支付超時” 沒超時將payWayShow設為true 展示蒙版：“手機掃碼支付”、“調起APP支付”

<div class="submit" @click="selectPayType()">確定支付</div> <script>selectPayType() {if (this.overtime) {this.alertText = '支付超時';this.showTip = true;return;}this.payWayShow = true;} </script>

蒙版

點擊“確定支付”后 前端先判斷訂單是否正在提交 防止用戶重復提交若沒有 則繼續判斷訂單是否超時 若超時 顯示“支付超時” 否則前端調用自己的initPay方法 initPay會調用后端接口pay 執行initPay方法：

如果前端傳來的order_id為空 后端返回給前端status為-1 錯誤信息：初始化支付失敗參數有誤

后端查詢數據庫 若order_id已經存在且在數據庫中的狀態為支付成功 則后端返回前端status為302 信息：該訂單已完成支付！

若order_id已經存在且在數據庫中的狀態為未支付 則刪除數據庫中的order_id 所以前端拿到后端返回的信息首先判斷狀態碼status 接下來 后端將訂單數據 如訂單編號、價格、支付方式等等信息使用md5加密

若是掃碼支付 后端訪問另一個接口 獲取二維碼 若該接口的返回的code為0000 獲取成功 后端修改二維碼為：掃碼直接請求payNotice 將二維碼返回給前端 前端將二維碼傳給scan組件并展示scan組件

若是調用APP支付 后端返回客戶端同步跳轉地址 前端會將這個地址放在表單中 然后調用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'"><!--如果這個div被點擊 則method = 'trpay.trade.create.scan' 展示√這個iconfont--><i class="iconfont selected" v-if="method === 'trpay.trade.create.scan'">&#xe6da;</i><!--否則展示空圓圈--><i class="select" v-else>&#xe6da;</i><span>手機掃碼支付</span></div><div class="wap" @click="method='trpay.trade.create.wap'"><!--如果這個div被點擊 則method = 'trpay.trade.create.wap' 展示√這個iconfont--><i class="iconfont selected" v-if="method === 'trpay.trade.create.wap'">&#xe6da;</i><!--否則展示空圓圈--><i class="select" v-else></i><span>調起app支付</span></div><!--preventRepeat初始值為false 點擊提交后 會置true 防止重復提交 提交完會重置false--><div class="submit" :class="{disabled:preventRepeat}" @click="submit()">確定支付</div></div><!--×這個iconfont 點擊后關閉蒙版--><div class="close" @click="close();"><i class="iconfont icon-close">&#xe625;</i></div></div> </transition> <!--掃碼支付--> <scan :payType="payType" :orderData="orderData" @close="scanShow = false;" v-show="scanShow"></scan> <!--調用app支付--> <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(() => {//訂單支付成功 1s后跳轉到訂單頁面_this.$router.push('/order');}, 1000)return;}if (this.method === 'trpay.trade.create.scan') {//掃碼支付方式this.orderData = response.data.data;this.scanShow = true;// 展示二維碼} else {//調起APP支付 提交form表單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掃描

用戶掃碼會去調用notifyUrl

虛擬DOM掛載到真實DOM上面之后監聽orderData數據的變化 最初orderData為null 父組件給scan組件傳入orderData 此時會執行下面的方法 若已有QRCode對象 重新生成一個二維碼 否則創建QRCode對象并生成一個二維碼 然后監聽訂單狀態

watch: {orderData(val) {this.orderData = val;if (this.qrcode) {this.qrcode.makeCode(val.data.qrcode);// 已有QRCode對象 重新生成一個二維碼} else {this.qrcode = new QRCode(this.$refs['qrcode'], {// 創建QRCode對象 生成一個二維碼text: val.data.qrcode,width: 200,height: 200,});}this.listenStatus(val.outTradeNo);// orderData中的outTradeNo：商戶自主生成的訂單號} }

監聽訂單的狀態：每隔3s執行listenStatus方法 listenStatus會調用后端接口listen_status 實時監聽支付狀態 listen_status會使用訂單編號去數據庫查詢訂單的狀態 若狀態為200代表支付成功 后端向前端返回狀態碼200及“支付完成” 清空定時器 并在1s后跳轉到訂單詳情頁 否則返回狀態碼-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 = '支付成功，準備跳轉';this.showTip = true;setTimeout(()=>{// 1s后跳轉到訂單詳情頁_this.$router.push({path: '/order_detail', query: {id: _this.orderData.order_id}})},1000);}})}, 3000); }

界面展示：

<div id="scan-container"><header><!--展示支付寶或微信圖標 根據payType判斷--><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>產品名稱：{{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><!--×這個iconfont 點擊后關閉蒙版--><div class="close" @click="close();"><i class="iconfont icon-close">&#xe625;</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 的標簽,再通過 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"); // 設置要生成二維碼的鏈接

其他可選參數：

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"); // 生成另外一個二維碼

總結

以上是生活随笔為你收集整理的pay支付页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。