handleAffairs.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <template>
  2. <view>
  3. <!-- 搜索栏 -->
  4. <view class="input-view">
  5. <uni-icons type="search" size="20" class="search-icon" @tap="confirm"></uni-icons>
  6. <input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm" v-model="title"/>
  7. </view>
  8. <!-- 网格配置列表滑动 -->
  9. <view>
  10. <uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
  11. <swiper class="swiper-box">
  12. <swiper-item v-for="(item ,index) in gridtType" :key="index">
  13. <!-- <ul class="mainNav" >
  14. <li v-for="(dataitem,dataindex) in item.dataList" :key="dataitem.id">
  15. <image class="uni-header-image" :src="'http://127.0.0.1:8080'+dataitem.fileUrl"
  16. @click="querygrid(dataitem)"></image>
  17. <text>{{dataitem.name}}</text>
  18. </li>
  19. </ul> -->
  20. <uni-grid :column="5" :highlight="true" :showBorder="false">
  21. <uni-grid-item v-for="(dataitem,dataindex) in item" :key="dataitem.id">
  22. <view>
  23. <image class="uni-header-image" :src="'http://127.0.0.1:8080'+dataitem.fileUrl"
  24. @click="querygrid(dataitem)"></image>
  25. <uni-title type="h5" :title="dataitem.name" align="center"></uni-title>
  26. </view>
  27. </uni-grid-item>
  28. </uni-grid>
  29. </swiper-item>
  30. </swiper>
  31. </uni-swiper-dot>
  32. </view>
  33. <view>
  34. <uni-row class="demo-uni-row" :width="nvueWidth">
  35. <uni-col :span="12">
  36. <button align="center" @click="topic">主题导航</button>
  37. </uni-col>
  38. <uni-col :span="12">
  39. <button align="center" @click="dept">部门导航</button>
  40. </uni-col>
  41. </uni-row>
  42. </view>
  43. <!-- ------------------------------------------------------------------------------------------------------------------------------------------ -->
  44. <view>
  45. <!-- 使用分段器来切换推荐和收藏列表 -->
  46. <view class="segmented-control">
  47. <view class="segmented-control-item" :class="{ active: activeTab === 'recommend' }" @click="changeTab('recommend')">推荐</view>
  48. <view class="segmented-control-item" :class="{ active: activeTab === 'favorite' }" @click="changeTab('favorite')">收藏</view>
  49. </view>
  50. <!-- 根据选中的标签显示对应的列表 -->
  51. <view v-if="activeTab === 'recommend'">
  52. <view class="rnwdList">
  53. <ul>
  54. <!-- <li v-for="(item,index) in recommendList" :key="index">
  55. <p @click="getmatter(item)">{{ item.title }}</p>
  56. </li> -->
  57. <uni-list>
  58. <uni-list-item :title="item.title" v-for="(item,index) in recommendList" @click="getmatter(item)" clickable="true" ></uni-list-item>
  59. </uni-list>
  60. </ul>
  61. </view>
  62. </view>
  63. <view v-if="activeTab === 'favorite'">
  64. <view class="rnwdList">
  65. <ul>
  66. <!-- <li v-for="(item,index) in favoriteList" :key="index">
  67. <p @click="getmatter(item)">{{ item.title }}</p>
  68. </li> -->
  69. <uni-list>
  70. <uni-list-item :title="item.title" v-for="(item,index) in favoriteList" @click="getmatter(item)" clickable="true" ></uni-list-item>
  71. </uni-list>
  72. </ul>
  73. </view>
  74. </view>
  75. </view>
  76. </view>
  77. </template>
  78. <script>
  79. import {
  80. listGridType
  81. } from '@/api/handleAffairs/gridType.js';
  82. import { listDept,collectlist } from '@/api/handleAffairs/matter.js';
  83. export default {
  84. data() {
  85. return {
  86. title:"",
  87. gridtType: [], //是一个list<map>数据 [[1,2,3]]
  88. activeTab: 'recommend', // 默认选中推荐列表
  89. recommendList: [], // 推荐列表数据
  90. favoriteList: [], // 收藏列表数据
  91. userList: [], // 收藏列表数据
  92. };
  93. },
  94. created() {
  95. this.getListListGrid();
  96. this.getListDept();
  97. this.getListscolle();
  98. },
  99. methods: {
  100. confirm(){
  101. if (!this.title.trim()) {//去除前后空格,在判断是否为空
  102. return
  103. }
  104. console.log(this.title)
  105. uni.setStorageSync('data', {title:this.title,examine:1})
  106. uni.navigateTo({
  107. url: '/pages/matterAll/matterAll',
  108. });
  109. },
  110. //主题导航跳转
  111. topic(){
  112. uni.navigateTo({
  113. url: '/pages/topic/topic',
  114. });
  115. },
  116. querygrid(item) {
  117. console.log(item)
  118. uni.setStorageSync('id', item.id)
  119. uni.navigateTo({
  120. url: '/pages/gridQuery/gridQuery?titleText='+item.name
  121. });
  122. },
  123. getListListGrid() {
  124. const _that = this
  125. let query = {
  126. yesOrNoShow: "0"
  127. };
  128. listGridType(query).then(res => {
  129. let gridtTypeLits = res.rows
  130. let dataList = []
  131. for (var i = 0; i < gridtTypeLits.length; i++) {
  132. dataList.push(gridtTypeLits[i])
  133. if (((i + 1) % 5 == 0) || i == gridtTypeLits.length - 1) {
  134. _that.gridtType.push(dataList)
  135. dataList = []
  136. }
  137. }
  138. });
  139. },
  140. getListDept() {
  141. const _that = this;
  142. let query = { yesOrNoShow: "0" };
  143. // 获取推荐列表数据
  144. listDept(query).then(res => {
  145. _that.recommendList = res.rows;
  146. });
  147. },
  148. getListscolle(){
  149. const userId = getApp().globalData.userId;
  150. collectlist(userId).then(res =>{
  151. this.favoriteList = res.rows
  152. })
  153. },
  154. getmatter(item) {
  155. uni.setStorageSync('id', item.id);
  156. uni.navigateTo({
  157. url: '/pages/gridQuery/mattercontent',
  158. });
  159. },
  160. addNewItem(item) {
  161. uni.navigateTo({
  162. url: '/pages/mattersAdd/mattersAdd',
  163. });
  164. },
  165. changeTab(tab) {
  166. this.activeTab = tab;
  167. this.getListDept()
  168. this.getListscolle()
  169. },
  170. dept(){
  171. uni.navigateTo({
  172. url: '/pages/topic/dept',
  173. });
  174. }
  175. }
  176. }
  177. </script>
  178. <style scoped>
  179. .uni-header-image {
  180. width: 30px;
  181. height: 30px;
  182. display: block;
  183. margin: 0 auto;
  184. }
  185. /* 主导航 */
  186. .mainNav {
  187. width: 100%;
  188. background: #fff;
  189. }
  190. .input-view {
  191. /* #ifndef APP-PLUS-NVUE */
  192. display: flex;
  193. /* #endif */
  194. flex-direction: row;
  195. // width: 500rpx;
  196. flex: 1;
  197. background-color: #f8f8f8;
  198. height: $nav-height;
  199. border-radius: 15px;
  200. padding: 0 15px;
  201. flex-wrap: nowrap;
  202. margin: 7px 0;
  203. line-height: $nav-height;
  204. }
  205. .segmented-control {
  206. display: flex;
  207. justify-content: space-around;
  208. background-color: #f0f0f0;
  209. }
  210. .segmented-control-item {
  211. padding: 10px;
  212. cursor: pointer;
  213. }
  214. .segmented-control-item.active {
  215. color: #007aff;
  216. }
  217. </style>