Compare commits
2 Commits
44013eb054
...
0a6d26eb49
| Author | SHA1 | Date | |
|---|---|---|---|
|
0a6d26eb49 | ||
|
|
60d6fe9e9e |
@ -97,6 +97,7 @@
|
||||
class="service-card"
|
||||
v-for="(service, index) in hotServiceList"
|
||||
:key="index"
|
||||
@click="navigateToReservation(service)"
|
||||
>
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/ceshi.png"
|
||||
@ -117,12 +118,12 @@
|
||||
</view>
|
||||
<view class="service-info-right">
|
||||
<view class="service-footer">
|
||||
<view
|
||||
<!-- <view
|
||||
class="service-button"
|
||||
@click="navigateToReservation(service)"
|
||||
>
|
||||
<text class="button-text" @click="goSubscribe">去预约</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<text class="service-count">{{ service.count }}</text>
|
||||
</view>
|
||||
</view>
|
||||
@ -160,8 +161,8 @@
|
||||
|
||||
<script>
|
||||
import { request, NavgateTo } from "../../../utils/index";
|
||||
import SearchAll from "./searchAll.vue";
|
||||
import SearchShop from "./searchShop.vue";
|
||||
import SearchAll from "../searchAll/index.vue";
|
||||
import SearchShop from "../searchShop/index.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -334,6 +335,14 @@ export default {
|
||||
goSubscribe() {
|
||||
NavgateTo("/packages/homeServer/searchInfo/index");
|
||||
},
|
||||
|
||||
navigateToReservation(item) {
|
||||
uni.navigateTo({
|
||||
url: `/packages/homeServer/serverInfo/index?service=${encodeURIComponent(
|
||||
JSON.stringify(item)
|
||||
)}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -36,16 +36,21 @@ page {
|
||||
height: 110rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||
font-size: 30rpx;
|
||||
color: #FF370B;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 200rpx;
|
||||
}
|
||||
|
||||
.activeFilter{
|
||||
color: #FF370B;
|
||||
}
|
||||
|
||||
.Filter_right image {
|
||||
width: 26rpx;
|
||||
height: 30rpx;
|
||||
width: 22rpx;
|
||||
height: 24rpx;
|
||||
margin-left: 7rpx;
|
||||
}
|
||||
|
||||
@ -81,8 +86,27 @@ page {
|
||||
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 {
|
||||
font-size: 28rpx;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -111,7 +135,8 @@ page {
|
||||
padding-bottom: 30rpx;
|
||||
padding-top: 20rpx;
|
||||
}
|
||||
.MasterItem:last-child{
|
||||
|
||||
.MasterItem:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@ -173,7 +198,78 @@ page {
|
||||
|
||||
.MasterItem_Info_right {
|
||||
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 {
|
||||
@ -339,7 +435,7 @@ page {
|
||||
|
||||
.filterMore2_item_left {}
|
||||
|
||||
.active2 {
|
||||
.active3 {
|
||||
color: #ff702c !important;
|
||||
}
|
||||
|
||||
@ -347,9 +443,6 @@ page {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.filterMore3Item {
|
||||
font-size: 26rpx;
|
||||
color: #555555;
|
||||
@ -405,10 +498,11 @@ page {
|
||||
}
|
||||
|
||||
|
||||
.master_info_right_left{
|
||||
.master_info_right_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.master_info_right_right {
|
||||
font-size: 28rpx;
|
||||
color: #FF370B;
|
||||
@ -3,44 +3,30 @@
|
||||
<div class="header">
|
||||
<div class="Filter">
|
||||
<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
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png"
|
||||
></image>
|
||||
</div>
|
||||
|
||||
<div class="FilterItem" @click="showDialog(2)">
|
||||
综合
|
||||
<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"
|
||||
:src="
|
||||
selectedFilter === filter.id
|
||||
? 'http://localhost:8080/search_up.png'
|
||||
: 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filterMore.png'
|
||||
"
|
||||
:class="{ iconStyle: selectedFilter === filter.id }"
|
||||
></image>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="Filter_right">
|
||||
筛选
|
||||
<div class="Filter_right" @click="showDialog(6)">
|
||||
<text :class="{ activeFilter: show6 }">筛选</text>
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_filter.png"
|
||||
></image>
|
||||
@ -68,7 +54,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="filterMore2_item">
|
||||
<div class="filterMore2_item_left active2">从高到低</div>
|
||||
<div class="filterMore2_item_left active3">从高到低</div>
|
||||
<div class="filterMore2_item_right">
|
||||
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||
</div>
|
||||
@ -89,7 +75,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="filterMore2_item">
|
||||
<div class="filterMore2_item_left2 active2">距离优先</div>
|
||||
<div class="filterMore2_item_left2 active3">距离优先</div>
|
||||
<div class="filterMore2_item_right">
|
||||
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||
</div>
|
||||
@ -108,17 +94,128 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分类筛选 -->
|
||||
<div class="FilterMore3" v-if="show4">
|
||||
<div class="filterMore3Item" v-for="(item, index) in 9" :key="index">
|
||||
家电维修
|
||||
<!-- 高级筛选面板 -->
|
||||
<div class="FilterMore" v-if="show6">
|
||||
<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 class="FilterMore3" v-if="show5">
|
||||
<div class="filterMore3Item">男</div>
|
||||
<div class="filterMore3Item">女</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 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>
|
||||
|
||||
@ -200,6 +297,12 @@
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.FilterItem.active {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import {
|
||||
request,
|
||||
@ -214,14 +317,41 @@ export default {
|
||||
return {
|
||||
top: "",
|
||||
localHeight: "",
|
||||
selectedFilter: null,
|
||||
// 筛选条件数据
|
||||
filters: [
|
||||
{ id: 1, label: "附近" },
|
||||
{ id: 2, label: "综合" },
|
||||
{ id: 3, label: "排序" },
|
||||
],
|
||||
show1: false,
|
||||
show2: false,
|
||||
show3: false,
|
||||
show4: false,
|
||||
show5: false,
|
||||
show6: 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: {
|
||||
masterInfo() {
|
||||
NavgateTo("../masterInfo/index");
|
||||
@ -229,16 +359,56 @@ export default {
|
||||
back() {
|
||||
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) {
|
||||
this[`show${index}`] = !this[`show${index}`];
|
||||
this.logOtherButtons(index);
|
||||
this.isShowDia = this[`show${index}`]
|
||||
this.isShowDia = this[`show${index}`];
|
||||
},
|
||||
logOtherButtons(excludeIndex) {
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
for (let i = 1; i <= 6; i++) {
|
||||
if (i !== excludeIndex) {
|
||||
this[`show${i}`] = false
|
||||
this[`show${i}`] = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -248,7 +418,6 @@ export default {
|
||||
onLoad(options) {
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
// this.top = meun.height + meun.top;
|
||||
this.localHeight = meun.height;
|
||||
},
|
||||
onShow() {},
|
||||
@ -259,7 +428,6 @@ export default {
|
||||
onReachBottom() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./searchAll.css");
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
@ -197,5 +197,5 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./searchShop.css");
|
||||
@import url("./index.css");
|
||||
</style>
|
||||
@ -10,6 +10,29 @@
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -92,7 +115,7 @@
|
||||
}
|
||||
|
||||
.serverListTit {
|
||||
font-size: 63rpx;
|
||||
font-size: 32rpx;
|
||||
color: #222222;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -119,6 +142,7 @@
|
||||
}
|
||||
|
||||
.msg_tit {
|
||||
display: flex;
|
||||
font-size: 30rpx;
|
||||
color: #222222;
|
||||
margin-bottom: 20rpx;
|
||||
@ -145,15 +169,7 @@
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.serverItem_right_btn .more {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
margin-left: 200rpx;
|
||||
}
|
||||
|
||||
.range {
|
||||
@ -186,4 +202,63 @@
|
||||
/* 添加左右间距 */
|
||||
min-width: 0;
|
||||
/* 防止 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>
|
||||
<view class="container">
|
||||
<div class="banner">
|
||||
<swiper>
|
||||
<view class="container">
|
||||
<div class="banner">
|
||||
<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>
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_banner.png"></image>
|
||||
</swiper-item>
|
||||
@ -10,114 +28,190 @@
|
||||
<div class="dot active"></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 class="line"></div>
|
||||
<div class="serverTitBox">
|
||||
<div class="serverTit">
|
||||
<div class="serverTit_left">
|
||||
<div class="tit">空调清洗</div>
|
||||
<div class="msg">
|
||||
平台保障
|
||||
</div>
|
||||
</div>
|
||||
<div class="serverTit_right">已预约100+</div>
|
||||
</div>
|
||||
<div class="serverCon">专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所还您清新居所</div>
|
||||
<div class="serverTit_right">已预约100+</div>
|
||||
</div>
|
||||
<div class="serverCon">
|
||||
专业保洁团队，全屋深度清洁，去除顽固污渍，还您清新居所还您清新居所
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<!-- <div class="priceSelect">
|
||||
<div class="tit">价格范围</div>
|
||||
|
||||
<div class="range">
|
||||
<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 class="line"></div>
|
||||
<div class="priceSelect">
|
||||
<div class="tit">价格范围</div>
|
||||
|
||||
<div class="range">
|
||||
<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 class="serverItem_right">
|
||||
<div class="serverItem_right_msg">
|
||||
<div class="msg_tit">
|
||||
<view>安心家政</view>
|
||||
<div class="serverItem_right_btn" @click="selectMaster">
|
||||
选择服务
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="serverList">
|
||||
<div class="serverListTit">匹配的服务商(3)</div>
|
||||
|
||||
<div class="serverItem" @click="selectVendor">
|
||||
<div class="serverItem_left">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png"></image>
|
||||
</div>
|
||||
<div class="serverItem_right">
|
||||
<div class="serverItem_right_msg">
|
||||
<div class="msg_tit">安心家政</div>
|
||||
<div class="msg_price">价格范围： <span>￥80-￥150</span></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 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>
|
||||
</div>
|
||||
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
|
||||
import { apiArr } from '../../../api/reservation';
|
||||
import SliderRange from '@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue'
|
||||
import {
|
||||
request,
|
||||
picUrl,
|
||||
NavgateTo,
|
||||
menuButtonInfo,
|
||||
} from "../../../utils/index";
|
||||
import { apiArr } from "../../../api/reservation";
|
||||
import SliderRange from "@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// 注册组件
|
||||
SliderRange
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
top: "",
|
||||
localHeight: "",
|
||||
rangeMin: 5,
|
||||
rangeMax: 200,
|
||||
rangeValue: [10, 50]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
format(val) {
|
||||
return val + '%'
|
||||
components: {
|
||||
// 注册组件
|
||||
SliderRange,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bannerList: [
|
||||
{
|
||||
pic_src: "http://localhost:8080/test.png",
|
||||
},
|
||||
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")
|
||||
},
|
||||
selectMaster(){
|
||||
NavgateTo("../chooseMaster/index")
|
||||
{
|
||||
pic_src: "http://localhost:8080/test.png",
|
||||
},
|
||||
],
|
||||
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 + "%";
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
this.localHeight = meun.height;
|
||||
handleRangeChange(e) {
|
||||
this.rangeValue = e;
|
||||
},
|
||||
onShow() {
|
||||
|
||||
selectVendor() {
|
||||
NavgateTo("../vendor/index");
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {
|
||||
|
||||
selectMaster() {
|
||||
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() {},
|
||||
|
||||
}
|
||||
onLoad(options) {
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
this.localHeight = meun.height;
|
||||
},
|
||||
onShow() {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user