feat: stylist&customer&sex页面
This commit is contained in:
zhangyh
260
src/views/stylist/components/Video.vue
Normal file
260
src/views/stylist/components/Video.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<div class="video-container">
|
||||
<video
|
||||
ref="videoRef"
|
||||
class="video"
|
||||
:src="videoSrc"
|
||||
@loadedmetadata="onVideoLoaded"
|
||||
@timeupdate="onTimeUpdate"
|
||||
@ended="onVideoEnded"
|
||||
></video>
|
||||
|
||||
<!-- 视频控制条 -->
|
||||
<div class="video-controls">
|
||||
<div class="control-left">
|
||||
<div class="play-btn" @click="togglePlay">
|
||||
<van-icon :name="isPlaying ? 'pause' : 'play'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-section">
|
||||
<div class="current-time">{{ formatTime(currentTime) }}</div>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" @click="seekTo">
|
||||
<div class="progress-bg"></div>
|
||||
<div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
|
||||
<div class="progress-thumb" :style="{ left: progressPercentage + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total-time">{{ formatTime(duration) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="control-right">
|
||||
<div class="volume-btn" @click="toggleMute">
|
||||
<!-- <van-icon :name="isMuted ? 'volume-mute' : 'volume'" /> -->
|
||||
<SvgIcon :name="isMuted ? 'vol' : 'vol_close'" size="20" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import Video from '@/assets/media/example_video.mp4'
|
||||
// Props
|
||||
interface Props {
|
||||
videoSrc?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
videoSrc: Video
|
||||
})
|
||||
|
||||
// 视频相关状态
|
||||
const videoRef = ref<HTMLVideoElement | null>(null)
|
||||
const isPlaying = ref<boolean>(false)
|
||||
const currentTime = ref<number>(0)
|
||||
const duration = ref<number>(0)
|
||||
const isMuted = ref<boolean>(false)
|
||||
|
||||
// 计算进度百分比
|
||||
const progressPercentage = computed(() => {
|
||||
if (duration.value === 0) return 0
|
||||
return (currentTime.value / duration.value) * 100
|
||||
})
|
||||
|
||||
// 格式化时间显示
|
||||
const formatTime = (time: number): string => {
|
||||
const minutes = Math.floor(time / 60)
|
||||
const seconds = Math.floor(time % 60)
|
||||
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
// 视频事件处理
|
||||
const onVideoLoaded = () => {
|
||||
if (videoRef.value) {
|
||||
duration.value = videoRef.value.duration
|
||||
}
|
||||
}
|
||||
|
||||
const onTimeUpdate = () => {
|
||||
if (videoRef.value) {
|
||||
currentTime.value = videoRef.value.currentTime
|
||||
}
|
||||
}
|
||||
|
||||
const onVideoEnded = () => {
|
||||
isPlaying.value = false
|
||||
currentTime.value = 0
|
||||
}
|
||||
|
||||
// 视频控制方法
|
||||
const togglePlay = () => {
|
||||
if (videoRef.value) {
|
||||
if (isPlaying.value) {
|
||||
videoRef.value.pause()
|
||||
} else {
|
||||
videoRef.value.play()
|
||||
}
|
||||
isPlaying.value = !isPlaying.value
|
||||
}
|
||||
}
|
||||
|
||||
const toggleMute = () => {
|
||||
if (videoRef.value) {
|
||||
videoRef.value.muted = !videoRef.value.muted
|
||||
isMuted.value = videoRef.value.muted
|
||||
}
|
||||
}
|
||||
|
||||
const seekTo = (event: MouseEvent) => {
|
||||
if (videoRef.value && duration.value > 0) {
|
||||
const progressBar = event.currentTarget as HTMLElement
|
||||
const rect = progressBar.getBoundingClientRect()
|
||||
const clickX = event.clientX - rect.left
|
||||
const percentage = clickX / rect.width
|
||||
const newTime = percentage * duration.value
|
||||
videoRef.value.currentTime = newTime
|
||||
currentTime.value = newTime
|
||||
}
|
||||
}
|
||||
|
||||
// 暴露方法给父组件
|
||||
defineExpose({
|
||||
pause: () => {
|
||||
if (videoRef.value) {
|
||||
videoRef.value.pause()
|
||||
isPlaying.value = false
|
||||
}
|
||||
},
|
||||
reset: () => {
|
||||
if (videoRef.value) {
|
||||
videoRef.value.pause()
|
||||
videoRef.value.currentTime = 0
|
||||
isPlaying.value = false
|
||||
currentTime.value = 0
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.video-container {
|
||||
position: relative;
|
||||
height: 60rem;
|
||||
|
||||
.video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
object-fit: fill;
|
||||
}
|
||||
|
||||
// 视频控制条样式
|
||||
.video-controls {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
// padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
z-index: 2;
|
||||
border-radius: 5px;
|
||||
|
||||
.control-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.play-btn {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
|
||||
.current-time,
|
||||
.total-time {
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
font-family: 'satoshiRegular';
|
||||
white-space: nowrap;
|
||||
min-width: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
flex: 1;
|
||||
height: 0.4rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.progress-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border-radius: 0.2rem;
|
||||
transition: width 0.1s ease;
|
||||
}
|
||||
|
||||
.progress-thumb {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: left 0.1s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.volume-btn {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user