|
|
@@ -4,17 +4,30 @@
|
|
|
<u-input placeholder="请输入搜索的服务" prefixIcon="search" v-model="value" class="rounded-input" @confirm="handleSearch"
|
|
|
clearable @clear="handleClear"></u-input>
|
|
|
<!-- 历史记录 -->
|
|
|
- <view class="history-search">
|
|
|
+ <view class="history-search" v-if="historyList.length > 0">
|
|
|
<view class="history-search-title">历史搜索</view>
|
|
|
- <view>
|
|
|
+ <view @click="clearHistory">
|
|
|
<image src="@/static/img/delete-bin-6-fill@1x.png" mode="widthFix" class="delete-icon"></image>
|
|
|
清空
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <!-- 历史搜索列表 -->
|
|
|
+ <view class="history-list" v-if="historyList.length > 0">
|
|
|
+ <view class="history-item" v-for="(item, index) in historyList" :key="index" @click="searchByHistory(item)">
|
|
|
+ {{ item.businessTierName || item }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 无历史记录提示 -->
|
|
|
+ <view class="no-history" v-if="historyList.length === 0">
|
|
|
+ <text>暂无搜索历史记录</text>
|
|
|
+ </view>
|
|
|
|
|
|
<!-- tab -->
|
|
|
<view>
|
|
|
- <up-tabs :list="list2"></up-tabs>
|
|
|
+ <up-tabs
|
|
|
+ :list="list2"
|
|
|
+ @change="handleTabChange">
|
|
|
+ </up-tabs>
|
|
|
</view>
|
|
|
<!-- 瀑布流展示区域 -->
|
|
|
<view class="home-ranking">
|
|
|
@@ -32,7 +45,7 @@
|
|
|
<script setup>
|
|
|
import { ref, reactive, onMounted, watch } from 'vue'
|
|
|
import { onShow, onReachBottom } from '@dcloudio/uni-app'
|
|
|
-import { volTierName, volBusinessTypeList } from '@/api/volunteerDetailsApi/details.js'
|
|
|
+import { volTierName, volBusinessTypeList, searchHistoryBusinessTireNameHistory } from '@/api/volunteerDetailsApi/details.js'
|
|
|
import RankingList from '@/pages/common/rankingList/index.vue'
|
|
|
import ServIces from '@/components/Services/services.vue'
|
|
|
import store from '@/store'
|
|
|
@@ -44,7 +57,9 @@ const rightList = ref([])
|
|
|
const leftList = ref([])
|
|
|
const ValueZoneSwiper = ref([''])
|
|
|
|
|
|
-const list2 = reactive([]);
|
|
|
+const list2 = reactive([]);
|
|
|
+// 历史搜索列表
|
|
|
+const historyList = ref([]);
|
|
|
|
|
|
// 用户类型
|
|
|
const userType = uni.getStorageSync('userType') || 1; //读取本地存储
|
|
|
@@ -69,6 +84,67 @@ const loadmoreInfo = ref({
|
|
|
nomoreText: '已经到底啦～',
|
|
|
})
|
|
|
|
|
|
+/**
|
|
|
+ * 获取历史搜索记录
|
|
|
+ */
|
|
|
+const getHistoryList = async () => {
|
|
|
+ try {
|
|
|
+ console.log('开始获取历史搜索记录')
|
|
|
+ const res = await searchHistoryBusinessTireNameHistory({})
|
|
|
+ console.log('历史搜索API响应:', res)
|
|
|
+ if (res && res.data) {
|
|
|
+ // 检查返回的数据类型并适当处理
|
|
|
+ if (Array.isArray(res.data)) {
|
|
|
+ // 如果是简单字符串数组，转换为对象数组
|
|
|
+ if (typeof res.data[0] === 'string') {
|
|
|
+ historyList.value = res.data.map(item => ({ businessTierName: item }))
|
|
|
+ } else {
|
|
|
+ historyList.value = res.data
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ historyList.value = []
|
|
|
+ }
|
|
|
+ console.log('设置历史记录列表:', historyList.value)
|
|
|
+ } else {
|
|
|
+ console.log('API返回数据为空或没有data字段')
|
|
|
+ historyList.value = []
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取历史搜索记录失败:', error)
|
|
|
+ historyList.value = []
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 清空历史搜索记录
|
|
|
+ */
|
|
|
+const clearHistory = async () => {
|
|
|
+ try {
|
|
|
+ // 这里假设接口支持清空历史记录，如果没有专门的清空接口，可能需要另外实现
|
|
|
+ await searchHistoryBusinessTireNameHistory({ clear: true })
|
|
|
+ historyList.value = []
|
|
|
+ uni.showToast({
|
|
|
+ title: '历史记录已清空',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ } catch (error) {
|
|
|
+ console.error('清空历史记录失败:', error)
|
|
|
+ uni.showToast({
|
|
|
+ title: '清空历史记录失败',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 点击历史记录进行搜索
|
|
|
+ */
|
|
|
+const searchByHistory = (item) => {
|
|
|
+ // 处理不同的数据格式
|
|
|
+ value.value = typeof item === 'string' ? item : item.businessTierName
|
|
|
+ handleSearch()
|
|
|
+}
|
|
|
+
|
|
|
/**
|
|
|
* 处理搜索确认事件
|
|
|
*/
|
|
|
@@ -95,6 +171,56 @@ async function handleLoadmore(e) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+/**
|
|
|
+ * 处理Tab切换事件
|
|
|
+ * @param {Object} e - 事件对象，包含选中tab的索引
|
|
|
+ */
|
|
|
+const handleTabChange = (e) => {
|
|
|
+ // 安全地获取索引
|
|
|
+ const index = typeof e === 'object' && e !== null ? (e.index !== undefined ? e.index : 0) : (typeof e === 'number' ? e : 0);
|
|
|
+
|
|
|
+ console.log('切换到Tab:', e, '索引:', index)
|
|
|
+
|
|
|
+ // 重置页码
|
|
|
+ pages.value.current = 1
|
|
|
+
|
|
|
+ // 设置businessManagementId
|
|
|
+ if (index === 0) {
|
|
|
+ // 如果是"全部"选项，设置为0
|
|
|
+ pages.value.businessManagementId = 0
|
|
|
+ } else if (index > 0 && index < list2.length) {
|
|
|
+ const selectedTab = list2[index]
|
|
|
+ console.log('选中的Tab数据:', selectedTab)
|
|
|
+
|
|
|
+ // 从businessManagementId字段获取，其次id字段获取
|
|
|
+ if (selectedTab && selectedTab.businessManagementId !== undefined) {
|
|
|
+ pages.value.businessManagementId = selectedTab.businessManagementId
|
|
|
+ } else if (selectedTab && selectedTab.id !== undefined) {
|
|
|
+ pages.value.businessManagementId = selectedTab.id
|
|
|
+ } else {
|
|
|
+ pages.value.businessManagementId = 0
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果有children中的id，设置到请求参数中
|
|
|
+ if (selectedTab && selectedTab.children && Array.isArray(selectedTab.children) && selectedTab.children.length > 0) {
|
|
|
+ // 查找第一个有id的child
|
|
|
+ const firstChildWithId = selectedTab.children.find(child => child && child.id !== undefined);
|
|
|
+ if (firstChildWithId && firstChildWithId.id !== undefined) {
|
|
|
+ console.log('使用children中的ID:', firstChildWithId.id);
|
|
|
+ pages.value.businessManagementId = firstChildWithId.id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 默认为0
|
|
|
+ pages.value.businessManagementId = 0
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('设置businessManagementId:', pages.value.businessManagementId)
|
|
|
+
|
|
|
+ // 执行搜索
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
/**
|
|
|
* 获取列表数据
|
|
|
* 支持分页和关键词搜索
|
|
|
@@ -112,7 +238,7 @@ const getList = async () => {
|
|
|
pageNum: pages.value.current,
|
|
|
pageSize: pages.value.pageSize,
|
|
|
serviceCategory: pages.value.serviceCategory || '',
|
|
|
- businessManagementId: 0,
|
|
|
+ businessManagementId: pages.value.businessManagementId,
|
|
|
// API接口使用的模糊搜索参数
|
|
|
businessTierName: value.value, // 名称搜索参数
|
|
|
|
|
|
@@ -129,7 +255,7 @@ const getList = async () => {
|
|
|
|
|
|
const paramstyle = {
|
|
|
businessTierName: value.value, // 名称搜索参数
|
|
|
- businessManagementId: 0,
|
|
|
+ businessManagementId: pages.value.businessManagementId,
|
|
|
}
|
|
|
console.log('businessManagementId 类型:', typeof params.businessManagementId);
|
|
|
console.log('businessManagementId 值:', params.businessManagementId);
|
|
|
@@ -141,25 +267,73 @@ const getList = async () => {
|
|
|
|
|
|
// 调用API获取数据
|
|
|
const res = await volTierName(params)
|
|
|
- const res1 = await volBusinessTypeList(paramstyle)
|
|
|
- if (res1 && res1.data) {
|
|
|
- // 清空原有数据
|
|
|
- list2.splice(0, list2.length)
|
|
|
+
|
|
|
+ // 如果用户输入了搜索关键词，始终更新标签列表以显示相关标签
|
|
|
+ // 如果没有关键词，且标签列表为空，则获取所有标签
|
|
|
+ if (value.value || list2.length === 0) {
|
|
|
+ const res1 = await volBusinessTypeList(paramstyle)
|
|
|
|
|
|
- // 添加全部选项
|
|
|
- list2.push({
|
|
|
- name: '全部',
|
|
|
- value: '0'
|
|
|
- })
|
|
|
+ // 搜索成功后更新历史记录
|
|
|
+ if (value.value) {
|
|
|
+ getHistoryList() // 刷新历史记录
|
|
|
+ }
|
|
|
|
|
|
- // 转换API返回的数据为up-tabs需要的格式
|
|
|
- res1.data.forEach(item => {
|
|
|
+ if (res1 && res1.data) {
|
|
|
+ // 打印原始数据以检查id字段
|
|
|
+ console.log('原始API返回的Tabs数据:', JSON.stringify(res1.data))
|
|
|
+
|
|
|
+ // 记住当前选中的标签名称，以便在重新生成列表后恢复选择
|
|
|
+ let selectedTabName = '';
|
|
|
+ if (list2.length > 0 && pages.value && pages.value.businessManagementId !== undefined) {
|
|
|
+ const currentIndex = Math.min(Math.max(0, pages.value.businessManagementId === 0 ? 0 : 1), list2.length - 1);
|
|
|
+ selectedTabName = list2[currentIndex]?.name || '';
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清空原有数据
|
|
|
+ list2.splice(0, list2.length)
|
|
|
+
|
|
|
+ // 添加全部选项
|
|
|
list2.push({
|
|
|
- name: item.businessTierName,
|
|
|
+ name: '全部',
|
|
|
+ value: '0',
|
|
|
+ businessManagementId: 0,
|
|
|
+ id: 0
|
|
|
})
|
|
|
- })
|
|
|
-
|
|
|
- console.log('转换后的Tabs数据:', list2)
|
|
|
+
|
|
|
+ // 转换API返回的数据为up-tabs需要的格式
|
|
|
+ res1.data.forEach(item => {
|
|
|
+ // 检查是否有children数组
|
|
|
+ let childrenIds = [];
|
|
|
+ if (item.children && Array.isArray(item.children)) {
|
|
|
+ // 收集所有children的ID
|
|
|
+ childrenIds = item.children.map(child => child.id).filter(id => id !== undefined);
|
|
|
+ console.log('项目children IDs:', childrenIds);
|
|
|
+ }
|
|
|
+
|
|
|
+ list2.push({
|
|
|
+ name: item.businessTierName,
|
|
|
+ // 尝试获取正确的ID字段 - 优先使用businessManagementId，其次使用id
|
|
|
+ businessManagementId: item.businessManagementId || item.id || 0,
|
|
|
+ id: item.id || item.businessManagementId || 0,
|
|
|
+ // 保存children的id数组
|
|
|
+ childrenIds: childrenIds,
|
|
|
+ // 保存完整的children数据
|
|
|
+ children: item.children || []
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ // 尝试恢复选中的标签
|
|
|
+ if (selectedTabName) {
|
|
|
+ // 查找具有相同名称的标签
|
|
|
+ const matchingIndex = list2.findIndex(item => item.name === selectedTabName);
|
|
|
+ if (matchingIndex !== -1 && pages.value) {
|
|
|
+ // 设置businessManagementId为找到的匹配项的ID
|
|
|
+ pages.value.businessManagementId = list2[matchingIndex].businessManagementId || list2[matchingIndex].id || 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('转换后的Tabs数据:', JSON.stringify(list2))
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
if (!res || !res.rows) {
|
|
|
@@ -219,6 +393,8 @@ onMounted(() => {
|
|
|
|
|
|
// 加载数据
|
|
|
getList()
|
|
|
+ // 获取历史搜索记录
|
|
|
+ getHistoryList()
|
|
|
})
|
|
|
|
|
|
/**
|
|
|
@@ -266,32 +442,48 @@ const handleClear = () => {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- margin-top: 18rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
margin-left: 44rpx;
|
|
|
margin-right: 44rpx;
|
|
|
+ padding-bottom: 6rpx;
|
|
|
+ border-bottom: 2rpx solid #f0f0f0;
|
|
|
|
|
|
.history-search-title {
|
|
|
- width: 120rpx;
|
|
|
- height: 36rpx;
|
|
|
+ width: 140rpx;
|
|
|
+ height: 40rpx;
|
|
|
font-family: PingFang SC;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 36rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 40rpx;
|
|
|
letter-spacing: normal;
|
|
|
color: #313131;
|
|
|
}
|
|
|
|
|
|
.delete-icon {
|
|
|
- /* 自动布局子元素 */
|
|
|
- width: 24rpx;
|
|
|
- height: 24rpx;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: normal;
|
|
|
- line-height: 48rpx;
|
|
|
- text-align: right;
|
|
|
- letter-spacing: normal;
|
|
|
- color: #7B7B7B;
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ margin-right: 6rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 历史搜索列表样式 */
|
|
|
+ .history-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: 20rpx 44rpx;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ border-radius: 16rpx;
|
|
|
+
|
|
|
+ .history-item {
|
|
|
+ padding: 14rpx 28rpx;
|
|
|
+ margin: 12rpx;
|
|
|
+ background-color: #EAEAEA;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #000;
|
|
|
+ font-weight: 500;
|
|
|
+ box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
}
|
|
|
|
jiayubo