123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248 |
- <template>
- <view>
- <!-- 搜索栏 -->
- <view class="input-view">
- <uni-icons type="search" size="20" class="search-icon" @tap="confirm"></uni-icons>
- <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm" v-model="title"/>
- </view>
- <!-- 网格配置列表滑动 -->
- <view>
- <uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
- <swiper class="swiper-box">
- <swiper-item v-for="(item ,index) in gridtType" :key="index">
- <!-- <ul class="mainNav" >
- <li v-for="(dataitem,dataindex) in item.dataList" :key="dataitem.id">
- <image class="uni-header-image" :src="'http://127.0.0.1:8080'+dataitem.fileUrl"
- @click="querygrid(dataitem)"></image>
- <text>{{dataitem.name}}</text>
- </li>
- </ul> -->
- <uni-grid :column="5" :highlight="true" :showBorder="false">
- <uni-grid-item v-for="(dataitem,dataindex) in item" :key="dataitem.id">
- <view>
- <image class="uni-header-image" :src="'http://127.0.0.1:8080'+dataitem.fileUrl"
- @click="querygrid(dataitem)"></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>
- <uni-row class="demo-uni-row" :width="nvueWidth">
- <uni-col :span="12">
- <button align="center" @click="topic">主题导航</button>
- </uni-col>
- <uni-col :span="12">
- <button align="center" @click="dept">部门导航</button>
- </uni-col>
- </uni-row>
- </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>
- <!-- 根据选中的标签显示对应的列表 -->
- <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 :title="item.title" v-for="(item,index) in recommendList" @click="getmatter(item)" clickable="true" ></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 :title="item.title" v-for="(item,index) in favoriteList" @click="getmatter(item)" clickable="true" ></uni-list-item>
- </uni-list>
- </ul>
- </view>
- </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: [], // 收藏列表数据
- };
- },
- created() {
- this.getListListGrid();
- this.getListDept();
- this.getListscolle();
- },
- methods: {
- confirm(){
- if (!this.title.trim()) {//去除前后空格,在判断是否为空
- return
- }
- console.log(this.title)
- uni.setStorageSync('data', {title:this.title,examine:1})
- uni.navigateTo({
- url: '/pages/matterAll/matterAll',
- });
- },
- //主题导航跳转
- topic(){
- uni.navigateTo({
- url: '/pages/topic/topic',
- });
- },
- querygrid(item) {
- console.log(item)
- uni.setStorageSync('id', item.id)
- uni.navigateTo({
- url: '/pages/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/gridQuery/mattercontent',
- });
- },
- addNewItem(item) {
- uni.navigateTo({
- url: '/pages/mattersAdd/mattersAdd',
- });
- },
- changeTab(tab) {
- this.activeTab = tab;
- this.getListDept()
- this.getListscolle()
- },
- dept(){
- uni.navigateTo({
- url: '/pages/topic/dept',
- });
- }
- }
- }
- </script>
- <style scoped>
- .uni-header-image {
- width: 30px;
- height: 30px;
- display: block;
- margin: 0 auto;
- }
- /* 主导航 */
- .mainNav {
- width: 100%;
- background: #fff;
- }
- .input-view {
- /* #ifndef APP-PLUS-NVUE */
- display: flex;
- /* #endif */
- flex-direction: row;
- // width: 500rpx;
- flex: 1;
- background-color: #f8f8f8;
- height: $nav-height;
- border-radius: 15px;
- padding: 0 15px;
- flex-wrap: nowrap;
- margin: 7px 0;
- line-height: $nav-height;
- }
- .segmented-control {
- display: flex;
- justify-content: space-around;
- background-color: #f0f0f0;
- }
- .segmented-control-item {
- padding: 10px;
- cursor: pointer;
- }
- .segmented-control-item.active {
- color: #007aff;
- }
- </style>
|