C端app.vue的代码

为什么80%的码农都做不了架构师？>>>   

<template>
  <div id="app">
    <router-view/>
    <dialog-view></dialog-view>
  </div>
</template>

<script>
import DialogView from '@/components/DialogView'
import axios from 'axios'
import Bus from '@/components/Bus.js'

const socketApi = require('./config').socketApi
const api = require('./config.js').api
const debug = require('./config.js').debug
export default {
  name: 'App',
  components: { DialogView },
  created () {
    var href
    href = debug ? 'www.333.com?d=1' : location.href
    //从url路径上读取参数
    function getParameterByName (name) {
      var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)')
      var results = regex.exec(href)
      if (!results) return null
      if (!results[2]) return ''
      return decodeURIComponent(results[2].replace(/\+/g, ' '))
    }
    //读取桌号，并设置到store
    var deskId = getParameterByName('d')
    this.$store.commit('setDeskId', deskId)
    //设置axios拦截，返回的code不为0，弹窗提示
    axios.interceptors.response.use(
      response => {
          if (response.data.code != 0) {
            this.$store.commit('changeDialog', {show: true, content: response.data.message})
          }
          return response;
      },
      error => {
        //401登入验证失败，删除token，重新微信授权
          if (error.response.status == 401) {
            this.$cookie.delete('token')
            window.location.href = `${api}/api/wechat/login?url=` + encodeURIComponent(`${api}/fe/?d=${this.$store.state.deskId}`)
          }  else if (error.response.status != 200){
            this.$store.commit('changeDialog', {show: true, content: error.response.data})
          }
          return Promise.reject(error.response.data)   // 返回接口返回的错误信息
    })
    //设置token，设置axios请求头授权,不然跳转到后台授权页面
    if (this.$cookie.get('token') || debug) {
      var token = this.$cookie.get('token')
      if (debug) token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC94LmRpYW5kYW5tZS5jb21cL2FwaVwvd2VjaGF0XC9vYXV0aF9jYWxsYmFja1wvd2VjaGF0IiwiaWF0IjoxNTMwMTgyNjM5LCJleHAiOjE1MzI3NzQ2MzksIm5iZiI6MTUzMDE4MjYzOSwianRpIjoiZmJ1QU1lSUxNQVV6RjkyMSIsInN1YiI6OCwicHJ2IjoiODI3YjFhY2UzNmVlZDY5MDA0ZjU0ZTAwYzFiM2FjZTRiOGVkMDY1ZiJ9.E_7ZnPng20VLC61qwEVfCXkd4HRjPECzR-CbSXQNM4o'
      this.$store.commit('setToken', token)
      this.$axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
      this.$store.dispatch('getFoodList')
      // this.$router.push('/home?d=' + this.$store.state.deskId)
    } else {
       window.location.href = `${api}/api/wechat/login?url=` + encodeURIComponent(`${api}/fe/?d=${this.$store.state.deskId}`)
    }
  },
  mounted () {
    //设置socket的访问地址
    var socket = io(`${socketApi}?d=${this.$store.state.deskId}`)
    //链接socket，加入房间
    socket.on('connect', (val) => {
      socket.emit('', this.$store.state.deskId)
    })
    //实时监测购物车
    socket.on('cartChange', (val) => {
      this.$store.commit('countChange', val)
    })
    //跳转到订单详情，1、直接下单timestamp为false，2、历史订单会传时间戳
    socket.on('orderJump', (val) => {
      this.$store.dispatch('orderDetail', { timestamp: false })
      setTimeout(() => {
        this.$router.push(`/orderDetail?d=${this.$store.state.deskId}`)
      }, 100)
    })
    //清空购物车
    socket.on('cartClear', (val) => {
      this.$store.commit('clearShopCar')
    })
    //**选择人数
    socket.on('deskChange', (val) => {
      this.$store.commit('peopleSelectFinish', val)
    })
    //支付成功
    socket.on('paySuccess', (val) => {
      Bus.$emit('paySuccess', val)
    })
    //信息全部被清空，跳转到重新选择人数
    socket.on('clearDeskSuccess', (val) => {
      this.$router.replace('/')
      location.reload()
    })
    socket.on('reconnect', (val) => {
      this.$socket.emit('', this.$store.state.deskId)
    })
    //断开连接，导致刷新页面
    socket.on('disconnect', (val) => {
      alert('断开连接')
      location.href = `${api}/fe/?d=${this.$store.state.deskId}`
    })
    //换桌,WeixinJSBridge关闭
    socket.on('deskReplace', (val) => {
      if (WeixinJSBridge) {
        WeixinJSBridge.call('closeWindow')
      }
    })

  }
  // sockets: {
  //   // 所有的自带事件
  //   // ["connect", "error", "disconnect", "reconnect", "reconnect_attempt", "reconnecting", "reconnect_error", "reconnect_failed", "connect_error", "connect_timeout", "connecting", "ping", "pong"]
  //   connect: function () {
  //     // console.log('连接了')
  //     this.$socket.emit('', this.$store.state.deskId)
  //   },
  //   reconnect: function (data) {
  //     // 重新链接刷新页面
  //     // location.href= `${api}/fe/?d=${this.$store.state.deskId}`
  //     console.log('重新连接了')
  //     this.$socket.emit('', this.$store.state.deskId)
  //     // this.$store.commit('changeDialogS', true)
  //     // this.$store.commit('changeDialogT', '重新连接')
  //   },
  //   disconnect: function (data) {
  //     // 失去socket链接
  //     // this.$store.commit('changeDialog', {show: true, content: '断开连接'})
  //     // this.$store.commit('changeDialogT', '断开连接')
  //     alert('断开连接')
  //     location.href = `${api}/fe/?d=${this.$store.state.deskId}`
  //   },
  //   cartChange: function (val) {
  //     // console.log(val)
  //     this.$store.commit('countChange', val)
  //   },
  //   orderJump (val) {
  //     this.$store.dispatch('orderDetail', { timestamp: false })
  //     setTimeout(() => {
  //       this.$router.push(`/orderDetail?d=${this.$store.state.deskId}`)
  //     }, 100);
  //   },
  //   cartClear (val) {
  //    this.$store.commit('clearShopCar')
  //   },
  //   deskChange (val) {
  //     this.$store.commit('peopleSelectFinish', val)
  //   },
  //   paySuccess (val) {
  //     // this.$store.commit('paySuccess', val)
  //     Bus.$emit('paySuccess', val)
  //   },
  //   clearDeskSuccess (val) {
  //     console.log(val)
  //   }
  // }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  margin: 0 auto;
  min-height: 10rem;
  position: relative;
  height: 100%;
  background-color: #f4f4f4;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 10;
}
</style>

转载于:https://my.oschina.net/dmq/blog/1838870