feat : 到家服务 搜索部分页面
This commit is contained in:
赵毅
parent
142e1ad8fe
commit
add52699ad
@ -2,7 +2,6 @@
|
||||
margin-top: 87rpx;
|
||||
padding: 0 15rpx;
|
||||
background-color: whte;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
@ -265,6 +264,7 @@
|
||||
/* 热门服务样式 */
|
||||
.hot-services {
|
||||
padding: 20rpx;
|
||||
border: 1rpx solid #e8e8e8;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
@ -346,7 +346,6 @@
|
||||
|
||||
.service-tag {
|
||||
display: inline-block;
|
||||
/* background-color: #f5f5f5; */
|
||||
color: #e1ca9b;
|
||||
font-size: 22rpx;
|
||||
padding: 2rpx 16rpx;
|
||||
@ -361,12 +360,6 @@
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.service-footer {
|
||||
/* display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center; */
|
||||
}
|
||||
|
||||
.service-count {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
@ -380,3 +373,18 @@
|
||||
padding: 12rpx 36rpx;
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
|
||||
/* 回到顶部 */
|
||||
.toUp {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
position: fixed;
|
||||
right: 33rpx;
|
||||
bottom: 250rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.toUp image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -9,7 +9,8 @@
|
||||
<view class="location-search">
|
||||
<view class="location" @click="chooseLocation">
|
||||
<text class="location-text">{{ currentLocation }}</text>
|
||||
<image src="" class="arrow-down"></image>
|
||||
<!-- <image src="" class="arrow-down"></image> -->
|
||||
<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
|
||||
</view>
|
||||
<view class="search-box" @click="searchService">
|
||||
<image
|
||||
@ -117,6 +118,19 @@
|
||||
</view>
|
||||
|
||||
<nav-footer :current="3" />
|
||||
|
||||
<!-- 回到顶部 -->
|
||||
<div class="toUp" @click="scrollToTop">
|
||||
<u-badge
|
||||
numberType="limit"
|
||||
type="error"
|
||||
max="99"
|
||||
:value="value"
|
||||
></u-badge>
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"
|
||||
></image>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -186,8 +200,7 @@ export default {
|
||||
{
|
||||
id: 1,
|
||||
name: "空调清洗",
|
||||
image:
|
||||
"",
|
||||
image: "",
|
||||
badge: "推荐",
|
||||
tag: "平台保障",
|
||||
description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
|
||||
@ -234,6 +247,14 @@ export default {
|
||||
// 实际项目中应该调用定位API获取真实位置
|
||||
console.log("获取当前位置信息");
|
||||
},
|
||||
|
||||
// 回到顶部
|
||||
scrollToTop() {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
duration: 300,
|
||||
});
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
this.getCurrentLocation();
|
||||
|
||||
@ -0,0 +1,276 @@
|
||||
.container {
|
||||
margin-top: 81rpx;
|
||||
padding: 0 15rpx;
|
||||
background-color: whte;
|
||||
}
|
||||
|
||||
/* 搜索栏样式 */
|
||||
.search-bar {
|
||||
width: 520rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 16rpx 20rpx;
|
||||
background-color: #fff;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.search-input-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #f5f7fb;
|
||||
border-radius: 60rpx;
|
||||
padding: 14rpx 24rpx;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
font-weight: 300;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
/* 加载状态样式 */
|
||||
.loading-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border: 8rpx solid #949494;
|
||||
border-radius: 50%;
|
||||
border-top-color: #333;
|
||||
animation: spin 1s ease-in-out infinite;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
font-size: 32rpx;
|
||||
color: #949494;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索指定内容 */
|
||||
.specifiedContent {
|
||||
min-height: 30rpx;
|
||||
margin: 20rpx 10rpx 40rpx 10rpx;
|
||||
}
|
||||
|
||||
.specifiedContent-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.specifiedContent-list {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.specifiedContent-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 23rpx;
|
||||
font-weight: 500;
|
||||
background-color: #f5f7fb;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.specifiedContent-img {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.search-history {
|
||||
min-height: 30rpx;
|
||||
margin: 20rpx 10rpx;
|
||||
}
|
||||
|
||||
.history-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* margin-bottom: 10rpx; */
|
||||
}
|
||||
|
||||
/* 搜索历史 */
|
||||
.history-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.history-list {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.history-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 23rpx;
|
||||
font-weight: 500;
|
||||
background-color: #f5f7fb;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
/* 有数据 */
|
||||
.hot-services {
|
||||
margin: 20rpx;
|
||||
border: 1rpx solid #e8e8e8;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section-arrow {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.service-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.service-info {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.service-info-left {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.service-info-right {
|
||||
width: 35%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.service-footer {
|
||||
align-items: center;
|
||||
gap: 15rpx;
|
||||
}
|
||||
|
||||
.service-image {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
}
|
||||
|
||||
.service-badge {
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 20rpx;
|
||||
background-color: #FF512A;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.service-tag {
|
||||
display: inline-block;
|
||||
color: #e1ca9b;
|
||||
font-size: 22rpx;
|
||||
padding: 2rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.service-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-bottom: 20rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.service-count {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-left: 15rpx;
|
||||
}
|
||||
|
||||
.service-button {
|
||||
background-color: #FF512A;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
padding: 12rpx 36rpx;
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
|
||||
/* 回到顶部 */
|
||||
.toUp {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
position: fixed;
|
||||
right: 33rpx;
|
||||
bottom: 250rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.toUp image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -1,44 +1,249 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 搜索栏 -->
|
||||
<view class="search-bar">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||
class="search-icon"
|
||||
@click="upView"
|
||||
></image>
|
||||
<view class="search-input-container">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.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="hot-services">
|
||||
<view class="service-list">
|
||||
<view
|
||||
class="service-card"
|
||||
v-for="(service, index) in hotServiceList"
|
||||
:key="index"
|
||||
>
|
||||
<image :src="service.image" class="service-image"></image>
|
||||
<view class="service-info">
|
||||
<view class="service-info-left">
|
||||
<text class="service-name">{{ service.name }}</text>
|
||||
<text class="service-tag">{{ service.tag }}</text>
|
||||
<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>
|
||||
|
||||
<!-- 回到顶部 -->
|
||||
<div class="toUp" v-show="searchHistory.length > 0 && isShowToTop" @click="scrollToTop">
|
||||
<u-badge
|
||||
numberType="limit"
|
||||
type="error"
|
||||
max="99"
|
||||
:value="value"
|
||||
></u-badge>
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car_num.png"
|
||||
></image>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
|
||||
import { apiArr } from '../../../api/reservation';
|
||||
import { request, NavgateTo } from "../../../utils/index";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
top: "",
|
||||
localHeight: ""
|
||||
}
|
||||
isShowToTop: false,
|
||||
searchText: "",
|
||||
isLoading: false,
|
||||
specifiedContent: [
|
||||
{
|
||||
name: "服务",
|
||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png",
|
||||
},
|
||||
{
|
||||
name: "阿石",
|
||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png",
|
||||
},
|
||||
{
|
||||
name: "阿榴",
|
||||
icon: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png",
|
||||
},
|
||||
],
|
||||
searchHistory: [],
|
||||
hasResult: false,
|
||||
hotServiceList: [
|
||||
{
|
||||
id: 1,
|
||||
name: "空调清洗",
|
||||
image: "",
|
||||
badge: "推荐",
|
||||
tag: "平台保障",
|
||||
description: "专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所",
|
||||
count: "已预约100+",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
const history = uni.getStorageSync("searchHistory") || [];
|
||||
this.searchHistory = history;
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleScroll() {
|
||||
this.isShowToTop = window.pageYOffset > 200;
|
||||
},
|
||||
onReady() {
|
||||
|
||||
scrollToTop() {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
duration: 300
|
||||
});
|
||||
},
|
||||
|
||||
onload(options) {
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
this.localHeight = meun.height;
|
||||
},
|
||||
onShow() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
upView() {
|
||||
NavgateTo("/packages/homeServer/index/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/serverInfo/index")
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user