Compare commits
3 Commits
c7ffd3bbb1
...
142e1ad8fe
| Author | SHA1 | Date | |
|---|---|---|---|
|
142e1ad8fe | ||
| e829761f5d | |||
| 46634806f8 |
@ -48,7 +48,7 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_door.png",
|
photo:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_door.png",
|
||||||
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_doorAc.png",
|
photoAc:"https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_communityAc.png",
|
||||||
nav_name:"上门服务",
|
nav_name:"上门服务",
|
||||||
url:"/packages/homeServer/index/index"
|
url:"/packages/homeServer/index/index"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -0,0 +1,74 @@
|
|||||||
|
# slider-range
|
||||||
|
uni-app 滑块区间选择组件
|
||||||
|
|
||||||
|
可根据具体需求，修改、自定义其他内容。
|
||||||
|
|
||||||
|
## 属性说明
|
||||||
|
|
||||||
|
|属性名|类型|默认值|说明|
|
||||||
|
| -- | -- | --|--|
|
||||||
|
| value | Array<Number, Number> | [0,100] |滑块已选中区间的值|
|
||||||
|
| min | Number| 0 | 滑块区间最小值 |
|
||||||
|
| max | Number | 100 | 滑块区间最大值 |
|
||||||
|
| step | Number | 1 | 拖动时的步长 |
|
||||||
|
| disabled | Boolean | false | 是否为禁用状态 |
|
||||||
|
| height | Number | 50 | 滑块容器高度 |
|
||||||
|
| barHeight | Number | 5 | 滑块进度条高度 |
|
||||||
|
| backgroundColor | String | #e9e9e9| 滑块进度条背景色|
|
||||||
|
| activeColor | String | #1aad19 | 已选中区间进度条颜色|
|
||||||
|
| blockSize | Number | 20 | 滑块大小 |
|
||||||
|
| blockColor | String | #fff | 滑块颜色 |
|
||||||
|
| decorationVisible | Boolean | false | 是否显示滑块内装饰元素|
|
||||||
|
| tipVisible | Boolean | true | 是否显示滑块值提示文本 |
|
||||||
|
| fomat| Function | | 滑块值提示文本格式化函数，**注意**：小程序中此属性必传，否则会报错，如果无需格式化，可以简单返回原始值： `format(val) { return val }`；H5中可以不传。|
|
||||||
|
|
||||||
|
|
||||||
|
## 使用示例
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
|
<slider-range
|
||||||
|
:value="rangeValue"
|
||||||
|
:min="rangeMin"
|
||||||
|
:max="rangMax"
|
||||||
|
:step="5"
|
||||||
|
:bar-height="3"
|
||||||
|
:block-size="26"
|
||||||
|
background-color="#EEEEF6"
|
||||||
|
active-color="#FF6B00"
|
||||||
|
:format="format"
|
||||||
|
:decorationVisible="true"
|
||||||
|
@change="handleRangeChange"
|
||||||
|
></slider-range>
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
|
||||||
|
import SliderRange from '../components/slider-range/index.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
SliderRange
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
rangeMin: 5,
|
||||||
|
rangMax: 200,
|
||||||
|
rangeValue: [10, 50]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
format(val) {
|
||||||
|
return val + '%'
|
||||||
|
},
|
||||||
|
handleRangeChange(e) {
|
||||||
|
this.rangeValue = e
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
效果图
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,378 @@
|
|||||||
|
<template>
|
||||||
|
<view
|
||||||
|
class="slider-range"
|
||||||
|
:class="{ disabled: disabled }"
|
||||||
|
:style="{ paddingLeft: blockSize / 2 + 'px', paddingRight: blockSize / 2 + 'px' }"
|
||||||
|
>
|
||||||
|
<view class="slider-range-inner" :style="{ height: height + 'px' }">
|
||||||
|
<view
|
||||||
|
class="slider-bar"
|
||||||
|
:style="{
|
||||||
|
height: barHeight + 'px',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- 背景条 -->
|
||||||
|
<view
|
||||||
|
class="slider-bar-bg"
|
||||||
|
:style="{
|
||||||
|
backgroundColor: backgroundColor,
|
||||||
|
}"
|
||||||
|
></view>
|
||||||
|
|
||||||
|
<!-- 滑块实际区间 -->
|
||||||
|
<view
|
||||||
|
class="slider-bar-inner"
|
||||||
|
:style="{
|
||||||
|
width: ((values[1] - values[0]) / (max - min)) * 100 + '%',
|
||||||
|
left: lowerHandlePosition + '%',
|
||||||
|
backgroundColor: activeColor,
|
||||||
|
}"
|
||||||
|
></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 滑动块-左 -->
|
||||||
|
<view
|
||||||
|
class="slider-handle-block"
|
||||||
|
:class="{ decoration: decorationVisible }"
|
||||||
|
:style="{
|
||||||
|
backgroundColor: blockColor,
|
||||||
|
width: blockSize + 'px',
|
||||||
|
height: blockSize + 'px',
|
||||||
|
left: lowerHandlePosition + '%',
|
||||||
|
}"
|
||||||
|
@touchstart="_onTouchStart"
|
||||||
|
@touchmove="_onBlockTouchMove"
|
||||||
|
@touchend="_onBlockTouchEnd"
|
||||||
|
data-tag="lowerBlock"
|
||||||
|
></view>
|
||||||
|
|
||||||
|
<!-- 滑动块-右 -->
|
||||||
|
<view
|
||||||
|
class="slider-handle-block"
|
||||||
|
:class="{ decoration: decorationVisible }"
|
||||||
|
:style="{
|
||||||
|
backgroundColor: blockColor,
|
||||||
|
width: blockSize + 'px',
|
||||||
|
height: blockSize + 'px',
|
||||||
|
left: higherHandlePosition + '%',
|
||||||
|
}"
|
||||||
|
@touchstart="_onTouchStart"
|
||||||
|
@touchmove="_onBlockTouchMove"
|
||||||
|
@touchend="_onBlockTouchEnd"
|
||||||
|
data-tag="higherBlock"
|
||||||
|
></view>
|
||||||
|
|
||||||
|
<!-- 滑块值提示 -->
|
||||||
|
<view v-if="tipVisible" class="range-tip" :style="lowerTipStyle">{{ format(values[0]) }}</view>
|
||||||
|
<view v-if="tipVisible" class="range-tip" :style="higherTipStyle">{{ format(values[1]) }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
props: {
|
||||||
|
//滑块区间当前取值
|
||||||
|
value: {
|
||||||
|
type: Array,
|
||||||
|
default: function() {
|
||||||
|
return [0, 100]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
//最小值
|
||||||
|
min: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
//最大值
|
||||||
|
max: {
|
||||||
|
type: Number,
|
||||||
|
default: 100,
|
||||||
|
},
|
||||||
|
step: {
|
||||||
|
type: Number,
|
||||||
|
default: 1,
|
||||||
|
},
|
||||||
|
format: {
|
||||||
|
type: Function,
|
||||||
|
default: function(val) {
|
||||||
|
return val
|
||||||
|
},
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
//滑块容器高度
|
||||||
|
height: {
|
||||||
|
height: Number,
|
||||||
|
default: 50,
|
||||||
|
},
|
||||||
|
//区间进度条高度
|
||||||
|
barHeight: {
|
||||||
|
type: Number,
|
||||||
|
default: 5,
|
||||||
|
},
|
||||||
|
//背景条颜色
|
||||||
|
backgroundColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#e9e9e9',
|
||||||
|
},
|
||||||
|
//已选择的颜色
|
||||||
|
activeColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#1aad19',
|
||||||
|
},
|
||||||
|
//滑块大小
|
||||||
|
blockSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 20,
|
||||||
|
},
|
||||||
|
blockColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#fff',
|
||||||
|
},
|
||||||
|
tipVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
decorationVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
values: [this.min, this.max],
|
||||||
|
startDragPos: 0, // 开始拖动时的坐标位置
|
||||||
|
startVal: 0, //开始拖动时较小点的值
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
// 较小点滑块的坐标
|
||||||
|
lowerHandlePosition() {
|
||||||
|
return ((this.values[0] - this.min) / (this.max - this.min)) * 100
|
||||||
|
},
|
||||||
|
// 较大点滑块的坐标
|
||||||
|
higherHandlePosition() {
|
||||||
|
return ((this.values[1] - this.min) / (this.max - this.min)) * 100
|
||||||
|
},
|
||||||
|
lowerTipStyle() {
|
||||||
|
if (this.lowerHandlePosition < 90) {
|
||||||
|
return `left: ${this.lowerHandlePosition}%;`
|
||||||
|
}
|
||||||
|
return `right: ${100 - this.lowerHandlePosition}%;transform: translate(50%, -100%);`
|
||||||
|
},
|
||||||
|
higherTipStyle() {
|
||||||
|
if (this.higherHandlePosition < 90) {
|
||||||
|
return `left: ${this.higherHandlePosition}%;`
|
||||||
|
}
|
||||||
|
return `right: ${100 - this.higherHandlePosition}%;transform: translate(50%, -100%);`
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created: function() {},
|
||||||
|
onLoad: function(option) {},
|
||||||
|
watch: {
|
||||||
|
//滑块当前值
|
||||||
|
value: {
|
||||||
|
immediate: true,
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
if (this._isValuesValid(newVal) && (newVal[0] !== this.values[0] || newVal[1] !== this.values[1])) {
|
||||||
|
this._updateValue(newVal)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
_updateValue(newVal) {
|
||||||
|
// 步长大于区间差，或者区间最大值和最小值相等情况
|
||||||
|
if (this.step >= this.max - this.min) {
|
||||||
|
throw new RangeError('Invalid slider step or slider range')
|
||||||
|
}
|
||||||
|
|
||||||
|
let newValues = []
|
||||||
|
if (Array.isArray(newVal)) {
|
||||||
|
newValues = [newVal[0], newVal[1]]
|
||||||
|
}
|
||||||
|
if (typeof newValues[0] !== 'number') {
|
||||||
|
newValues[0] = this.values[0]
|
||||||
|
} else {
|
||||||
|
newValues[0] = Math.round((newValues[0] - this.min) / this.step) * this.step + this.min
|
||||||
|
}
|
||||||
|
if (typeof newValues[1] !== 'number') {
|
||||||
|
newValues[1] = this.values[1]
|
||||||
|
} else {
|
||||||
|
newValues[1] = Math.round((newValues[1] - this.min) / this.step) * this.step + this.min
|
||||||
|
}
|
||||||
|
|
||||||
|
// 新值与原值相等，不做处理
|
||||||
|
if (this.values[0] === newValues[0] && this.values[1] === newValues[1]) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// 左侧滑块值小于最小值时，设置为最小值
|
||||||
|
if (newValues[0] < this.min) {
|
||||||
|
newValues[0] = this.min
|
||||||
|
}
|
||||||
|
// 右侧滑块值大于最大值时，设置为最大值
|
||||||
|
if (newValues[1] > this.max) {
|
||||||
|
newValues[1] = this.max
|
||||||
|
}
|
||||||
|
// 两个滑块重叠或左右交错，使两个滑块保持最小步长的间距
|
||||||
|
if (newValues[0] >= newValues[1]) {
|
||||||
|
// 左侧未动，右侧滑块滑到左侧滑块之左
|
||||||
|
if (newValues[0] === this.values[0]) {
|
||||||
|
newValues[1] = newValues[0] + this.step
|
||||||
|
} else {
|
||||||
|
// 右侧未动， 左侧滑块滑到右侧之右
|
||||||
|
newValues[0] = newValues[1] - this.step
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.values = newValues
|
||||||
|
this.$emit('change', this.values)
|
||||||
|
},
|
||||||
|
_onTouchStart: function(event) {
|
||||||
|
if (this.disabled) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isDragging = true
|
||||||
|
let tag = event.target.dataset.tag
|
||||||
|
|
||||||
|
//兼容h5平台及某版本微信
|
||||||
|
let e = event.changedTouches ? event.changedTouches[0] : event
|
||||||
|
this.startDragPos = e.pageX
|
||||||
|
|
||||||
|
this.startVal = tag === 'lowerBlock' ? this.values[0] : this.values[1]
|
||||||
|
},
|
||||||
|
_onBlockTouchMove: function(e) {
|
||||||
|
if (this.disabled) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this._onDrag(e)
|
||||||
|
},
|
||||||
|
_onBlockTouchEnd: function(e) {
|
||||||
|
if (this.disabled) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.isDragging = false
|
||||||
|
this._onDrag(e)
|
||||||
|
},
|
||||||
|
_onDrag(event) {
|
||||||
|
if (!this.isDragging) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let view = uni
|
||||||
|
.createSelectorQuery()
|
||||||
|
.in(this)
|
||||||
|
.select('.slider-range-inner')
|
||||||
|
|
||||||
|
view
|
||||||
|
.boundingClientRect(data => {
|
||||||
|
let sliderWidth = data.width
|
||||||
|
const tag = event.target.dataset.tag
|
||||||
|
let e = event.changedTouches ? event.changedTouches[0] : event
|
||||||
|
let diff = ((e.pageX - this.startDragPos) / sliderWidth) * (this.max - this.min)
|
||||||
|
let nextVal = this.startVal + diff
|
||||||
|
|
||||||
|
if (tag === 'lowerBlock') {
|
||||||
|
this._updateValue([nextVal, null])
|
||||||
|
} else {
|
||||||
|
this._updateValue([null, nextVal])
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.exec()
|
||||||
|
},
|
||||||
|
_isValuesValid: function(values) {
|
||||||
|
return Array.isArray(values) && values.length == 2
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.slider-range {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-range-inner {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-range.disabled .slider-bar-inner {
|
||||||
|
opacity: 0.35;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-range.disabled .slider-handle-block {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-bar {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-bar-bg {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10000px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-bar-inner {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10000px;
|
||||||
|
z-index: 11;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-handle-block {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 0 3px 2px rgba(227, 229, 241, 0.5);
|
||||||
|
z-index: 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-handle-block.decoration::before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
width: 6upx;
|
||||||
|
height: 24upx;
|
||||||
|
top: 50%;
|
||||||
|
left: 29%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: #eeedf2;
|
||||||
|
border-radius: 3upx;
|
||||||
|
z-index: 13;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-handle-block.decoration::after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
width: 6upx;
|
||||||
|
height: 24upx;
|
||||||
|
top: 50%;
|
||||||
|
right: 29%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: #eeedf2;
|
||||||
|
border-radius: 3upx;
|
||||||
|
z-index: 13;
|
||||||
|
}
|
||||||
|
|
||||||
|
.range-tip {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
font-size: 24upx;
|
||||||
|
color: #666;
|
||||||
|
transform: translate(-50%, -100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
<template>
|
||||||
|
<view class="demo-slider-range">
|
||||||
|
<view class="section-title">普通用法</view>
|
||||||
|
<view class="slider-item">
|
||||||
|
<slider-range
|
||||||
|
:value="slider1.rangeValue"
|
||||||
|
:min="slider1.min"
|
||||||
|
:max="slider1.max"
|
||||||
|
:step="slider1.step"
|
||||||
|
:bar-height="barHeight"
|
||||||
|
:block-size="blockSize"
|
||||||
|
:background-color="backgroundColor"
|
||||||
|
:format="format1"
|
||||||
|
@change="handleRangeChange"
|
||||||
|
></slider-range>
|
||||||
|
</view>
|
||||||
|
<view class="section-title">自定义</view>
|
||||||
|
<view class="slider-item">
|
||||||
|
<slider-range
|
||||||
|
:value="slider2.rangeValue"
|
||||||
|
:min="slider2.min"
|
||||||
|
:max="slider2.max"
|
||||||
|
:step="slider2.step"
|
||||||
|
:bar-height="barHeight"
|
||||||
|
:block-size="blockSize"
|
||||||
|
:background-color="backgroundColor"
|
||||||
|
:active-color="slider2.activeColor"
|
||||||
|
:format="format2"
|
||||||
|
:decorationVisible="slider2.decorationVisible"
|
||||||
|
@change="handleRangeChange"
|
||||||
|
></slider-range>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SliderRange from '../../components/slider-range/index.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
SliderRange,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
barHeight: 3,
|
||||||
|
blockSize: 26,
|
||||||
|
backgroundColor: '#EEEEF6',
|
||||||
|
slider1: {
|
||||||
|
min: 50,
|
||||||
|
max: 200,
|
||||||
|
step: 10,
|
||||||
|
rangeValue: [50, 150],
|
||||||
|
},
|
||||||
|
slider2: {
|
||||||
|
rangeMin: 0,
|
||||||
|
rangMax: 100,
|
||||||
|
rangeValue: [8, 80],
|
||||||
|
step: 1,
|
||||||
|
activeColor: '#FF6B00',
|
||||||
|
decorationVisible: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
format1(val) {
|
||||||
|
return val
|
||||||
|
},
|
||||||
|
format2(val) {
|
||||||
|
return `${val}%`
|
||||||
|
},
|
||||||
|
handleRangeChange(e) {
|
||||||
|
this.rangeValue = e
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.demo-slider-range {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 100rpx 40rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
padding: 0 0 20rpx;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-item:not(:last-child) {
|
||||||
|
margin-bottom: 100rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,411 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f6f6fa;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
flex: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Filter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Filter_right {
|
||||||
|
width: 133rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #FF370B;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Filter_right image {
|
||||||
|
width: 26rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-left: 7rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iptBox {
|
||||||
|
width: 431rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
margin-left: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iptBox image {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.iptBox .u-input {
|
||||||
|
padding: 0 !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.Filter_left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterItem {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #222222;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterItem image {
|
||||||
|
width: 24rpx;
|
||||||
|
height: 15rpx;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterList {
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_left {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_right {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 40rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_info {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 12rpx 0 20rpx 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.MasterItem_Info_left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: 130rpx;
|
||||||
|
margin-right: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_left image {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 130rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state {
|
||||||
|
width: 110rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: -20rpx;
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state1 {
|
||||||
|
background: #AECE2B;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.state2 {
|
||||||
|
background: #CECECE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state3 {
|
||||||
|
background: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Medal {
|
||||||
|
width: 35rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-left: 6rpx;
|
||||||
|
margin-right: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star {
|
||||||
|
width: 22rpx;
|
||||||
|
height: 22rpx;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_1 span {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_2 {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_3 {
|
||||||
|
font-size: 26rpx;
|
||||||
|
display: flex;
|
||||||
|
color: #999999;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_3 span {
|
||||||
|
color: #FF370B;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_4 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagItem {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #555555;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag1 {
|
||||||
|
background: rgba(255, 178, 23, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag2 {
|
||||||
|
background: rgba(255, 81, 42, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag3 {
|
||||||
|
background: rgba(175, 175, 175, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_5 {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_5 span {
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_6 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_Info_right_6 image {
|
||||||
|
width: 110rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.MasterItem_more {
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #FF370B;
|
||||||
|
padding: 30rpx 0;
|
||||||
|
border-top: 1rpx solid #EBEBEB;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Btn {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
width: 600rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 60rpx;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.local {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.local span {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-x: auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMoreItem {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #222222;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f6f6fa;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 10rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore2_item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore2_item_left {}
|
||||||
|
|
||||||
|
.active2 {
|
||||||
|
color: #ff702c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore2_item_left2 {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.filterMore3Item {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #555555;
|
||||||
|
width: 130rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 40rpx;
|
||||||
|
margin-bottom: 18rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filterMore3Item:nth-child(4n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fullscreen-black-bg {
|
||||||
|
/* position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: rgba(0, 0, 0, .4);
|
||||||
|
box-sizing: border-box;
|
||||||
|
z-index: 9;
|
||||||
|
overflow: hidden; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterMore3 {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.FilterMore {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialogBox{
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgba(0, 0, 0, .4);
|
||||||
|
z-index:8;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
@ -1,5 +1,176 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
|
<view class="searchBox_add">
|
||||||
|
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||||||
|
</view>
|
||||||
|
<div class="iptBox">
|
||||||
|
<image src="http://192.168.0.172:5500/com_communitySearchIcon.png"></image>
|
||||||
|
<u--input placeholder="请输入内容" border="none" v-model="value" @change="change"></u--input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="Filter">
|
||||||
|
<div class="Filter_left">
|
||||||
|
<div class="FilterItem" @click="show1=!show1">
|
||||||
|
附近
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="FilterItem">
|
||||||
|
综合
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="FilterItem">
|
||||||
|
排序
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="FilterItem">
|
||||||
|
分类
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="FilterItem">
|
||||||
|
地区
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filterMore.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Filter_right">
|
||||||
|
筛选
|
||||||
|
<image src="http://192.168.0.172:5500/homeServer_filter.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 位置筛选 -->
|
||||||
|
<div class="FilterMore" v-if="show1">
|
||||||
|
<div class="local">距离 <span>上海公馆</span></div>
|
||||||
|
<div class="filterMore1">
|
||||||
|
<div class="filterMoreItem">附近</div>
|
||||||
|
<div class="filterMoreItem">500m</div>
|
||||||
|
<div class="filterMoreItem">1km</div>
|
||||||
|
<div class="filterMoreItem">3km</div>
|
||||||
|
<div class="filterMoreItem">5km</div>
|
||||||
|
<div class="filterMoreItem">10km</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 综合筛选 -->
|
||||||
|
<div class="FilterMore" v-if="show2">
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left">综合</div>
|
||||||
|
<div class="filterMore2_item_right">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left active2">从高到低</div>
|
||||||
|
<div class="filterMore2_item_right">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left">从低到高</div>
|
||||||
|
<div class="filterMore2_item_right">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 排序筛选 -->
|
||||||
|
<div class="FilterMore" v-if="show3">
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left2">智能排序</div>
|
||||||
|
<div class="filterMore2_item_right">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left2 active2">距离优先</div>
|
||||||
|
<div class="filterMore2_item_right">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left2">好评优先</div>
|
||||||
|
<div class="filterMore2_item_right">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="filterMore2_item">
|
||||||
|
<div class="filterMore2_item_left2">销量优先</div>
|
||||||
|
<div class="filterMore2_item_right">
|
||||||
|
<u-icon name="checkmark-circle-fill" color="#ff702c"></u-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 分类筛选 -->
|
||||||
|
<div class="FilterMore3" v-if="show4">
|
||||||
|
<div class="filterMore3Item" v-for="(item,index) in 9" :key="index">家电维修</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="main">
|
||||||
|
<!-- 遮罩 -->
|
||||||
|
<div class="dialogBox" v-if="show1"></div>
|
||||||
|
|
||||||
|
<div class="MasterList">
|
||||||
|
<div class="MasterItem" v-for="(item, index) in 3" :key="index">
|
||||||
|
<div class="MasterItem_left">
|
||||||
|
<image src="http://192.168.0.172:5500/community_providentFund_Group_1444.png"></image>
|
||||||
|
<image v-if="false" src="http://192.168.0.172:5500/community_providentFund_Ellipse_160.png"></image>
|
||||||
|
</div>
|
||||||
|
<div class="MasterItem_right">
|
||||||
|
<div class="MasterItem_info">
|
||||||
|
<div class="MasterItem_Info_left">
|
||||||
|
<image src="http://192.168.0.172:5500/home_icon12.png"></image>
|
||||||
|
<div class="state state1">待服务</div>
|
||||||
|
<div class="state state2" v-if="false">休息中</div>
|
||||||
|
<div class="state state3" v-if="false">服务中</div>
|
||||||
|
</div>
|
||||||
|
<div class="MasterItem_Info_right">
|
||||||
|
<div class="MasterItem_Info_right_1">
|
||||||
|
林师傅
|
||||||
|
<image class="Medal" src="http://192.168.0.172:5500/homeServer_Champion.png"></image>
|
||||||
|
<image class="Medal" v-if="false"
|
||||||
|
src="http://192.168.0.172:5500/homeServer_RunnerUp.png">
|
||||||
|
</image>
|
||||||
|
<image class="star" src="http://192.168.0.172:5500/local_start1.png"></image>
|
||||||
|
<span>4.8</span>
|
||||||
|
</div>
|
||||||
|
<div class="MasterItem_Info_right_2">52岁 广东梅州人 5-10年</div>
|
||||||
|
<div class="MasterItem_Info_right_3">
|
||||||
|
<span>500+</span>预定 <span>100+</span>评价
|
||||||
|
</div>
|
||||||
|
<div class="MasterItem_Info_right_4">
|
||||||
|
<div class="tagItem tag1">积极主动</div>
|
||||||
|
<div class="tagItem tag2">技术精湛</div>
|
||||||
|
<div class="tagItem tag3">技术精湛</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="MasterItem_Info_right_5">
|
||||||
|
价格范围： <span>￥500-￥800</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="MasterItem_Info_right_6">
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="MasterItem_more" @click="masterInfo">
|
||||||
|
查看资料
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="Btn">
|
||||||
|
确定
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -12,19 +183,26 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
top: "",
|
top: "",
|
||||||
localHeight: ""
|
localHeight: "",
|
||||||
|
show1:false,
|
||||||
|
show2:false,
|
||||||
|
show3:false,
|
||||||
|
show4:false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
masterInfo(){
|
||||||
|
NavgateTo("../masterInfo/index")
|
||||||
|
},
|
||||||
},
|
},
|
||||||
onReady() {
|
onReady() {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
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() {
|
||||||
|
|||||||
@ -0,0 +1,180 @@
|
|||||||
|
page {
|
||||||
|
background-color: #f6f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox_left,
|
||||||
|
.searchBox_right,
|
||||||
|
.searchBox_mid {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox_left {
|
||||||
|
padding-left: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox_right {
|
||||||
|
opacity: 0;
|
||||||
|
padding-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchBox_mid {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #222222;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 30rx;
|
||||||
|
background-color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner swiper {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 710rpx;
|
||||||
|
height: 307rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dotList {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 8rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: #555555;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: #FF370B;
|
||||||
|
width: 20rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master {
|
||||||
|
background-color: #fff;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
padding: 26rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: 130rpx;
|
||||||
|
margin-right: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_left image {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 130rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state {
|
||||||
|
width: 110rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: -20rpx;
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state1 {
|
||||||
|
background: #AECE2B;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.state2 {
|
||||||
|
background: #CECECE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state3 {
|
||||||
|
background: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right{
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.master_info_right1 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Medal {
|
||||||
|
width: 35rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
margin-left: 6rpx;
|
||||||
|
margin-right: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.star {
|
||||||
|
width: 22rpx;
|
||||||
|
height: 22rpx;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right1 span {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right2 {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right2 span {
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
|
.master_info_right3{
|
||||||
|
margin-top: 13rpx;
|
||||||
|
}
|
||||||
|
.master_info_right3_item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right3_item span {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #222222;
|
||||||
|
margin-left: 23rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.master_info_right3_item>div{
|
||||||
|
margin-right: 27rpx;
|
||||||
|
}
|
||||||
@ -1,5 +1,69 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
|
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||||||
|
<view class="searchBox_left">
|
||||||
|
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||||||
|
</view>
|
||||||
|
<div class="searchBox_mid">
|
||||||
|
刘师傅
|
||||||
|
</div>
|
||||||
|
<div class="searchBox_right">
|
||||||
|
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<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="master">
|
||||||
|
<div class="master_info">
|
||||||
|
<div class="master_info_left">
|
||||||
|
<image src="http://192.168.0.172:5500/home_icon12.png"></image>
|
||||||
|
<div class="state state1">待服务</div>
|
||||||
|
<div class="state state2" v-if="false">休息中</div>
|
||||||
|
<div class="state state3" v-if="false">服务中</div>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right">
|
||||||
|
<div class="master_info_right1">
|
||||||
|
林师傅
|
||||||
|
<image class="Medal" src="http://192.168.0.172:5500/homeServer_Champion.png"></image>
|
||||||
|
<image class="Medal" v-if="false" src="http://192.168.0.172:5500/homeServer_RunnerUp.png">
|
||||||
|
</image>
|
||||||
|
<image class="star" src="http://192.168.0.172:5500/local_start1.png"></image>
|
||||||
|
<span>4.8</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right2">
|
||||||
|
价格范围： <span>￥500-￥800</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right3">
|
||||||
|
<div class="master_info_right3_item">
|
||||||
|
<div>专业性</div>
|
||||||
|
<u-line-progress class="gradient-progress" :showText="false" :percentage="30" activeColor="transparent"></u-line-progress>
|
||||||
|
<span>80分</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right3_item">
|
||||||
|
<div>好评率</div>
|
||||||
|
<u-line-progress class="gradient-progress" :showText="false" :percentage="30" activeColor="transparent"></u-line-progress>
|
||||||
|
<span>80%</span>
|
||||||
|
</div>
|
||||||
|
<div class="master_info_right3_item">
|
||||||
|
<div>准时率</div>
|
||||||
|
<u-line-progress class="gradient-progress" :showText="false" :percentage="30" activeColor="transparent"></u-line-progress>
|
||||||
|
<span>80%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -22,7 +86,7 @@ export default {
|
|||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
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;
|
||||||
@ -43,4 +107,9 @@ export default {
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import url("./index.css");
|
@import url("./index.css");
|
||||||
|
|
||||||
|
/* 添加渐变色样式 */
|
||||||
|
.gradient-progress .u-line-progress__active {
|
||||||
|
background: linear-gradient( 90deg, #FFFFFF 0%, #FF370B 100%);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -0,0 +1,189 @@
|
|||||||
|
.banner {
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner swiper {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 710rpx;
|
||||||
|
height: 307rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dotList {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 8rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: #555555;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: #FF370B;
|
||||||
|
width: 20rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
height: 20rpx;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #f6f7fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serverTitBox {
|
||||||
|
padding: 30rpx 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serverTit {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serverTit_right {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serverTit_left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #222222;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #E9BE62;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serverCon {
|
||||||
|
margin-top: 30rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.priceSelect {
|
||||||
|
padding: 24rpx 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serverList {
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serverListTit {
|
||||||
|
font-size: 63rpx;
|
||||||
|
color: #222222;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serverItem {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-bottom: 1rpx solid #EBEBEB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serverItem_left {
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
margin-right: 14rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serverItem_right {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg_tit {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #222222;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg_price {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: rgba(153, 153, 153, 0.6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg_price span {
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.serverItem_right_btn {
|
||||||
|
width: 180rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
background: #FF370B;
|
||||||
|
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.range {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
/* 防止内容溢出 */
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.minPrice,
|
||||||
|
.maxPrice {
|
||||||
|
width: 70rpx;
|
||||||
|
height: 70rpx;
|
||||||
|
background: #F6F7FB;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider-range {
|
||||||
|
flex: 1 !important;
|
||||||
|
margin: 0 10rpx;
|
||||||
|
/* 添加左右间距 */
|
||||||
|
min-width: 0;
|
||||||
|
/* 防止 flex 子项溢出 */
|
||||||
|
}
|
||||||
@ -1,5 +1,65 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -7,22 +67,38 @@
|
|||||||
<script>
|
<script>
|
||||||
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
|
import { request, picUrl, NavgateTo, menuButtonInfo } from '../../../utils/index';
|
||||||
import { apiArr } from '../../../api/reservation';
|
import { apiArr } from '../../../api/reservation';
|
||||||
|
import SliderRange from '@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components: {
|
||||||
|
// 注册组件
|
||||||
|
SliderRange
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
top: "",
|
top: "",
|
||||||
localHeight: ""
|
localHeight: "",
|
||||||
|
rangeMin: 5,
|
||||||
|
rangeMax: 200,
|
||||||
|
rangeValue: [10, 50]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
format(val) {
|
||||||
|
return val + '%'
|
||||||
|
},
|
||||||
|
handleRangeChange(e) {
|
||||||
|
this.rangeValue = e
|
||||||
|
},
|
||||||
|
selectMaster(){
|
||||||
|
NavgateTo("../chooseMaster/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;
|
||||||
|
|||||||
@ -640,8 +640,8 @@
|
|||||||
"path": "serverInfo/index",
|
"path": "serverInfo/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarBackgroundColor": "#fff",
|
"navigationBarBackgroundColor": "#fff",
|
||||||
"navigationStyle": "custom",
|
|
||||||
"navigationBarTitleText": "服务详情"
|
"navigationBarTitleText": "服务详情"
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user