aa
This commit is contained in:
parent
bb7dce95af
commit
6390fccd51
|
|
@ -59,6 +59,15 @@
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "order/order_detail",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText" : "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ... 分包A的其他页面
|
// ... 分包A的其他页面
|
||||||
|
|
|
||||||
|
|
@ -1,38 +1,35 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="page">
|
<view class="page">
|
||||||
|
|
||||||
<u-navbar title="地图" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
<u-navbar title="地图" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||||
height='36'></u-navbar>
|
height='36'></u-navbar>
|
||||||
|
<view class="slider">
|
||||||
|
<view class="tit">
|
||||||
|
电量区间
|
||||||
|
</view>
|
||||||
|
<slider-range :value="rangeValue" :min="rangeMin" :max="rangMax" :step="1" :bar-height="3" :block-size="20"
|
||||||
|
background-color="#EEEEF6" active-color="#4C97E7" :format="format" :decorationVisible="true"
|
||||||
|
@change="handleRangeChange"></slider-range>
|
||||||
|
</view>
|
||||||
|
|
||||||
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
||||||
:show-location="true" :markers="markers" :polygons="polyline" @markertap="onMarkerTap">
|
:show-location="true" :markers="markers" :polygons="polyline" @markertap="onMarkerTap">
|
||||||
</map>
|
</map>
|
||||||
<view class="bot">
|
<view class="btn_box">
|
||||||
<view class="btn" @click="topage()">
|
<view class="btn1">
|
||||||
维修换电
|
车辆扫码
|
||||||
</view>
|
</view>
|
||||||
<view class="info">
|
<view class="btn2">
|
||||||
|
车辆搜索
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="decice_cont">
|
||||||
<view class="cont">
|
<view class="cont">
|
||||||
<view class="cont_top">
|
<view class="text">
|
||||||
全部工单
|
全部设备
|
||||||
</view>
|
|
||||||
<view class="cont_bot">
|
|
||||||
{{infonum.allNum}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="cont">
|
|
||||||
<view class="cont_top">
|
|
||||||
待换电
|
|
||||||
</view>
|
|
||||||
<view class="cont_bot">
|
|
||||||
{{infonum.powerReplacementNum}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="cont">
|
|
||||||
<view class="cont_top">
|
|
||||||
待维修
|
|
||||||
</view>
|
|
||||||
<view class="cont_bot">
|
|
||||||
{{infonum.repairNum}}
|
|
||||||
</view>
|
</view>
|
||||||
|
<view class="text">
|
||||||
|
1
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -41,6 +38,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import SliderRange from '@/pages_admin/components/primewind-sliderrange/index.vue'
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -57,9 +55,15 @@
|
||||||
fixdata: [],
|
fixdata: [],
|
||||||
eledata: [],
|
eledata: [],
|
||||||
listData: [],
|
listData: [],
|
||||||
infonum:{}
|
infonum: {},
|
||||||
|
rangeMin: 0,
|
||||||
|
rangMax: 100,
|
||||||
|
rangeValue: [0, 100]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
components: {
|
||||||
|
SliderRange
|
||||||
|
},
|
||||||
onShow() {
|
onShow() {
|
||||||
this.$store.dispatch('userInfo', this.$u).then(() => {
|
this.$store.dispatch('userInfo', this.$u).then(() => {
|
||||||
|
|
||||||
|
|
@ -76,6 +80,12 @@
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
format(val) {
|
||||||
|
return val + '%'
|
||||||
|
},
|
||||||
|
handleRangeChange(e) {
|
||||||
|
this.rangeValue = e
|
||||||
|
},
|
||||||
onMarkerTap(e) {
|
onMarkerTap(e) {
|
||||||
if (e.type === 'markertap') {
|
if (e.type === 'markertap') {
|
||||||
console.log('点击了标记：', e.markerId);
|
console.log('点击了标记：', e.markerId);
|
||||||
|
|
@ -265,64 +275,65 @@
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
width: 750rpx;
|
width: 750rpx;
|
||||||
|
.decice_cont{
|
||||||
.map {
|
display: flex;
|
||||||
width: 750rpx;
|
align-items: center;
|
||||||
height: 1250rpx;
|
padding: 22rpx 28rpx;
|
||||||
|
.cont{
|
||||||
|
width: 120rpx;
|
||||||
|
.text{
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 38rpx;
|
||||||
|
color: #3D3D3D;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.bot {
|
}
|
||||||
padding: 40rpx 32rpx;
|
.btn_box{
|
||||||
position: fixed;
|
width: 100%;
|
||||||
bottom: 0;
|
display: flex;
|
||||||
width: 750rpx;
|
flex-wrap: nowrap;
|
||||||
height: 272rpx;
|
.btn1{
|
||||||
background: #fff;
|
|
||||||
border-radius: 60rpx 60rpx 0 0;
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 686rpx;
|
width: 376rpx;
|
||||||
height: 90rpx;
|
height: 74rpx;
|
||||||
|
background: #D4ECFF;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #4C97E7;
|
||||||
|
}
|
||||||
|
.btn2{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 374rpx;
|
||||||
|
height: 74rpx;
|
||||||
background: #4C97E7;
|
background: #4C97E7;
|
||||||
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.info {
|
.slider{
|
||||||
margin-top: 24rpx;
|
.tit{
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
|
|
||||||
.cont {
|
|
||||||
width: 112rpx;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.cont_top {
|
|
||||||
text-align: center;
|
|
||||||
width: 112rpx;
|
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #3D3D3D;
|
color: #3D3D3D;
|
||||||
}
|
}
|
||||||
|
width: 752rpx;
|
||||||
|
height: 150rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0,0,0,0.07);
|
||||||
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||||
|
}
|
||||||
|
.map {
|
||||||
|
width: 750rpx;
|
||||||
|
height: 906rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.cont_bot {
|
|
||||||
text-align: center;
|
|
||||||
width: 112rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #3D3D3D;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<u-mask :show="show" @click="show = false" :z-index='100' />
|
<u-mask :show="show" @click="show = false" :z-index='100' />
|
||||||
<view class="tip_box" v-if="show">
|
<view class="tip_box" v-if="showfz">
|
||||||
<view class="top">
|
<view class="top">
|
||||||
<view class="tip">
|
<view class="tip">
|
||||||
提示
|
提示
|
||||||
|
|
@ -63,6 +63,122 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="tip_box" v-if="showgj">
|
||||||
|
<view class="top">
|
||||||
|
<view class="tip">
|
||||||
|
改价
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="ipt_box">
|
||||||
|
<view class="text">
|
||||||
|
租赁费
|
||||||
|
</view>
|
||||||
|
<view class="ipt">
|
||||||
|
<input type="text"
|
||||||
|
v-model="searchKeyword"
|
||||||
|
placeholder="0.00"
|
||||||
|
class="input"
|
||||||
|
placeholder-style="color:#C7CDD3"
|
||||||
|
>
|
||||||
|
元
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="ipt_box">
|
||||||
|
<view class="text">
|
||||||
|
租赁费
|
||||||
|
</view>
|
||||||
|
<view class="ipt">
|
||||||
|
<input type="text"
|
||||||
|
v-model="searchKeyword"
|
||||||
|
placeholder="0.00"
|
||||||
|
class="input"
|
||||||
|
placeholder-style="color:#C7CDD3"
|
||||||
|
>
|
||||||
|
元
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bot">
|
||||||
|
<view class="bot_left" @click="show=false">
|
||||||
|
取消
|
||||||
|
</view>
|
||||||
|
<view class="bot_right">
|
||||||
|
确定
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="tip_box" v-if="showtk">
|
||||||
|
<view class="top">
|
||||||
|
<view class="tip">
|
||||||
|
退款
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="ipt_box">
|
||||||
|
<view class="text">
|
||||||
|
租赁费
|
||||||
|
</view>
|
||||||
|
<view class="ipt">
|
||||||
|
<input type="text"
|
||||||
|
v-model="searchKeyword"
|
||||||
|
placeholder="0.00"
|
||||||
|
class="input"
|
||||||
|
placeholder-style="color:#C7CDD3"
|
||||||
|
>
|
||||||
|
元
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="ipt_box">
|
||||||
|
<view class="text">
|
||||||
|
调度费
|
||||||
|
</view>
|
||||||
|
<view class="ipt">
|
||||||
|
<input type="text"
|
||||||
|
v-model="searchKeyword"
|
||||||
|
placeholder="0.00"
|
||||||
|
class="input"
|
||||||
|
placeholder-style="color:#C7CDD3"
|
||||||
|
>
|
||||||
|
元
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="ipt_box">
|
||||||
|
<view class="text">
|
||||||
|
管理费
|
||||||
|
</view>
|
||||||
|
<view class="ipt">
|
||||||
|
<input type="text"
|
||||||
|
v-model="searchKeyword"
|
||||||
|
placeholder="0.00"
|
||||||
|
class="input"
|
||||||
|
placeholder-style="color:#C7CDD3"
|
||||||
|
>
|
||||||
|
元
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="ipt_box">
|
||||||
|
<view class="text">
|
||||||
|
原因
|
||||||
|
</view>
|
||||||
|
<view class="ipt">
|
||||||
|
<input type="text"
|
||||||
|
v-model="searchKeyword"
|
||||||
|
placeholder="选填"
|
||||||
|
class="input"
|
||||||
|
placeholder-style="color:#C7CDD3"
|
||||||
|
>
|
||||||
|
元
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bot">
|
||||||
|
<view class="bot_left" @click="show=false">
|
||||||
|
取消
|
||||||
|
</view>
|
||||||
|
<view class="bot_right">
|
||||||
|
确定
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
<u-picker mode="time" v-model="time1" :params="params" @confirm="confirm1" :default-time='pickertime'></u-picker>
|
<u-picker mode="time" v-model="time1" :params="params" @confirm="confirm1" :default-time='pickertime'></u-picker>
|
||||||
<u-picker mode="time" v-model="time2" :params="params" @confirm="confirm2" :default-time='pickertime'></u-picker>
|
<u-picker mode="time" v-model="time2" :params="params" @confirm="confirm2" :default-time='pickertime'></u-picker>
|
||||||
<view class="warp_box">
|
<view class="warp_box">
|
||||||
|
|
@ -171,7 +287,10 @@
|
||||||
eledata: [],
|
eledata: [],
|
||||||
listData: [],
|
listData: [],
|
||||||
alreadyList:[],
|
alreadyList:[],
|
||||||
show:true
|
show:true,
|
||||||
|
showfz:false,
|
||||||
|
showgj:false,
|
||||||
|
showtk:true
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -253,6 +372,32 @@
|
||||||
padding-bottom: 100rpx;
|
padding-bottom: 100rpx;
|
||||||
.top {
|
.top {
|
||||||
padding: 52rpx 38rpx 42rpx 36rpx;
|
padding: 52rpx 38rpx 42rpx 36rpx;
|
||||||
|
.ipt_box{
|
||||||
|
margin-top: 22rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
.text{
|
||||||
|
width: 96rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #3D3D3D;
|
||||||
|
}
|
||||||
|
.ipt{
|
||||||
|
padding: 10rpx 18rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-left: 26rpx;
|
||||||
|
width: 420rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||||
|
border: 2rpx solid #979797;
|
||||||
|
.input{
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.tip{
|
.tip{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
378
pages_admin/components/primewind-sliderrange/index.vue
Normal file
378
pages_admin/components/primewind-sliderrange/index.vue
Normal file
|
|
@ -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>
|
||||||
324
pages_admin/order/order_detail.vue
Normal file
324
pages_admin/order/order_detail.vue
Normal file
|
|
@ -0,0 +1,324 @@
|
||||||
|
<template>
|
||||||
|
<view class="page">
|
||||||
|
<u-navbar title="订单详情" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||||
|
height='36'></u-navbar>
|
||||||
|
<map class="map" id="map" ref="map" :scale="zoomSize" :latitude="latitude" :longitude="longitude"
|
||||||
|
:show-location='true' :polygons='polygons' :markers="markers" :polyline="polyline"></map>
|
||||||
|
<view class="info_card">
|
||||||
|
<view class="info_tit">
|
||||||
|
基本信息
|
||||||
|
</view>
|
||||||
|
<view class="lines"></view>
|
||||||
|
<view class="cont">
|
||||||
|
<view class="info_li">
|
||||||
|
订单编号：<span>2169987651526787</span>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
租赁用户：<span style="color:#4C97E7 ;">13056449832</span>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
<view class="half_infoli">
|
||||||
|
租赁时长：<span>6分钟</span>
|
||||||
|
</view>
|
||||||
|
<view class="half_infoli">
|
||||||
|
行驶距离：<span>1Km</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
订单状态：<span>已完成</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info_card" style="margin-top: 20rpx;">
|
||||||
|
<view class="info_tit">
|
||||||
|
设备信息
|
||||||
|
</view>
|
||||||
|
<view class="lines"></view>
|
||||||
|
<view class="cont">
|
||||||
|
|
||||||
|
<view class="info_li">
|
||||||
|
<view class="half_infoli">
|
||||||
|
车牌号：<span>6分钟</span>
|
||||||
|
</view>
|
||||||
|
<view class="half_infoli">
|
||||||
|
IMIE：<span>1Km</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
<view class="half_infoli">
|
||||||
|
车辆编号：<span>6分钟</span>
|
||||||
|
</view>
|
||||||
|
<view class="half_infoli">
|
||||||
|
运营区域：<span>1Km</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="info_card" style="margin-top: 20rpx;">
|
||||||
|
<view class="info_tit">
|
||||||
|
行程记录
|
||||||
|
</view>
|
||||||
|
<view class="lines"></view>
|
||||||
|
<view class="cont">
|
||||||
|
|
||||||
|
<view class="info_li">
|
||||||
|
开锁时间：<span>2024-04-29 15:22:56</span>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
开锁地点：<span>120.56189，27.12379</span>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
锁车时间：<span>120.56189，27.12379</span>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
锁车地点：<span>120.56189，27.12379</span>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
解除时间：<span>120.56189，27.12379</span>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
关锁时间：<span>120.56189，27.12379</span>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
关锁地点：<span>120.56189，27.12379</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info_card" style="margin-top: 20rpx;">
|
||||||
|
<view class="info_tit">
|
||||||
|
费用明细
|
||||||
|
<view class="money">
|
||||||
|
结算总费用：￥0.00
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="lines"></view>
|
||||||
|
<view class="cont">
|
||||||
|
|
||||||
|
<view class="info_li">
|
||||||
|
<view class="half_infoli">
|
||||||
|
租赁费用：<span>6分钟</span>
|
||||||
|
</view>
|
||||||
|
<view class="half_infoli">
|
||||||
|
调度费：<span>1Km</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
<view class="half_infoli">
|
||||||
|
管理费：<span>6分钟</span>
|
||||||
|
</view>
|
||||||
|
<view class="half_infoli">
|
||||||
|
实收：<span>1Km</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
支付方式：<span>120.56189，27.12379</span>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
计费模板：<span>120.56189，27.12379</span>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
支付时间：<span>120.56189，27.12379</span>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<view class="lines"></view>
|
||||||
|
<view class="cont">
|
||||||
|
|
||||||
|
|
||||||
|
<view class="info_li">
|
||||||
|
<view class="half_infoli">
|
||||||
|
租赁费退款：<span>6分钟</span>
|
||||||
|
</view>
|
||||||
|
<view class="half_infoli">
|
||||||
|
调度费退款：<span>1Km</span>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
管理费退款：<span>120.56189，27.12379</span>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
退款原因：<span>120.56189，27.12379</span>
|
||||||
|
</view>
|
||||||
|
<view class="info_li">
|
||||||
|
退款时间：<span>120.56189，27.12379</span>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="bot">
|
||||||
|
<view class="btn">
|
||||||
|
退款
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
bgc: {
|
||||||
|
backgroundColor: "#F7FAFE",
|
||||||
|
},
|
||||||
|
latitude: 39.916527,
|
||||||
|
longitude: 116.397128,
|
||||||
|
isMap: false,
|
||||||
|
zoomSize: 15,
|
||||||
|
markers: [{
|
||||||
|
id: 1,
|
||||||
|
latitude: 39.90469,
|
||||||
|
longitude: 116.40717,
|
||||||
|
title: 'Marker1'
|
||||||
|
}, {
|
||||||
|
id: 2,
|
||||||
|
latitude: 39.90969,
|
||||||
|
longitude: 116.41217,
|
||||||
|
title: 'Marker2'
|
||||||
|
}],
|
||||||
|
polyline: [{
|
||||||
|
points: [{
|
||||||
|
latitude: 39.916527,
|
||||||
|
longitude: 116.397128
|
||||||
|
}, {
|
||||||
|
latitude: 39.926527,
|
||||||
|
longitude: 116.397128
|
||||||
|
}, {
|
||||||
|
latitude: 39.926527,
|
||||||
|
longitude: 116.407128
|
||||||
|
}, {
|
||||||
|
latitude: 39.916527,
|
||||||
|
longitude: 116.407128
|
||||||
|
}],
|
||||||
|
width: 8,
|
||||||
|
arrowLine: true,
|
||||||
|
color: '#00AF99'
|
||||||
|
// strokeWidth: 2,
|
||||||
|
// strokeColor: '#00AF99',
|
||||||
|
// fillColor: '#00AF99'
|
||||||
|
}, ],
|
||||||
|
polygons: [{
|
||||||
|
points: [{
|
||||||
|
latitude: 39.918527,
|
||||||
|
longitude: 116.400128
|
||||||
|
},
|
||||||
|
{
|
||||||
|
latitude: 39.922527,
|
||||||
|
longitude: 116.400128
|
||||||
|
},
|
||||||
|
{
|
||||||
|
latitude: 39.924527,
|
||||||
|
longitude: 116.405128
|
||||||
|
},
|
||||||
|
{
|
||||||
|
latitude: 39.912527,
|
||||||
|
longitude: 116.402128
|
||||||
|
}
|
||||||
|
],
|
||||||
|
strokeColor: '#00FF00DD', // 使用不同的颜色来区分第二个区域
|
||||||
|
strokeWidth: 2,
|
||||||
|
fillColor: '#00FF00DD'
|
||||||
|
}],
|
||||||
|
cardId: '001区域'
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background-color: #F3F3F3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
padding-bottom: 200rpx;
|
||||||
|
width: 750rpx;
|
||||||
|
|
||||||
|
.map {
|
||||||
|
width: 750rpx;
|
||||||
|
height: 752rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info_card {
|
||||||
|
background: #FFFFFF;
|
||||||
|
|
||||||
|
.info_tit {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
padding: 22rpx 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #3D3D3D;
|
||||||
|
.money{
|
||||||
|
margin-left: auto;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #4C97E7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lines {
|
||||||
|
width: 750rpx;
|
||||||
|
height: 2rpx;
|
||||||
|
border: 2rpx solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cont {
|
||||||
|
padding: 26rpx 28rpx;
|
||||||
|
|
||||||
|
.info_li {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #808080;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #3D3D3D;
|
||||||
|
}
|
||||||
|
|
||||||
|
line-height: 48rpx;
|
||||||
|
|
||||||
|
.half_infoli {
|
||||||
|
width: 50%;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #808080;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #3D3D3D;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bot {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: 750rpx;
|
||||||
|
height: 184rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08), 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
|
||||||
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
margin: 46rpx auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 680rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
background: #4C97E7;
|
||||||
|
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user