修改页面 - 服务详情页面
This commit is contained in:
赵毅
parent
60d6fe9e9e
commit
0a6d26eb49
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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