|
|
@@ -1,30 +1,49 @@
|
|
|
<template>
|
|
|
+ <uv-navbar leftIcon="arrow-left" @leftClick="handleLeftClick" title="门店详情"></uv-navbar>
|
|
|
<view :class="['page']">
|
|
|
- <image :src="state.station.pictures" mode="heightFix"></image>
|
|
|
+ <image :src="state.station.pictures" mode="widthFix" class="station-bg"></image>
|
|
|
|
|
|
<view class="station-box">
|
|
|
<view class=" station_wrapper">
|
|
|
- <WashStation :item=" state.station"></WashStation>
|
|
|
+ <WashStation :item=" state.station" ref="station_ref"></WashStation>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="device-box w100">
|
|
|
+ <view class="device-box">
|
|
|
<view class="device-item" v-for="device in state.deviceList" :key="device.id" @click="handleClickDevice(device)">
|
|
|
- <view class="device-item_header">
|
|
|
- <text class="device-item_header-short">No.{{ device.shortId }}</text>
|
|
|
- <text class="device-item_header-status">{{ fmtDictName('WashDevice.state', device.state) }}</text>
|
|
|
- </view>
|
|
|
- <view class="device-item_func">
|
|
|
- <view class="device-item_func-tag" v-for="f in device.functionList" :key="f">
|
|
|
- <uv-tags :text="f" size="mini" plain plainFill bgColor="#C6171E" color="white" type="error"></uv-tags>
|
|
|
+ <div class="device-item_header">
|
|
|
+ <text class="device-item_header-seq">{{ device.seqName }}</text>
|
|
|
+ <text class="device-item_header-status" :class="device.state=='idle'?'success':''">{{ fmtDictName('WashDevice.state', device.state) }}</text>
|
|
|
+ </div>
|
|
|
+ <div class="device-item_body">
|
|
|
+ <view class="device-item_body_header">
|
|
|
+ <text class="device-item_body_header-short">编号:{{ device.shortId }}</text>
|
|
|
+ <view></view>
|
|
|
+ <text class="device-item_body_header-short">服务:{{ device.functionList.join("、") }}</text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+<!-- <view class="device-item_body_func">
|
|
|
+ <view class="device-item_body_func-tag">
|
|
|
+ <uv-text text="服务:" size="mini" plain plainFill color="black" ></uv-text>
|
|
|
+ </view>
|
|
|
+ <view class="device-item_body_func-tag" v-for="f in device.functionList" :key="f">
|
|
|
+ <uv-text :text="f" size="mini" plain plainFill color="black" ></uv-text>
|
|
|
+ </view>
|
|
|
+ </view>-->
|
|
|
+ </div>
|
|
|
+
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
- <view class="scan-btn">
|
|
|
- <uv-button type="primary" icon="scan" iconColor="white" color="#C6171E" text="扫码洗车" @click="handleClickScan"></uv-button>
|
|
|
+ <view class="station-bottom">
|
|
|
+ <view class="station-bottom-box">
|
|
|
+ <view class="bottom-left">
|
|
|
+ <uv-button shape="circle" type="info" text="门店导航" @click="handleNavStation"></uv-button>
|
|
|
+ </view>
|
|
|
+ <view class="bottom-right">
|
|
|
+ <uv-button shape="circle" type="primary" icon="scan" iconColor="white" color="#C6171E" text="扫码洗车" @click="handleClickScan"></uv-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -36,6 +55,8 @@ import {get} from "@/utils/https";
|
|
|
import {fmtDictName} from "@/utils/common";
|
|
|
import WashStation from "@/components/station/index.vue"
|
|
|
|
|
|
+const station_ref = ref()
|
|
|
+
|
|
|
const initState = () => ({
|
|
|
deviceList: [] as any[],
|
|
|
station: {
|
|
|
@@ -50,6 +71,10 @@ onHide(() => {
|
|
|
Object.assign(state, initState());
|
|
|
})
|
|
|
|
|
|
+const handleLeftClick = () => {
|
|
|
+ uni.navigateBack()
|
|
|
+}
|
|
|
+
|
|
|
/*onLoad((options) => {
|
|
|
state.station.id = options?.id;
|
|
|
let station = getApp<any>().globalData.last.station;
|
|
|
@@ -93,7 +118,7 @@ const loadStationDeviceList = () => {
|
|
|
}
|
|
|
|
|
|
const handleNavStation = () => {
|
|
|
-
|
|
|
+ station_ref.value?.handleNav();
|
|
|
}
|
|
|
|
|
|
const handleClickDevice = (device: any) => {
|
|
|
@@ -115,9 +140,18 @@ const handleClickDevice = (device: any) => {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.page {
|
|
|
- min-height: 100vh;
|
|
|
+ margin-top: 44px;
|
|
|
+ height: calc(100vh - 44px);
|
|
|
width: 100%;
|
|
|
background-color: #eee;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.station-bg {
|
|
|
+ border-radius: 10px;
|
|
|
+ width: calc(100vw - 20rpx);
|
|
|
+ margin: 40px auto 0 auto;
|
|
|
}
|
|
|
|
|
|
.block {
|
|
|
@@ -136,26 +170,26 @@ const handleClickDevice = (device: any) => {
|
|
|
}
|
|
|
|
|
|
.device-box {
|
|
|
- margin-top: 30rpx;
|
|
|
- margin-bottom: 100rpx;
|
|
|
+ width: calc(100vw - 80rpx);
|
|
|
+ margin: 30rpx auto 100rpx;
|
|
|
}
|
|
|
|
|
|
.device-item {
|
|
|
background-color: #fff;
|
|
|
border-radius: 10rpx;
|
|
|
- width: calc(100vw - 80rpx);
|
|
|
+ //width: calc(100vw - 80rpx);
|
|
|
margin: 20rpx auto;
|
|
|
padding: 10rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
|
|
|
&_header {
|
|
|
- font-size: 13px;
|
|
|
- padding: 10rpx 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
|
|
|
- &-short{
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
+ &-seq {
|
|
|
+ font-size: 28rpx;
|
|
|
}
|
|
|
|
|
|
&-status {
|
|
|
@@ -168,25 +202,67 @@ const handleClickDevice = (device: any) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- &_func {
|
|
|
- display: inline-flex;
|
|
|
+ &_body {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ border-top: 1rpx solid #eee;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
- &-label {
|
|
|
+ &_header {
|
|
|
font-size: 24rpx;
|
|
|
- color: #aaa;
|
|
|
+ padding: 10rpx 0;
|
|
|
+
|
|
|
+ &-short {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ transform: scale(0.8);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
- &-tag {
|
|
|
- margin-right: 6px;
|
|
|
- transform: scale(0.8);
|
|
|
+ &_func {
|
|
|
+ display: inline-flex;
|
|
|
+
|
|
|
+ &-label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #aaa;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-tag {
|
|
|
+ margin-right: 6px;
|
|
|
+ transform: scale(0.8);
|
|
|
+ padding: 10rpx 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
|
|
|
-.scan-btn {
|
|
|
- width: calc(100vw - 40rpx);
|
|
|
+.station-bottom {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
position: fixed;
|
|
|
bottom: 10rpx;
|
|
|
left: 20rpx;
|
|
|
+
|
|
|
+ &-box {
|
|
|
+ width: calc(100vw - 40rpx);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-left {
|
|
|
+ width: 200rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-right {
|
|
|
+ flex: 1
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.success{
|
|
|
+ background-color: $uni-color-success;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
</style>
|