Compare commits
No commits in common. "0a6d26eb49315393a9235a236d7cd130fa886b9b" and "44013eb0545bcb437a9e706bb9f469b5e07be0d6" have entirely different histories.
0a6d26eb49
...
44013eb054
@ -97,7 +97,6 @@
|
|||||||
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"
|
||||||
@ -118,12 +117,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>
|
||||||
@ -161,8 +160,8 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { request, NavgateTo } from "../../../utils/index";
|
import { request, NavgateTo } from "../../../utils/index";
|
||||||
import SearchAll from "../searchAll/index.vue";
|
import SearchAll from "./searchAll.vue";
|
||||||
import SearchShop from "../searchShop/index.vue";
|
import SearchShop from "./searchShop.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@ -335,14 +334,6 @@ 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,21 +36,16 @@ page {
|
|||||||
height: 110rpx;
|
height: 110rpx;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||||
font-size: 26rpx;
|
font-size: 30rpx;
|
||||||
color: #333;
|
color: #FF370B;
|
||||||
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: 22rpx;
|
width: 26rpx;
|
||||||
height: 24rpx;
|
height: 30rpx;
|
||||||
margin-left: 7rpx;
|
margin-left: 7rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -86,27 +81,8 @@ 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: 26rpx;
|
font-size: 28rpx;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -135,7 +111,6 @@ 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;
|
||||||
}
|
}
|
||||||
@ -201,77 +176,6 @@ page {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -435,7 +339,7 @@ page {
|
|||||||
|
|
||||||
.filterMore2_item_left {}
|
.filterMore2_item_left {}
|
||||||
|
|
||||||
.active3 {
|
.active2 {
|
||||||
color: #ff702c !important;
|
color: #ff702c !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -443,6 +347,9 @@ page {
|
|||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.filterMore3Item {
|
.filterMore3Item {
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
color: #555555;
|
color: #555555;
|
||||||
@ -502,7 +409,6 @@ page {
|
|||||||
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,30 +3,44 @@
|
|||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="Filter">
|
<div class="Filter">
|
||||||
<div class="Filter_left">
|
<div class="Filter_left">
|
||||||
<div
|
<div class="FilterItem" @click="showDialog(1)">
|
||||||
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="
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
|
||||||
selectedFilter === filter.id
|
></image>
|
||||||
? 'http://localhost:8080/search_up.png'
|
</div>
|
||||||
: '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" @click="showDialog(6)">
|
<div class="Filter_right">
|
||||||
<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>
|
||||||
@ -54,7 +68,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="filterMore2_item">
|
<div class="filterMore2_item">
|
||||||
<div class="filterMore2_item_left active3">从高到低</div>
|
<div class="filterMore2_item_left active2">从高到低</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>
|
||||||
@ -75,7 +89,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="filterMore2_item">
|
<div class="filterMore2_item">
|
||||||
<div class="filterMore2_item_left2 active3">距离优先</div>
|
<div class="filterMore2_item_left2 active2">距离优先</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>
|
||||||
@ -94,128 +108,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 高级筛选面板 -->
|
<!-- 分类筛选 -->
|
||||||
<div class="FilterMore" v-if="show6">
|
<div class="FilterMore3" v-if="show4">
|
||||||
<div class="filter-section">
|
<div class="filterMore3Item" v-for="(item, index) in 9" :key="index">
|
||||||
<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 class="filter-section">
|
|
||||||
<div class="filter-title">评论数量</div>
|
|
||||||
<div class="filter-options">
|
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
<div class="filter-section">
|
<!-- 性别筛选 -->
|
||||||
<div class="filter-title">类别</div>
|
<div class="FilterMore3" v-if="show5">
|
||||||
<div class="filter-options">
|
<div class="filterMore3Item">男</div>
|
||||||
<div
|
<div class="filterMore3Item">女</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>
|
||||||
|
|
||||||
@ -297,12 +200,6 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.FilterItem.active {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
request,
|
request,
|
||||||
@ -317,41 +214,14 @@ 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");
|
||||||
@ -359,56 +229,16 @@ 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 <= 6; i++) {
|
for (let i = 1; i <= 5; i++) {
|
||||||
if (i !== excludeIndex) {
|
if (i !== excludeIndex) {
|
||||||
this[`show${i}`] = false;
|
this[`show${i}`] = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -418,6 +248,7 @@ 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() {},
|
||||||
@ -428,6 +259,7 @@ export default {
|
|||||||
onReachBottom() {},
|
onReachBottom() {},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import url("./index.css");
|
@import url("./searchAll.css");
|
||||||
</style>
|
</style>
|
||||||
@ -197,5 +197,5 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import url("./index.css");
|
@import url("./searchShop.css");
|
||||||
</style>
|
</style>
|
||||||
@ -10,29 +10,6 @@
|
|||||||
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;
|
||||||
@ -115,7 +92,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.serverListTit {
|
.serverListTit {
|
||||||
font-size: 32rpx;
|
font-size: 63rpx;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
@ -142,7 +119,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.msg_tit {
|
.msg_tit {
|
||||||
display: flex;
|
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
@ -169,7 +145,15 @@
|
|||||||
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 {
|
||||||
@ -203,62 +187,3 @@
|
|||||||
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,25 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<swiper @animationfinish="swipers" autoplay circular>
|
<swiper>
|
||||||
<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>
|
||||||
@ -28,190 +10,114 @@
|
|||||||
<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>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="serverTitBox">
|
<div class="serverTitBox">
|
||||||
<div class="serverTit">
|
<div class="serverTit">
|
||||||
<div class="serverTit_left">
|
<div class="serverTit_left">
|
||||||
<div class="tit">空调清洗</div>
|
<div class="tit">空调清洗</div>
|
||||||
<div class="msg">平台保障</div>
|
<div class="msg">
|
||||||
|
平台保障
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="serverTit_right">已预约100+</div>
|
<div class="serverTit_right">已预约100+</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="serverCon">
|
<div class="serverCon">专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所还您清新居所</div>
|
||||||
专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所还您清新居所
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<!-- <div class="priceSelect">
|
<div class="priceSelect">
|
||||||
<div class="tit">价格范围</div>
|
<div class="tit">价格范围</div>
|
||||||
|
|
||||||
<div class="range">
|
<div class="range">
|
||||||
<div class="minPrice">￥10</div>
|
<div class="minPrice">￥10</div>
|
||||||
<slider-range
|
<slider-range style="flex: 1;" :value="rangeValue" :min="rangeMin" :max="rangeMax" :step="5" :bar-height="3"
|
||||||
style="flex: 1"
|
:block-size="26" background-color="#EEEEF6" active-color="#FF6B00" :format="format"
|
||||||
:value="rangeValue"
|
:decorationVisible="true" @change="handleRangeChange"></slider-range>
|
||||||
: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 class="maxPrice">￥39</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div>
|
||||||
|
|
||||||
<div class="serverList">
|
<div class="serverList">
|
||||||
<div class="serverListTit">找到8个匹配服务商</div>
|
<div class="serverListTit">匹配的服务商(3)</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" @click="selectVendor">
|
||||||
<div class="serverItem_left">
|
<div class="serverItem_left">
|
||||||
<image src="http://localhost:8080/test.png"></image>
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png"></image>
|
||||||
</div>
|
</div>
|
||||||
<div class="serverItem_right">
|
<div class="serverItem_right">
|
||||||
<div class="serverItem_right_msg">
|
<div class="serverItem_right_msg">
|
||||||
<div class="msg_tit">
|
<div class="msg_tit">安心家政</div>
|
||||||
<view>安心家政</view>
|
|
||||||
<div class="serverItem_right_btn" @click="selectMaster">
|
|
||||||
选择服务
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="msg_meta">
|
|
||||||
<span class="rating">
|
|
||||||
<image
|
|
||||||
class="infoImage"
|
|
||||||
src="http://localhost:8080/serverInfo_xing.png"
|
|
||||||
/>
|
|
||||||
4.8
|
|
||||||
</span>
|
|
||||||
<span class="distance">
|
|
||||||
<image
|
|
||||||
class="infoImage"
|
|
||||||
src="http://localhost:8080/serverInfo_weizhi.png"
|
|
||||||
/>3.3km</span
|
|
||||||
>
|
|
||||||
<span class="served">
|
|
||||||
<image
|
|
||||||
class="infoImage"
|
|
||||||
src="http://localhost:8080/serverInfo_fuwu.png"
|
|
||||||
/>服务12226人</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="msg_price">价格范围： <span>￥80-￥150</span></div>
|
<div class="msg_price">价格范围： <span>￥80-￥150</span></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="serverItem_right_btn" @click="selectMaster">
|
||||||
|
选择师傅
|
||||||
|
<div class="more">
|
||||||
|
<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
|
||||||
request,
|
import { apiArr } from '../../../api/reservation';
|
||||||
picUrl,
|
import SliderRange from '@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue'
|
||||||
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 {
|
||||||
bannerList: [
|
|
||||||
{
|
|
||||||
pic_src: "http://localhost:8080/test.png",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pic_src:
|
|
||||||
"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_banner.png",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
pic_src: "http://localhost:8080/test.png",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
currentIdx: 0,
|
|
||||||
top: "",
|
top: "",
|
||||||
localHeight: "",
|
localHeight: "",
|
||||||
rangeMin: 5,
|
rangeMin: 5,
|
||||||
rangeMax: 200,
|
rangeMax: 200,
|
||||||
rangeValue: [10, 50],
|
rangeValue: [10, 50]
|
||||||
|
}
|
||||||
selectedTab: 0,
|
|
||||||
categoryList: [
|
|
||||||
{ category_name: "推荐" },
|
|
||||||
{ category_name: "评分优先" },
|
|
||||||
{ category_name: "距离最近" },
|
|
||||||
{ category_name: "价格最低" },
|
|
||||||
{ category_name: "服务最多" },
|
|
||||||
{ category_name: "价格范围" },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
swipers(e) {
|
|
||||||
this.currentIdx = e.detail.current;
|
|
||||||
},
|
|
||||||
format(val) {
|
format(val) {
|
||||||
return val + "%";
|
return val + '%'
|
||||||
},
|
},
|
||||||
handleRangeChange(e) {
|
handleRangeChange(e) {
|
||||||
this.rangeValue = e;
|
this.rangeValue = e
|
||||||
},
|
},
|
||||||
selectVendor(){
|
selectVendor(){
|
||||||
NavgateTo("../vendor/index");
|
NavgateTo("../vendor/index")
|
||||||
},
|
},
|
||||||
selectMaster(){
|
selectMaster(){
|
||||||
NavgateTo("../chooseMaster/index");
|
NavgateTo("../chooseMaster/index")
|
||||||
},
|
|
||||||
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() {},
|
onReady() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
const meun = menuButtonInfo();
|
const meun = menuButtonInfo();
|
||||||
this.top = meun.top;
|
this.top = meun.top;
|
||||||
this.localHeight = meun.height;
|
this.localHeight = meun.height;
|
||||||
},
|
},
|
||||||
onShow() {},
|
onShow() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 页面上拉触底事件的处理函数
|
* 页面上拉触底事件的处理函数
|
||||||
*/
|
*/
|
||||||
onReachBottom() {},
|
onReachBottom() {
|
||||||
};
|
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user