feat:新增调度接单页面

ebike-maintenance/pages.json

@@ -167,6 +167,15 @@
 				}
 			}]
 		},
+		{
+			"root": "pages/devops/takeOrders",
+			"pages": [{
+				"path": "takeOrders",
+				"style": {
+					"navigationBarTitleText": "调度接单"
+				}
+			}]
+		},
 		{
 			"root": "pages/map",
 			"pages": [{

ebike-maintenance/pages/devops/takeOrders/takeOrders.vue

@@ -0,0 +1,138 @@
+<template>
+    <view class="content_wrapper">
+      <view 
+        class="box" 
+        v-for="(item,index) of 10" 
+        :key="index"
+      >
+        <!-- 车辆编号  -->
+        <view class="row">
+            <text class="label">车辆编号</text>
+            <view class="value">
+                <text style="margin-right: 30rpx;">100757</text>
+                <uni-icons type="sound" size="25" style="position: relative;top: 6rpx;" color="blue"></uni-icons>
+            </view>
+        </view>
+          <!-- 接单原因  -->
+          <view class="row">
+            <text class="label">接单原因</text>
+            <text class="value">23123123123231231231232312312312323123123123231231231232312312312323123123123</text>
+        </view>
+         <!-- 中控品牌  -->
+         <view class="row">
+            <text class="label">中控品牌</text>
+            <text class="value">-</text>
+        </view>
+         <!-- 设备位置  -->
+         <view class="row">
+            <text class="label">设备位置</text>
+            <view>
+                <view>查看地图</view>
+                <view style="color: darkgrey;font-size: 28rpx;">110.41,123123.11</view>
+            </view>
+            <uni-icons type="right" size="20" class="arrows" color="grey"></uni-icons>
+        </view>
+        <!-- 设备位置  -->
+        <view class="row">
+            <text class="label">设备距离</text>
+            <text class="value">100757m</text>
+        </view>   
+         <!-- 删除  -->
+         <uni-icons type="trash" size="25" class="deleteBtn" color="orange"></uni-icons>
+      </view>
+     <view style="width: 100%;height: 100rpx;"></view>
+        <!-- 确认接单按钮 -->
+      <view class="btn_wrapper">
+        <button class="btn_style">确认接单</button>
+      </view>
+    </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+import navigator from '@/utils/navigator.js';
+
+onLoad((options) => {
+    //TODO: 页面加载可能会获取参数
+});
+
+</script>
+
+<style lang="scss" scoped>
+.content_wrapper{
+  position: fixed; 
+  top: 0; 
+  left: 0; 
+  width: 100%; 
+  height: 100vh; 
+  padding: 30rpx;
+  background-color: rgb(226, 223, 223,.5);
+  overflow-y: auto;
+
+  .box{
+    position: relative;
+    width: 100%;
+    padding: 35rpx 25rpx;
+    background-color: white;
+    border-radius: 12rpx;
+    box-shadow: 0 2px 8px #0000000d; 
+    margin-bottom: 30rpx;
+
+    .row{
+        position: relative;
+        display: flex;
+        font-size: 30rpx;
+        align-items: baseline; 
+        margin-bottom: 30rpx;
+        :last-child{
+            margin-bottom: 0;
+        }
+
+        .label{
+            width: 150rpx;
+            color: gray;
+        }
+
+        .value{
+            width: calc(100% - 230rpx);
+            word-wrap: break-word; 
+            word-break: break-all; 
+            white-space: pre-wrap; 
+        }
+
+        .arrows{
+            position: absolute;
+            right: 0;
+            top:0;
+        }
+    }
+
+    .deleteBtn{
+     position: absolute;
+     right: 20rpx;
+     top: 25rpx;
+     color: red;
+     cursor: pointer;
+   }
+}
+
+  .btn_wrapper{
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    padding: 20rpx 40rpx 30rpx 40rpx;
+    background-color: white;
+    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); 
+
+    .btn_style{
+        color: white;
+        background-color: #3875f6;
+    }
+
+  }
+
+}
+
+</style>

ebike-maintenance/pages/home/home.vue

@@ -20,9 +20,16 @@
 					</label>
 				</uni-col>
 				<uni-col :span="14">
-					<label style="padding: 5px 15px;border-radius: 15px;background-color: #35374dc2;color: white;">
+					<label 
+						style="padding: 5px 15px;
+						border-radius: 15px;
+						background-color: #35374dc2;
+						color: white;"
+						@click="navigator.to('/pages/devops/takeOrders/takeOrders')"
+				    >
 						当前范围内可接单车辆
 						<label style="margin-left: 5px;">{{orderCount}}</label>
+						<uni-icons type="right" size="12" color="white"></uni-icons>
 					</label>
 				</uni-col>
 			</uni-row>
@@ -207,6 +214,7 @@
 
 <script setup>
 	import AMapWX from "@/utils/amap-wx.130.js";
+	import navigator from '@/utils/navigator.js';
 	import * as map from "@/utils/map.js";
 	import {
 		ref,

ebike-maintenance/utils/navigator.js

@@ -0,0 +1,104 @@
+// utils/navigator.js
+export default {
+    /**
+     * 导航到指定页面
+     * @param {string} url - 页面路径
+     * @param {object} params - 传递的参数
+     * @param {object} options - 导航选项
+     * @param {boolean} options.relaunch - 是否使用relaunch方式导航
+     * @param {boolean} options.redirect - 是否使用redirect方式导航
+     * @param {boolean} options.switchTab - 是否使用switchTab方式导航
+     * @returns {Promise} - 导航成功/失败的Promise
+     */
+    to(url, params = {}, options = {}) {
+      // 处理参数
+      const queryString = this._serializeParams(params);
+      const fullUrl = queryString ? `${url}?${queryString}` : url;
+      
+      // 根据不同的导航方式调用对应的API
+      if (options.relaunch) {
+        return this._navigate(uni.reLaunch, fullUrl);
+      } else if (options.redirect) {
+        return this._navigate(uni.redirectTo, fullUrl);
+      } else if (options.switchTab) {
+        return this._navigate(uni.switchTab, fullUrl);
+      } else {
+        return this._navigate(uni.navigateTo, fullUrl);
+      }
+    },
+    
+    /**
+     * 返回上一页
+     * @param {number} delta - 返回的页面数
+     * @returns {Promise} - 导航成功/失败的Promise
+     */
+    back(delta = 1) {
+      return new Promise((resolve, reject) => {
+        uni.navigateBack({
+          delta,
+          success: resolve,
+          fail: reject
+        });
+      });
+    },
+    
+    /**
+     * 序列化参数对象为查询字符串
+     * @param {object} params - 参数对象
+     * @returns {string} - 序列化后的查询字符串
+     */
+    _serializeParams(params) {
+      return Object.keys(params)
+        .filter(key => params[key] !== undefined && params[key] !== null)
+        .map(key => {
+          const value = params[key];
+          // 特殊处理对象类型的参数，先JSON.stringify再encodeURIComponent
+          const encodedValue = typeof value === 'object' 
+            ? encodeURIComponent(JSON.stringify(value)) 
+            : encodeURIComponent(value);
+          return `${key}=${encodedValue}`;
+        })
+        .join('&');
+    },
+    
+    /**
+     * 统一的导航方法，处理Promise包装和错误捕获
+     * @param {Function} navApi - uni-app的导航API
+     * @param {string} url - 导航URL
+     * @returns {Promise} - 导航成功/失败的Promise
+     */
+    _navigate(navApi, url) {
+      return new Promise((resolve, reject) => {
+        navApi({
+          url,
+          success: (res) => {
+            // console.log(`导航成功: ${url}`, res);
+            resolve(res);
+          },
+          fail: (err) => {
+            console.error(`导航失败: ${url}`, err);
+            reject(err);
+          }
+        });
+      });
+    },
+    
+    /**
+     * 获取页面参数（处理复杂参数的反序列化）
+     * @param {object} options - 页面的onLoad options参数
+     * @returns {object} - 解析后的参数对象
+     */
+    getParams(options) {
+      const params = { ...options };
+      Object.keys(params).forEach(key => {
+        try {
+          // 尝试解析JSON格式的参数
+          params[key] = JSON.parse(decodeURIComponent(params[key]));
+        } catch (e) {
+          // 如果解析失败，使用原始值
+          params[key] = decodeURIComponent(params[key]);
+        }
+      });
+      return params;
+    }
+  };