root/xl-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
多啦C梦
2025-05-21 15:45:10 +08:00
parent f6ed5b04de
commit 5d96054c0c
44 changed files with 2460 additions and 2126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/XVideoModal.vue
View File

@@ -4,45 +4,85 @@ import XModal from "./XModal.vue";
import fmt from '../static/images/fmt.png';
import play from '../static/icons/play.png';
const {options} = defineProps({
options: {
type: Object,
default: {},
}
});
const show = ref(false);
const playVideo = ref(false);
const current = ref(0);
const open = () => {
show.value = true;
}
defineExpose({
open
});
const changeSwiper = ({detail}) => {
current.value = detail.current;
}
</script>
<template>
<view @click="show=true">
<slot></slot>
</view>
<x-modal
backgroundColor="rgba(255,255,255,0)"
class="x-video-modal"
v-model:show="show">
<view class="!p-[20rpx] relative">
<image
@click="show=false"
class="!w-[52rpx] !h-[52rpx] !absolute left-1/2 -translate-x-1/2 bottom-[-100rpx]"
src="/static/icons/close.png">
</image>
<template v-if="options.pop_type === 1">
<view class="relative h-[800rpx]">
<swiper class="!size-full" @change="changeSwiper">
<swiper-item v-for="src in options.pop_images" class="!flex flex-col justify-center px-[24rpx]">
<view
class="w-full bg-[#fff] h-fit !flex items-center p-[24rpx] rounded-[24rpx] relative">
<image class="!w-full" :src="src" mode="widthFix"></image>
</view>
</swiper-item>
</swiper>
<view class="!w-full relative rounded-[16rpx] overflow-hidden">
<image v-if="!playVideo" class="!w-full" mode="widthFix" :src="fmt"></image>
<view @click="playVideo=!playVideo" v-if="!playVideo"
class="absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,.4)] z-10 !flex justify-center items-center">
<image class="!w-[94rpx] !h-[94rpx]" :src="play"></image>
<view class="absolute left-1/2 -translate-x-1/2 bottom-[-80rpx] text-white test-36r">
{{ current + 1 }} / {{ options.pop_images.length }}
</view>
<video
autoplay
@pause="playVideo=!playVideo"
class="!w-full"
v-else
src="https://shopyunlng.oss-cn-beijing.aliyuncs.com/upload/2025/03-18/15-31-150289-429952696.m4v">
</video>
<image
@click="show=false"
class="!w-[52rpx] !h-[52rpx] !absolute left-1/2 -translate-x-1/2 bottom-[-150rpx]"
src="/static/icons/close.png">
</image>
</view>
</view>
</template>
<template v-else>
<view class="!p-[20rpx] relative bg-white rounded-[24rpx]">
<image
@click="show=false"
class="!w-[52rpx] !h-[52rpx] !absolute left-1/2 -translate-x-1/2 bottom-[-100rpx]"
src="/static/icons/close.png">
</image>
<view class="!w-full relative rounded-[16rpx] overflow-hidden">
<image v-if="!playVideo" class="!w-full" mode="widthFix" :src="fmt"></image>
<view @click="playVideo=!playVideo" v-if="!playVideo"
class="absolute left-0 top-0 w-full h-full bg-[rgba(0,0,0,.4)] z-10 !flex justify-center items-center">
<image class="!w-[94rpx] !h-[94rpx]" :src="play"></image>
</view>
<video
autoplay
@pause="playVideo=!playVideo"
class="!w-full"
v-else
src="https://shopyunlng.oss-cn-beijing.aliyuncs.com/upload/2025/03-18/15-31-150289-429952696.m4v">
</video>
</view>
</view>
</template>
</x-modal>
</template>
<style lang="scss">
.x-video-modal {
.tui-modal-box {
margin-bottom: 200rpx;