Compare commits
2 Commits
44013eb054
...
0a6d26eb49
| Author | SHA1 | Date | |
|---|---|---|---|
|
0a6d26eb49 | ||
|
|
60d6fe9e9e |
@ -97,6 +97,7 @@
|
|||||||
class="service-card"
|
class="service-card"
|
||||||
v-for="(service, index) in hotServiceList"
|
v-for="(service, index) in hotServiceList"
|
||||||
:key="index"
|
:key="index"
|
||||||
|
@click="navigateToReservation(service)"
|
||||||
>
|
>
|
||||||
<image
|
<image
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/ceshi.png"
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/ceshi.png"
|
||||||
@ -117,12 +118,12 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="service-info-right">
|
<view class="service-info-right">
|
||||||
<view class="service-footer">
|
<view class="service-footer">
|
||||||
<view
|
<!-- <view
|
||||||
class="service-button"
|
class="service-button"
|
||||||
@click="navigateToReservation(service)"
|
@click="navigateToReservation(service)"
|
||||||
>
|
>
|
||||||
<text class="button-text" @click="goSubscribe">去预约</text>
|
<text class="button-text" @click="goSubscribe">去预约</text>
|
||||||
</view>
|
</view> -->
|
||||||
<text class="service-count">{{ service.count }}</text>
|
<text class="service-count">{{ service.count }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -160,8 +161,8 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { request, NavgateTo } from "../../../utils/index";
|
import { request, NavgateTo } from "../../../utils/index";
|
||||||
import SearchAll from "./searchAll.vue";
|
import SearchAll from "../searchAll/index.vue";
|
||||||
import SearchShop from "./searchShop.vue";
|
import SearchShop from "../searchShop/index.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@ -334,6 +335,14 @@ export default {
|
|||||||
goSubscribe() {
|
goSubscribe() {
|
||||||
NavgateTo("/packages/homeServer/searchInfo/index");
|
NavgateTo("/packages/homeServer/searchInfo/index");
|
||||||
},
|
},
|
||||||
|
|
||||||
|
navigateToReservation(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
|
||||||
|
JSON.stringify(item)
|
||||||
|
)}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -36,16 +36,21 @@ page {
|
|||||||
height: 110rpx;
|
height: 110rpx;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||||
font-size: 30rpx;
|
font-size: 26rpx;
|
||||||
color: #FF370B;
|
color: #333;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
margin-left: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeFilter{
|
||||||
|
color: #FF370B;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Filter_right image {
|
.Filter_right image {
|
||||||
width: 26rpx;
|
width: 22rpx;
|
||||||
height: 30rpx;
|
height: 24rpx;
|
||||||
margin-left: 7rpx;
|
margin-left: 7rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -81,8 +86,27 @@ page {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 选中状态图片样式 */
|
||||||
|
.iconStyle {
|
||||||
|
width: 25rpx !important;
|
||||||
|
height: 45rpx !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 默认状态样式 */
|
||||||
|
.FilterItem image:not(.iconStyle) {
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterItem:not(.active) {
|
||||||
|
/* 默认字体样式 */
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
.FilterItem {
|
.FilterItem {
|
||||||
font-size: 28rpx;
|
font-size: 26rpx;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -111,7 +135,8 @@ page {
|
|||||||
padding-bottom: 30rpx;
|
padding-bottom: 30rpx;
|
||||||
padding-top: 20rpx;
|
padding-top: 20rpx;
|
||||||
}
|
}
|
||||||
.MasterItem:last-child{
|
|
||||||
|
.MasterItem:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -173,7 +198,78 @@ page {
|
|||||||
|
|
||||||
.MasterItem_Info_right {
|
.MasterItem_Info_right {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-section {
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
border-bottom: 1rpx solid #f5f5f5;
|
||||||
|
}
|
||||||
|
.filter-title {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.filter-options {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 15rpx;
|
||||||
|
}
|
||||||
|
.filter-option {
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
padding: 12rpx 30rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.filter-option.active {
|
||||||
|
background: #ff370b;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.price-range {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
.price-input {
|
||||||
|
flex: 1;
|
||||||
|
height: 60rpx;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.price-separator {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
.filter-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
.reset-button {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
border: 1rpx solid #7abbff;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
background: #f0f7ff;
|
||||||
|
color: #409eff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
.confirm-button {
|
||||||
|
width: 200rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
background: #409eff;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
color: white;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.MasterItem_Info_right_1 {
|
.MasterItem_Info_right_1 {
|
||||||
@ -339,7 +435,7 @@ page {
|
|||||||
|
|
||||||
.filterMore2_item_left {}
|
.filterMore2_item_left {}
|
||||||
|
|
||||||
.active2 {
|
.active3 {
|
||||||
color: #ff702c !important;
|
color: #ff702c !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -347,9 +443,6 @@ page {
|
|||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.filterMore3Item {
|
.filterMore3Item {
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
@ -405,10 +498,11 @@ page {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.master_info_right_left{
|
.master_info_right_left {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.master_info_right_right {
|
.master_info_right_right {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #FF370B;
|
color: #FF370B;
|
||||||
@ -3,44 +3,30 @@
|
|||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="Filter">
|
<div class="Filter">
|
||||||
<div class="Filter_left">
|
<div class="Filter_left">
|
||||||
<div class="FilterItem" @click="showDialog(1)">
|
<div
|
||||||
附近
|
v-for="filter in filters"
|
||||||
|
:key="filter.id"
|
||||||
|
class="FilterItem"
|
||||||
|
:class="{ active: selectedFilter === filter.id }"
|
||||||
|
@click="
|
||||||
|
showDialog(filter.id);
|
||||||
|
selectedFilter = filter.id;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ filter.label }}
|
||||||
<image
|
<image
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
|
:src="
|
||||||
></image>
|
selectedFilter === filter.id
|
||||||
</div>
|
? 'http://localhost:8080/search_up.png'
|
||||||
|
: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png'
|
||||||
<div class="FilterItem" @click="showDialog(2)">
|
"
|
||||||
综合
|
:class="{ iconStyle: selectedFilter === filter.id }"
|
||||||
<image
|
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
|
|
||||||
></image>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="FilterItem" @click="showDialog(3)">
|
|
||||||
排序
|
|
||||||
<image
|
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
|
|
||||||
></image>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="FilterItem" @click="showDialog(4)">
|
|
||||||
分类
|
|
||||||
<image
|
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
|
|
||||||
></image>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="FilterItem" @click="showDialog(5)">
|
|
||||||
性别
|
|
||||||
<image
|
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
|
|
||||||
></image>
|
></image>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="Filter_right">
|
<div class="Filter_right" @click="showDialog(6)">
|
||||||
筛选
|
<text :class="{ activeFilter: show6 }">筛选</text>
|
||||||
<image
|
<image
|
||||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filter.png"
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filter.png"
|
||||||
></image>
|
></image>
|
||||||
@ -68,7 +54,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="filterMore2_item">
|
<div class="filterMore2_item">
|
||||||
<div class="filterMore2_item_left active2">从高到低</div>
|
<div class="filterMore2_item_left active3">从高到低</div>
|
||||||
<div class="filterMore2_item_right">
|
<div class="filterMore2_item_right">
|
||||||
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
</div>
|
</div>
|
||||||
@ -89,7 +75,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="filterMore2_item">
|
<div class="filterMore2_item">
|
||||||
<div class="filterMore2_item_left2 active2">距离优先</div>
|
<div class="filterMore2_item_left2 active3">距离优先</div>
|
||||||
<div class="filterMore2_item_right">
|
<div class="filterMore2_item_right">
|
||||||
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
</div>
|
</div>
|
||||||
@ -108,17 +94,128 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 分类筛选 -->
|
<!-- 高级筛选面板 -->
|
||||||
<div class="FilterMore3" v-if="show4">
|
<div class="FilterMore" v-if="show6">
|
||||||
<div class="filterMore3Item" v-for="(item, index) in 9" :key="index">
|
<div class="filter-section">
|
||||||
家电维修
|
<div class="filter-title">满意度</div>
|
||||||
|
<div class="filter-options">
|
||||||
|
<div
|
||||||
|
class="filter-option"
|
||||||
|
:class="{ active: selectedSatisfaction.includes('5+') }"
|
||||||
|
@click="toggleSatisfaction('5+')"
|
||||||
|
>
|
||||||
|
5分及以上
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="filter-option"
|
||||||
|
:class="{ active: selectedSatisfaction.includes('4.9+') }"
|
||||||
|
@click="toggleSatisfaction('4.9+')"
|
||||||
|
>
|
||||||
|
4.9分及以上
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="filter-option"
|
||||||
|
:class="{ active: selectedSatisfaction.includes('4.8+') }"
|
||||||
|
@click="toggleSatisfaction('4.8+')"
|
||||||
|
>
|
||||||
|
4.8分及以上
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="filter-option"
|
||||||
|
:class="{ active: selectedSatisfaction.includes('4.7+') }"
|
||||||
|
@click="toggleSatisfaction('4.7+')"
|
||||||
|
>
|
||||||
|
4.7分及以上
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="filter-option"
|
||||||
|
:class="{ active: selectedSatisfaction.includes('4.6+') }"
|
||||||
|
@click="toggleSatisfaction('4.6+')"
|
||||||
|
>
|
||||||
|
4.6分及以上
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="filter-option"
|
||||||
|
:class="{ active: selectedSatisfaction.includes('4.5+') }"
|
||||||
|
@click="toggleSatisfaction('4.5+')"
|
||||||
|
>
|
||||||
|
4.5分及以上
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 性别筛选 -->
|
<div class="filter-section">
|
||||||
<div class="FilterMore3" v-if="show5">
|
<div class="filter-title">评论数量</div>
|
||||||
<div class="filterMore3Item">男</div>
|
<div class="filter-options">
|
||||||
<div class="filterMore3Item">女</div>
|
<div
|
||||||
|
class="filter-option"
|
||||||
|
:class="{ active: selectedReviewCount === '1-100' }"
|
||||||
|
@click="selectedReviewCount = '1-100'"
|
||||||
|
>
|
||||||
|
1-100
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="filter-option"
|
||||||
|
:class="{ active: selectedReviewCount === '100-500' }"
|
||||||
|
@click="selectedReviewCount = '100-500'"
|
||||||
|
>
|
||||||
|
100-500
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="filter-option"
|
||||||
|
:class="{ active: selectedReviewCount === '500+' }"
|
||||||
|
@click="selectedReviewCount = '500+'"
|
||||||
|
>
|
||||||
|
500以上
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-section">
|
||||||
|
<div class="filter-title">价格范围</div>
|
||||||
|
<div class="price-range">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
v-model="minPrice"
|
||||||
|
placeholder="最低价"
|
||||||
|
class="price-input"
|
||||||
|
@input="validatePriceRange"
|
||||||
|
/>
|
||||||
|
<span class="price-separator">—</span>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
v-model="maxPrice"
|
||||||
|
placeholder="最高价"
|
||||||
|
class="price-input"
|
||||||
|
@input="validatePriceRange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-section">
|
||||||
|
<div class="filter-title">类别</div>
|
||||||
|
<div class="filter-options">
|
||||||
|
<div
|
||||||
|
class="filter-option"
|
||||||
|
:class="{ active: selectedCategory === 'airConditioner' }"
|
||||||
|
@click="selectedCategory = 'airConditioner'"
|
||||||
|
>
|
||||||
|
空调维修
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="filter-option"
|
||||||
|
:class="{ active: selectedCategory === 'refrigerator' }"
|
||||||
|
@click="selectedCategory = 'refrigerator'"
|
||||||
|
>
|
||||||
|
冰箱维修
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-buttons">
|
||||||
|
<button class="reset-button" @click="resetFilters">重置</button>
|
||||||
|
<button class="confirm-button" @click="applyFilters">确定</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -200,6 +297,12 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.FilterItem.active {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
request,
|
request,
|
||||||
@ -214,14 +317,41 @@ export default {
|
|||||||
return {
|
return {
|
||||||
top: "",
|
top: "",
|
||||||
localHeight: "",
|
localHeight: "",
|
||||||
|
selectedFilter: null,
|
||||||
|
// 筛选条件数据
|
||||||
|
filters: [
|
||||||
|
{ id: 1, label: "附近" },
|
||||||
|
{ id: 2, label: "综合" },
|
||||||
|
{ id: 3, label: "排序" },
|
||||||
|
],
|
||||||
show1: false,
|
show1: false,
|
||||||
show2: false,
|
show2: false,
|
||||||
show3: false,
|
show3: false,
|
||||||
show4: false,
|
show4: false,
|
||||||
show5: false,
|
show5: false,
|
||||||
|
show6: false,
|
||||||
isShowDia: false,
|
isShowDia: false,
|
||||||
|
selectedSatisfaction: [],
|
||||||
|
selectedReviewCount: null,
|
||||||
|
selectedCategory: null,
|
||||||
|
minPrice: 0,
|
||||||
|
maxPrice: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
show1(val) {
|
||||||
|
if (!val) this.selectedFilter = null;
|
||||||
|
},
|
||||||
|
show2(val) {
|
||||||
|
if (!val) this.selectedFilter = null;
|
||||||
|
},
|
||||||
|
show3(val) {
|
||||||
|
if (!val) this.selectedFilter = null;
|
||||||
|
},
|
||||||
|
show6(val) {
|
||||||
|
if (!val) this.selectedFilter = null;
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
masterInfo() {
|
masterInfo() {
|
||||||
NavgateTo("../masterInfo/index");
|
NavgateTo("../masterInfo/index");
|
||||||
@ -229,16 +359,56 @@ export default {
|
|||||||
back() {
|
back() {
|
||||||
NavgateTo("1");
|
NavgateTo("1");
|
||||||
},
|
},
|
||||||
|
toggleSatisfaction(value) {
|
||||||
|
const index = this.selectedSatisfaction.indexOf(value);
|
||||||
|
if (index === -1) {
|
||||||
|
this.selectedSatisfaction.push(value);
|
||||||
|
} else {
|
||||||
|
this.selectedSatisfaction.splice(index, 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
validatePriceRange() {
|
||||||
|
// 确保最小值在0-99999之间
|
||||||
|
if (this.minPrice < 0) this.minPrice = 0;
|
||||||
|
if (this.minPrice > 99999) this.minPrice = 99999;
|
||||||
|
// 确保最大值在0-99999之间且不小于最小值
|
||||||
|
if (
|
||||||
|
this.maxPrice &&
|
||||||
|
(this.maxPrice < this.minPrice || this.maxPrice > 99999)
|
||||||
|
) {
|
||||||
|
this.maxPrice = Math.min(Math.max(this.maxPrice, this.minPrice), 99999);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resetFilters() {
|
||||||
|
this.selectedSatisfaction = [];
|
||||||
|
this.selectedReviewCount = null;
|
||||||
|
this.selectedCategory = null;
|
||||||
|
this.minPrice = 0;
|
||||||
|
this.maxPrice = "";
|
||||||
|
},
|
||||||
|
applyFilters() {
|
||||||
|
const filterData = {
|
||||||
|
satisfaction: this.selectedSatisfaction,
|
||||||
|
reviewCount: this.selectedReviewCount,
|
||||||
|
category: this.selectedCategory,
|
||||||
|
priceRange: {
|
||||||
|
min: this.minPrice || 0,
|
||||||
|
max: this.maxPrice || 99999,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
console.log("筛选条件:", filterData);
|
||||||
|
this.show6 = false;
|
||||||
|
this.isShowDia = false;
|
||||||
|
},
|
||||||
showDialog(index) {
|
showDialog(index) {
|
||||||
this[`show${index}`] = !this[`show${index}`];
|
this[`show${index}`] = !this[`show${index}`];
|
||||||
this.logOtherButtons(index);
|
this.logOtherButtons(index);
|
||||||
this.isShowDia = this[`show${index}`]
|
this.isShowDia = this[`show${index}`];
|
||||||
},
|
},
|
||||||
logOtherButtons(excludeIndex) {
|
logOtherButtons(excludeIndex) {
|
||||||
for (let i = 1; i <= 5; i++) {
|
for (let i = 1; i <= 6; i++) {
|
||||||
if (i !== excludeIndex) {
|
if (i !== excludeIndex) {
|
||||||
this[`show${i}`] = false
|
this[`show${i}`] = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -248,7 +418,6 @@ export default {
|
|||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
const meun = menuButtonInfo();
|
const meun = menuButtonInfo();
|
||||||
this.top = meun.top;
|
this.top = meun.top;
|
||||||
// this.top = meun.height + meun.top;
|
|
||||||
this.localHeight = meun.height;
|
this.localHeight = meun.height;
|
||||||
},
|
},
|
||||||
onShow() {},
|
onShow() {},
|
||||||
@ -259,7 +428,6 @@ export default {
|
|||||||
onReachBottom() {},
|
onReachBottom() {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import url("./searchAll.css");
|
@import url("./index.css");
|
||||||
</style>
|
</style>
|
||||||
@ -197,5 +197,5 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import url("./searchShop.css");
|
@import url("./index.css");
|
||||||
</style>
|
</style>
|
||||||
@ -10,6 +10,29 @@
|
|||||||
height: 307rpx;
|
height: 307rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cirList {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cir {
|
||||||
|
width: 6rpx;
|
||||||
|
height: 6rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #333;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
width: 12rpx;
|
||||||
|
height: 6rpx;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.dotList {
|
.dotList {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -92,7 +115,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.serverListTit {
|
.serverListTit {
|
||||||
font-size: 63rpx;
|
font-size: 32rpx;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@ -119,6 +142,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.msg_tit {
|
.msg_tit {
|
||||||
|
display: flex;
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
@ -145,15 +169,7 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
margin-left: 200rpx;
|
||||||
|
|
||||||
.serverItem_right_btn .more {
|
|
||||||
width: 26rpx;
|
|
||||||
height: 26rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.range {
|
.range {
|
||||||
@ -186,4 +202,63 @@
|
|||||||
/* 添加左右间距 */
|
/* 添加左右间距 */
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
/* 防止 flex 子项溢出 */
|
/* 防止 flex 子项溢出 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg_meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg_meta .rating,
|
||||||
|
.msg_meta .distance,
|
||||||
|
.msg_meta .served {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoImage {
|
||||||
|
width: 25rpx;
|
||||||
|
height: 25rpx;
|
||||||
|
margin-right: 5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #ffffff;
|
||||||
|
height: 100rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabItem {
|
||||||
|
font-size: 25rpx;
|
||||||
|
color: #222222;
|
||||||
|
margin-right: 60rpx;
|
||||||
|
height: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active2 {
|
||||||
|
font-size: 25rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active2::after {
|
||||||
|
content: '';
|
||||||
|
background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 52rpx;
|
||||||
|
height: 22rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: -16rpx;
|
||||||
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
@ -1,7 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<swiper>
|
<swiper @animationfinish="swipers" autoplay circular>
|
||||||
|
<swiper-item
|
||||||
|
v-for="(item, index) in bannerList"
|
||||||
|
:key="index"
|
||||||
|
@click="lookImage(item, index)"
|
||||||
|
>
|
||||||
|
<image :src="item.pic_src" mode="aspectFill" />
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
|
||||||
|
<view class="cirList">
|
||||||
|
<view
|
||||||
|
:class="['cir', currentIdx == index ? 'active' : '']"
|
||||||
|
v-for="(item, index) in bannerList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <swiper>
|
||||||
<swiper-item>
|
<swiper-item>
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_banner.png"></image>
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_banner.png"></image>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
@ -10,114 +28,190 @@
|
|||||||
<div class="dot active"></div>
|
<div class="dot active"></div>
|
||||||
<div class="dot"></div>
|
<div class="dot"></div>
|
||||||
<div class="dot"></div>
|
<div class="dot"></div>
|
||||||
</div>
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="serverTitBox">
|
||||||
|
<div class="serverTit">
|
||||||
|
<div class="serverTit_left">
|
||||||
|
<div class="tit">空调清洗</div>
|
||||||
|
<div class="msg">平台保障</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="serverTit_right">已预约100+</div>
|
||||||
<div class="serverTitBox">
|
</div>
|
||||||
<div class="serverTit">
|
<div class="serverCon">
|
||||||
<div class="serverTit_left">
|
专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所还您清新居所
|
||||||
<div class="tit">空调清洗</div>
|
</div>
|
||||||
<div class="msg">
|
</div>
|
||||||
平台保障
|
<div class="line"></div>
|
||||||
</div>
|
<!-- <div class="priceSelect">
|
||||||
</div>
|
<div class="tit">价格范围</div>
|
||||||
<div class="serverTit_right">已预约100+</div>
|
|
||||||
</div>
|
<div class="range">
|
||||||
<div class="serverCon">专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所还您清新居所</div>
|
<div class="minPrice">￥10</div>
|
||||||
|
<slider-range
|
||||||
|
style="flex: 1"
|
||||||
|
:value="rangeValue"
|
||||||
|
:min="rangeMin"
|
||||||
|
:max="rangeMax"
|
||||||
|
:step="5"
|
||||||
|
:bar-height="3"
|
||||||
|
:block-size="26"
|
||||||
|
background-color="#EEEEF6"
|
||||||
|
active-color="#FF6B00"
|
||||||
|
:format="format"
|
||||||
|
:decorationVisible="true"
|
||||||
|
@change="handleRangeChange"
|
||||||
|
></slider-range>
|
||||||
|
<div class="maxPrice">￥39</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div class="serverList">
|
||||||
|
<div class="serverListTit">找到8个匹配服务商</div>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div class="serverItem" @click="selectVendor">
|
||||||
|
<div class="serverItem_left">
|
||||||
|
<image src="http://localhost:8080/test.png"></image>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="serverItem_right">
|
||||||
<div class="priceSelect">
|
<div class="serverItem_right_msg">
|
||||||
<div class="tit">价格范围</div>
|
<div class="msg_tit">
|
||||||
|
<view>安心家政</view>
|
||||||
<div class="range">
|
<div class="serverItem_right_btn" @click="selectMaster">
|
||||||
<div class="minPrice">￥10</div>
|
选择服务
|
||||||
<slider-range style="flex: 1;" :value="rangeValue" :min="rangeMin" :max="rangeMax" :step="5" :bar-height="3"
|
</div>
|
||||||
:block-size="26" background-color="#EEEEF6" active-color="#FF6B00" :format="format"
|
|
||||||
:decorationVisible="true" @change="handleRangeChange"></slider-range>
|
|
||||||
<div class="maxPrice">￥39</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="msg_meta">
|
||||||
|
<span class="rating">
|
||||||
<div class="serverList">
|
<image
|
||||||
<div class="serverListTit">匹配的服务商(3)</div>
|
class="infoImage"
|
||||||
|
src="http://localhost:8080/serverInfo_xing.png"
|
||||||
<div class="serverItem" @click="selectVendor">
|
/>
|
||||||
<div class="serverItem_left">
|
4.8
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png"></image>
|
</span>
|
||||||
</div>
|
<span class="distance">
|
||||||
<div class="serverItem_right">
|
<image
|
||||||
<div class="serverItem_right_msg">
|
class="infoImage"
|
||||||
<div class="msg_tit">安心家政</div>
|
src="http://localhost:8080/serverInfo_weizhi.png"
|
||||||
<div class="msg_price">价格范围： <span>￥80-￥150</span></div>
|
/>3.3km</span
|
||||||
</div>
|
>
|
||||||
|
<span class="served">
|
||||||
<div class="serverItem_right_btn" @click="selectMaster">
|
<image
|
||||||
选择师傅
|
class="infoImage"
|
||||||
<div class="more">
|
src="http://localhost:8080/serverInfo_fuwu.png"
|
||||||
<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
|
/>服务12226人</span
|
||||||
</div>
|
>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="msg_price">价格范围： <span>￥80-￥150</span></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</view>
|
</div>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
|
import {
|
||||||
import { apiArr } from '../../../api/reservation';
|
request,
|
||||||
import SliderRange from '@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue'
|
picUrl,
|
||||||
|
NavgateTo,
|
||||||
|
menuButtonInfo,
|
||||||
|
} from "../../../utils/index";
|
||||||
|
import { apiArr } from "../../../api/reservation";
|
||||||
|
import SliderRange from "@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
// 注册组件
|
// 注册组件
|
||||||
SliderRange
|
SliderRange,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
top: "",
|
bannerList: [
|
||||||
localHeight: "",
|
{
|
||||||
rangeMin: 5,
|
pic_src: "http://localhost:8080/test.png",
|
||||||
rangeMax: 200,
|
|
||||||
rangeValue: [10, 50]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
format(val) {
|
|
||||||
return val + '%'
|
|
||||||
},
|
},
|
||||||
handleRangeChange(e) {
|
{
|
||||||
this.rangeValue = e
|
pic_src:
|
||||||
|
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_banner.png",
|
||||||
},
|
},
|
||||||
selectVendor(){
|
{
|
||||||
NavgateTo("../vendor/index")
|
pic_src: "http://localhost:8080/test.png",
|
||||||
},
|
|
||||||
selectMaster(){
|
|
||||||
NavgateTo("../chooseMaster/index")
|
|
||||||
},
|
},
|
||||||
|
],
|
||||||
|
currentIdx: 0,
|
||||||
|
top: "",
|
||||||
|
localHeight: "",
|
||||||
|
rangeMin: 5,
|
||||||
|
rangeMax: 200,
|
||||||
|
rangeValue: [10, 50],
|
||||||
|
|
||||||
|
selectedTab: 0,
|
||||||
|
categoryList: [
|
||||||
|
{ category_name: "推荐" },
|
||||||
|
{ category_name: "评分优先" },
|
||||||
|
{ category_name: "距离最近" },
|
||||||
|
{ category_name: "价格最低" },
|
||||||
|
{ category_name: "服务最多" },
|
||||||
|
{ category_name: "价格范围" },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
swipers(e) {
|
||||||
|
this.currentIdx = e.detail.current;
|
||||||
},
|
},
|
||||||
onReady() {
|
format(val) {
|
||||||
|
return val + "%";
|
||||||
},
|
},
|
||||||
|
handleRangeChange(e) {
|
||||||
onLoad(options) {
|
this.rangeValue = e;
|
||||||
const meun = menuButtonInfo();
|
|
||||||
this.top = meun.top;
|
|
||||||
this.localHeight = meun.height;
|
|
||||||
},
|
},
|
||||||
onShow() {
|
selectVendor() {
|
||||||
|
NavgateTo("../vendor/index");
|
||||||
},
|
},
|
||||||
|
selectMaster() {
|
||||||
/**
|
NavgateTo("../chooseMaster/index");
|
||||||
* 页面上拉触底事件的处理函数
|
|
||||||
*/
|
|
||||||
onReachBottom() {
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
lookImage(item, index) {
|
||||||
|
// 提取所有图片URL
|
||||||
|
const urls = this.bannerList.map((item) => item.pic_src);
|
||||||
|
// 调用UniApp预览图片API
|
||||||
|
uni.previewImage({
|
||||||
|
current: index,
|
||||||
|
urls: urls,
|
||||||
|
loop: true,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
selectTab(index, item) {
|
||||||
|
this.selectedTab = index;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onReady() {},
|
||||||
|
|
||||||
}
|
onLoad(options) {
|
||||||
|
const meun = menuButtonInfo();
|
||||||
|
this.top = meun.top;
|
||||||
|
this.localHeight = meun.height;
|
||||||
|
},
|
||||||
|
onShow() {},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 页面上拉触底事件的处理函数
|
||||||
|
*/
|
||||||
|
onReachBottom() {},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user