sooka_consult_uniapp/pages/handleAffairs/index.vue

<template>

	<view style="background-color:#fff ;">
		<!-- 搜索栏 -->
		<view class="input-view_contain data-v-53a1f34c">
			<view class="input-view">
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索内容" @confirm="confirm" v-model="title"/>
				<uni-icons type="search" size="20" class="search-icon" @tap="confirm"></uni-icons>
			</view>
		</view>
		<view class="spacing"></view>
		<!-- 网格配置列表滑动 -->
		<view class="image-hei">
			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" style="height: 160rpx;">
					<swiper-item v-for="(item ,index) in gridtType" :key="index">
						<uni-grid :column="5" :highlight="true" :showBorder="false">
							<uni-grid-item v-for="(dataitem,dataindex) in item" :key="dataitem.id">
								<view  @click="querygrid(dataitem)">
									<image class="uni-header-image" :src="loadImgSrcLocalhost(dataitem.fileUrl)"></image>
									<uni-title type="h5" :title="dataitem.name" align="center"></uni-title>
								</view>
							</uni-grid-item>
						</uni-grid>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<view>
			<view class="demo-uni-row">
				<button align="center" @click="topic">主题导航</button>
				<button align="center" @click="dept">部门导航</button>
			</view>
		</view>

		<!-- ------------------------------------------------------------------------------------------------------------------------------------------ -->

		<view>
		    <!-- 使用分段器来切换推荐和收藏列表 -->
		    <view class="segmented-control">
		        <!-- <view class="segmented-control-item" :class="{ active: activeTab === 'recommend' }" @click="changeTab('recommend')">常办事项</view>
		        <view class="segmented-control-item" :class="{ active: activeTab === 'favorite' }" @click="changeTab('favorite')">我的事</view> -->
				<view
					class="segmented-control-item"
					:class="activeTab == e.label ? 'highlight' : 'not-highlight' "
					@click="changeTab(e.label)"
					v-for="(e,idx) in switchOption"
					:key="idx"
					>
					{{ e.value }}
				</view>
		    </view>

		    <!-- 根据选中的标签显示对应的列表 -->
		    <view v-if="activeTab === 'recommend'">
		        <view class="rnwdList">
		            <ul>
		               <!-- <li v-for="(item,index) in recommendList" :key="index">
		                    <p @click="getmatter(item)">{{ item.title }}</p>
		                </li> -->
						<uni-list>
							<uni-list-item  class="list-item":title="item.title" v-for="(item,index) in recommendList" @click="getmatter(item)" clickable="true" link></uni-list-item>
						</uni-list>
		            </ul>
		        </view>
		    </view>
		    <view v-if="activeTab === 'favorite'">
		        <view class="rnwdList">
		            <ul>
		                <!-- <li v-for="(item,index) in favoriteList" :key="index">
		                    <p @click="getmatter(item)">{{ item.title }}</p>
		                </li> -->
						<uni-list>
							<uni-list-item class="list-item" :title="item.title" v-for="(item,index) in favoriteList" @click="getmatter(item)" clickable="true" link></uni-list-item>
						</uni-list>
		            </ul>
		        </view>
		    </view>
			<uni-fab ref="fab" :horizontal="right" :vertical="bottom"
			         @fabClick="goToMatterAllPage()"/>
			<!-- <view class="add-button" @click="goToMatterAllPage">
					<text>+</text>
				</view> -->
		</view>


	</view>

</template>

<script>
	import {
		listGridType
	} from '@/api/handleAffairs/gridType.js';
