188.Vue.js智能扫码点餐系统（二十二）【修改为动态桌号、根据桌子号同步数据】2019.03.26

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);
                    })