二维码收款——前端UI
线下店铺一般使用的店铺收款码，有银行提供的，有通联的，结合语音播报，方便快捷，下面我们来做一个类似的属于自己收款系统
本系列文章分3部分
- 前端UI
- 后端系统
- 通知系统
UI界面直接借鉴微信（哈哈），如下图
前端使用Vue，3个文件，pay.html，pay.js，pay.css
简要说明
- 数字键盘使用table标签布局，可以完美的模拟微信键盘的效果，按键按下时有高亮效果，通过js控制只能输入有效的数值
- 请求时URL中带有商户号参数，例如xxx.com/pay.html?mercNo=xxx，mercNo就是商户号，商户信息包含商户名，商户LOGO，请求商户信息后，显示出来
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <title>付款</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" /> <link rel="stylesheet" href="pay.css" /> <script src="../js/common.js"></script> <style type="text/css"> [v-cloak] { display: none; } </style> </head> <body> <div class="w-warp" id="main" v-cloak> <div class="info"> <div class="text"> <h4>付款给</h4> <p style="color: gray">{{mercInfo.mercName}}</p> </div> <div class="head"><img :src="mercInfo.mercLogo" width="60px" height="60px" /></div> </div> <div class="amount"> <h5>金额</h5> <div class="input"> <p class="symbol">￥</p> <p class="placeholder" v-if="!activeInput">输入金额</p> <p class="num" v-else>{{validNum}}</p> </div> </div> <div class="addmemo"> <p @click="showMemoDialog=true">{{memo.length>0 ? memo : '添加备注'}}</p> </div> <div class="keyboard"> <table cellspacing="8" > <tr> <td @click="onKeyboard(1)" @touchstart="keyHighlight['1']=true" @touchend="keyHighlight['1']=false" :class="{'keyhighlight': keyHighlight['1']}">1</td> <td @click="onKeyboard(2)" @touchstart="keyHighlight['2']=true" @touchend="keyHighlight['2']=false" :class="{'keyhighlight': keyHighlight['2']}">2</td> <td @click="onKeyboard(3)" @touchstart="keyHighlight['3']=true" @touchend="keyHighlight['3']=false" :class="{'keyhighlight': keyHighlight['3']}">3</td> <td style="width: 22%;" @click="onKeyboard('DEL')" @touchstart="keyHighlight['DEL']=true" @touchend="keyHighlight['DEL']=false" :class="{'keyhighlight': keyHighlight['DEL']}">DEL</td> </tr> <tr> <td @click="onKeyboard(4)" @touchstart="keyHighlight['4']=true" @touchend="keyHighlight['4']=false" :class="{'keyhighlight': keyHighlight['4']}">4</td> <td @click="onKeyboard(5)" @touchstart="keyHighlight['5']=true" @touchend="keyHighlight['5']=false" :class="{'keyhighlight': keyHighlight['5']}">5</td> <td @click="onKeyboard(6)" @touchstart="keyHighlight['6']=true" @touchend="keyHighlight['6']=false" :class="{'keyhighlight': keyHighlight['6']}">6</td> <td rowspan="3" class="paybtn" @click="onKeyboard('pay')" @touchstart="keyHighlight['pay']=true" @touchend="keyHighlight['pay']=false" :class="{'paybtnhighlight': keyHighlight['pay']}">付款</td> </tr> <tr> <td @click="onKeyboard(7)" @touchstart="keyHighlight['7']=true" @touchend="keyHighlight['7']=false" :class="{'keyhighlight': keyHighlight['7']}">7</td> <td @click="onKeyboard(8)" @touchstart="keyHighlight['8']=true" @touchend="keyHighlight['8']=false" :class="{'keyhighlight': keyHighlight['8']}">8</td> <td @click="onKeyboard(9)" @touchstart="keyHighlight['9']=true" @touchend="keyHighlight['9']=false" :class="{'keyhighlight': keyHighlight['9']}">9</td> </tr> <tr> <td colspan="2" @click="onKeyboard(0)" @touchstart="keyHighlight['0']=true" @touchend="keyHighlight['0']=false" :class="{'keyhighlight': keyHighlight['0']}">0</td> <td @click="onKeyboard('.')" @touchstart="keyHighlight['.']=true" @touchend="keyHighlight['.']=false" :class="{'keyhighlight': keyHighlight['.']}">.</td> </tr> </table> </div> <!-- 备注输入框 --> <van-dialog v-model="showMemoDialog" confirm-button-color='#1aad19'> <van-field v-model="memo" label="备注" placeholder="输入备注" size='large'/> </van-dialog> </div> </div> </body> <!-- 引入 Vue 和 Vant 的 JS 文件 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script> <script src="../js/config.js"></script> <script src="pay.js"></script> </html>
new Vue({ el: '#main', data: { activeInput: false, //激活输入 inputText: [], //输入的字符队列 validNum: 0, //有效的输入数字 keyHighlight: { 1: false, 2: false, 3: false, 4: false, 5: false, 6: false, 7: false, 8: false, 9: false, 0: false, '.': false, DEL: false, pay: false, }, //键盘高亮 showMemoDialog: false, //显示备注输入框 memo: '', mercInfo: {}, //商户信息 }, created() {}, mounted() { //商户号 let mercNo = getQueryVariable('mercNo'); refu.get(`/a/merc/info?mercNo=${mercNo}`).then((res) => { this.mercInfo = res.result; }); }, methods: { //验证金额是否有效 validNumber(t) { var reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; return reg.test(t); }, //点击键盘 onKeyboard(key) { if (key == 'DEL') { this.inputText.pop(); if (this.inputText.length > 0) { var s = this.inputText.join(''); this.validNum = s; } else { this.validNum = 0; this.activeInput = false; } return; } if (key == 'pay') { console.log('输入金额：', this.validNum); if (this.validNum == '0') return; let amount = parseFloat(this.validNum); if (!this.testWeixinOk()) { refu.toast('请在微信内打开'); return; } //发起支付请求 this.requestPay(this.mercInfo.mercNo, amount, this.memo).then((res) => { this.invokeWxpayJsApi(res.result); }); return; } this.inputText.push(key); var s = this.inputText.join(''); if (this.validNumber(s)) { this.validNum = s; this.activeInput = true; } else { this.inputText.pop(); } }, //发起支付请求 async requestPay(mercNo, amount, memo) { let param = { mercNo: mercNo, amount: amount, memo: memo, channel: 'wxpay', }; return await refu.post('/a/create/pay/order', param); }, //检测微信环境 testWeixinOk() { return typeof WeixinJSBridge != 'undefined'; }, //拉起微信支付 invokeWxpayJsApi(param) { WeixinJSBridge.invoke('getBrandWCPayRequest', param, function (res) { if (res.err_msg === 'get_brand_wcpay_request:ok') { // 使用以上方式判断前端返回,微信团队郑重提示： // res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 window.location.href = SiteInfo.paySuccessRedirect; } }); }, }, filters: {}, computed: {}, });
body { background: #ededed; margin: 0; } p, h4 { margin: 0.5rem 0rem; } .w-warp { display: flex; flex-direction: column; height: 100%; } .info { display: flex; padding: 1rem 1rem; align-items: center; } .info .text { flex-grow: 1; } .info .head { flex-grow: 0; } .amount { flex-grow: 1; padding: 0.5rem 1rem; background-color: white; border-top-left-radius: 0.8rem; border-top-right-radius: 0.8rem; } .amount .input { display: flex; align-items: flex-end; font-size: 30px; font-weight: bold; border-bottom: solid 1px lightgray; } .input .symbol { margin: 0.5rem 0.6rem 0.5rem 0rem; } .input .placeholder { font-weight: normal; color: lightgray; } .addmemo { display: flex; justify-content: center; color: #726f89; background: white; padding: 1rem 0; font-size: 16px; } .keyboard table { width: 100%; } .keyboard td { font-size: 18; font-weight: bold; background: white; border-radius: 10px; border: none; text-align: center; padding: 0.8rem 0rem; } .keyboard .keyhighlight { background: #dedede; } .keyboard .paybtn { background: #1aad19; color: white; } .keyboard .paybtnhighlight { background: #07ae56; }
下一篇，后端API
