mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-12 20:08:59 +08:00
refactor: 四端完成 Options API → script setup + vuex → pinia 迁移
- buyer(95) / seller(169) / im(53) / manager(280) 共 597 个组件全部从 Options API 转换为 <script setup> - 四端 vuex 全部移除,状态管理统一迁移至 pinia 4(stores/ 目录) - util.js 等基础设施去除 vm 首参依赖;全局属性($Message/$filters 等)在 script 内改为具名导入 - 被外部 ref 访问的公共组件均已补齐 defineExpose(清单见各端 MIGRATION-VUE3.md) - 各端 eslint 启用 vue/component-api-style 防止新代码回退 Options API - 四端 yarn build 全部通过;迁移约定与注意事项已更新至各端 MIGRATION-VUE3.md
This commit is contained in:
@@ -27,7 +27,18 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
|
||||
defineOptions({ name: 'AudioMessage' });
|
||||
|
||||
defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
|
||||
function formatSeconds(value) {
|
||||
var theTime = parseInt(value) // 秒
|
||||
var theTime1 = 0 // 分
|
||||
@@ -59,64 +70,47 @@ function formatSeconds(value) {
|
||||
return result
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'AudioMessage',
|
||||
props: {
|
||||
src: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
isPlay: false,
|
||||
duration: 0,
|
||||
currentTime: 0,
|
||||
progress: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getTotalDuration() {
|
||||
return formatSeconds(this.duration)
|
||||
},
|
||||
getCurrDuration() {
|
||||
return formatSeconds(this.currentTime)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toPlay() {
|
||||
if (this.loading) {
|
||||
return
|
||||
}
|
||||
const loading = ref(true)
|
||||
const isPlay = ref(false)
|
||||
const duration = ref(0)
|
||||
const currentTime = ref(0)
|
||||
const progress = ref(0)
|
||||
|
||||
let audio = this.$refs.audio
|
||||
if (this.isPlay) {
|
||||
audio.pause()
|
||||
} else {
|
||||
audio.play()
|
||||
}
|
||||
this.isPlay = !this.isPlay
|
||||
},
|
||||
const audio = ref(null)
|
||||
|
||||
// 当目前的播放位置已更改时
|
||||
timeupdate() {
|
||||
let audio = this.$refs.audio
|
||||
this.currentTime = audio.currentTime
|
||||
this.progress = (audio.currentTime / audio.duration) * 100
|
||||
},
|
||||
const getTotalDuration = computed(() => formatSeconds(duration.value))
|
||||
const getCurrDuration = computed(() => formatSeconds(currentTime.value))
|
||||
|
||||
// 当浏览器可以播放音频/视频时
|
||||
canplay() {
|
||||
this.duration = this.$refs.audio.duration
|
||||
this.loading = false
|
||||
},
|
||||
function toPlay() {
|
||||
if (loading.value) {
|
||||
return
|
||||
}
|
||||
|
||||
// 当目前的播放列表已结束时
|
||||
ended() {
|
||||
this.isPlay = false
|
||||
},
|
||||
},
|
||||
let audioEl = audio.value
|
||||
if (isPlay.value) {
|
||||
audioEl.pause()
|
||||
} else {
|
||||
audioEl.play()
|
||||
}
|
||||
isPlay.value = !isPlay.value
|
||||
}
|
||||
|
||||
// 当目前的播放位置已更改时
|
||||
function timeupdate() {
|
||||
let audioEl = audio.value
|
||||
currentTime.value = audioEl.currentTime
|
||||
progress.value = (audioEl.currentTime / audioEl.duration) * 100
|
||||
}
|
||||
|
||||
// 当浏览器可以播放音频/视频时
|
||||
function canplay() {
|
||||
duration.value = audio.value.duration
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
// 当目前的播放列表已结束时
|
||||
function ended() {
|
||||
isPlay.value = false
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
|
||||
Reference in New Issue
Block a user