优化办事指引页面

api/notice.js

@@ -47,9 +47,9 @@ export function getDynamicDetail(id){
 }
 
 // 获取办事指引列表
-export function getGuideList(){
+export function getGuideType(){
 	return request({
-		'url': '/guide/list',
+		'url': '/guide/category',
 		headers: {
 			isToken: true
 		},
@@ -57,6 +57,18 @@ export function getGuideList(){
 	})
 }
 
+// 获取办事指引列表
+export function getGuideList(data){
+	return request({
+		'url': '/guide/list',
+		headers: {
+			isToken: true
+		},
+		data: data,
+		'method': 'post'
+	})
+}
+
 // 根据id获取动态详情 
 export function getGuideDetail(id){
 	return request({

pages.json

@@ -133,7 +133,7 @@
 			"style": {
 				"navigationBarBackgroundColor": "#FFFFFF",
 				"navigationBarTitleText": "办事指引",
-				"enablePullDownRefresh": false,
+				"enablePullDownRefresh": true,
 				"app-plus": {
 					"titleNView": false
 				}

pages/collect/collect.vue

@@ -8,6 +8,8 @@
 					bg-color="#E5E5E5"
 					:input-style="searchInputStyle"
 					placeholder="搜索您想要的内容"
+					@search="onSearchConfirm"
+					@custom="onSearchConfirm"
 				></u-search>
 			</view>
 			<view class="tab-box">

pages/guide/guide/guide.vue

@@ -1,5 +1,41 @@
 <template>
 	<view class="container">
+		<view class="header-box">
+			<view class="search-box">
+				<u-search
+					v-model="searchForm.keyword"
+					:clearabled="true"
+					bg-color="#E5E5E5"
+					:input-style="searchInputStyle"
+					placeholder="搜索您想要的内容"
+					@search="onSearchConfirm"
+					@custom="onSearchConfirm"
+				></u-search>
+			</view>
+			<view class="tab-box">
+				<u-tabs 
+					name="label"
+					:list="searchType"
+					:is-scroll="true"
+					v-model="searchForm.codeCurrent"
+					@change="onSearchTypeChange"
+					font-size="24"
+					:bold="false"
+					inactive-color="#000000"
+					active-color="#000000"
+					:bar-style="{'background-color': '#2979ff'}"
+					height="50"
+				></u-tabs>
+			</view>
+		</view>
+		<u-empty
+			mode="data"
+			v-if="list.length === 0"
+			iconSize="120"
+			textSize="58"
+			text="暂无数据"
+		>
+		</u-empty>
 		<view class="list-box">
 			<view class="list-item-box" v-for="item in list" :key="item.id" @click="onGuideClick(item)">
 				<view class="main-box">
@@ -29,13 +65,9 @@
 </template>
 
 <script setup>
-	import {
-		ref
-	} from 'vue'
-	import {
-		onLoad
-	} from '@dcloudio/uni-app'
-	import { getGuideList } from '@/api/notice.js'
+	import { ref } from 'vue'
+	import { onLoad, onReachBottom, onPullDownRefresh  } from '@dcloudio/uni-app'
+	import { getGuideList as query, getGuideType } from '@/api/notice.js'
 	import configService from '@/utils/baseurl.js'
 	const FILE_URL = configService.FILE_URL;
 	const uToast = ref()
@@ -43,50 +75,122 @@
 	const searchInputStyle = {
 		backgroundColor: '#E5E5E5'
 	}
-	const searchForm = ref({
-		keyword: ''
-	})
-	const list = ref([{
-			"id": "1",
-			"title": "申请加入协会指南",
-			"desc": "想要加入我们的协会吗？请填写申请表并提交至办公室，审核后会通知您结果。",
-			"date": "2023-10-01"
-		},
+	const searchType = ref([
 		{
-			"id": "2",
-			"title": "报销流程说明",
-			"desc": "如需进行费用报销，请准备相关发票，填写报销申请表并交由财务部门审批。",
-			"date": "2023-09-15"
-		},
-		{
-			"id": "3",
-			"title": "会议室预约流程",
-			"desc": "欲预约会议室，请访问协会官网填写预约表格，确认后将收到预约确认邮件。",
-			"date": "2023-10-05"
-		},
-		{
-			"id": "4",
-			"title": "活动报名流程",
-			"desc": "参加活动需要提前报名，可以通过协会公众号扫码填写报名表，截止日期为活动前两天。",
-			"date": "2023-10-10"
-		},
-		{
-			"id": "5",
-			"title": "投诉建议提交指引",
-			"desc": "若有意见或建议，请下载投诉建议表，填写完毕后发送至协会邮箱，我们将及时处理并反馈您的意见。",
-			"date": "2023-10-12"
+			label: '全部',
+			value: null
 		}
 	])
+	const pageNum = ref(1)
+	const pageSize = ref(10)
+	const visualLoadMore = ref(false)
+	const loadMoreStatus = ref('more')
+	const searchForm = ref({
+		keyword: '',
+		code: null,
+		codeCurrent: 0,
+		pageNumber: 1,
+		pageSize: 10
+	})
+	const list = ref([
+	])
+	function onSearchConfirm() {
+		searchForm.value.pageNumber = 1
+		pageNum.value = 1
+		onSearch()
+	}
 	
-	function init() {
-		getGuideList().then(res=>{
-			if(res?.data){
+	function onSearchClear() {
+		searchForm.value.keyword = null
+		searchForm.value.pageNumber = 1
+		pageNum.value = 1
+		onSearch()
+	}
+	
+	function onSearch() {
+		loadMoreStatus.value = 'more'
+		query(searchForm.value).then(res => {
+			if (res && res.message === 'success') {
 				list.value = res.data
+				if (res.count === 0) {
+					visualLoadMore.value = false
+				}
 			}
 		})
 	}
+	
+	function onSearchTypeChange(val) {
+		searchForm.value.code = searchType.value[val].value
+		onSearchConfirm()
+	}
+	
+	onPullDownRefresh((e) => {
+		searchForm.value.pageNumber = 1
+		loadMoreStatus.value = 'more'
+		query(searchForm.value).then(res => {
+			if (res && res.message === 'success') {
+				list.value = res.data
+				if (res.count === 0) {
+					visualLoadMore.value = false
+				}
+				uni.showToast({
+					title: '刷新成功',
+					icon: 'success',
+					duration: 2000
+				})
+			}
+			uni.stopPullDownRefresh()
+		})
+	})
+	
+	onReachBottom(async () => {
+		if (loadMoreStatus.value === 'noMore') {
+			uni.showToast({
+				title: '没有更多啦＞﹏＜',
+				icon: 'none'
+			})
+			return
+		}
+		visualLoadMore.value = true
+		loadMoreStatus.value = 'loading'
+		searchForm.value.pageNumber++
+		query(searchForm.value).then(res => {
+			if (res && res.message === 'success') {
+				if (res.data) {
+					if (res.count >= list.value.length) {
+						if (list.value.length === res.count) {
+							loadMoreStatus.value = 'noMore'
+							visualLoadMore.value = true
+						} else {
+							list.value.push(...res.data)
+							loadMoreStatus.value = 'more'
+							visualLoadMore.value = false
+						}							
+					} else {
+						loadMoreStatus.value = 'noMore'
+						visualLoadMore.value = true
+					}
+				} else {
+					loadMoreStatus.value = 'noMore'
+					visualLoadMore.value = true
+				}
+			}
+		})
+	})
+	
 	onLoad(()=>{
-		init();
+		getGuideType().then(res => {
+			if (res && res.message === 'success') {
+				let data = res.data.map(item => {
+					return {
+						label: item.name,
+						value: item.code
+					}
+				})
+				searchType.value.push(...data)
+			}
+		})
+		onSearch()
 	})
 	
 	function onGuideClick(guide) {
@@ -102,13 +206,17 @@
 		width: 100vw;
 		background-color: #FFFFFF;
 		padding: 0 20rpx env(safe-area-inset-bottom, 0);
+		.header-box {
+			background-color: $uni-text-color-inverse;
+			@include topMagnet();
+		}
+		
 		.search-box {
 			margin-bottom: 20rpx;
-
 			::v-deep(.u-search) {
 				background-color: #e5e5e5;
 				border-radius: 50rpx;
-
+				
 				.u-action {
 					width: 18%;
 					background-color: $uni-color-primary;

pages/order/order.vue

@@ -8,6 +8,8 @@
 					bg-color="#E5E5E5"
 					:input-style="searchInputStyle"
 					placeholder="搜索您想要的内容"
+					@search="onSearchConfirm"
+					@custom="onSearchConfirm"
 				></u-search>
 			</view>
 			<view class="tab-box">