roamfuding-xcx/pages/tj.vue

<template>
	<view class="page">
		<!-- <u-navbar :is-back="false"  title="活动资讯" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#fff' title-size='36'
			height='46'	id="navbar">
		</u-navbar> -->
		<view class="" style="position: fixed;top: 110rpx;left: 50%;transform: translateX(-50%);font-weight: 600;font-size: 36rpx;color: #FFFFFF;z-index: 999;">
			活动资讯
		</view>
		<!-- 轮播图 -->
        <view class="wrap">
            <u-swiper :height="462" bg-color="#fff"  :list="lists"></u-swiper>
        </view>
		<!-- 活动资讯 -->
		<!-- <view class="huodongtop">
			<view class="big">
				活动资讯
			</view>
			<view class="xiao">
				更多 <u-icon name="arrow-right" color="#606060" size="28"></u-icon>
			</view>
		</view> -->
		<!--资讯列表 -->
		<view class="zixunlist">
			<view class="zixunitem" v-for="(item,index) in list" :key="index" @click="btnxq(item)">
				<view class="zixunlt">
					<image :src="item.picture" mode="aspectFill"></image>
				</view>
				<view class="zixunrt">
					<view class="title">
						{{item.title}}
					</view>
					<view class="cont">
						{{ item.description == null ? '暂无简介' : (item.description.length > 34 ? item.description.substring(0, 34) + '...' : item.description) }}
					</view>
					<view class="bot">
						<view class="time">
							{{item.createTime}}
						</view>
						<view class="guankan">
							{{item.views == null ? '0' : item.views}}浏览
						</view>
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #d8d8d8;">
				暂时没有更多资讯了...
			</view>
		</view>
		
		
       	<tab-bar :indexs='1'></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: " ",
				},
                 list: [
                  {
                    image: "https://api.ccttiot.com/smartmeter/img/static/uPsqImwis8ekj6SHq6Nf",
                    title: "昨夜星辰昨夜风，画楼西畔桂堂东",
                  },
                  {
                    image: "https://api.ccttiot.com/smartmeter/img/static/u2VM89hLd4JttnWrIlpA",
                    title: "身无彩凤双飞翼，心有灵犀一点通",
                  },
                  {
                    image: "https://api.ccttiot.com/smartmeter/img/static/usVnHNXCvDngJFtFyvJd",
                    title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
                  },],
				  lists:[],
				  pageNum:1,
				  total:0
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.pageNum = 1
			this.getlist()
			this.getlunbo()
		},
		methods: {
			// 请求轮播图
			getlunbo(){
				this.$u.get(`/app/carousel/list?pageNum=1&pageSize=99`).then((res) => {
					if(res.code == 200){
						res.rows.forEach(item =>{
							this.lists.push({
								image:item.imageUrl,
								id:item.id
							})
						})
					}
				})
			},
			// 点击请求活动列表
			getlist(){
				this.$u.get(`/app/article/list?pageNum=${this.pageNum}&pageSize=20`).then((res) => {
					if(res.code == 200){
						this.total = res.total
						if(this.pageNum == 1){
							this.pageNum++
							this.list = res.rows
						}else{
							this.pageNum++
							this.list = this.list.concat(res.rows)
						}
					}
				})
			},
            // 点击跳转到详情
			btnxq(item){
				this.$u.post(`/app/article/view/${item.id}`).then((res) => {
					if(res.code == 200){
						// 区分是活动还是文章跳转不同页面
						if(item.type == 1){
							uni.navigateTo({
								url:'/page_fenbao/zixunbao/huodongxq?id=' + item.id
							})
						}else if(item.type == 2){
							uni.navigateTo({
								url:'/page_fenbao/zixunbao/index?id=' + item.id
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
    ::v-deep .u-swiper-image{
		width: 750rpx !important;
		height: 462rpx !important;
		border-radius: 0 0 0 50rpx !important;
	}
	::v-deep .u-list-image-wrap{
		border-radius: 0 !important;
	}
	::v-deep .u-swiper-wrap{
		border-radius: 0 !important;
	}
	::v-deep .u-indicator-item-round{
		width: 6rpx !important;
		height: 6rpx !important;
		background: #606060;
		border-radius: 50%;
		opacity: 0.5;
	}
	::v-deep .u-indicator-item-round-active{
		width: 46rpx !important;
		height: 6rpx;
		background: #1EC28B !important;
		border-radius: 9rpx 9rpx 9rpx 9rpx;
	}
	.wrap {

	 }
	.zixunlist{
		width: 100%;
		padding: 0 44rpx;
		height: 58vh;
		overflow: scroll;
		box-sizing: border-box;
		margin-top: 22rpx;
		.zixunitem{
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #D8D8D8;
			padding-bottom: 26rpx;
			box-sizing: border-box;
			margin-bottom: 32rpx;
			.zixunlt{
				image{
					width: 156rpx;
					height: 156rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}
			}
			.zixunrt{
				.title{
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
				}
				.cont{
					width: 474rpx;
					height: 90rpx;
					background: #EFEFEF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 24rpx;
					color: #3D3D3D;
					padding: 12rpx 24rpx;
					box-sizing: border-box;
					margin-top: 22rpx;
				}
				.bot{
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 22rpx;
					.guankan,
					.time{
						font-size: 24rpx;
						color: #606060;
					}
				}
			}
		}
	}
	.huodongtop{
		width: 100%;
		padding: 0 44rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 22rpx;
		border-radius: 0 120rpx 0 0 ;
		.big{
			font-weight: 600;
			font-size: 48rpx;
			color: #3D3D3D;
		}
		.xiao{
			font-size: 24rpx;
			color: #606060;
			display: flex;
			align-items: center;
		}
	}
	
</style>