0、知识点
- 动态桌号
- LocalStorage
1、动态桌号存储 于LocalStorage
-
如何存储桌号id
-
可以采用Vuex、LocalStorage方式,但一般采用LocalStorage更加方便
-
因为Storage是一个公共的方法,所以,需要将Storage封装成一个公共的API接口
-
Storagejs
var storage={
get:function(key){
return JSON.parse(localStorage.getItem(key));
},
set:function(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
remove:function(key){
localStorage.removeItem(key);
}
}
export default storage;
-
云服务器示意图
-
二维码生成器
2、main.js
// 引入storage文件
import storage from './model/storage.js';
//获取url传过来的桌号,保存桌号
var roomid=window.location.hash.split('=')[1];
storage.set('roomid',roomid); // 保存桌号
3、Home.vue
<script>
// 引入storage
import storage from '../model/storage.js';
getCartCount(){/*获取购物车的数量*/
//桌子id 桌子号:是扫描二维码从url获取的
var uid=storage.get('roomid'); // 将roomid通过storage存储为uid
var api=this.api+'api/cartCount?uid='+uid; // 动态获取uid
this.$http.get(api).then((response)=>{
console.log(response.body.result);
this.cartNum=response.body.result;
},(err)=>{
console.log(err);
})
}
}
</script>
4、Pcontent.vue
<script>
// 引入storage
import storage from '../model/storage.js';
addCart(){
//获取数据加入购物车
var uid=storage.get('roomid') // 将roomid通过storage存储为uid
var api=this.api+'api/addcart'
this.$http.post(api,{
uid:uid, // 获取uid
title:this.list.title,
price:this.list.price,
num:this.num,
product_id:this.list._id,
img_url:this.list.img_url
}).then((response)=>{.....}
</script>
5、Start.vue
<script>
// 引入storage
import storage from '../model/storage.js';
addPeopleInfo(){
//桌子id 桌子号:是扫描二维码从url获取的
var uid=storage.get('roomid'); // 通过storage存储roomid为uid
var api=this.api+'api/addPeopleInfo';
this.$http.post(api,{
uid:uid, // 存储uid
p_num:this.p_num,
p_mark:this.p_mark
}).then((response)=>{...}
</script>
6、EditPeopleInfo.vue
<script>
// 引入storage
import storage from '../model/storage.js';
addPeopleInfo(){
//桌子id 桌子号:是扫描二维码从url获取的
var uid=storage.get('roomid'); // 通过storage将roomid存储为uid
var api=this.api+'api/addPeopleInfo';
this.$http.post(api,{
uid:uid, // 获取uid
p_num:this.p_num,
p_mark:this.p_mark
}).then((response)=>{
if(response.body.success){
this.$router.push({ path: 'cart' })
}
},(err)=>{
console.log(err);
})
}
</script>
7、Cart.vue
// 引入storage
import storage from '../model/storage.js';
methods:{
getCartData(){
//桌子id 桌子号:是扫描二维码从url获取的
var uid=storage.get('roomid'); // 通过storage将roomid存储为uid
var api=this.api+'api/cartlist?uid='+uid; // 动态获取uid
this.$http.get(api).then((response)=>{
// console.log(response);
this.list=response.body.result;
this.getTotalResult();
},(error)=>{
console.log(error);
})
},
decNum(item,key){
var uid=storage.get('roomid'); // 通过storage将roomid存储为uid
//请求远程服务器执行更新操作
//桌子id 桌子号:是扫描二维码从url获取的
var product_id=item.product_id;
var num=item.num;
// 动态获取uid
var api=this.api+'api/decCart?uid='+uid+'&product_id='+product_id+'&num='+num;
this.$http.get(api).then((response)=>{
//修改购物车数据的时候给服务器发消息
this.$socket.emit('addcart','addcart');
this.getTotalResult();
},(error)=>{
console.log(error);
})