import { listDept,collectlist } from '@/api/handleAffairs/matter.js';
	export default {
		data() {
			return {
				title:"",
				gridtType: [], //是一个list<map>数据 [[1,2,3]]

				activeTab: 'recommend', // 默认选中推荐列表
				recommendList: [], // 推荐列表数据
				favoriteList: [], // 收藏列表数据
			    userList: [], // 收藏列表数据
			    switchOption:[
				    {
					    value:'常办事项',
					    label:'recommend'
				    },
				    {
					    value:'我的事',
					    label:'favorite'
				    }
			    ],
				  userList: [], // 收藏列表数据
				  //悬浮按钮右对齐
				  right: 'right',
				  //悬浮按钮下对齐
				  bottom: 'bottom',
				  color:'#8FBC8F '
			};
		},
		created() {
			this.getListListGrid();
			this.getListDept();
			this.getListscolle();
		},
		methods: {
			  goToMatterAllPage() {
			        // 使用 uni-app 的路由跳转方法跳转到 matterAll 页面
			        uni.navigateTo({
			            url: '/pages/handleAffairs/mattersAdd/mattersAdd'
			        });
			    },
			confirm(){
				if (!this.title.trim()) {//去除前后空格，在判断是否为空
					return
				}
				console.log(this.title)
				uni.setStorageSync('data', {title:this.title,examine:1})
				uni.navigateTo({
					url: '/pages/handleAffairs/matterAll/matterAll',
				});
			},
			//主题导航跳转
			topic(){
				uni.navigateTo({
					url: '/pages/handleAffairs/topic/topic',
				});
			},

			querygrid(item) {
				console.log(item)
				uni.setStorageSync('id', item.id)
				uni.navigateTo({
					url: '/pages/handleAffairs/gridQuery/gridQuery?titleText='+item.name

				});
			},
			getListListGrid() {
				const _that = this
				let query = {
					yesOrNoShow: "0"
				};
				listGridType(query).then(res => {
					let gridtTypeLits = res.rows

					let dataList = []
					for (var i = 0; i < gridtTypeLits.length; i++) {
						dataList.push(gridtTypeLits[i])
						if (((i + 1) % 5 == 0) || i == gridtTypeLits.length - 1) {
							_that.gridtType.push(dataList)
							dataList = []
						}
					}
				});

			},
			getListDept() {
			    const _that = this;
			    let query = { yesOrNoShow: "0" };
			    // 获取推荐列表数据
			    listDept(query).then(res => {
			        _that.recommendList = res.rows;

			    });

			},
			getListscolle(){

			   const userId = getApp().globalData.userId;
			  collectlist(userId).then(res =>{
			    this.favoriteList = res.rows

			  })
			},
			getmatter(item) {
			    uni.setStorageSync('id', item.id);
			    uni.navigateTo({
			        url: '/pages/handleAffairs/mattercontent/mattercontent',
			    });
			},
			addNewItem(item) {

			    uni.navigateTo({
			        url: '/pages/handleAffairs/mattersAdd/mattersAdd',
			    });
			},
			changeTab(tab) {
			    this.activeTab = tab;

				this.getListDept()

				this.getListscolle()
			},
			dept(){

				uni.navigateTo({
					url: '/pages/handleAffairs/dept/dept',
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	.not-highlight{
		color:#ABB7C7;
		background-color:#fff
	}
	.highlight{
		color:#0CC689;
		background-color:#fff;
		border-bottom: 2px solid #0CC689;
	}
	.uni-header-image {
		width: 40px;
		height: 40px;
		display: block;
		margin: 0 auto;
		border-radius: 50%;
	}
	.demo-uni-row{
		position: relative;
		display: flex;
		width: 92%;
		height: 8vh;
		margin: auto;
		border-radius: 10px;
		border: 1px solid #19C56B;
	}
	.demo-uni-row button{
		width: 45%;
		color: #27C874;
		height: 100%;
		line-height: 250%;
		text-indent: 9%;
		background-color: #F1F1F1;
		border: none !important;
		background-color:#fff
	}
	.demo-uni-row button:after{
		border: none;
	}
	.demo-uni-row::after{
		content: '';
		position: absolute;
		width: 4rpx;
		height: 46%;
		left: 50%;
		top: 33%;
		z-index: 10;
		margin: auto;
		background-color: #E1E1E1;
	}
	/* 主导航 */
	.mainNav {
		width: 100%;
		background: #fff;

	}
	.input-view_contain{
		height: 50px;
		width: 100%;
		background-color: #07C160;
	}
	.input-view {

		justify-content: space-between;
		align-items: center;
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: 80%;
		border-radius: 5px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: auto;
		line-height: 5vh;
		width: 96%;
		.nav-bar-input{
			margin: auto 0;
			font-size: 15px;
		}
	}
	.segmented-control {
		width: 100%;
		height: 8vh;
	    display: flex;
	    justify-content: space-around;
	    background-color: #f0f0f0;
	}
	.rnwdList{
		min-height: 63vh;
		background-color: #fff;
	}
	.segmented-control-item {
		width: 50%;
		height: 100%;
		line-height: 250%;
		text-align: center;
	    padding: 10px;
		font-size: 34rpx;
	}

	.segmented-control-item.active {
	    color: #007aff;
	}
	.spacing {
		height: 40rpx;
	}
	.image-hei{
		height:80px
	}
	.list-item {
	   border-bottom: 1px dotted #ccc;
	   height:35px
	}
</style>