353 lines
9.4 KiB
Vue
353 lines
9.4 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 搜索栏 -->
|
|
<view class="search-bar">
|
|
<u-icon
|
|
bold
|
|
color="#000"
|
|
size="40"
|
|
name="arrow-left"
|
|
class="back-icon"
|
|
@click="back"
|
|
></u-icon>
|
|
<view class="search-input-container">
|
|
<image
|
|
src="https://static.hshuishang.com/property-img-file/com_communitySearchIcon.png"
|
|
class="search-icon"
|
|
></image>
|
|
<input
|
|
type="text"
|
|
class="search-input"
|
|
placeholder="请输入内容"
|
|
v-model="searchText"
|
|
@confirm="handleSearch"
|
|
/>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 搜索指定内容 -->
|
|
<!-- <view
|
|
class="specifiedContent"
|
|
v-if="!isLoading && specifiedContent.length > 0 && !hasResult"
|
|
>
|
|
<view class="specifiedContent-title">搜索指定内容</view>
|
|
<view class="specifiedContent-list">
|
|
<view
|
|
class="specifiedContent-item"
|
|
v-for="(item, index) in specifiedContent"
|
|
:key="index"
|
|
@click="handleHistoryClick(item.name)"
|
|
>
|
|
<image class="specifiedContent-img" :src="item.icon"></image>
|
|
<view>{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 搜索历史 -->
|
|
<view
|
|
class="search-history"
|
|
v-if="!isLoading && searchHistory.length > 0 && !hasResult"
|
|
>
|
|
<view class="history-header">
|
|
<view class="history-title">搜索历史</view>
|
|
<u-icon
|
|
name="trash"
|
|
color="#999999"
|
|
size="28"
|
|
class="history-trash"
|
|
@click="deleteHistory"
|
|
></u-icon>
|
|
</view>
|
|
<view class="history-list">
|
|
<view
|
|
class="history-item"
|
|
v-for="(item, index) in searchHistory"
|
|
:key="index"
|
|
@click="handleHistoryClick(item)"
|
|
>
|
|
{{ item }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 搜索结果 -->
|
|
<view class="search-result" v-if="!isLoading && hasResult">
|
|
<view class="tabs">
|
|
<view
|
|
v-for="(item, index) in categoryList"
|
|
:key="index"
|
|
:class="['tabItem', selectedTab === index ? 'active2' : '']"
|
|
@click="selectTab(index, item)"
|
|
>
|
|
{{ item.category_name }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 全部 -->
|
|
<searchAll v-if="selectedTab === 0" class="searchAll" />
|
|
|
|
<!-- 店铺 -->
|
|
<searchShop v-if="selectedTab === 1" class="searchShop" />
|
|
|
|
<!-- 服务 -->
|
|
<view class="hot-services" v-if="selectedTab === 2">
|
|
<view class="service-list">
|
|
<view
|
|
class="service-card"
|
|
v-for="(service, index) in hotServiceList"
|
|
:key="index"
|
|
@click="navigateToReservation(service)"
|
|
>
|
|
<image
|
|
src="https://static.hshuishang.com/property-img-file/ceshi.png"
|
|
class="service-image"
|
|
/>
|
|
<view class="service-info">
|
|
<view class="service-info-left">
|
|
<view class="service-info-left-top">
|
|
<text class="service-name">{{ service.name }}</text>
|
|
<image
|
|
src="https://static.hshuishang.com/property-img-file/index_bottom2.png"
|
|
class="service-image2"
|
|
></image>
|
|
<text class="service-tag">{{ service.tag }}</text>
|
|
</view>
|
|
<br />
|
|
<text class="service-desc">{{ service.description }}</text>
|
|
</view>
|
|
<view class="service-info-right">
|
|
<view class="service-footer">
|
|
<!-- <view
|
|
class="service-button"
|
|
@click="navigateToReservation(service)"
|
|
>
|
|
<text class="button-text" @click="goSubscribe">去预约</text>
|
|
</view> -->
|
|
<text class="service-count">{{ service.count }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<view class="loading-container" v-if="isLoading">
|
|
<view class="loading-spinner"></view>
|
|
<text class="loading-text">加载中...</text>
|
|
</view>
|
|
|
|
<!-- 回到顶部 -->
|
|
<u-back-top :scroll-top="scrollTop"></u-back-top>
|
|
<!-- <div
|
|
class="toUp"
|
|
v-show="isShowToTop"
|
|
@click="scrollToTop"
|
|
>
|
|
<u-badge
|
|
numberType="limit"
|
|
type="error"
|
|
max="99"
|
|
:value="value"
|
|
></u-badge>
|
|
<image
|
|
src="https://static.hshuishang.com/property-img-file/toUp.png"
|
|
></image>
|
|
</div> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { request, NavgateTo } from "../../../utils/index";
|
|
import SearchAll from "../searchAll/index.vue";
|
|
import SearchShop from "../searchShop/index.vue";
|
|
|
|
export default {
|
|
components: {
|
|
SearchAll,
|
|
SearchShop,
|
|
},
|
|
data() {
|
|
return {
|
|
isShowToTop: false,
|
|
searchText: "",
|
|
isLoading: false,
|
|
specifiedContent: [
|
|
{
|
|
name: "服务",
|
|
icon: "https://static.hshuishang.com/property-img-file/com_communitySearchIcon.png",
|
|
},
|
|
{
|
|
name: "阿石",
|
|
icon: "https://static.hshuishang.com/property-img-file/com_communitySearchIcon.png",
|
|
},
|
|
{
|
|
name: "阿榴",
|
|
icon: "https://static.hshuishang.com/property-img-file/com_communitySearchIcon.png",
|
|
},
|
|
],
|
|
searchHistory: [],
|
|
hasResult: false,
|
|
hotServiceList: [
|
|
{
|
|
id: 1,
|
|
name: "空调清洗",
|
|
image: "",
|
|
badge: "推荐",
|
|
tag: "平台保障",
|
|
description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
|
|
count: "已预约100+",
|
|
},
|
|
{
|
|
id: 1,
|
|
name: "空调清洗",
|
|
image: "",
|
|
badge: "推荐",
|
|
tag: "平台保障",
|
|
description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
|
|
count: "已预约100+",
|
|
},
|
|
{
|
|
id: 1,
|
|
name: "空调清洗",
|
|
image: "",
|
|
badge: "推荐",
|
|
tag: "平台保障",
|
|
description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
|
|
count: "已预约100+",
|
|
},
|
|
{
|
|
id: 1,
|
|
name: "空调清洗",
|
|
image: "",
|
|
badge: "推荐",
|
|
tag: "平台保障",
|
|
description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
|
|
count: "已预约100+",
|
|
},
|
|
{
|
|
id: 1,
|
|
name: "空调清洗",
|
|
image: "",
|
|
badge: "推荐",
|
|
tag: "平台保障",
|
|
description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
|
|
count: "已预约100+",
|
|
},
|
|
],
|
|
|
|
categoryList: [
|
|
{ category_name: "全部" },
|
|
{ category_name: "店铺" },
|
|
{ category_name: "服务" },
|
|
],
|
|
selectedTab: 0,
|
|
scrollTop: 0
|
|
};
|
|
},
|
|
|
|
onPageScroll(e) {
|
|
this.scrollTop = e.scrollTop;
|
|
},
|
|
|
|
created() {
|
|
const history = uni.getStorageSync("searchHistory") || [];
|
|
this.searchHistory = history;
|
|
window.addEventListener("scroll", this.handleScroll);
|
|
},
|
|
|
|
beforeUnmount() {
|
|
window.removeEventListener("scroll", this.handleScroll);
|
|
},
|
|
methods: {
|
|
handleScroll(e) {
|
|
this.isShowToTop = e.detail.scrollTop > 0;
|
|
},
|
|
scrollToTop() {
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 300,
|
|
});
|
|
},
|
|
back() {
|
|
NavgateTo("1");
|
|
},
|
|
selectTab(index, item) {
|
|
this.selectedTab = index;
|
|
},
|
|
// 处理搜索
|
|
handleSearch() {
|
|
const keyword = this.searchText.trim();
|
|
if (!keyword) return;
|
|
|
|
// 添加到搜索历史
|
|
if (!this.searchHistory.includes(keyword)) {
|
|
this.searchHistory.unshift(keyword);
|
|
uni.setStorageSync("searchHistory", this.searchHistory);
|
|
}
|
|
|
|
// 显示加载状态
|
|
this.isLoading = true;
|
|
this.hasResult = false;
|
|
|
|
// 模拟搜索请求
|
|
setTimeout(() => {
|
|
this.isLoading = false;
|
|
this.hasResult = true; // 假设搜索到结果
|
|
}, 1500);
|
|
},
|
|
|
|
// 点击历史记录搜索
|
|
handleHistoryClick(keyword) {
|
|
this.searchText = keyword;
|
|
this.handleSearch();
|
|
},
|
|
|
|
// 取消搜索
|
|
handleCancel() {
|
|
uni.navigateBack();
|
|
},
|
|
|
|
// 删除搜索历史
|
|
deleteHistory() {
|
|
uni.showModal({
|
|
// title: "提示",
|
|
content: "删除所有搜素历史？",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
console.log("用户点击确定");
|
|
uni.removeStorageSync("searchHistory");
|
|
this.getSearchHistory();
|
|
} else if (res.cancel) {
|
|
console.log("用户点击取消");
|
|
}
|
|
},
|
|
});
|
|
},
|
|
// 获取搜索历史数据
|
|
getSearchHistory() {
|
|
this.searchHistory = uni.getStorageSync("searchHistory") || [];
|
|
},
|
|
|
|
// 去预约
|
|
goSubscribe() {
|
|
NavgateTo("/packages/homeServer/searchInfo/index");
|
|
},
|
|
|
|
navigateToReservation(item) {
|
|
uni.navigateTo({
|
|
url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
|
|
JSON.stringify(item)
|
|
)}`,
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import url("./index.css");
|
|
</style>
|