修改删除 首页轮播组件
This commit is contained in:
parent
6cc84a293f
commit
eecd854ab3
@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<view class="myVideo_view" v-html="innerHtml" :id="id" :change:id="MyVideo.updateId" :isPlay="isPlay" :change:isPlay="MyVideo.handelPlay" ></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
// 添加控制播放和暂停的prop
|
||||
isPlay: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
id() {
|
||||
return this.item.id
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
innerHtml: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log('item',item)
|
||||
this.initVideoHtml();
|
||||
},
|
||||
methods: {
|
||||
isHttpOrHttps(url) {
|
||||
const regex = /^(http|https):\/\//;
|
||||
return regex.test(url);
|
||||
},
|
||||
initVideoHtml() {
|
||||
let { url } = this.item.image
|
||||
let bool = this.isHttpOrHttps(url)
|
||||
console.log('url',url)
|
||||
if(!bool) {
|
||||
url = plus.io.convertLocalFileSystemURL(url);
|
||||
}
|
||||
this.innerHtml = `<video class="swiper-video" id="Video${this.item.id}" src="${url}" width="100%" height="100%" style="object-fit: contain;" autoplay/>`;
|
||||
},
|
||||
// 通知父组件播放完成
|
||||
ended() {
|
||||
this.$emit('onEnded')
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<script module="MyVideo" lang="renderjs">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
video: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
videoId() {
|
||||
return 'Video' + this.id
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initVideoElement()
|
||||
},
|
||||
methods: {
|
||||
initVideoElement() {
|
||||
let video = document.getElementById(this.videoId)
|
||||
this.video = video
|
||||
video.addEventListener('loadedmetadata', () => {
|
||||
this.video.play().then(res => {
|
||||
this.video.pause()
|
||||
})
|
||||
})
|
||||
video.addEventListener('ended', () => {
|
||||
this.video.pause()
|
||||
this.$ownerInstance.callMethod('ended')
|
||||
})
|
||||
},
|
||||
handelPlay(isPlay) {
|
||||
if(!this.video) return
|
||||
isPlay ? this.video.play() : this.video.pause()
|
||||
},
|
||||
updateId(id) {
|
||||
this.id = id
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.myVideo_view {
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
overflow: hidden;
|
||||
background-color: #000;
|
||||
}
|
||||
</style>
|
||||
@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<view class="swiper_s">
|
||||
<swiper class="swiper_s" :autoplay="false" indicator-active-color="#0DAE11" indicator-color="#ffffff" :indicator-dots="false" :current="swiperCurrent" @change="swiperChange">
|
||||
<swiper-item v-for="(item,index) in list" :key="index">
|
||||
<view class="fnon_tit">
|
||||
<view class="text">{{ item.title?item.title:'' }}</view>
|
||||
</view>
|
||||
<!-- @click="click(item.url)" 跳转活动链接 -->
|
||||
<image class="swiper-image" v-if="isImageUrl(item.image)" :src="item.image" mode="scaleToFill" />
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
<!-- 自定义指示器 -->
|
||||
<view class="dots">
|
||||
<text
|
||||
v-for="(dot, idx) in list.length"
|
||||
:key="idx"
|
||||
:class="['dot', { active: swiperCurrent === idx }]"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP
|
||||
import MyVideo from '@/components/fuyu-MixSwiper/MyVideo.vue'
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
// #ifdef APP
|
||||
MyVideo
|
||||
// #endif
|
||||
},
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
swiperCurrent: 0, //轮播下标
|
||||
autoplaySwiper: false,
|
||||
isShow: true,
|
||||
videoIndex: null,
|
||||
videoId: null,
|
||||
dotsShow:true,
|
||||
currentItemType:''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current;
|
||||
const currentItem = this.list[this.swiperCurrent];
|
||||
this.currentItemType = currentItem.showtype;
|
||||
if (this.currentItemType === 'video') {
|
||||
this.dotsShow = false
|
||||
} else {
|
||||
this.dotsShow = true
|
||||
}
|
||||
if (e.detail.current != this.videoIndex) {
|
||||
this.endVideo(this.videoId, 'swiper')
|
||||
}
|
||||
},
|
||||
click(e){
|
||||
uni.navigateTo({
|
||||
url: e
|
||||
});
|
||||
},
|
||||
isImageUrl(url) {
|
||||
// 定义常见的图片文件后缀
|
||||
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg'];
|
||||
// 获取URL中的文件后缀
|
||||
const ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
|
||||
// 检查文件后缀是否在图片文件后缀数组中
|
||||
return imageExtensions.includes(ext)
|
||||
},
|
||||
//当video播放得时候 覆盖曾隐藏，不能轮播
|
||||
plays(id, index) {
|
||||
// #ifndef APP
|
||||
let videoContext = uni.createVideoContext(`Video${id}`, this);
|
||||
videoContext.play()
|
||||
// #endif
|
||||
this.videoId = id
|
||||
this.videoIndex = index
|
||||
this.isShow = false
|
||||
this.autoplaySwiper = false
|
||||
},
|
||||
//加载视频时触发，解决小程序加载报错问题
|
||||
loadVideo(id) {
|
||||
let videoContext = uni.createVideoContext(`Video${id}`, this);
|
||||
videoContext.pause()
|
||||
videoContext.seek(0)
|
||||
},
|
||||
//当video播放结束得时候 进行初始化，恢复轮播
|
||||
endVideo(id, type) {
|
||||
// #ifndef APP
|
||||
let videoContext = uni.createVideoContext(`Video${id}`, this);
|
||||
videoContext.pause()
|
||||
// #endif
|
||||
this.isShow = true
|
||||
this.videoIndex = null
|
||||
this.videoId = null
|
||||
this.autoplaySwiper = true
|
||||
// if (!type) {
|
||||
// setTimeout(v => {
|
||||
// this.swiperCurrent++
|
||||
// }, 500)
|
||||
// }
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.swiper_s {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.swiper-image,
|
||||
.swiper-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 36rpx;
|
||||
object-fit: contain;
|
||||
}
|
||||
.fnon_tit {
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
font-family: "YouSheBiaoTiHei";
|
||||
font-weight: 400;
|
||||
font-size: 38rpx;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
z-index: 1;
|
||||
width: 630rpx;
|
||||
height: 117rpx;
|
||||
line-height: 100rpx;
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
border-radius: 36rpx;
|
||||
bottom: 30rpx;
|
||||
.text {
|
||||
position: relative; /* 确保文字在模糊背景之上 */
|
||||
z-index: 110; /* 确保文字位于最上层，高于伪元素 */
|
||||
}
|
||||
}
|
||||
.fnon_tit::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
backdrop-filter: blur(4px); /* 调整模糊程度 */
|
||||
pointer-events: none; /* 确保模糊效果不会干扰点击事件 */
|
||||
border-radius: 36rpx;
|
||||
z-index: 10; /* 确保伪元素在背景和文字之间 */
|
||||
}
|
||||
.dots {
|
||||
position: absolute;
|
||||
bottom: 50rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.dot {
|
||||
background-color: #ffffff ;
|
||||
width: 30rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 0;
|
||||
margin-right: 10rpx;
|
||||
&.active {
|
||||
background: #0DAE11;
|
||||
// transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -264,13 +264,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MySwiper from "@/components/fuyu-MixSwiper/fuyu-MixSwiper.vue";
|
||||
// import MySwiper from "@/components/fuyu-MixSwiper/fuyu-MixSwiper.vue";
|
||||
import {
|
||||
dateWeek
|
||||
} from '../../utils/dateFormat'
|
||||
export default {
|
||||
components: {
|
||||
MySwiper,
|
||||
//MySwiper,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user