2025-03-27 15:38:21 +08:00
|
|
|
<script setup>
|
|
|
|
|
import {ref} from 'vue'
|
|
|
|
|
import XModal from "./XModal.vue";
|
|
|
|
|
import fmt from '../static/images/fmt.png';
|
|
|
|
|
import play from '../static/icons/play.png';
|
|
|
|
|
|
2025-05-21 15:45:10 +08:00
|
|
|
const {options} = defineProps({
|
|
|
|
|
options: {
|
|
|
|
|
type: Object,
|
|
|
|
|
default: {},
|
|
|
|
|
}
|
|
|
|
|
});
|
2025-03-27 15:38:21 +08:00
|
|
|
const show = ref(false);
|
|
|
|
|
const playVideo = ref(false);
|
2025-05-21 15:45:10 +08:00
|
|
|
const current = ref(0);
|
|
|
|
|
|
|
|
|
|
const open = () => {
|
|
|
|
|
show.value = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
defineExpose({
|
|
|
|
|
open
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const changeSwiper = ({detail}) => {
|
|
|
|
|
current.value = detail.current;
|
|
|
|
|
}
|
2025-03-27 15:38:21 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<x-modal
|
2025-05-21 15:45:10 +08:00
|
|
|
backgroundColor="rgba(255,255,255,0)"
|
2025-03-27 15:38:21 +08:00
|
|
|
class="x-video-modal"
|
|
|
|
|
v-model:show="show">
|
2025-05-21 15:45:10 +08:00
|
|
|
<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="absolute left-1/2 -translate-x-1/2 bottom-[-80rpx] text-white test-36r">
|
|
|
|
|
{{ current + 1 }} / {{ options.pop_images.length }}
|
2025-03-27 15:38:21 +08:00
|
|
|
</view>
|
2025-05-21 15:45:10 +08:00
|
|
|
<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>
|
|
|
|
|
</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>
|
2025-03-27 15:38:21 +08:00
|
|
|
|
2025-05-21 15:45:10 +08:00
|
|
|
<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>
|
2025-03-27 15:38:21 +08:00
|
|
|
</view>
|
2025-05-21 15:45:10 +08:00
|
|
|
</template>
|
2025-03-27 15:38:21 +08:00
|
|
|
</x-modal>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
2025-05-21 15:45:10 +08:00
|
|
|
|
2025-03-27 15:38:21 +08:00
|
|
|
.x-video-modal {
|
|
|
|
|
.tui-modal-box {
|
|
|
|
|
margin-bottom: 200rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
