vue开发订单提醒实现

实现订单提醒功能

在Vue中实现订单提醒功能，通常需要结合WebSocket或定时轮询技术，以及浏览器的通知API。以下是几种常见的实现方式：

使用WebSocket实时通信

安装WebSocket客户端库如socket.io-client：

npm install socket.io-client

在Vue组件中建立连接：

import io from 'socket.io-client';

export default {
  data() {
    return {
      socket: null,
      notifications: []
    }
  },
  mounted() {
    this.socket = io('https://your-websocket-server.com');
    this.socket.on('newOrder', (order) => {
      this.showNotification(order);
      this.notifications.push(order);
    });
  },
  methods: {
    showNotification(order) {
      if (Notification.permission === 'granted') {
        new Notification(`新订单: ${order.id}`, {
          body: `客户: ${order.customer}, 金额: ${order.amount}`
        });
      }
    }
  },
  beforeDestroy() {
    this.socket.disconnect();
  }
}

定时轮询方案

使用setInterval定期检查新订单：

export default {
  data() {
    return {
      orders: [],
      lastCheck: null
    }
  },
  mounted() {
    this.checkOrders();
    setInterval(this.checkOrders, 30000); // 每30秒检查一次
  },
  methods: {
    async checkOrders() {
      const response = await axios.get('/api/orders', {
        params: { since: this.lastCheck }
      });
      if (response.data.length > 0) {
        this.lastCheck = new Date();
        response.data.forEach(order => {
          this.showNotification(order);
        });
        this.orders = [...response.data, ...this.orders];
      }
    },
    showNotification(order) {
      // 同上
    }
  }
}

浏览器通知权限处理

在应用初始化时请求通知权限：

created() {
  if ('Notification' in window) {
    if (Notification.permission !== 'granted' && Notification.permission !== 'denied') {
      Notification.requestPermission().then(permission => {
        console.log('Notification permission:', permission);
      });
    }
  }
}

结合Vuex管理通知状态

对于大型应用，建议使用Vuex集中管理通知状态：

// store/modules/notifications.js
export default {
  state: {
    unreadCount: 0,
    messages: []
  },
  mutations: {
    ADD_NOTIFICATION(state, payload) {
      state.unreadCount++;
      state.messages.unshift(payload);
    }
  },
  actions: {
    pushNotification({ commit }, payload) {
      commit('ADD_NOTIFICATION', payload);
    }
  }
}

界面显示组件

创建通知气泡组件：

<template>
  <div class="notification-badge" @click="showNotifications">
    <span v-if="unreadCount > 0" class="badge">{{ unreadCount }}</span>
    <div v-if="showList" class="notification-list">
      <div v-for="(msg, index) in messages" :key="index" class="notification-item">
        {{ msg.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    unreadCount() {
      return this.$store.state.notifications.unreadCount;
    },
    messages() {
      return this.$store.state.notifications.messages;
    }
  },
  data() {
    return {
      showList: false
    }
  },
  methods: {
    showNotifications() {
      this.showList = !this.showList;
      if (this.showList && this.unreadCount > 0) {
        this.$store.commit('MARK_AS_READ');
      }
    }
  }
}
</script>

以上方案可根据实际需求组合使用，WebSocket适合实时性要求高的场景，定时轮询适合简单应用，浏览器通知能增强用户体验，Vuex则有助于状态管理。