|
|
@@ -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;
|
