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>
|