|
@@ -1,32 +1,26 @@
|
|
<template>
|
|
<template>
|
|
|
|
|
|
- <view>
|
|
|
|
|
|
+ <view style="background-color:#fff ;">
|
|
<!-- 搜索栏 -->
|
|
<!-- 搜索栏 -->
|
|
- <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 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>
|
|
|
|
+ <view class="spacing"></view>
|
|
<!-- 网格配置列表滑动 -->
|
|
<!-- 网格配置列表滑动 -->
|
|
- <view>
|
|
|
|
|
|
+ <view class="image-hei">
|
|
<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
|
|
<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
|
|
- <swiper class="swiper-box">
|
|
|
|
|
|
+ <swiper class="swiper-box" style="height: 160rpx;">
|
|
<swiper-item v-for="(item ,index) in gridtType" :key="index">
|
|
<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 :column="5" :highlight="true" :showBorder="false">
|
|
<uni-grid-item v-for="(dataitem,dataindex) in item" :key="dataitem.id">
|
|
<uni-grid-item v-for="(dataitem,dataindex) in item" :key="dataitem.id">
|
|
<view>
|
|
<view>
|
|
- <image class="uni-header-image" :src="'http://127.0.0.1:8080'+dataitem.fileUrl"
|
|
|
|
|
|
+ <image class="uni-header-image" :src="loadImgSrcLocalhost(dataitem.fileUrl)"
|
|
@click="querygrid(dataitem)"></image>
|
|
@click="querygrid(dataitem)"></image>
|
|
<uni-title type="h5" :title="dataitem.name" align="center"></uni-title>
|
|
<uni-title type="h5" :title="dataitem.name" align="center"></uni-title>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
</uni-grid-item>
|
|
</uni-grid-item>
|
|
</uni-grid>
|
|
</uni-grid>
|
|
</swiper-item>
|
|
</swiper-item>
|
|
@@ -35,15 +29,10 @@
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<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 class="demo-uni-row">
|
|
|
|
+ <button align="center" @click="topic">主题导航</button>
|
|
|
|
+ <button align="center" @click="dept">部门导航</button>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- ------------------------------------------------------------------------------------------------------------------------------------------ -->
|
|
<!-- ------------------------------------------------------------------------------------------------------------------------------------------ -->
|
|
@@ -51,8 +40,17 @@
|
|
<view>
|
|
<view>
|
|
<!-- 使用分段器来切换推荐和收藏列表 -->
|
|
<!-- 使用分段器来切换推荐和收藏列表 -->
|
|
<view class="segmented-control">
|
|
<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="{ 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>
|
|
|
|
|
|
<!-- 根据选中的标签显示对应的列表 -->
|
|
<!-- 根据选中的标签显示对应的列表 -->
|
|
@@ -63,7 +61,7 @@
|
|
<p @click="getmatter(item)">{{ item.title }}</p>
|
|
<p @click="getmatter(item)">{{ item.title }}</p>
|
|
</li> -->
|
|
</li> -->
|
|
<uni-list>
|
|
<uni-list>
|
|
- <uni-list-item :title="item.title" v-for="(item,index) in recommendList" @click="getmatter(item)" clickable="true" ></uni-list-item>
|
|
|
|
|
|
+ <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>
|
|
</uni-list>
|
|
</ul>
|
|
</ul>
|
|
</view>
|
|
</view>
|
|
@@ -75,16 +73,21 @@
|
|
<p @click="getmatter(item)">{{ item.title }}</p>
|
|
<p @click="getmatter(item)">{{ item.title }}</p>
|
|
</li> -->
|
|
</li> -->
|
|
<uni-list>
|
|
<uni-list>
|
|
- <uni-list-item :title="item.title" v-for="(item,index) in favoriteList" @click="getmatter(item)" clickable="true" ></uni-list-item>
|
|
|
|
|
|
+ <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>
|
|
</uni-list>
|
|
</ul>
|
|
</ul>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
-
|
|
|
|
|
|
+ <uni-fab ref="fab" :horizontal="right" :vertical="bottom"
|
|
|
|
+ @fabClick="goToMatterAllPage()"/>
|
|
|
|
+ <!-- <view class="add-button" @click="goToMatterAllPage">
|
|
|
|
+ <text>+</text>
|
|
|
|
+ </view> -->
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
+
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
@@ -101,7 +104,23 @@ import { listDept,collectlist } from '@/api/handleAffairs/matter.js';
|
|
activeTab: 'recommend', // 默认选中推荐列表
|
|
activeTab: 'recommend', // 默认选中推荐列表
|
|
recommendList: [], // 推荐列表数据
|
|
recommendList: [], // 推荐列表数据
|
|
favoriteList: [], // 收藏列表数据
|
|
favoriteList: [], // 收藏列表数据
|
|
|
|
+ userList: [], // 收藏列表数据
|
|
|
|
+ switchOption:[
|
|
|
|
+ {
|
|
|
|
+ value:'常办事项',
|
|
|
|
+ label:'recommend'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value:'我的事',
|
|
|
|
+ label:'favorite'
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
userList: [], // 收藏列表数据
|
|
userList: [], // 收藏列表数据
|
|
|
|
+ //悬浮按钮右对齐
|
|
|
|
+ right: 'right',
|
|
|
|
+ //悬浮按钮下对齐
|
|
|
|
+ bottom: 'bottom',
|
|
|
|
+ color:'#8FBC8F '
|
|
};
|
|
};
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
@@ -110,6 +129,12 @@ import { listDept,collectlist } from '@/api/handleAffairs/matter.js';
|
|
this.getListscolle();
|
|
this.getListscolle();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ goToMatterAllPage() {
|
|
|
|
+ // 使用 uni-app 的路由跳转方法跳转到 matterAll 页面
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: '/pages/mattersAdd/mattersAdd'
|
|
|
|
+ });
|
|
|
|
+ },
|
|
confirm(){
|
|
confirm(){
|
|
if (!this.title.trim()) {//去除前后空格,在判断是否为空
|
|
if (!this.title.trim()) {//去除前后空格,在判断是否为空
|
|
return
|
|
return
|
|
@@ -200,23 +225,71 @@ import { listDept,collectlist } from '@/api/handleAffairs/matter.js';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
-<style scoped>
|
|
|
|
|
|
+<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 {
|
|
.uni-header-image {
|
|
-
|
|
|
|
- width: 30px;
|
|
|
|
- height: 30px;
|
|
|
|
|
|
+ width: 40px;
|
|
|
|
+ height: 40px;
|
|
display: block;
|
|
display: block;
|
|
margin: 0 auto;
|
|
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: 200%;
|
|
|
|
+ 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 {
|
|
.mainNav {
|
|
width: 100%;
|
|
width: 100%;
|
|
background: #fff;
|
|
background: #fff;
|
|
|
|
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ .input-view_contain{
|
|
|
|
+ height: 50px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ background-color: #07C160;
|
|
|
|
+ }
|
|
.input-view {
|
|
.input-view {
|
|
|
|
+
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
/* #ifndef APP-PLUS-NVUE */
|
|
/* #ifndef APP-PLUS-NVUE */
|
|
display: flex;
|
|
display: flex;
|
|
/* #endif */
|
|
/* #endif */
|
|
@@ -224,25 +297,49 @@ import { listDept,collectlist } from '@/api/handleAffairs/matter.js';
|
|
// width: 500rpx;
|
|
// width: 500rpx;
|
|
flex: 1;
|
|
flex: 1;
|
|
background-color: #f8f8f8;
|
|
background-color: #f8f8f8;
|
|
- height: $nav-height;
|
|
|
|
- border-radius: 15px;
|
|
|
|
|
|
+ height: 80%;
|
|
|
|
+ border-radius: 5px;
|
|
padding: 0 15px;
|
|
padding: 0 15px;
|
|
flex-wrap: nowrap;
|
|
flex-wrap: nowrap;
|
|
- margin: 7px 0;
|
|
|
|
- line-height: $nav-height;
|
|
|
|
|
|
+ margin: auto;
|
|
|
|
+ line-height: 5vh;
|
|
|
|
+ width: 96%;
|
|
|
|
+ .nav-bar-input{
|
|
|
|
+ margin: auto 0;
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.segmented-control {
|
|
.segmented-control {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 8vh;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
justify-content: space-around;
|
|
background-color: #f0f0f0;
|
|
background-color: #f0f0f0;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+ .rnwdList{
|
|
|
|
+ min-height: 63vh;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ }
|
|
.segmented-control-item {
|
|
.segmented-control-item {
|
|
|
|
+ width: 50%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ line-height: 250%;
|
|
|
|
+ text-align: center;
|
|
padding: 10px;
|
|
padding: 10px;
|
|
- cursor: pointer;
|
|
|
|
|
|
+ font-size: 34rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.segmented-control-item.active {
|
|
.segmented-control-item.active {
|
|
color: #007aff;
|
|
color: #007aff;
|
|
}
|
|
}
|
|
|
|
+ .spacing {
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ }
|
|
|
|
+ .image-hei{
|
|
|
|
+ height:80px
|
|
|
|
+ }
|
|
|
|
+ .list-item {
|
|
|
|
+ border-bottom: 1px dotted #ccc;
|
|
|
|
+ height:35px
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|