vue2 简单实现订单提醒功能

因为要开发一个,要在进入系统的时候,不管在哪个页面都要监听有没有新订单生成。所以选择在app.vue 中实现
1.下载包
npm i speak-tts
2.功能开发

// 1.先引入文件
import Speech from 'speak-tts'
export default {
mounted() {
	// 订单语音播报
    this.speechInit()
    this.IntervalOrder()
}
//2. 定义订单提醒方法
	methods: {
		// 语音播报
	    speechInit() {
	      this.speech = new Speech()
	      this.speech.setLanguage('zh-CN')
	      this.speech.init().then(() => {})
	    },
	    IntervalOrder() {
	      // 十分钟提醒一次
	      this.timerId = setInterval(() => {
	        this.getOrderNotice()
	      }, 600000)
	    },
	    getOrderNotice() {
	      let flag = false
	      // 发送接口
	      request({
	        url: '/check_new_order',
	        method: 'get'
	      }).then((data) => {
	        flag = data
	        // console.log('flag', flag)
	        if (flag) {
	          this.speakTtsSpeech()
	          this.$message.success('您有新订单,请注意查看')
	        }
	      })
	    },
	}
}

你可能感兴趣的:(#,vue,vue.js,前端)