You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

356 lines
8.3 KiB

4 months ago
<template>
4 months ago
<view class="bg">
3 months ago
<headerVue :type="'article'" />
4 months ago
3 months ago
<view class="start-swiper" v-show="isShow && startSwiper && startSwiper.length > 0" @click="this.isShow = false">
4 months ago
<swiper class="start-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500"
@change="onSwiperChange">
<swiper-item v-for="(item, index) in startSwiper" :key="index">
<image :src="showImg(item.head_img)" mode="aspectFill"></image>
</swiper-item>
</swiper>
</view>
4 months ago
4 months ago
<!-- <view class="top-box">
4 months ago
<swiper class="carousel-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500"
@change="onSwiperChange">
<swiper-item v-for="(item, index) in swiperList" :key="index">
4 months ago
<image :src="showImg(item.head_img)" mode=""></image>
4 months ago
</swiper-item>
</swiper>
4 months ago
<view class="exhibit-issue">issue/0{{ currentIndex + 1 }}</view>
4 months ago
底部指示点
4 months ago
<view class="custom-indicators">
<view v-for="(_, index) in swiperList" :key="index"
:class="['indicator-dot', {'active': index === currentIndex}]"></view>
</view>
4 months ago
</view> -->
<uni-swiper-dot class="uni-swiper-dot-box" :info="swiperList" :current="current" :mode="mode"
:dots-styles="dotsStyles" field="content">
3 months ago
<swiper class="swiper-box" @change="change" :current="swiperDotIndex" :style="{height : swiperHeight + 'px'}">
4 months ago
<swiper-item v-for="(item, index) in swiperList" :key="index" @click="gotoUrlNew(item)">
3 months ago
<image :src="showImg(item.head_img)" mode="widthFix" :id="`swiper-item-${index}`"></image>
4 months ago
</swiper-item>
</swiper>
</uni-swiper-dot>
4 months ago
3 months ago
<!-- <swiper class="category-scroll">
4 months ago
<swiper-item v-for="(item, index) in categories" :key="index" @click="gotoUrlNew(item)">
<image :src="showImg(item.head_img)" mode="aspectFill"></image>
</swiper-item>
3 months ago
</swiper> -->
<!-- <view class="category-scroll" v-if="categories && categories.length > 0">
<video src="https://static.ticket.sz-trip.com/epicSoul/category.mp4" :poster="showImg(categories[0].head_img)" objectFit="cover"></video>
</view> -->
<view class="category-scroll">
<video src="https://static.ticket.sz-trip.com/epicSoul/categorys.mp4" objectFit="cover"></video>
</view>
4 months ago
<view class="title-box">
3 months ago
阅读合集
4 months ago
<image src="https://static.ticket.sz-trip.com/epicSoul/readingBody/titleSpan.png" mode=""></image>
</view>
4 months ago
<view class="reading-title flex-between" v-if="false">
4 months ago
<!-- <view v-for="(item,index) in readingType" :key="index" @click="changeType(index)">{{item.title}}</view>
<span :style="{left: readingIndex == 0 ? '32rpx' : (readingIndex == 1 ? '245rpx' : '448rpx')}"></span> -->
4 months ago
</view>
<view class="reading-box">
3 months ago
<image v-for="(item,index) in readingList" :key="index" :src="showImg(item.image)" @click="gotoUrlNew(item)"></image>
<image :src="showImg('/uploads/20250903/1aadd1b9a4c94ff0aa6b3f880a725b50.png')" @click="gotoUrlNew({jump_type:2,front_model:{mini:'/xqk/home/home'}})"></image>
4 months ago
</view>
4 months ago
<CustomTabBar :currentTab="1" />
3 months ago
<MusicControl />
4 months ago
</view>
4 months ago
</template>
<script>
4 months ago
import headerVue from "@/components/header.vue";
4 months ago
import CustomTabBar from '@/components/CustomTabBar.vue';
3 months ago
import MusicControl from '@/components/MusicControl.vue';
4 months ago
export default {
4 months ago
components: {
headerVue,
3 months ago
CustomTabBar,
MusicControl
4 months ago
},
4 months ago
data() {
4 months ago
return {
4 months ago
swiperList: [],
current: 0,
swiperDotIndex: 0,
3 months ago
swiperHeight: 524,
4 months ago
mode: 'round',
dotsStyles: {
selectedBackgroundColor: 'rgb(133, 133, 133)',
selectedBorder: 'none',
backgroundColor: 'rgba(150, 150, 150, 0.5)',
border: 'none'
},
4 months ago
currentIndex: 0,
4 months ago
categories: [],
readingList: [],
readingType: [{title: '2025', id: 3}, {title: '2026', id: 6}, {title: '全部', id: ''},],
4 months ago
readingIndex: 0,
startSwiper: [],
isShow: true
4 months ago
}
4 months ago
},
4 months ago
onReady() {
this.sendRequest()
},
3 months ago
onShow() {
const app = getApp();
if(app.globalData.musicSrc != 'https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3') {
app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/EpicSouls.mp3');
app.initBackgroundMusic(); // 初始化背景音乐
uni.$bgMusic.play(); // 播放音乐
}
},
4 months ago
methods: {
4 months ago
sendRequest() {
this.Post({
type_id: 3,
position: 2,
}, '/api/adv/getAdv').then(res => {
if(res.data) {
this.swiperList = res.data;
3 months ago
setTimeout(() => {
this.$nextTick(() => {
this.change({detail: {current: 0}})
})
},500)
4 months ago
}
});
this.Post({
type_id: 3,
position: 1,
}, '/api/adv/getAdv').then(res => {
if(res.data) {
this.categories = res.data;
}
});
3 months ago
this.Post({
type_id: 3,
position: 4,
}, '/api/adv/getAdv').then(res => {
if(res.data) {
this.startSwiper = res.data;
}
});
4 months ago
this.getList()
},
// 全部阅读 文章
getList() {
this.Post({
type_id: this.readingType[this.readingIndex].id,
offset: 0,
limit: 1
}, '/api/article/getArticleByType').then(res => {
if(res.data) {
this.readingList = res.data
}
})
},
change(e) {
this.current = e.detail.current
3 months ago
let element = '#swiper-item-' + e.detail.current
let query = uni.createSelectorQuery().in(this)
query.select(element).boundingClientRect()
query.exec((res) => {
if (res && res[0]) {
this.swiperHeight = res[0].height
}
})
4 months ago
},
4 months ago
onSwiperChange(e) {
this.currentIndex = e.detail.current;
4 months ago
},
4 months ago
changeType(index) {
this.readingIndex = index
4 months ago
this.getList()
},
viewDetail(item) {
if (item.url) {
uni.navigateTo({
url:"/subPackages/webPage/webPage?url="+encodeURIComponent(item.url)
})
return
}
uni.navigateTo({
url:'/subPackages/letter/detail?id='+item.id
})
4 months ago
}
4 months ago
}
4 months ago
}
</script>
<style lang="scss" scoped>
4 months ago
.bg {
4 months ago
padding-bottom: 200rpx;
}
4 months ago
.swiper-box, .top-box {
4 months ago
margin: 60rpx 25rpx 0;
4 months ago
height: 830rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
border-radius: 20rpx;
4 months ago
overflow: hidden;
// padding-top: 10rpx;
// background-color: #fff;
image {
width: 100%;
height: 100%;
}
4 months ago
}
.carousel-swiper {
width: 582.13rpx;
height: 706.24rpx;
margin: -40rpx auto 0;
image {
width: 100%;
height: 100%;
}
}
.exhibit-issue {
font-family: serif;
font-size: 28rpx;
color: #999;
font-style: italic;
padding: 40rpx 30rpx 0 0;
text-align: right;
}
.custom-indicators {
4 months ago
display: flex;
4 months ago
justify-content: center;
gap: 8rpx;
margin-top: 40rpx;
.indicator-dot {
width: 8rpx;
height: 8rpx;
border-radius: 4rpx;
background-color: rgba(150, 150, 150, 0.5);
transition: all 0.3s;
}
.indicator-dot.active {
width: 20rpx;
background-color: rgb(133, 133, 133);
}
4 months ago
}
4 months ago
.category-scroll {
4 months ago
// padding: 40rpx 0 0 40rpx;
// display: flex;
height: 393rpx;
margin: 50rpx 25rpx 0;
4 months ago
image {
4 months ago
width: 100%;
height: 393rpx;
4 months ago
flex-shrink: 0;
4 months ago
// margin-right: 20rpx;
4 months ago
border-radius: 20rpx;
4 months ago
}
3 months ago
video {
width: 100%;
height: 393rpx;
border-radius: 20rpx;
}
4 months ago
}
4 months ago
.title-box {
font-size: 36rpx;
font-weight: 500;
margin-top: 40rpx;
padding-left: 60rpx;
image {
width: 185.85rpx;
height: 20.98rpx;
margin-left: 21rpx;
}
4 months ago
}
4 months ago
.reading-title {
margin: 60rpx auto 0;
width: 585rpx;
height: 30rpx;
border-radius: 15rpx;
background-color: rgba(46, 220, 78, .8);
font-weight: bold;
font-size: 28rpx;
color: #000000;
4 months ago
padding: 0 40rpx;
4 months ago
position: relative;
view {
position: absolute;
z-index: 20;
bottom: 15rpx;
}
&>view:nth-child(2) {
left: 268rpx;
}
&>view:nth-child(3) {
right: 55rpx;
}
span {
width: 111rpx;
height: 100%;
background-color: rgb(9, 154, 60);
border-radius: 15rpx;
position: absolute;
left: 32rpx;
}
}
4 months ago
4 months ago
.reading-box {
4 months ago
margin: 20rpx 25rpx 0;
4 months ago
border-radius: 20rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
4 months ago
padding: 35rpx 10rpx 5rpx;
4 months ago
display: flex;
3 months ago
justify-content: space-around;
4 months ago
flex-wrap: wrap;
position: relative;
4 months ago
// top: -15rpx;
4 months ago
background-color: #fff;
image {
4 months ago
width: 212rpx;
height: 376rpx;
4 months ago
margin-bottom: 30rpx;
}
}
4 months ago
.start-swiper {
width: 100vw;
height: calc(100vh - 123rpx);
position: fixed;
top: 0;
left: 0;
z-index: 100;
image {
width: 100%;
height: 100%;
}
}
4 months ago
</style>