|
@@ -25,7 +25,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
<view class="menu-content w100">
|
|
<view class="menu-content w100">
|
|
|
- <uv-grid :border="false" :col="3">
|
|
|
|
|
|
|
+ <uv-grid :border="false" :col="4">
|
|
|
<uv-grid-item v-for="(item,index) in state.menuList" :key="index">
|
|
<uv-grid-item v-for="(item,index) in state.menuList" :key="index">
|
|
|
<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></uv-icon>
|
|
<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></uv-icon>
|
|
|
<text class="grid-text">{{ item.title }}</text>
|
|
<text class="grid-text">{{ item.title }}</text>
|
|
@@ -35,24 +35,57 @@
|
|
|
|
|
|
|
|
<view class="w100 gap"></view>
|
|
<view class="w100 gap"></view>
|
|
|
|
|
|
|
|
- <view class="qrcode-content">
|
|
|
|
|
- <uv-qrcode ref="qrcode_ref" value="https://h5.uvui.cn" :options="state.qrcodeOption"></uv-qrcode>
|
|
|
|
|
- <uv-button size="large" :custom-style="state.customStyle" text="扫码开始洗车"
|
|
|
|
|
- color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></uv-button>
|
|
|
|
|
|
|
+ <!-- 站点清单 start-->
|
|
|
|
|
+ <view class="w100 content_station">
|
|
|
|
|
+ <view class="station_item" v-for="item in state.stationList" :key="item.id">
|
|
|
|
|
+ <view class="station_item-title">
|
|
|
|
|
+ <text class="font13">{{ item.name }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <view class="station_item-status">
|
|
|
|
|
+ <text class="station_item-status-text">营业中</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view class="station_item-content">
|
|
|
|
|
+ <view class="station_item-content-left">
|
|
|
|
|
+ <view class="station_item-content-left-label">
|
|
|
|
|
+ <view class="font12 station_item-content-left-label-left">
|
|
|
|
|
+ <text class="station_item-content-left-label-left_idle">空闲</text>
|
|
|
|
|
+ <text class="station_item-content-left-label-left_count">{{ item.idle }}/{{ item.total }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!-- <uv-tags size="small" class="station_item-content-left-label_tag" text="洗车机" plain shape="circle"></uv-tags>-->
|
|
|
|
|
+ <view class="station_item-content-left-label_func">{{ item.funs?.join(" | ") }}</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="station_item-content-left-position">
|
|
|
|
|
+ <uv-icon name="empty-address" size="20" color="#aaa"></uv-icon>
|
|
|
|
|
+ <text>{{ item.address }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="station_item-content-right">
|
|
|
|
|
+ <uv-button circle type="primary" size="mini" plain @click="handleNavStation(item)">去洗车</uv-button>
|
|
|
|
|
+ <uv-tags text="1222km" type="warning" plain size="mini"></uv-tags>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
|
|
|
- <view class="mt10">
|
|
|
|
|
- <uv-alert title="提示" type="warning" description="将二维码置于洗车机扫描口启动洗车"></uv-alert>
|
|
|
|
|
|
|
+ <view class="station_item-distance">
|
|
|
|
|
+ <uv-text type="primary" :text="item.tips" size="12"></uv-text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <!-- 站点清单 end-->
|
|
|
|
|
|
|
|
- <view class=" mt10 guide-content">
|
|
|
|
|
|
|
+<!-- <view class="mt10">
|
|
|
|
|
+ <uv-alert title="提示" type="warning" description="启动洗车机服务按钮开始洗车"></uv-alert>
|
|
|
|
|
+ </view>-->
|
|
|
|
|
+
|
|
|
|
|
+<!-- <view class=" mt10 guide-content">
|
|
|
<view>
|
|
<view>
|
|
|
- <uv-text size="13" shape="circle" href="#" @click="handleGotoGuide" text="查看操作指引" type="primary">查看操作指引</uv-text>
|
|
|
|
|
|
|
+ <uv-text size="13" shape="circle" href="#" @click="handleGotoGuide" text="查看操作指引" type="primary">查看操作指引</uv-text>
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
|
|
+ </view>-->
|
|
|
|
|
|
|
|
- <tab-bar></tab-bar>
|
|
|
|
|
|
|
+ <login-bar class="w100 text-center"></login-bar>
|
|
|
|
|
+ <tab-bar :index="0"></tab-bar>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -60,6 +93,7 @@
|
|
|
import {reactive, ref} from 'vue'
|
|
import {reactive, ref} from 'vue'
|
|
|
import {onHide, onShow} from "@dcloudio/uni-app";
|
|
import {onHide, onShow} from "@dcloudio/uni-app";
|
|
|
import TabBar from "@/components/tab-bar";
|
|
import TabBar from "@/components/tab-bar";
|
|
|
|
|
+import LoginBar from "@/components/login-bar";
|
|
|
|
|
|
|
|
const title = ref('Hello')
|
|
const title = ref('Hello')
|
|
|
const qrcode_ref = ref()
|
|
const qrcode_ref = ref()
|
|
@@ -92,7 +126,39 @@ const initState = () => ({
|
|
|
width: '80%',
|
|
width: '80%',
|
|
|
borderRadius: '40rpx',//圆角
|
|
borderRadius: '40rpx',//圆角
|
|
|
},
|
|
},
|
|
|
- notice: '中秋佳节,全场8折,快来洗车吧!'
|
|
|
|
|
|
|
+ notice: '中秋佳节,全场8折,快来洗车吧!',
|
|
|
|
|
+ stationList:[
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 1,
|
|
|
|
|
+ name: '河源路洗车场2222',
|
|
|
|
|
+ status: 1,
|
|
|
|
|
+ total: 17,
|
|
|
|
|
+ idle: 2,
|
|
|
|
|
+ funs: ['清洁', '泡沫', '吸尘', '消毒', '充电'],
|
|
|
|
|
+ address: '深圳市宝安区河源路12345号',
|
|
|
|
|
+ tips: '半小时内免停车费,超时领取停车券免费',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 2,
|
|
|
|
|
+ name: '河源路洗车场2222',
|
|
|
|
|
+ status: 1,
|
|
|
|
|
+ total: 17,
|
|
|
|
|
+ idle: 2,
|
|
|
|
|
+ funs: ['清洁', '泡沫', '吸尘', '消毒', '充电'],
|
|
|
|
|
+ address: '深圳市宝安区河源路12345号',
|
|
|
|
|
+ tips: '半小时内免停车费,超时领取停车券免费',
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ id: 3,
|
|
|
|
|
+ name: '河源路洗车场2222',
|
|
|
|
|
+ status: 1,
|
|
|
|
|
+ total: 17,
|
|
|
|
|
+ idle: 2,
|
|
|
|
|
+ funs: ['清洁', '泡沫', '吸尘', '消毒', '充电'],
|
|
|
|
|
+ address: '深圳市宝安区河源路12345号',
|
|
|
|
|
+ tips: '半小时内免停车费,超时领取停车券免费',
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
const state = reactive(initState())
|
|
const state = reactive(initState())
|
|
@@ -102,24 +168,15 @@ onShow(() => {
|
|
|
if (!gd.token) {
|
|
if (!gd.token) {
|
|
|
console.log(gd)
|
|
console.log(gd)
|
|
|
}
|
|
}
|
|
|
- setInterval(() => refreshQrcode(), 20000)
|
|
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
onHide(() => {
|
|
onHide(() => {
|
|
|
Object.assign(state, initState());
|
|
Object.assign(state, initState());
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
-const refreshQrcode = () => {
|
|
|
|
|
- qrcode_ref.value?.remake({
|
|
|
|
|
- success: () => {
|
|
|
|
|
- // console.log("success")
|
|
|
|
|
- },
|
|
|
|
|
- fail: () => {
|
|
|
|
|
- console.log("fail")
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
-}
|
|
|
|
|
|
|
+const handleNavStation = (station:any) => {
|
|
|
|
|
|
|
|
|
|
+}
|
|
|
const handleGotoGuide = () => {
|
|
const handleGotoGuide = () => {
|
|
|
uni.navigateTo({
|
|
uni.navigateTo({
|
|
|
url: '/pages/guide/index'
|
|
url: '/pages/guide/index'
|
|
@@ -136,6 +193,7 @@ const handleGotoGuide = () => {
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
border-radius: 8rpx;
|
|
border-radius: 8rpx;
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.logo {
|
|
.logo {
|
|
@@ -175,4 +233,104 @@ const handleGotoGuide = () => {
|
|
|
.guide-content {
|
|
.guide-content {
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+.station_item {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
|
+ margin-top: 20rpx;
|
|
|
|
|
+ padding: 15rpx;
|
|
|
|
|
+ background: #fafafa;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ &-title {
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ padding-left: 5px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &-status {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ right: 6rpx;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+
|
|
|
|
|
+ &-text {
|
|
|
|
|
+ background: $uni-color-primary;
|
|
|
|
|
+ padding: 6rpx;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ font-size: 12px;
|
|
|
|
|
+ border-radius: 20rpx 6rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &-content {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+
|
|
|
|
|
+ &-left {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ padding: 5rpx;
|
|
|
|
|
+
|
|
|
|
|
+ &-label {
|
|
|
|
|
+ padding: 4rpx 8rpx;
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ margin-top: 8rpx;
|
|
|
|
|
+ //justify-content: space-between;
|
|
|
|
|
+
|
|
|
|
|
+ &-left {
|
|
|
|
|
+ //border: 1px solid $uni-color-primary;
|
|
|
|
|
+ border-radius: 4rpx;
|
|
|
|
|
+
|
|
|
|
|
+ &_idle {
|
|
|
|
|
+ background: $uni-color-primary;
|
|
|
|
|
+ padding: 6rpx;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ border-radius: 4rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &_count {
|
|
|
|
|
+ //border-radius: 4rpx;
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+ color: $uni-color-primary;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &_tag {
|
|
|
|
|
+ width: 30rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ &_func {
|
|
|
|
|
+ padding-left: 50rpx;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #aaa;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &-position {
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ margin-top: 8rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &-right {
|
|
|
|
|
+ width: 120rpx;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-content: center;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &-distance {
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ padding-left: 5px;
|
|
|
|
|
+ margin-top: 8rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|