aa
This commit is contained in:
parent
bb7dce95af
commit
6390fccd51
|
|
@ -59,6 +59,15 @@
|
|||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "order/order_detail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
|
||||
// ... 分包A的其他页面
|
||||
|
|
|
|||
|
|
@ -1,38 +1,35 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
|
||||
<u-navbar title="地图" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||||
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"
|
||||
:show-location="true" :markers="markers" :polygons="polyline" @markertap="onMarkerTap">
|
||||
</map>
|
||||
<view class="bot">
|
||||
<view class="btn" @click="topage()">
|
||||
维修换电
|
||||
<view class="btn_box">
|
||||
<view class="btn1">
|
||||
车辆扫码
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="cont">
|
||||
<view class="cont_top">
|
||||
全部工单
|
||||
</view>
|
||||
<view class="cont_bot">
|
||||
{{infonum.allNum}}
|
||||
</view>
|
||||
<view class="btn2">
|
||||
车辆搜索
|
||||
</view>
|
||||
</view>
|
||||
<view class="decice_cont">
|
||||
<view class="cont">
|
||||
<view class="text">
|
||||
全部设备
|
||||
</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 class="text">
|
||||
1
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -41,6 +38,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import SliderRange from '@/pages_admin/components/primewind-sliderrange/index.vue'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -57,9 +55,15 @@
|
|||
fixdata: [],
|
||||
eledata: [],
|
||||
listData: [],
|
||||
infonum:{}
|
||||
infonum: {},
|
||||
rangeMin: 0,
|
||||
rangMax: 100,
|
||||
rangeValue: [0, 100]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SliderRange
|
||||
},
|
||||
onShow() {
|
||||
this.$store.dispatch('userInfo', this.$u).then(() => {
|
||||
|
||||
|
|
@ -76,6 +80,12 @@
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
format(val) {
|
||||
return val + '%'
|
||||
},
|
||||
handleRangeChange(e) {
|
||||
this.rangeValue = e
|
||||
},
|
||||
onMarkerTap(e) {
|
||||
if (e.type === 'markertap') {
|
||||
console.log('点击了标记：', e.markerId);
|
||||
|
|
@ -92,7 +102,7 @@
|
|||
for (let item of this.fixdata) {
|
||||
if (item.sn == this.sn) {
|
||||
uni.navigateTo({
|
||||
url:'/page_fix/repair/repair_detail?id='+item.id
|
||||
url: '/page_fix/repair/repair_detail?id=' + item.id
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -100,7 +110,7 @@
|
|||
for (let item of this.eledata) {
|
||||
if (item.sn == this.sn) {
|
||||
uni.navigateTo({
|
||||
url:'/page_fix/repair/repair_detail?id='+item.id
|
||||
url: '/page_fix/repair/repair_detail?id=' + item.id
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -169,7 +179,7 @@
|
|||
this.$u.get('/appVerify/adminOrder/num?adminId=' + 2).then((res) => {
|
||||
if (res.code === 200) {
|
||||
// 处理接口返回的数据，将边界数据转换为地图组件需要的折线结构
|
||||
this.infonum=res.data
|
||||
this.infonum = res.data
|
||||
// console.log(this.polyline);
|
||||
}
|
||||
}).catch(error => {
|
||||
|
|
@ -265,64 +275,65 @@
|
|||
|
||||
.page {
|
||||
width: 750rpx;
|
||||
|
||||
.map {
|
||||
width: 750rpx;
|
||||
height: 1250rpx;
|
||||
.decice_cont{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 750rpx;
|
||||
height: 272rpx;
|
||||
background: #fff;
|
||||
border-radius: 60rpx 60rpx 0 0;
|
||||
|
||||
.btn {
|
||||
.btn_box{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
.btn1{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 686rpx;
|
||||
height: 90rpx;
|
||||
width: 376rpx;
|
||||
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;
|
||||
border-radius: 54rpx 54rpx 54rpx 54rpx;
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin-top: 24rpx;
|
||||
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-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
.cont_bot {
|
||||
text-align: center;
|
||||
width: 112rpx;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.slider{
|
||||
.tit{
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<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="tip">
|
||||
提示
|
||||
|
|
@ -63,6 +63,122 @@
|
|||
</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="time2" :params="params" @confirm="confirm2" :default-time='pickertime'></u-picker>
|
||||
<view class="warp_box">
|
||||
|
|
@ -171,7 +287,10 @@
|
|||
eledata: [],
|
||||
listData: [],
|
||||
alreadyList:[],
|
||||
show:true
|
||||
show:true,
|
||||
showfz:false,
|
||||
showgj:false,
|
||||
showtk:true
|
||||
|
||||
}
|
||||
},
|
||||
|
|
@ -253,6 +372,32 @@
|
|||
padding-bottom: 100rpx;
|
||||
.top {
|
||||
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{
|
||||
width: 100%;
|
||||
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