soulspace/pages/forum/list.vue

<template>
  <view class="commonPageBox">
    <z-paging ref="paging" v-model="dataList" auto-show-back-to-top :auto="false" @query="getDataList">
      <template #top>
        <z-nav-bar title="心理论坛"></z-nav-bar>
				
				<view class="search_box">
					<u-search placeholder="请输入文章标题" v-model="query.title" @search="handleSearch" @custom="handleSearch"></u-search>
					<u-tabs :list="classification" keyName="dictValue" lineWidth="30" class="classification_tabs" @click="handleClassification"></u-tabs>
				</view>
      </template>

      <view class="list_item" 
        v-for="(item, index) in dataList" :key="index" 
        v-if="dataList&&dataList.length>0"
        @click="goToDetail(item)"
      >
        <view class="list_item_image">
          <image v-if="item.imgurl" :src="item.imgurl" mode="aspectFill"></image>
          <text class="image_null" v-else>暂无封面图</text>
        </view>
        <view class="list_item_right">
          <view class="list_item_title">{{item.title}}</view>
          <view class="list_item_content" v-html="item.description"></view>
					<view class="list_item_time">{{item.createTime}}</view>
          <view class="list_item_study">查看详情</view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
	data(){
		return {
			query: {
				page: 1,
				limit: 10,
				title: '',
			},
			dataList: [],  //列表数据
			statusNull: null,  //暂无数据显示
			classification: []
		}
	},
	mounted(){
	},
	onLoad() {
		this.getClassification();
	},
	methods: {
		// 获取分类
		getClassification(){
			this.$http.request({
				url: "book/sysdictdata/selectByType/psycheForumLabel",
				method: "GET",
				header: { "Content-Type": "application/json" },
			})
			.then((res) => {
				if (res.code == 0 && res.dataList) {
					this.classification = res.dataList;
					this.query.type = res.dataList[0].dictType;
					this.$refs.paging.reload();
				}
			})
			.catch((e) => {
				console.log("获取分类失败", e);
			});
		},
		handleClassification(e){
			this.query.type = e.dictType;
			this.$refs.paging.reload();
		},
		// 获取列表
		getDataList(pageNo, pageSize){
			this.$http.request({
				url: 'common/wxPublicAccount/getWxPublicAccountArticleList',
				method: "POST",
				data: {
					...this.query,
					page: pageNo,
					limit: pageSize,
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				if (res.code == 0) {
					if(res.page.records){
						this.$refs.paging.complete(res.page.records);
					}else{
						this.$refs.paging.complete(false);
					}
				}
			});
		},
		//搜索
		handleSearch(){
			this.$refs.paging.reload();
		},
		//跳转课程详情
		goToDetail(item) {
		  uni.navigateTo({
		    url: `/pages/forum/details?url=${item.url}`,
		  });
		},
	},
}
</script>

<style lang="scss" scoped>
.commonPageBox{
	background: #eff5f8;
	height: 100vh;
}
.search_box{
	background: #fff;
	padding: 0 20rpx 20rpx;
}
.classification_tabs {
	::v-deep .u-tabs__wrapper__nav__item {
		padding: 0 20rpx;
	}
}
.cateList {
	width: 100%;
}
.flexbox {
	position: fixed;
	left: 0;
	z-index: 9999;
}
.list_item{
	position: relative;
	background: #fff;
	box-shadow: 0px 0px 10px 0px #CBDBF7;
	padding: 30rpx 20rpx 30rpx;
	display: flex;
	border-radius: 10rpx;
	margin: 30rpx 30rpx 0;
}
.list_item_image,.image_null{
	width: 250rpx;
	height: 220rpx;
	background-color: rgba(125, 193, 240, 0.1);
	display: flex;
	justify-content: center;
	align-items: center;
}
.list_item_image image{
	width: 100%;
	height: 100%;
}
.list_item_right{
	margin-left: 30rpx;
	width: calc(100% - 250rpx);
}
.list_item_title{
	font-size: 30rpx;
	line-height: 36rpx;
	font-weight: bold;
	color: #333;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.list_item_content{
	margin-top: 15rpx;
	font-size: 26rpx;
	line-height: 36rpx;
	color: #999;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.list_item_time{
	margin-top: 15rpx;
	font-size: 24rpx;
	line-height: 36rpx;
	color: #999;
}
.list_item_study{
	line-height: 48rpx;
	position: absolute;
	right: 20rpx;
	bottom: 20rpx;
	background: #7dc1f0;
	color: #fff;
	border-radius: 40rpx;
	font-size: 24rpx;
	padding: 0 20rpx;
}
.list_item_study_out{
	line-height: 48rpx;
	position: absolute;
	right: 20rpx;
	bottom: 30rpx;
	background: #294a97;
	color: #fff;
	border-radius: 40rpx;
	font-size: 24rpx;
	padding: 0 20rpx;
}
.text_null{
	display: block;
	width: 100%;
	text-align: center;
	font-size: 26rpx;
	color: #999;
	margin: 150rpx 0;
}
.image_null{
	color: #999;
	font-size: 22rpx;
}
::v-deep .zp-scroll-view .uni-scroll-view::-webkit-scrollbar {
	/*滚动条整体样式*/
	width: 4px !important;
	height: 4px !important;
	overflow: auto !important;
	background: #f5f5f5 !important;
	-webkit-appearance: auto !important;
	display: block;
}

::v-deep .zp-scroll-view .uni-scroll-view::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 10px !important;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
	background: #eee !important;
}

::v-deep .zp-scroll-view .uni-scroll-view::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
	// border-radius: 10px !important;
	background: #FFFFFF !important;
}
</style>