使用goEasy实现多对多实时点餐程序
- 新建一个uniapp项目，引入goEasy插件
npm install goeasy@2.6.2 --save
- 在main.js引入goeasy并注册
import App from './App'
import GoEasy from 'goeasy'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
Vue.prototype.GoEasy = GoEasy
let goeasy = GoEasy.getInstance({
host:"hangzhou.goeasy.io", //若是新加坡区域：singapore.goeasy.io
appkey:"BC-e1f69be1cd6e409f944f3e1285c257c7",
modules:['pubsub']//根据需要，传入‘pubsub’或'im’，或数组方式同时传入
});
Vue.prototype.goEasy = goeasy
//建立连接
goeasy.connect({
id:"test_channel", //pubsub选填，im必填，最大长度60字符
// id:uni.getSystemInfoSync().deviceId, //pubsub选填，im必填，最大长度60字符
data:{"avatar":"/www/xxx.png","nickname":"Neo"}, //必须是一个对象，pubsub选填，im必填，最大长度300字符，用于上下线提醒和查询在线用户列表时，扩展更多的属性
onSuccess: function () { //连接成功
console.log("GoEasy connect successfully.") //连接成功
},
onFailed: function (error) { //连接失败
console.log("Failed to connect GoEasy, code:"+error.code+ ",error:"+error.content);
},
onProgress:function(attempts) { //连接或自动重连中
console.log("GoEasy is connecting", attempts);
}
});
- 编写模板页面
<template>
<view class="content">
<!-- <u-modal v-model="isModel" title="请输入用户名">
<view>
<input style="padding: 20rpx;border: 1rpx solid #eee;margin: 30rpx;" v-model="userId" />
</view>
</u-modal> -->
<!-- 顶部 -->
<view class="top-view">
<view>{{number_people}}人就餐</view>
<view class="top-view-flex">
<image src="/static/tab/fenxiang.svg" mode="widthFix" class="top-search"></image>
<image src="/static/tab/dingdan.svg" mode="widthFix" @click="my_order()"></image>
</view>
</view>
<view class="order-view">
<view class="commodity">
<!-- 左 -->
<view class="order-left">
<scroll-view scroll-y="true" class="scroll-Hei" :scroll-with-animation="true" :enhanced="true"
:show-scrollbar="false">
<block v-for="(item,index) in itemize" :key="index">
<view class="itemize-text" :class="{active: index == trigger}"
@click="itemIze(index,item.cid)">
<text>{{item.value}}</text>
<text v-if="item.sele_quantity > 0">{{item.sele_quantity}}</text>
</view>
</block>
</scroll-view>
</view>
<!-- 右 -->
<view class="order-right">
<scroll-view scroll-y="true" class="scroll-Hei" :scroll-with-animation="true" :enhanced="true"
:show-scrollbar="false" :scroll-into-view="scroll_into" @scroll="scroLl">
<block v-for="(item,index) in goods" :key="index">
<view :id="item.cid" class="rig-height">
<view class="classif">{{item.category}}</view>
<view class="classif-goods" v-for="(itemgood,good_index) in item.good_query"
:key="good_index" @click="popup_item(true,index,good_index,item.cid,itemgood)">
<view class="goods-image">
<image :src="itemgood.image[0].url" mode="aspectFill"></image>
</view>
<view class="goods-Price">
<view class="goods-name">
<text class="Bold">{{itemgood.name}}</text>
<text class="Thinning">已售 {{itemgood.monthlysale}}</text>
</view>
<view class="unit-price">
<text class="Symbol">¥</text>
<text class="Bold">{{itemgood.unitprice}}</text>
<text class="Thinning">/{{itemgood.unit}}</text>
</view>
</view>
<!-- 无规格 -->
<view class="quantity" v-if="!itemgood.att_hide">
<view>
<image v-if="itemgood.quantity > 0" src="/static/tab/jianhao.png"
mode="widthFix"
@click.stop="channel('reduce',[index,good_index,item.cid,itemgood])"></image>
</view>
<view><text v-if="itemgood.quantity > 0">{{itemgood.quantity}}</text></view>
<view>
<image src="/static/tab/jia.png" mode="widthFix"
@click.stop="channel('plus',[index,good_index,item.cid,itemgood])"></image>
</view>
</view>
<!-- 有规格 -->
<view class="quantity specs-view" v-if="itemgood.att_hide">
<text>选规格</text>
<text v-if="itemgood.quantity > 0">{{itemgood.quantity}}</text>
</view>
</view>
</view>
</block>
<view style="height: 400rpx;"></view>
</scroll-view>
</view>
</view>
<!-- 底部 -->
<view class="order-bottom" @click="pop_Shopping()" :style="{'padding-bottom': Modelmes ? '68rpx' : ''}">
<view class="Shopping" style="width: 115rpx;">
<view class="Shopping-left">
<image src="/static/tab/gouwuche.png" mode="widthFix"></image>
</view>
<view class="Shopping-number" v-if="total_quantity > 0">{{total_quantity}}</view>
</view>
<view class="Shopping-title" v-if="total_quantity > 0">已点{{total_quantity}}份菜品</view>
<view class="place-order" @click.stop="total_quantity == 0 ? false : true && placean_order()">
<button plain="true" open-type="getUserInfo">选好了</button>
</view>
</view>
</view>
<!-- 购物车 -->
<Cart @empty_data="channel" @shopping_Cart_add_sub="channel" @close="pop_Shopping" v-if="card" :otherList="otherList" :shopping_card="shopping_card"></Cart>
<!-- 引入单个商品弹出 -->
<Details @reduce="channel" @plus="channel" @popup_item="popup_item" v-if="popupitem" :pro_details="pro_details"></Details>
<!-- 骨架屏 -->
<Home v-if="exist"></Home>
<!-- <input v-model="value" placeholder="请输入您的id" />
<input v-model="valueB" placeholder="请输入您发送的id" /> -->
<!-- <button @click="onload()">确定</button> -->
<!-- <button @click="returnClick">发送</button> -->
</view>
</template>
- 订阅消息
//订阅消息
goEasy.pubsub.subscribe({
channel: "test_channel",//替换为您自己的channel
onMessage: (message) => { //收到消息
let obj = JSON.parse(message.content)
// obj.data[3].uid = obj.uid
this[obj.fun](...obj.data)
// if(this.userId !== obj.uid) {
// this.otherList = obj.shopList
// if(this.otherList.length <= 0) {
// this.otherList = [obj.data[3]]
// }
// } else {
// }
console.log("Channel:" + message.channel + " content:" + message.content);
},
onSuccess: function () {
console.log("Channel订阅成功。");
},
onFailed: function (error) {
console.log("Channel订阅失败, 错误编码：" + error.code + " 错误信息：" + error.content)
}
});
- 发送消息
//发送
channel(fun,data) {
console.log('uni.getSystemInfoSync()-------',uni.getSystemInfoSync())
//发送
goEasy.pubsub.publish({
channel: "test_channel",//替换为您自己的channel
message: JSON.stringify({
fun:fun,
uid:this.userId,
shopList:this.shopping_card,
data:data
}),//替换为您想要发送的消息内容
onSuccess:res => {
console.log("消息发布成功。");
},
onFailed: function (error) {
console.log("消息发送失败，错误编码："+error.code+" 错误信息："+error.content);
}
})
}
项目预览
5324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
