修改删除 首页轮播组件
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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import MySwiper from "@/components/fuyu-MixSwiper/fuyu-MixSwiper.vue";
|
// import MySwiper from "@/components/fuyu-MixSwiper/fuyu-MixSwiper.vue";
|
||||||
import {
|
import {
|
||||||
dateWeek
|
dateWeek
|
||||||
} from '../../utils/dateFormat'
|
} from '../../utils/dateFormat'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
MySwiper,
|
//MySwiper,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user