zuy 1 år sedan
förälder
incheckning
6ecea6c07a
3 ändrade filer med 222 tillägg och 29 borttagningar
  1. 28 0
      src/components/login-bar/index.vue
  2. 182 24
      src/pages/index/index.vue
  3. 12 5
      src/utils/https.ts

+ 28 - 0
src/components/login-bar/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <view class="login-bar flex flex-inline">
+    <text class="font12">登录以享受更多洗车功能</text>
+    <uv-button class="login-bar_btn"  size="mini" shape="circle" type="primary" open-type="getPhoneNumber"
+               @getphonenumber="handleGetPhone">去登录
+    </uv-button>
+  </view>
+</template>
+<script setup lang="ts" name="loginBar">
+const handleGetPhone = (e) => {
+  console.log(e)
+}
+</script>
+
+<style scoped lang="scss">
+.login-bar {
+  width: 92%;
+  justify-content: space-between;
+  background: #eee;
+  border-radius: 8rpx;
+  padding: 16rpx 10rpx;
+  margin: 20rpx;
+
+  &_btn{
+    margin-right: 30rpx;
+  }
+}
+</style>

+ 182 - 24
src/pages/index/index.vue

@@ -25,7 +25,7 @@
 
 
     <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-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></uv-icon>
           <text class="grid-text">{{ item.title }}</text>
@@ -35,24 +35,57 @@
 
     <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>
+    <!--    站点清单  end-->
 
-    <view class=" mt10 guide-content">
+<!--    <view class="mt10">
+      <uv-alert title="提示" type="warning" description="启动洗车机服务按钮开始洗车"></uv-alert>
+    </view>-->
+
+<!--    <view class=" mt10 guide-content">
       <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>-->
 
-    <tab-bar></tab-bar>
+    <login-bar class="w100 text-center"></login-bar>
+    <tab-bar :index="0"></tab-bar>
   </view>
 </template>
 
@@ -60,6 +93,7 @@
 import {reactive, ref} from 'vue'
 import {onHide, onShow} from "@dcloudio/uni-app";
 import TabBar from "@/components/tab-bar";
+import LoginBar from "@/components/login-bar";
 
 const title = ref('Hello')
 const qrcode_ref = ref()
@@ -92,7 +126,39 @@ const initState = () => ({
     width: '80%',
     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())
@@ -102,24 +168,15 @@ onShow(() => {
   if (!gd.token) {
     console.log(gd)
   }
-  setInterval(() => refreshQrcode(), 20000)
 });
 
 onHide(() => {
   Object.assign(state, initState());
 })
 
-const refreshQrcode = () => {
-  qrcode_ref.value?.remake({
-    success: () => {
-      // console.log("success")
-    },
-    fail: () => {
-      console.log("fail")
-    }
-  })
-}
+const handleNavStation = (station:any) => {
 
+}
 const handleGotoGuide = () => {
   uni.navigateTo({
     url: '/pages/guide/index'
@@ -136,6 +193,7 @@ const handleGotoGuide = () => {
   align-items: center;
   justify-content: center;
   border-radius: 8rpx;
+
 }
 
 .logo {
@@ -175,4 +233,104 @@ const handleGotoGuide = () => {
 .guide-content {
   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>

+ 12 - 5
src/utils/https.ts

@@ -1,17 +1,24 @@
 // @ts-ignore
 import {fetchToken} from "@/utils/auth"
+declare const process: any;
+declare const __wxConfig: any;
+
+let isDevelopment = false;
+// #ifdef MP-WEIXIN
+const e =
+    typeof __wxConfig !== "undefined"
+        ? __wxConfig.envVersion || "release"
+        : "release";
+console.log("env", e);
+isDevelopment = e === "develop" || e === "trial";
+// #endif
 
-let isDevelopment = process.env.NODE_ENV === "development";
 const env: string = isDevelopment ? "dev" : "prd";
 const apis = {
     dev: {
         serverUrl: "https://dev.kuaiyuman.cn/api/",
         fileUrl: "https://zyp-1258963180.cos.ap-guangzhou.myqcloud.com/"
     },
-    uat: {
-        serverUrl: "http://npt.free.idcfengye.com/",
-        fileUrl: "https://zyp-1258963180.cos.ap-guangzhou.myqcloud.com/"
-    },
     prd: {
         serverUrl: "https://npww.net.cn/cms/",
         fileUrl: "https://zyp-1258963180.cos.ap-guangzhou.myqcloud.com/",