未加星标

qrcode和Websocket实现在线支付

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

收营员选择收款方式(现金/支付宝/微信),如果是支付宝/微信,服务端会传给前端一个交易码,前端用 qrcode 生成二维码给客户扫并且支付, websocket 建立持久的连接直到收到服务端返回的true,前端提示交易成功。

html5 WebSocket

1.简介

我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?

答案很简单,因为 HTTP 协议有一个缺陷:通信只能由客户端发起。

举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。我们只能使用”轮询”:每隔一段时候,就发出一个询问,了解服务器有没有新的信息。最典型的场景就是聊天室。

轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。因此,工程师们一直在思考,有没有更好的方法。WebSocket 就是这样发明的。

2.使用

http://jsbin.com/muqamiqimu/edit?js,console

var ws = new WebSocket("wss://echo.websocket.org"); ws.onopen = function(evt) { console.log("Connection open ..."); ws.send("Hello WebSockets!"); }; ws.onmessage = function(evt) { console.log( "Received Message: " + evt.data); ws.close(); }; ws.onclose = function(evt) { console.log("Connection closed."); }; qrcode-vue

https://www.npmjs.com/package/qrcode-vue

1.安装

npm install save qrcode.vue

2.使用

<template> <div> <qrcode-vue :size="size" :value="value" :logo="logo" :bgColor="bgColor" :fgColor="fgColor" ></qrcode-vue> </div> </template> <script> import qrcodeVue from '../src/qrcode-vue' export default { data () { return { size: 128, bgColor: '#fff', fgColor: '#000', value: 'https://github.com/l-ll/qrcode-vue', logo: 'https://avatars3.githubusercontent.com/u/7104141?v=3&s=80' } }, components: { qrcodeVue } } </script> 在线支付场景实例 <style lang="less"> @import '../../styles/common.less'; .pay-template { .title { font-size: 18px; font-weight: 700; } .orderInfo { .payType { width: 200px } canvas { border-radius: 4px; } } .footer { text-align: right; .submit { margin-left: 5px; } } } </style> <template> <div class="pay-template"> <Spin size="large" fix v-if="spinShow"></Spin> <p slot="header"> <span class="title">付款 {{orderInfo.orderNo}}</span> </p> <div class="orderInfo"> <p>订单类型:{{orderInfo.orderType|orderType}}</p> <p>订单金额:{{orderInfo.totalAmount|money}}</p> <p>优惠金额:{{orderInfo.totalAmount - orderInfo.finalAmount|money}}</p> <p>实付金额: <span>{{orderInfo.finalAmount|money}}</span> </p> <p>支付方式: <Select class="payType" v-model="orderInfo.payType"> <Option value="CASH">现金</Option> <Option value="WECHAT">微信</Option> <Option value="ALIPAY">支付宝</Option> </Select> </p> <p style="text-align: center" v-if="orderInfo.payType!='CASH' && message!==''">{{message}}</p> <qr-code-vue v-if="orderInfo.payType!='CASH'&&message===''&&qrCodeValue!==''" style="text-align: center;" :value="qrCodeValue" size="150" level="H"></qr-code-vue> </div> <div class="footer" slot="footer"> <Button type="ghost" @click="$emit('emitCloseDialog')">取消</Button> <Button class="submit" v-if="orderInfo.payType=='CASH'" type="primary" @click="handleSureOrder"> 确定 </Button> </div> </div> </template> <script> import { getQrCode, sureOrder } from '../../api/retail' import QrCodeVue from 'qrcode.vue' export default { props: ['orderInfo', 'orderShow'], data() { return { message: '', qrCodeValue: '', spinShow: false } }, components: { QrCodeVue }, watch: { 'orderInfo.payType'(type) { this.makeQrCode(type) }, orderShow(flag) { if (flag) { this.webSocketInit() } else { this.webSocketClose() } } }, methods: { makeQrCode(type) { let _this = this if (type !== 'CASH') { _this.spinShow = true return new Promise((resolve, reject) => { getQrCode({ orderId: _this.orderInfo.id, payType: type }).then(response => { _this.spinShow = false if (response.status === 200) { _this.qrCodeValue = response.data _this.message = '' } else { _this.message = response.message } resolve(response) }).catch(error => { _this.qrCodeValue = '' _this.message = '' _this.spinShow = false reject(error) }) }) } }, handleSureOrder() { let _this = this _this.spinShow = true return new Promise((resolve, reject) => { sureOrder({ orderNo: _this.orderInfo.orderNo, id: _this.orderInfo.id, payType: _this.orderInfo.payType }).then(response => { _this.spinShow = false if (response.status && response.status === 200) { _this.$Notice.success({ title: '付款成功通知', desc: '订单' + _this.orderInfo.orderNo + '付款成功', duration: 3 }) _this.$emit('emitCloseDialog') _this.$store.commit('RELOAD') } else { _this.$Notice.error({ title: response.message, desc: '订单' + _this.orderInfo.orderNo + '付款失败', duration: 3 }) } resolve(response) }).catch(error => { _this.spinShow = false reject(error) }) }) }, webSocketInit() { if ('WebSocket' in window) { this.websock = new WebSocket("ws://xxxxxxxxxxxxxxxxxxxx") this.websock.onopen = this.webSocketOnOpen this.websock.onmessage = this.webSocketOnMessage this.websock.onerror = this.webSocketOnError this.websock.onclose = this.webSocketClose } else { alert('Not support websocket') } }, webSocketOnOpen(event) { console.log('websocket open') }, webSocketOnMessage(event) { if (event.data) { this.$Notice.success({ title: '付款成功通知', desc: '订单' + this.orderInfo.orderNo + '付款成功', duration: 3 }) this.$emit('emitCloseDialog') this.$store.commit('reloadOrder') } }, webSocketOnError(event) { this.$Message.error("websocket 连接失败") }, webSocketClose(event) { console.log('websocket close') } } } </script>

深自缄默,如云漂泊 本文链接: http://zc95.github.io/2018/08/16/qrcodeAndWebsocket/

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: gt,lt,orderInfo,qrcode,vue,payType,response,amp,message,div,spinShow,ws,type
分页:12
转载请注明
本文标题:qrcode和Websocket实现在线支付
本站链接:https://www.codesec.net/view/588419.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(59)