Browse Source
feat(订单): 添加快捷下单语音播放组件和订单状态显示
新增VoicePlayer组件实现语音播放功能，优化订单页面显示快捷下单内容 在订单确认页添加语音播放和图片预览功能，增加已下单状态显示 修复分类页和订单页的快捷下单刷新逻辑，更新环境配置为生产环境master
11 changed files with 323 additions and 12 deletions
Unified View
Diff Options
-
+189 -0components/VoicePlayer.vue
-
+1 -1config.js
-
+7 -1mixins/order.js
-
+5 -3pages/index/category.vue
-
+1 -0pages/index/center.vue
-
+1 -0pages/index/index.vue
-
+1 -0pages/index/order.vue
-
+5 -0pages_order/auth/wxLogin.vue
-
+4 -1pages_order/mine/purse.vue
-
+107 -4pages_order/order/firmOrder.vue
-
+2 -2utils/position.js
+ 189
- 0
components/VoicePlayer.vue
View File
| @ -0,0 +1,189 @@ | |||||
| <template> | |||||
| <view class="voice-content"> | |||||
| <view class="voice-item"> | |||||
| <view class="voice-icon"> | |||||
| <uv-icon name="mic" size="40rpx" color="#D03F25"></uv-icon> | |||||
| </view> | |||||
| <view class="voice-info"> | |||||
| <text class="voice-desc">通过语音识别下单</text> | |||||
| <text class="voice-tip">点击播放语音内容</text> | |||||
| </view> | |||||
| <view class="voice-play" @click="playVoice"> | |||||
| <uv-icon :name="isPlaying ? 'pause-circle-fill' : 'play-circle-fill'" size="50rpx" color="#D03F25"></uv-icon> | |||||
| </view> | |||||
| </view> | |||||
| </view> | |||||
| </template> | |||||
| <script> | |||||
| export default { | |||||
| name: 'VoicePlayer', | |||||
| props: { | |||||
| voiceUrl: { | |||||
| type: String, | |||||
| default: '' | |||||
| }, | |||||
| autoPlay: { | |||||
| type: Boolean, | |||||
| default: false | |||||
| } | |||||
| }, | |||||
| data() { | |||||
| return { | |||||
| innerAudioContext: null, // 音频播放器 | |||||
| isPlaying: false // 是否正在播放语音 | |||||
| }; | |||||
| }, | |||||
| mounted() { | |||||
| this.initAudioPlayer(); | |||||
| }, | |||||
| beforeDestroy() { | |||||
| this.destroyAudioPlayer(); | |||||
| }, | |||||
| methods: { | |||||
| // 初始化音频播放器 | |||||
| initAudioPlayer() { | |||||
| this.innerAudioContext = uni.createInnerAudioContext(); | |||||
| // 监听播放结束事件 | |||||
| this.innerAudioContext.onEnded(() => { | |||||
| console.log('播放结束'); | |||||
| this.isPlaying = false; | |||||
| this.$emit('playEnded'); | |||||
| }); | |||||
| // 监听播放开始事件 | |||||
| this.innerAudioContext.onPlay(() => { | |||||
| console.log('开始播放'); | |||||
| this.isPlaying = true; | |||||
| this.$emit('playStarted'); | |||||
| }); | |||||
| // 监听播放暂停事件 | |||||
| this.innerAudioContext.onPause(() => { | |||||
| console.log('播放暂停'); | |||||
| this.isPlaying = false; | |||||
| this.$emit('playPaused'); | |||||
| }); | |||||
| // 监听播放停止事件 | |||||
| this.innerAudioContext.onStop(() => { | |||||
| console.log('播放停止'); | |||||
| this.isPlaying = false; | |||||
| this.$emit('playStopped'); | |||||
| }); | |||||
| // 监听播放错误事件 | |||||
| this.innerAudioContext.onError((err) => { | |||||
| console.error('播放错误', err); | |||||
| uni.showToast({ | |||||
| title: '播放失败', | |||||
| icon: 'none' | |||||
| }); | |||||
| this.isPlaying = false; | |||||
| this.$emit('playError', err); | |||||
| }); | |||||
| }, | |||||
| // 销毁音频播放器 | |||||
| destroyAudioPlayer() { | |||||
| if (this.innerAudioContext) { | |||||
| this.innerAudioContext.destroy(); | |||||
| this.innerAudioContext = null; | |||||
| } | |||||
| }, | |||||
| // 播放语音 | |||||
| playVoice() { | |||||
| if (!this.voiceUrl) { | |||||
| uni.showToast({ | |||||
| title: '语音文件不存在', | |||||
| icon: 'none' | |||||
| }); | |||||
| return; | |||||
| } | |||||
| if (this.isPlaying) { | |||||
| // 如果正在播放，则停止播放 | |||||
| this.innerAudioContext.stop(); | |||||
| this.isPlaying = false; | |||||
| return; | |||||
| } | |||||
| // 设置音频源并播放 | |||||
| this.innerAudioContext.src = this.voiceUrl; | |||||
| this.innerAudioContext.play(); | |||||
| uni.showToast({ | |||||
| title: '正在播放语音', | |||||
| icon: 'none' | |||||
| }); | |||||
| }, | |||||
| // 停止播放 | |||||
| stopPlay() { | |||||
| if (this.innerAudioContext && this.isPlaying) { | |||||
| this.innerAudioContext.stop(); | |||||
| } | |||||
| }, | |||||
| // 暂停播放 | |||||
| pausePlay() { | |||||
| if (this.innerAudioContext && this.isPlaying) { | |||||
| this.innerAudioContext.pause(); | |||||
| } | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .voice-content { | |||||
| padding: 30rpx; | |||||
| .voice-item { | |||||
| display: flex; | |||||
| align-items: center; | |||||
| padding: 30rpx; | |||||
| background-color: #f9f9f9; | |||||
| border-radius: 12rpx; | |||||
| .voice-icon { | |||||
| width: 80rpx; | |||||
| height: 80rpx; | |||||
| background-color: rgba(208, 63, 37, 0.1); | |||||
| border-radius: 40rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| margin-right: 30rpx; | |||||
| } | |||||
| .voice-info { | |||||
| flex: 1; | |||||
| .voice-desc { | |||||
| display: block; | |||||
| font-size: 30rpx; | |||||
| color: #333; | |||||
| margin-bottom: 8rpx; | |||||
| } | |||||
| .voice-tip { | |||||
| font-size: 24rpx; | |||||
| color: #999; | |||||
| } | |||||
| } | |||||
| .voice-play { | |||||
| width: 80rpx; | |||||
| height: 80rpx; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| background-color: rgba(208, 63, 37, 0.1); | |||||
| border-radius: 40rpx; | |||||
| } | |||||
| } | |||||
| } | |||||
| </style> | |||||