uniApp简单使用webSocket实现核销二维码业务

主要功能逻辑 - >

用户支付订单获取订单详情 - > 点击订单详情建立长连接 -> 商家使用机器核销二维码 -> 二维码被核销后及时刷新页面使用状态并告知用户核销成功

代码区

//组件
import capHeader from '../../componentsA/Com/headerCap.vue'
import showPrice from '../../componentsA/Com/showPrice.vue'
import localTion from '../../../components/Business/PositionLocal.vue'
import AddressSerivce from '../../componentsA/Com/AddressSerivce.vue'
import orderInfo from '../../componentsA/orderDetails/orderInfo.vue'
import service from '../../componentsA/orderDetails/service.vue'
import subTitle from '../../componentsA/Com/subTitle.vue'
import carduserInfo from '../../componentsA/orderDetails/cardUseInfo.vue'//api
import {getOrderInfoById,getOrderUseInfo,cancelOrder,orderRefund
} from '../../Api/orderDetailsApi/index.js'export default {data() {return {PageInfo: {title: '订单详情'},paramsData: '', //传递的参数info: '',StoreInfo: '', //门店信息OrderInfo: '', //订单信息GoodsInfo: '', //商品详情OrderReduction: '', //优惠信息,OrderUseInfo: '', //订单二维码使用信息nowStoreId: '', //当前门店idrefundNum: 1, //退票数量minNum: 1, //最小退票数量maxNum: 1, //最大退票数量delayTime: false, //控制重连间隔时间isWebSocket:false , //长连接状态 true 已连接 false 未连接}},onLoad(params) {//解析参数let item = JSON.parse(decodeURIComponent(params.item));this.paramsData = item; //保存this.nowStoreId = this.$Com.storeId; //获取sotreId 门店},onShow() {this.init();}, mounted() {this.initWebSocket(); //建立webSocket连接}, // 离开该层时执行，划重点了！！！destroyed: function() {// 离开路由之后断开websocket连接if(this.isWebSocket){this.closeSocket();}},methods: {init() {//重新刷新页面数据this.getOrderInfoByIdApi(this.paramsData); //获取订单信息this.getOrderUseInfoApi(this.paramsData); //获取订单核销信息},//websocket- StartinitWebSocket() {let that = this; //每次开启前 先检查是否已经有链接 - 有则 关闭长连接 避免重复连接if(this.isWebSocket){this.closeSocket();this.isWebSocket = false ; //代表链接已被关闭}// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于httpslet userId = this.$store.state.vuex_userInfoAuth.globalUser.id;let url = this.$Com.websocketCommonUrl + userId; //拼接webSocket url并带上用户id  console.log(url, 'webSocket链接地址');uni.connectSocket({url,success(result) {console.log('1.向地址发起webSocket连接成功', result)},fail(err) {console.log('向地址发起webSocket连接失败！！!', err)this.reconnect(); //如果没连上 则会每5秒 重新连接一次}});uni.onSocketOpen(() => {this.isWebSocket = true ; //代表连接已被打开console.log('2.监听webScoket连接被打开!')});uni.onSocketError(function(res) {this.reconnect(); //重新尝试链接console.log('err - >WebSocket连接打开出错，请检查！');});uni.onSocketClose(function(res) {console.log('close - > WebSocket 已主动关闭');});uni.onSocketMessage((r) => {console.log(r, '接受到的服务器消息', r.data);that.init();this.$refs.orderDetailsToast.show({type:'success',title:'核销成功!',})})},//关闭webSocket连接closeSocket() {uni.closeSocket({success: () => {console.log('离开页面关闭连接成功')}})},//重连reconnect() {if (this.delayTime) return;this.delayTime = true;//没连接上会一直重连，设置延迟避免请求过多setTimeout(() => {console.info("尝试重连...");this.initWebSocket();this.delayTime = false;}, 5000);},//webSocket -END },components: {capHeader,showPrice,localTion,AddressSerivce,orderInfo,service,subTitle,carduserInfo}
}

记录过程努力成长

uniApp简单使用webSocket实现核销二维码业务相关推荐

生成订单核销二维码，扫码完成核销
需求: 用户端:根据用户支付成功的订单商品,生成核销二维码店员端:扫描客户的二维码,获取二维码信息,验证判断二维码是否正确,根据二维码信息,获取用户信息,完成核销功能步骤 1.对用户订单号进行加 ...
手机二维码业务行业报告
条码公司调查取样2010 1 30 View more documents from changeself. 报告中一共73页,历经2年多的收集,算得上行业中比较齐全的第一手资料了,下面贴上报告中十几 ...
uni-app微信小程序生成自定义参数二维码，跳转小程序指定页面，获取参数；uni-app微信小程序获取二维码自定义参数；微信小程序生成动态参数二维码；uni-app微信小程序获取动态参数二维码；
一.场景需求: 在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id):微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识 ...
uni-app微信小程序扫普通二维码分享小程序
这里需要扫普通二维码分享的话就需要先产生二维码了文档:https://github.com/yingye/weapp-qrcode 1.绘制二维码我这里使用的是资源是weapp.qrcode.es ...
uniapp中根据URL链接生成二维码（适用所有Javascript运行环境的前端应用）,保存二维码到本地相册。
推荐一款适用所有Javascript运行环境的二维码生成组件. uQRCode是一款基于Javascript环境开发的二维码生成插件,适用所有Javascript运行环境的前端应用和Node.js应用 ...
uni-app/js/小程序/生成支付二维码图片，类似于支付宝和微信商家码
业务需求一个电子商务公司需要一个支付功能,该支付功能通过微信扫码或者支付宝扫码实现的,并且该二维码商户可以下载下来,类似于微信商家码.如下图,鉴于公司相关的保密协议,我马赛克了头部和中间的商标相关说 ...
uniapp打包微信小程序识别二维码
1.image标签长按识别实现(微信版本>2.7.0) 为image标签设置 show-menu-by-longpress="true"可实现识别二维码(微信个人码.微信群码 ...
uniapp微信小程序生成带个人二维码的海报
1:Sansnn-uQRCode 导入插件(生成二维码)(插件市场)(源码和结果如下) 2:弹窗展示海报内容 3:createCanvasImage绘制canvas海报 4:canvasToTempF ...
简单 4部完成 android 二维码扫一扫功能（5分钟实现）
android 实现扫一扫的功能(5分钟实现) 文章目录 android 实现扫一扫的功能(5分钟实现) 1.加载gradle坐标 2 添加授权 3 添加跳转页 4 复写回调方法 1.加载gradle ...

uniApp简单使用webSocket实现核销二维码业务

uniApp简单使用webSocket实现核销二维码业务相关推荐

最新文章

热门文章