122 lines
3.6 KiB
Vue
122 lines
3.6 KiB
Vue
<template>
|
||
<view class="container">
|
||
<div class="banner">
|
||
<swiper>
|
||
<swiper-item>
|
||
<image src="http://192.168.0.172:5500/homeServer_banner.png"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
<div class="dotList">
|
||
<div class="dot active"></div>
|
||
<div class="dot"></div>
|
||
<div class="dot"></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="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">匹配的服务商(3)</div>
|
||
|
||
<div class="serverItem">
|
||
<div class="serverItem_left">
|
||
<image src="http://192.168.0.172:5500/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>
|
||
</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'
|
||
|
||
export default {
|
||
components: {
|
||
// 注册组件
|
||
SliderRange
|
||
},
|
||
data() {
|
||
return {
|
||
top: "",
|
||
localHeight: "",
|
||
rangeMin: 5,
|
||
rangeMax: 200,
|
||
rangeValue: [10, 50]
|
||
}
|
||
},
|
||
methods: {
|
||
format(val) {
|
||
return val + '%'
|
||
},
|
||
handleRangeChange(e) {
|
||
this.rangeValue = e
|
||
},
|
||
selectMaster(){
|
||
NavgateTo("../chooseMaster/index")
|
||
},
|
||
},
|
||
onReady() {
|
||
|
||
},
|
||
|
||
onLoad(options) {
|
||
const meun = menuButtonInfo();
|
||
this.top = meun.top;
|
||
this.localHeight = meun.height;
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
|
||
/**
|
||
* 页面上拉触底事件的处理函数
|
||
*/
|
||
onReachBottom() {
|
||
|
||
},
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |