订单详情

README.md

@@ -9,6 +9,7 @@
  pnpm i  @codemirror/lang-javascript
  pnpm i  @codemirror/theme-one-dark
  pnpm i  @codemirror/theme-idea
+ pnpm i @amap/amap-jsapi-loader --save//地图
  # 项目启动
  pnpm run dev
  # 项目打包

package.json

@@ -12,6 +12,7 @@
     "lint:stylelint": "stylelint  \"**/*.{css,scss,vue}\" --fix"
   },
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@element-plus/icons-vue": "^2.3.1",

src/api/order/index.ts

@@ -1,5 +1,21 @@
 // @ts-nocheck
 import request from "@/utils/request";
+//获取订单脚印
+export function getOrderStepList(data) {
+  return request({
+    url: '/orderOperation/getOrderStepList',
+    method: 'post',
+    params: data
+  })
+}
+//获取订单详情
+export function getBusinessOrder(data) {
+  return request({
+    url: '/orderOperation/getBusinessOrder',
+    method: 'post',
+    params: data
+  })
+}
 //获取token
 export function expressFormToken(data) {
   return request({

src/components/OrderDetail/index.vue

@@ -1,11 +1,312 @@
+<template>
+  <div class="dialog">
+    <el-dialog
+      top="18px"
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="1200"
+      @close="closeDialog()"
+    >
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <el-card style="width: 100%">
+            <template #header>
+              <div class="card-header">
+                <span>订单跟踪</span>
+              </div>
+            </template>
+            <div>
+              <div id="container"></div>
+            </div>
+            <div style="margin-top: 15px">
+              <el-timeline style="max-width: 600px">
+                <el-timeline-item
+                  v-for="(activity, index) in activities"
+                  :key="index"
+                  :timestamp="activity.timestamp"
+                >
+                  {{ activity.content }}
+                </el-timeline-item>
+              </el-timeline>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card style="width: 100%">
+            <template #header>
+              <div class="card-header">
+                <span>订单详情</span>
+              </div>
+            </template>
+            <div>
+              <el-row :gutter="10">
+                <el-col :span="16">
+                  <span>米饭-200克</span>
+                </el-col>
+                <el-col style="text-align: right" :span="4">
+                  <span>2x5</span>
+                </el-col>
+                <el-col :span="4">
+                  <span style="color: #79bbff">10.00</span>
+                </el-col>
+                <el-col :span="16">
+                  <span>年糕焗蟹-400克</span>
+                </el-col>
+                <el-col style="text-align: right" :span="4">
+                  <span>68.8 x1</span>
+                </el-col>
+                <el-col :span="4">
+                  <span style="color: #79bbff">68.80</span>
+                </el-col>
+                <el-col :span="16">
+                  <span>清炒油麦菜-400克</span>
+                </el-col>
+                <el-col style="text-align: right" :span="4">
+                  <span>22.9 x 1</span>
+                </el-col>
+                <el-col :span="4">
+                  <span style="color: #79bbff">22.90</span>
+                </el-col>
+                <el-col :span="16">
+                  <span>a猪肚鸡-500克</span>
+                </el-col>
+                <el-col style="text-align: right" :span="4">
+                  <span>70.8x1</span>
+                </el-col>
+                <el-col :span="4">
+                  <span style="color: #79bbff">70.80</span>
+                </el-col>
+                <el-col :span="16">
+                  <span>满20.0元减2.0元</span>
+                </el-col>
+                <el-col style="text-align: right" :span="4">
+                  <span>-2x1</span>
+                </el-col>
+                <el-col :span="4">
+                  <span style="color: #79bbff">-2.00</span>
+                </el-col>
+                <el-col :span="16">
+                  <span>减配送费3.0元</span>
+                </el-col>
+                <el-col style="text-align: right" :span="4">
+                  <span>-3 x1</span>
+                </el-col>
+                <el-col :span="4">
+                  <span style="color: #79bbff">-3.00</span>
+                </el-col>
+                <el-col :span="16">
+                  <span>餐盒费</span>
+                </el-col>
+                <el-col style="text-align: right" :span="4">
+                  <span></span>
+                </el-col>
+                <el-col :span="4">
+                  <span style="color: #79bbff">10.00</span>
+                </el-col>
+                <div style="background: #f6f6f6;width: 100%;padding: 5px 0">
+                  <el-col  :span="10" :offset="14">
+                    <span style="color: #79bbff;padding-left: 68px">小计(2份):182.50</span>
+                  </el-col>
+                </div>
+                <el-col :span="16">
+                  <span>配送费</span>
+                </el-col>
+                <el-col style="text-align: right" :span="4">
+                  <span></span>
+                </el-col>
+                <el-col :span="4">
+                  <span style="color: #79bbff">4.00</span>
+                </el-col>
+                <el-col :span="16">
+                  <span>平台补贴</span>
+                </el-col>
+                <el-col style="text-align: right" :span="4">
+                  <span></span>
+                </el-col>
+                <el-col :span="4">
+                  <span style="color: #79bbff">0.00</span>
+                </el-col>
+                <el-col :span="16">
+                  <span>本店优惠</span>
+                </el-col>
+                <el-col style="text-align: right" :span="4">
+                  <span></span>
+                </el-col>
+                <el-col :span="4">
+                  <span style="color: #79bbff">-5.00</span>
+                </el-col>
+                <div style="background: #f6f6f6;width: 100%;padding: 5px 0">
+                  <el-col  :span="10" :offset="14">
+                    <span style="color: #79bbff;padding-left: 64px">顾客实付:181.50</span>
+                  </el-col>
+                </div>
+                <el-col :span="16">
+                  <span>平台收服务费</span>
+                </el-col>
+                <el-col style="text-align: right" :span="4">
+                  <span></span>
+                </el-col>
+                <el-col :span="4">
+                  <span style="color: #79bbff">-41.98</span>
+                </el-col>
+                <div style="background: #f6f6f6;width: 100%;padding: 5px 0">
+                  <el-col  :span="10" :offset="14">
+                    <span style="color: #409EFF;padding-left: 64px">本店实收:135.52</span>
+                  </el-col>
+                </div>
+                <el-col :span="16">
+                  <span>订单渠道</span>
+                </el-col>
+                <el-col style="text-align: right" :span="4">
+                  <span></span>
+                </el-col>
+                <el-col :span="4">
+                  <span>抖音外卖</span>
+                </el-col>
+                <el-col :span="16">
+                  <span>订单门店</span>
+                </el-col>
+                <el-col :span="8">
+                  <span>108海鲜砂锅粥(汇金店)</span>
+                </el-col>
+                <el-col :span="16">
+                  <span>订单号</span>
+                </el-col>
+                <el-col :span="8">
+                  <span>2500984574161604386</span>
+                </el-col>
+                <el-col :span="8">
+                  <span>收货信息</span>
+                </el-col>
+                <el-col :span="16">
+                  <span style="font-size: 12px">吴松(先生) 13237645474 5772(157****1807)铭仕2期(千帆广告 隔壁电梯房 203)</span>
+                </el-col>
+                <el-col :span="16">
+                  <span>支付方式</span>
+                </el-col>
+                <el-col :span="8">
+                  <span style="display:block;text-align: right">在线支付(已支付)</span>
+                </el-col>
+                <el-col :span="16">
+                  <span>备注</span>
+                </el-col>
+                <el-col :span="8">
+                  <span style="color: #79bbff;display:block;text-align: right">顾客需要餐昙</span>
+                </el-col>
+              </el-row>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="closeDialog()">通知门店</el-button>
+          <el-button @click="closeDialog()">取消订单</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
 <script setup lang="ts">
+import {getBusinessOrder} from "@/api/order";
+import AMapLoader from '@amap/amap-jsapi-loader';
+const activities = [
+  {
+    content: '抖音外卖顾客完成下单，系统接单完成',
+    timestamp: '准备制作 2024-03-14 17:33:09',
+  },
+  {
+    content: '平台确认订单已经完成标记完成',
+    timestamp: '送达顾客 2024-03-14 18:09:43',
+  },
+]
+let dialogVisible = ref(false)
+let dialogTitle = ref("")
+let map = null;
+onMounted(() => {
 
-</script>
+});
+onUnmounted(() => {
+  map?.destroy();
+});
+onBeforeMount(() => {
 
-<template>
+})
+async function initMapApi() {
+  window._AMapSecurityConfig = {
+    securityJsCode: "edc1b1db9238a076ed25375a82af006c",
+  }
+  await AMapLoader.load({
+    key: 'a093f8aff89be0302fc8771912e2f997',
+    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ["AMap.Driving"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+  }).then((AMap) => {
+    map = new AMap.Map("container", {
+      // 设置地图容器id
+      viewMode: "2D", // 是否为3D地图模式
+      zoom: 11, // 初始化地图级别
+      center: [116.397428, 39.90923], // 初始化地图中心点位置
+    });
+    const startLngLat = [116.379028, 39.865042] //起始点坐标
+    const endLngLat = [116.427281, 39.903719] //终点坐标
+    AMap.plugin(["AMap.Driving"], function () {
+      const driving = new AMap.Driving({
+        map: map,
+      });
+      //获取起终点规划线路
+      driving.search(startLngLat, endLngLat, function (status, result) {
+        if (status === "complete") {
+          //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
+          //查询成功时，result 即为对应的驾车导航信息
+          console.log(result);
+        } else {
+          console.log("获取驾车数据失败：" + result);
+        }
+      });
+    });
 
-</template>
+  }).catch((e) => {
+      console.log(e);
+    });
 
-<style scoped lang="scss">
 
+}
+async function getItemData(id) {
+  const data = {
+    idOrder: id
+  }
+  await getBusinessOrder(data).then(response => {
+    if (response.httpCode == 200) {
+      const data = response.data
+      initMapApi()
+    }
+
+  })
+}
+
+
+/**关闭弹窗 */
+function closeDialog() {
+  dialogVisible.value = false
+}
+
+defineExpose({
+  dialogVisible,
+  dialogTitle,
+  getItemData
+})
+</script>
+<style scoped lang="scss">
+:deep(.el-dialog__body) {
+  padding-top: 10px !important;
+}
+:deep(.el-card__header) {
+  padding: 8px !important;
+}
+#container{
+  padding:0px;
+  margin: 0px;
+  width: 100%;
+  height: 300px;
+}
 </style>

src/components/OrderStep/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <el-drawer v-model="drawer" :title="title">
+      <el-timeline style="width: 90%;margin-top: 20px">
+        <el-timeline-item
+          v-for="step in stepList"
+          :timestamp="timeString ? (step.workTime).substring(0,19):step.workMan+'  '+(step.workTime).substring(0,19)"
+          :key="stepList.index"
+          placement="top">
+          <el-card class="stepList">
+            <h4 style="margin: 5px 0">{{ step.workMemo }}</h4>
+            <template v-if="step.workExplain && step.workExplain.substring(0, 6) == 'qrcode'">
+              <img :src="step.workExplain.substring(7, step.workExplain.length)" width="100" height="100">
+            </template>
+            <template v-else>
+              <p>{{ step.workExplain }}</p>
+            </template>
+          </el-card>
+        </el-timeline-item>
+
+      </el-timeline>
+    </el-drawer>
+  </div>
+</template>
+<script setup lang="ts">
+import {getOrderStepList} from "@/api/order";
+const drawer = ref(false)
+let title = ref('')
+let stepList = ref(new Array<any>())
+function getBillStep(id) {
+  const data = {
+    idOrder: id
+  }
+  getOrderStepList(data).then(response => {
+    if (response.httpCode == 200) {
+      stepList.value = response.data
+    }
+
+  })
+}
+defineExpose({
+  getBillStep,
+  title,
+  drawer
+})
+</script>
+
+
+
+<style scoped lang="scss">
+:deep(.el-drawer__body) {
+  padding-top: 0px !important;
+}
+:deep(.el-drawer__header) {
+  margin-bottom: 0px;
+}
+:deep(.el-card__body) {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+:deep(.el-card__body p) {
+  line-height: 0px;
+}
+</style>

src/styles/index.scss

@@ -38,3 +38,4 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+

src/views/order/orderList/index.vue

@@ -46,7 +46,20 @@
             <span>{{ scope.$index + 1 }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="orderName" width="200" label="订单名称"/>
+        <el-table-column prop="orderName" show-overflow-tooltip width="200" label="订单名称">
+          <template #default="{row}">
+            <el-button link @click="openDetail(row.id)" type="primary">
+              {{row.orderName}}
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column prop="orderName" show-overflow-tooltip width="150" label="订单编号">
+          <template #default="{row}">
+            <el-button link @click="openStep(row)" type="primary">
+              {{row.orderCode}}
+            </el-button>
+          </template>
+        </el-table-column>
         <el-table-column prop="storeName" width="150" label="门店名称"/>
         <el-table-column prop="deliverAddressAll" show-overflow-tooltip width="350" label="配送地址"/>
         <!--        <el-table-column-->
@@ -81,17 +94,38 @@
       />
     </div>
     <child-dialog ref="childDialog" @dialogChange="dialogChange"></child-dialog>
+    <order-detail ref="orderDetail"></order-detail>
+    <order-step ref="orderStep"></order-step>
   </div>
 </template>
 <script setup lang="ts">
-import {queryOrderList, getPlatformList, callExpress} from "@/api/order";
+import {queryOrderList, getPlatformList} from "@/api/order";
 import ChildDialog from './compt/childDialog.vue'
+import OrderDetail from '@/components/OrderDetail/index.vue'
+import OrderStep from '@/components/OrderStep/index.vue'
 import {useTable} from '@/hooks/useTable'
 
 let optionsList = ref(new Array<any>())
 let disableLock = ref('')
 const childDialog = ref<any>()
-
+const orderDetail = ref<any>()
+const orderStep = ref<any>()
+//查看订单脚印
+function openStep(row) {
+  orderStep.value.drawer = true;
+  orderStep.value.title = row.orderCode+'-'+row.orderName;
+  nextTick(() => {
+    orderStep.value.getBillStep(row.id)
+  });
+}
+//查看订单详情
+function openDetail(id) {
+  orderDetail.value.dialogVisible = true;
+  orderDetail.value.dialogTitle = "订单详情";
+  nextTick(() => {
+    orderDetail.value.getItemData(id)
+  });
+}
 //增加编辑
 function openDialog(item?: any) {
   childDialog.value.dialogVisible = true;
@@ -100,22 +134,7 @@ function openDialog(item?: any) {
     childDialog.value.getPreOrder(item,optionsList.value)
   })
 }
-const handleCommand = (command: string | number | object, row) => {
-  console.log(command)
-  console.log(row)
-  const params = {
-    "businessMethod": "Express_PreCreateOrder_" + command,
-    "params": JSON.stringify({
-      idOrder: row.id
-    })
-  }
-  callExpress(params).then((response) => {
-    if (response.httpCode == 200) {
-      const {data} = response
-      optionsList.value = data
-    }
-  })
-}
+
 
 function getOptionsList() {
   const params = {
@@ -132,7 +151,6 @@ function getOptionsList() {
 
 //修改成功后传递事件
 function dialogChange() {
-  getOptionsList()
   getTableData()
 }