feat(洗车): 新增洗车页面及相关功能

新增洗车页面，包括页面结构、样式和逻辑处理。支持显示进行中的洗车订单，并提供结算功能。同时，在首页添加了洗车订单的提示入口，方便用户查看订单状态

app.json

@@ -25,6 +25,7 @@
     "pages/wangdian/wangdian",
     "pages/duiquan/duiquan",
     "pages/refund/refund",
+    "pages/washing/washing",
     "pages/OnlineCarHailing/OnlineCarHailing"
   ],
   "window": {

pages/index/index.js

@@ -94,6 +94,8 @@ Page({
             a.setData({
                 user: e.data || [],
             });
+            // 存储进度订单
+            wx.setStorageSync('progressorder', e.data.progressorder || []);
         });
     },
     load: function (e) {

pages/index/index.wxml

@@ -6,12 +6,22 @@
     <view class="money">
         <my-money user="{{user}}"></my-money>
         <view class="marquee-wrap" wx:if="{{notice}}">
-            <view bindtap="toPage" class="marquee-content" data-refresh="1" data-url="{{noticeurl}}"> {{notice}} </view>
+            <view bindtap="toPage" class="marquee-content" data-refresh="1" data-url="{{noticeurl}}">
+                {{notice}}
+            </view>
         </view>
+        <navigator class="washing" hoverClass="hover" url="/pages/washing/washing" wx:if="{{user.progressorder}}">
+            <view class="l">您有一笔洗车订单进行中...</view>
+            <view class="r">点击查看></view>
+        </navigator>
     </view>
     <template is="pageList" data="{{urlList:urlList}}"></template>
     <template is="wangdianList" data="{{wangdianList:wangdianList}}"></template>
     <service-tel></service-tel>
-    <view bindtap="toScan" class="scan-btn" wx:if="{{!isScan}}"><view class="sha">扫码启动</view></view>
-    <view bindtap="toStart" class="scan-btn" wx:if="{{isScan}}"><view class="sha">立即启动</view></view>
-</view>
+    <view bindtap="toScan" class="scan-btn" wx:if="{{!isScan}}">
+        <view class="sha">扫码启动</view>
+    </view>
+    <view bindtap="toStart" class="scan-btn" wx:if="{{isScan}}">
+        <view class="sha">立即启动</view>
+    </view>
+</view>

pages/index/index.wxss

@@ -157,4 +157,18 @@
     right: 0;
     display: block;
     background-color: #37CE05;
+}
+
+.washing {
+    justify-content: space-between;
+    margin: 30rpx 0 0;
+    padding: 20rpx 28rpx;
+    display: flex;
+    background-color: #0056A3;
+    color: #fff;
+    font-size: 28rpx;
+}
+
+.washing .l {
+  flex: 1;
 }

pages/washing/washing.js

@@ -0,0 +1,163 @@
+var t = getApp(), e = require("../../utils/login.js");
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    countdown: '',
+    agentname: '',
+    devicecode: '',
+    remainingTime: 0,
+    orderid: ''
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    const orderInfo = wx.getStorageSync('progressorder');
+    if (!orderInfo) {
+      wx.showToast({
+        title: '没有进行中的订单',
+        icon: 'none',
+        duration: 2000
+      });
+      setTimeout(() => {
+        wx.switchTab({
+          url: '/pages/index/index'
+        });
+      }, 2000);
+      return;
+    }
+
+    const currentTime = Math.floor(Date.now() / 1000);
+    const remainingTime = Math.max(0, orderInfo.timestamp + orderInfo.siteoccupationTime * 60 - currentTime);
+
+    this.setData({
+      agentname: orderInfo.agentname,
+      devicecode: orderInfo.devicecode,
+      remainingTime: remainingTime,
+      orderid: orderInfo.id
+    });
+
+    if (remainingTime > 0) {
+      this.countdown();
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+  handleSettlement() {
+    wx.showModal({
+      title: '确认结算',
+      content: '确定要结算此次洗车订单吗？',
+      success: (res) => {
+        if (res.confirm) {
+          e.request('/miniprogram/machine/shutdown', {
+            orderid: this.data.orderid
+          }, true).then((res) => {
+            if (res.code === 200) {
+              wx.showToast({
+                title: res.message || '结算成功',
+                icon: 'success',
+                duration: 2000
+              });
+              setTimeout(() => {
+                wx.removeStorageSync('progressorder');
+                wx.reLaunch({
+                  url: '/pages/index/index'
+                });
+              }, 2000);
+            }
+          }).catch((err) => {
+            // setTimeout(() => {
+            //   wx.removeStorageSync('progressorder');
+            //   wx.reLaunch({
+            //     url: '/pages/index/index'
+            //   });
+            // }, 2000);
+          })
+        }
+      }
+    });
+  },
+
+  countdown() {
+
+    // 没有  Cannot read property 'remainingTime' of undefined
+    if (!this.data.remainingTime) {
+      this.setData({
+        countdown: '00:00'
+      });
+      return;
+    }
+
+
+    if (this.data.remainingTime <= 0) {
+      this.setData({
+        countdown: '00:00'
+      });
+      return;
+    }
+
+    const minute = Math.floor(this.data.remainingTime / 60);
+    const second = this.data.remainingTime % 60;
+    const formattedMinute = minute < 10 ? '0' + minute : minute;
+    const formattedSecond = second < 10 ? '0' + second : second;
+
+    this.setData({
+      countdown: formattedMinute + ':' + formattedSecond,
+      remainingTime: this.data.remainingTime - 1
+    });
+
+    setTimeout(this.countdown, 1000);
+  },
+})

pages/washing/washing.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "service-tel": "../../template/serviceTel/serviceTel"
+  }
+}

pages/washing/washing.wxml

