411 lines
9.3 KiB
Vue
411 lines
9.3 KiB
Vue
<template>
|
||
<view class="campusstyle">
|
||
<!-- 底图 -->
|
||
<view class="campusstyleItem"></view>
|
||
<!-- 轮播图 -->
|
||
<view class="campusstyleIndex">
|
||
<swiper class="carousel" :indicator-dots="false" interval="3000" duration="500" :autoplay="true" circular
|
||
previous-margin="70px" next-margin="70px" @change="swiperChange">
|
||
<swiper-item class="swiper-item" v-for="(item, index) in newlists" :key="index">
|
||
<view class="carousel-box" :class="[currentIndex == index ? 'active' : 'quiet']">
|
||
<image class="carousel-image" @click="swiperLink(item)"
|
||
:src="item.imageUrl?item.imageUrl:newsImages" mode="scaleToFill" />
|
||
<view class="title-box">
|
||
<view class="top-title font-16 text-color-3 font-weight-600">
|
||
{{ item.title }}
|
||
</view>
|
||
<view class="pub-title font-14 text-color-6">发布时间：{{ item.timestamp }}</view>
|
||
<view class="pub font-14 text-color-6">作者：{{ item.creator }}</view>
|
||
<view class="top-num flex font-14 text-color-6">
|
||
<!-- <view class="chat mr-40">
|
||
<view class="mr-8">
|
||
<image style="width: 100%;height: 100%;" src="../../static/campus/评论.png">
|
||
</image>
|
||
</view>
|
||
<text style="margin-top: -4rpx;">{{ item.remarkCount }}</text>
|
||
</view> -->
|
||
<view class="chat mr-40" @click="newsGiveaList(item)">
|
||
<view class="mr-8">
|
||
<image style="width: 100%;height: 100%;" src="../../static/campus/点赞.png">
|
||
</image>
|
||
</view>
|
||
<text style="margin-top: -4rpx;">{{ item.praiseCount }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
|
||
<!-- 校园风采 -->
|
||
<view class="demeanour">
|
||
<view style="color: #333333;font-size: 14px;margin-left: 26rpx;">校园风采</view>
|
||
<scroll-view :scroll-y="showAllPage" upper-threshold="1" :scroll-top="scrolltop" @scroll="scroll"
|
||
@scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper" class="demo-scroll-block">
|
||
<view class="demeanourItem" v-for="(items,index) in tabList" :key="items.id">
|
||
<view class="demeanourUrl" @click="onUrlClick(JSON.stringify(items))">
|
||
<image :src='items.imageUrl' :lazy-load="true"></image>
|
||
</view>
|
||
<view class="demeanourUrl2">
|
||
<view style="color: #333333;font-size: 14px;margin-bottom: 10rpx;">
|
||
{{items.title?items.title:"主题活动"}}</view>
|
||
<view style="display: flex;margin-bottom: 10rpx;">
|
||
<view style="width: 30rpx;height: 30rpx;margin-right: 10rpx ;">
|
||
<image style="width: 100%;height: 100%;" src="../../static/campus/作者.png"></image>
|
||
</view>
|
||
<span style="color: #818181;font-size: 12px;">{{items.station}}</span>
|
||
</view>
|
||
<view style="color: #818181;font-size: 12px;">
|
||
{{items.timestamp}}
|
||
</view>
|
||
<view class="commentITem">
|
||
{{items.comment?items.comment:'活动介绍'}}
|
||
</view>
|
||
|
||
<view style="display: flex;">
|
||
<!-- <view style="display: flex;margin-right: 50rpx;">
|
||
<view style="width: 30rpx;height: 30rpx;">
|
||
<image style="width: 100%;height: 100%;" src="../../static/campus/评论.png"></image>
|
||
</view>
|
||
<span style="color: #818181;font-size: 12px;">{{item.remarkCount}}</span>
|
||
</view> -->
|
||
<view style="display: flex;">
|
||
<view style="width: 30rpx;height: 30rpx;" @click="heartIcon(JSON.stringify(items))">
|
||
<u-icon :name="iconType?'heart-fill':'heart'" :color="iconType?'red':'#818181'"
|
||
size="32"></u-icon>
|
||
</view>
|
||
<span style="color: #818181;font-size: 12px;">{{items.praiseCount}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getnewslast,
|
||
getnewslist,
|
||
getnewspraise,
|
||
getschoolpraise
|
||
} from '@/api/login';
|
||
import {
|
||
mapGetters
|
||
} from 'vuex';
|
||
// import schoolgate from '../../static/school/picture.png'
|
||
export default {
|
||
data() {
|
||
return {
|
||
iconType: false,
|
||
scrolltop: 0,
|
||
showAllPage: true,
|
||
newsImages: 'https://www.lonsungsh.com/furongPolice/imgs/furongPolice.png',
|
||
baseURl: 'https://www.lonsungsh.com:8083',
|
||
tabList: [], //校园风采数据
|
||
currentIndex: 0,
|
||
newlists: [], //新闻数据
|
||
limit: 10,
|
||
// pageIndex:1
|
||
}
|
||
},
|
||
|
||
onShow() {
|
||
this.getnews()
|
||
this.getnewslistdata()
|
||
// uni.removeStorage({key:'valueList'})
|
||
},
|
||
computed: {
|
||
// 拿取vuex数据
|
||
...mapGetters({
|
||
userInfo: 'users/getLoginInfo',
|
||
})
|
||
},
|
||
methods: {
|
||
|
||
// 下拉刷新
|
||
onPullDownRefresh() {
|
||
this.getnewslistdata()
|
||
// 停止刷新
|
||
setTimeout(() => {
|
||
uni.stopPullDownRefresh()
|
||
}, 1000)
|
||
},
|
||
|
||
// 跳转评论 现在没用到
|
||
onUrlClick(item) {
|
||
uni.setStorageSync('valueList',item)
|
||
// setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: `/pages/publishreview/publishreview?index${item}`,
|
||
});
|
||
// setTimeout(() => {
|
||
// uni.$emit('value', JSON.parse(item))
|
||
// }, 600)
|
||
// }, 2000)
|
||
//
|
||
},
|
||
// 轮播图
|
||
swiperChange(e) {
|
||
this.currentIndex = e.detail.current;
|
||
},
|
||
// 跳转外部链接
|
||
swiperLink(e) {
|
||
uni.navigateTo({
|
||
url: `/pages/externallink/externallink?src=${e.docUrl}`,
|
||
});
|
||
},
|
||
|
||
// 新闻轮播数据
|
||
getnews() {
|
||
getnewslast({
|
||
brigade: '长沙芙蓉区',
|
||
limit: 5
|
||
}).then((res) => {
|
||
this.newlists = res.data
|
||
})
|
||
},
|
||
// 新闻点赞
|
||
newsGiveaList(item) {
|
||
if (this.userInfo.name) {
|
||
getnewspraise({
|
||
newsId: item.newsId
|
||
}).then((res) => {
|
||
this.newlists.forEach((items) => {
|
||
if (items.newsId == item.newsId) {
|
||
items.praiseCount = ++items.praiseCount
|
||
}
|
||
})
|
||
}).catch(() => {})
|
||
} else {
|
||
uni.showToast({
|
||
title: '请先登录',
|
||
icon: 'error'
|
||
});
|
||
}
|
||
|
||
},
|
||
|
||
// 滑动内部scroll
|
||
scroll({
|
||
detail: {
|
||
scrolltop
|
||
}
|
||
}) {},
|
||
scrolltolower() {
|
||
console.log(1111);
|
||
|
||
},
|
||
scrolltoupper(detail) {},
|
||
// 校园风采列表
|
||
getnewslistdata() {
|
||
getnewslist({
|
||
brigade: '长沙芙蓉区',
|
||
limit: this.limit,
|
||
}).then((res) => {
|
||
res.data.forEach((item) => {
|
||
item.imageUrl = this.baseURl + JSON.parse(item.imageUrls)[0]
|
||
})
|
||
this.tabList = res.data
|
||
})
|
||
},
|
||
// 点赞
|
||
heartIcon(item) {
|
||
let id = JSON.parse(item).newsId
|
||
if (this.userInfo.name) {
|
||
getschoolpraise({
|
||
newsId: id
|
||
}).then((res) => {
|
||
this.tabList.forEach((items) => {
|
||
if (items.newsId == id) {
|
||
items.praiseCount = ++items.praiseCount
|
||
}
|
||
})
|
||
}).catch(() => {})
|
||
} else {
|
||
uni.showToast({
|
||
title: '请先登录',
|
||
icon: 'error'
|
||
});
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.campusstyle {
|
||
height: 100vh;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.campusstyleItem {
|
||
height: 200rpx;
|
||
background-image: url(../../static/login/banner.png);
|
||
background-repeat: no-repeat;
|
||
background-position: right;
|
||
}
|
||
|
||
.demeanour {
|
||
margin-top: 310rpx;
|
||
height: 57%;
|
||
|
||
.demeanourItem {
|
||
width: 100%;
|
||
height: 260rpx;
|
||
display: flex;
|
||
padding: 20rpx;
|
||
margin-bottom: 25rpx;
|
||
|
||
.demeanourUrl {
|
||
width: 45%;
|
||
height: 254rpx;
|
||
margin-right: 10rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 5px;
|
||
}
|
||
}
|
||
|
||
.demeanourUrl2 {
|
||
width: 60%;
|
||
height: 260rpx;
|
||
padding-right: 20rpx;
|
||
|
||
.commentITem {
|
||
color: #818181;
|
||
font-size: 12px;
|
||
margin-bottom: 5px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
padding-right: 8rpx;
|
||
height: 48px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.Loadata {
|
||
font-size: 14px;
|
||
margin-top: 42rpx;
|
||
// color: #e3e3e3;
|
||
text-align: center;
|
||
}
|
||
|
||
.demo-scroll-block {
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.carousel {
|
||
width: 100%;
|
||
height: 451rpx;
|
||
}
|
||
|
||
.campusstyleIndex {
|
||
position: absolute;
|
||
top: 14px;
|
||
left: 19px;
|
||
width: 100%;
|
||
/* box-shadow: 0px 10px 10px -4px #e3e3e3; */
|
||
}
|
||
|
||
.carousel .carousel-image {
|
||
width: 89%;
|
||
height: 248rpx;
|
||
border-top-left-radius: 12px;
|
||
border-top-right-radius: 12px;
|
||
vertical-align: middle;
|
||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.carousel-box {
|
||
&.quiet {
|
||
transform: scale(0.86);
|
||
transition: all 0.3s ease-in-out 0s;
|
||
}
|
||
|
||
&.active {
|
||
transform: none;
|
||
transition: all 0.3s ease-in-out 0s;
|
||
}
|
||
}
|
||
|
||
.title-box {
|
||
/* overflow: hidden; */
|
||
padding-left: 15px;
|
||
// padding-bottom: 15px;
|
||
width: 83.5%;
|
||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
|
||
border-bottom-left-radius: 12px;
|
||
border-bottom-right-radius: 12px;
|
||
}
|
||
|
||
.swiper-item {
|
||
// padding: 0 10px;
|
||
box-sizing: border-box;
|
||
overflow: inherit;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
}
|
||
|
||
.font-16 {
|
||
font-size: 14px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
padding-right: 8rpx;
|
||
|
||
}
|
||
|
||
.font-14 {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.font-12 {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.font-weight-600 {
|
||
color: #333333;
|
||
}
|
||
|
||
.text-color-6 {
|
||
color: #747474;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.text-color-3 {
|
||
color: #333;
|
||
height: 75rpx;
|
||
}
|
||
|
||
.mr-8 {
|
||
margin-right: 8px;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.mr-40 {
|
||
margin-right: 36rpx;
|
||
display: flex;
|
||
margin-top: 5rpx;
|
||
}
|
||
</style> |