上传代码

distribution/unpackage/dist/dev/mp-alipay/pages/orderDetail/orderDetail.acss

@@ -0,0 +1,83 @@
+
+.page.data-v-1353b6cf {
+  padding: 20px;
+  background-color: #fff;
+}
+.header.data-v-1353b6cf {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  margin-top: 20px;
+}
+.location.data-v-1353b6cf {
+	width: 24px;
+	/* 稍微增大圆形 */
+	height: 24px;
+	background-color: #ff6700;
+	color: #fff;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 50%;
+	margin-right: 12px;
+	font-size: 12px;
+	/* 调整文本大小 */
+	font-weight: bold;
+}
+.distance.data-v-1353b6cf {
+  color: #999;
+  font-size: 12px;
+  padding-right: 5px;
+}
+.store-name.data-v-1353b6cf {
+  font-size: 20px;
+  font-weight: bold;
+}
+.buttons.data-v-1353b6cf {
+  margin-bottom: 20px;
+}
+.button.data-v-1353b6cf {
+  width: 100%;
+  padding: 10px;
+  margin: 10px 0;
+  text-align: center;
+  background-color: #2877f2;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  line-height: inherit;
+}
+.order-details.data-v-1353b6cf {
+  margin-top: 20px;
+  font-size: 16px;
+}
+.title.data-v-1353b6cf {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.detail.data-v-1353b6cf {
+  display: flex;
+  align-items: center;
+  margin: 5px 0;
+}
+/* 定义图标容器的样式 */
+.icon-container.data-v-1353b6cf {
+  display: flex;
+  justify-content: space-around; /* 水平均匀分布 */
+  align-items: center; /* 垂直居中对齐 */
+}
+
+/* 定义每个图标和文字组合的样式 */
+.icon-wrapper.data-v-1353b6cf {
+  display: flex;
+  flex-direction: column; /* 将子元素垂直排列 */
+  align-items: center; /* 子元素水平居中对齐 */
+}
+
+/* 可选：定义文本标签的样式 */
+.icon-wrapper text.data-v-1353b6cf {
+  margin-top: 5px; /* 文字与图标之间的间距 */
+}
+

distribution/unpackage/dist/dev/mp-alipay/pages/orderDetail/orderDetail.axml

@@ -0,0 +1 @@
+<view class="page data-v-1353b6cf"><view class="data-v-1353b6cf"><map class="data-v-1353b6cf" style="width:100%;height:300px" latitude="{{a}}" longitude="{{b}}" markers="{{c}}" include-points="{{d}}"></map></view><view class="header data-v-1353b6cf"><text class="location data-v-1353b6cf">取</text><text class="distance data-v-1353b6cf">1km</text><text class="store-name data-v-1353b6cf">{{e}}</text></view><view class="header data-v-1353b6cf"><text class="location data-v-1353b6cf">送</text><text class="distance data-v-1353b6cf">1km</text><text class="store-name data-v-1353b6cf">{{f}}</text></view><view class="buttons data-v-1353b6cf"><view class="icon-container data-v-1353b6cf"><view class="icon-wrapper data-v-1353b6cf" onTap="{{h}}"><uni-icons class="data-v-1353b6cf" u-i="1353b6cf-0" onVI="__l" u-p="{{g||''}}"></uni-icons><text class="data-v-1353b6cf">联系商家</text></view><view class="icon-wrapper data-v-1353b6cf" onTap="{{j}}"><uni-icons class="data-v-1353b6cf" u-i="1353b6cf-1" onVI="__l" u-p="{{i||''}}"></uni-icons><text class="data-v-1353b6cf">联系用户</text></view><view class="icon-wrapper data-v-1353b6cf"><uni-icons class="data-v-1353b6cf" onClick="{{k}}" u-i="1353b6cf-2" onVI="__l" u-p="{{l||''}}"></uni-icons><text class="data-v-1353b6cf">拍照取到</text></view></view></view><view class="order-details data-v-1353b6cf"><text class="title data-v-1353b6cf">跑单详情</text><view class="detail data-v-1353b6cf"><text class="data-v-1353b6cf">取餐地址：</text><text class="data-v-1353b6cf">{{m}}</text></view><view class="detail data-v-1353b6cf"><text class="data-v-1353b6cf">下单时间：</text><text class="data-v-1353b6cf">{{n}}</text></view><view class="detail data-v-1353b6cf"><text class="data-v-1353b6cf">送达时间：</text><text class="data-v-1353b6cf" style="color:red">{{o}}</text></view><view class="detail data-v-1353b6cf"><text class="data-v-1353b6cf">送达地址：</text><text class="data-v-1353b6cf">{{p}}</text></view></view></view>

distribution/unpackage/dist/dev/mp-alipay/pages/orderDetail/orderDetail.js

@@ -0,0 +1,159 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const API_api = require("../../API/api.js");
+if (!Array) {
+  const _easycom_uni_icons2 = common_vendor.resolveComponent("uni-icons");
+  _easycom_uni_icons2();
+}
+const _easycom_uni_icons = () => "../../uni_modules/uni-icons/components/uni-icons/uni-icons.js";
+if (!Math) {
+  _easycom_uni_icons();
+}
+const _sfc_main = {
+  __name: "orderDetail",
+  setup(__props) {
+    const orderDetail = common_vendor.ref(common_vendor.index.getStorageSync("orderDetail"));
+    const apartmentLocations = {
+      "1公寓": { latitude: 45.878148, longitude: 126.542369 },
+      "2公寓": { latitude: 45.878016, longitude: 126.542924 },
+      "3公寓": { latitude: 45.878117, longitude: 126.543476 },
+      "4公寓": { latitude: 45.878118, longitude: 126.54415 },
+      "5公寓": { latitude: 45.878978, longitude: 126.54127 },
+      "6公寓": { latitude: 45.878982, longitude: 126.541879 },
+      "9公寓": { latitude: 45.878435, longitude: 126.544863 },
+      "10公寓": { latitude: 45.879196, longitude: 126.543891 },
+      "11公寓": { latitude: 45.879157, longitude: 126.542722 },
+      "12公寓": { latitude: 45.875638, longitude: 126.540502 },
+      "育才大厦": { latitude: 45.875638, longitude: 126.540502 }
+    };
+    const formatDate = (dateString) => {
+      const date = new Date(dateString);
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+      const hours = String(date.getHours()).padStart(2, "0");
+      const minutes = String(date.getMinutes()).padStart(2, "0");
+      const seconds = String(date.getSeconds()).padStart(2, "0");
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    };
+    const handlePickup = (id) => {
+      console.log(id);
+      common_vendor.index.request({
+        url: API_api.apiImageUrl + "/api/errand/update/state",
+        method: "POST",
+        data: {
+          errandsState: 3,
+          orderId: id
+        },
+        success(res) {
+          console.log(res);
+          common_vendor.index.navigateBack({
+            delta: 1,
+            animationType: "pop-out",
+            animationDuration: 200
+          });
+        },
+        fail(err) {
+          console.log(err);
+        }
+      });
+    };
+    const handleContact = (item) => {
+      common_vendor.index.makePhoneCall({
+        phoneNumber: item
+      });
+    };
+    const handleCall = (item) => {
+      common_vendor.index.makePhoneCall({
+        phoneNumber: item
+      });
+    };
+    const latitude = common_vendor.ref("");
+    const longitude = common_vendor.ref("");
+    const includePoints = common_vendor.ref([]);
+    const covers = common_vendor.ref([]);
+    common_vendor.onMounted(() => {
+      getLocation();
+    });
+    function getLocation() {
+      common_vendor.index.getLocation({
+        type: "gcj02",
+        // 返回可以用于uni.openLocation的坐标
+        success(res) {
+          console.log("当前位置的经度：" + res.longitude);
+          console.log("当前位置的纬度：" + res.latitude);
+          latitude.value = res.latitude;
+          longitude.value = res.longitude;
+          updateCover(res.latitude, res.longitude, 2, "我的位置", "/static/logo.png");
+          if (orderDetail.value.location in apartmentLocations) {
+            const targetApartment = apartmentLocations[orderDetail.value.location];
+            includePoints.value = [
+              { latitude: targetApartment.latitude, longitude: targetApartment.longitude },
+              // 目标公寓的位置
+              { latitude: res.latitude, longitude: res.longitude }
+              // 用户的位置
+            ];
+          } else {
+            console.warn(`未找到名为"${orderDetail.value.location}"的公寓位置`);
+          }
+        },
+        fail(err) {
+          console.error("获取位置失败", err);
+        }
+      });
+    }
+    function updateCover(lat, lng, id, title, iconPath) {
+      const position = {
+        id,
+        latitude: lat,
+        longitude: lng,
+        iconPath,
+        // 标记图标路径，现在通过参数传递
+        width: 30,
+        height: 30,
+        title
+        // 可选：标记点标题
+      };
+      const existingIndex = covers.value.findIndex((item) => item.id === position.id);
+      if (existingIndex !== -1) {
+        covers.value[existingIndex] = position;
+      } else {
+        covers.value.push(position);
+      }
+    }
+    return (_ctx, _cache) => {
+      return {
+        a: latitude.value,
+        b: longitude.value,
+        c: covers.value,
+        d: includePoints.value,
+        e: common_vendor.t(orderDetail.value.address),
+        f: common_vendor.t(orderDetail.value.location),
+        g: common_vendor.p({
+          type: "phone",
+          size: "30"
+        }),
+        h: common_vendor.o(($event) => {
+          var _a;
+          return handleCall((_a = orderDetail.value.businessVO) == null ? void 0 : _a.businessPhone);
+        }),
+        i: common_vendor.p({
+          type: "phone-filled",
+          size: "30"
+        }),
+        j: common_vendor.o(($event) => handleContact(orderDetail.value.phone)),
+        k: common_vendor.o(($event) => handlePickup(orderDetail.value.id)),
+        l: common_vendor.p({
+          type: "camera",
+          size: "30"
+        }),
+        m: common_vendor.t(orderDetail.value.address),
+        n: common_vendor.t(formatDate(orderDetail.value.createTime)),
+        o: common_vendor.t(formatDate(orderDetail.value.pickupEndTime)),
+        p: common_vendor.t(orderDetail.value.location)
+      };
+    };
+  }
+};
+const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-1353b6cf"]]);
+my.createPage(MiniProgramPage);

distribution/unpackage/dist/dev/mp-alipay/pages/orderDetail/orderDetail.json

@@ -0,0 +1,7 @@
+{
+  "defaultTitle": "订单详情",
+  "titleBarColor": "#5e7dec",
+  "usingComponents": {
+    "uni-icons": "../../uni_modules/uni-icons/components/uni-icons/uni-icons"
+  }
+}