@@ -0,0 +1,42 @@
+<view class="spinner">
+  <view class="time">
+    <text class="wangdian">{{agentname}}</text>
+    <text class="mactime">{{countdown}}</text>
+    <text class="macid">{{devicecode}}</text>
+
+  </view>
+  <view class="spinner-container container1">
+    <view class="circle1"></view>
+    <view class="circle2"></view>
+    <view class="circle3"></view>
+    <view class="circle4"></view>
+  </view>
+  <view class="spinner-container container2">
+    <view class="circle1"></view>
+    <view class="circle2"></view>
+    <view class="circle3"></view>
+    <view class="circle4"></view>
+  </view>
+  <view class="spinner-container container3">
+    <view class="circle1"></view>
+    <view class="circle2"></view>
+    <view class="circle3"></view>
+    <view class="circle4"></view>
+  </view>
+  <view class="spinner-container container4">
+    <view class="circle1"></view>
+    <view class="circle2"></view>
+    <view class="circle3"></view>
+    <view class="circle4"></view>
+  </view>
+  <view class="spinner-container container5">
+    <view class="circle1"></view>
+    <view class="circle2"></view>
+    <view class="circle3"></view>
+    <view class="circle4"></view>
+  </view>
+</view>
+<view class="btn">
+  <button type="primary" bindtap="handleSettlement">结 算 洗 车</button>
+</view>
+<service-tel></service-tel>

pages/washing/washing.wxss

@@ -0,0 +1,167 @@
+.btn {
+  padding: 80rpx 100rpx 40rpx;
+}
+
+.spinner {
+  margin: 200rpx auto 80rpx;
+  width: 400rpx;
+  height: 400rpx;
+  position: relative;
+  border-radius: 400rpx;
+  border: 10rpx solid green;
+}
+
+.spinner .time {
+  font-family: 'Consolas', 'Lucida Console', 'DejaVu Sans Mono', monospace;
+  position: absolute;
+  width: 400rpx;
+  height: 320rpx;
+  padding-top: 80rpx;
+  text-align: center;
+  color: green;
+}
+
+.spinner .time text {
+  display: block;
+}
+.wangdian, .macid {
+ line-height: 2;
+ font-size: 40rpx;
+}
+.mactime {
+  font-size: 80rpx;
+  font-weight: 700;
+}
+
+.container1 > view, .container2 > view, .container3 > view, .container4 > view, .container5 > view {
+  width: 20rpx;
+  height: 20rpx;
+  background-color: green;
+  border-radius: 100%;
+  position: absolute;
+  -webkit-animation: bouncedelay 2.2s infinite ease-in-out;
+  animation: bouncedelay 2.2s infinite ease-in-out;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+.spinner .spinner-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.container2 {
+  -webkit-transform: rotateZ(22.5deg);
+  transform: rotateZ(22.5deg);
+}
+.container3 {
+  -webkit-transform: rotateZ(45deg);
+  transform: rotateZ(45deg);
+}
+.container4 {
+  -webkit-transform: rotateZ(67.5deg);
+  transform: rotateZ(67.5deg);
+}
+.container5 {
+  -webkit-transform: rotateZ(90deg);
+  transform: rotateZ(90deg);
+}
+
+.circle1 { top: 0; left: 0; }
+.circle2 { top: 0; right: 0; }
+.circle3 { right: 0; bottom: 0; }
+.circle4 { left: 0; bottom: 0; }
+.container1 .circle1 {
+  -webkit-animation-delay: -2s;
+  animation-delay: -2s;
+}
+.container2 .circle1 {
+  -webkit-animation-delay: -1.9s;
+  animation-delay: -1.9s;
+}
+.container3 .circle1 {
+  -webkit-animation-delay: -1.8s;
+  animation-delay: -1.8s;
+}
+.container4 .circle1 {
+  -webkit-animation-delay: -1.7s;
+  animation-delay: -1.7s;
+}
+.container5 .circle1 {
+  -webkit-animation-delay: -1.6s;
+  animation-delay: -1.6s;
+}
+.container1 .circle2 {
+  -webkit-animation-delay: -1.5s;
+  animation-delay: -1.5s;
+}
+.container2 .circle2 {
+  -webkit-animation-delay: -1.4s;
+  animation-delay: -1.4s;
+}
+.container3 .circle2 {
+  -webkit-animation-delay: -1.3s;
+  animation-delay: -1.3s;
+}
+.container4 .circle2 {
+  -webkit-animation-delay: -1.2s;
+  animation-delay: -1.2s;
+}
+.container5 .circle2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+.container1 .circle3 {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+.container2 .circle3 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+.container3 .circle3 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+.container4 .circle3 {
+  -webkit-animation-delay: -0.7s;
+  animation-delay: -0.7s;
+}
+.container5 .circle3 {
+  -webkit-animation-delay: -0.6s;
+  animation-delay: -0.6s;
+}
+.container1 .circle4 {
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+.container2 .circle4 {
+  -webkit-animation-delay: -0.4s;
+  animation-delay: -0.4s;
+}
+.container3 .circle4 {
+  -webkit-animation-delay: -0.3s;
+  animation-delay: -0.3s;
+}
+.container4 .circle4 {
+  -webkit-animation-delay: -0.2s;
+  animation-delay: -0.2s;
+}
+.container5 .circle4 {
+  -webkit-animation-delay: -0.1s;
+  animation-delay: -0.1s;
+}
+@-webkit-keyframes bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0.0) }
+  40% { -webkit-transform: scale(2.0) }
+}
+@keyframes bouncedelay {
+  0%, 80%, 100% {
+    transform: scale(0.0);
+    -webkit-transform: scale(0.0);
+  } 40% {
+    transform: scale(2.0);
+    -webkit-transform: scale(2.0);
+  }
+}
+
+