订单详情展示

src/components/OrderDetail/index.vue

@@ -39,159 +39,89 @@
               </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>
+              <div
+                v-for="(item,index) in busienssOrder.detailItemList"
+                :key="index"
+              >
+                <el-row :gutter="10">
+                  <el-col :span="6">
+                    <span>{{ item.itemName }}</span>
                   </el-col>
-                </div>
-                <el-col :span="16">
+                  <el-col class="text-right" :span="18">
+                    <span class="mr10px">{{ item.itemCount }}x{{ item.itemPrice }}</span>
+                    <span style="color: #79bbff;margin-right: 5px">{{(item.itemMoney)}}</span>
+                  </el-col>
+                </el-row>
+              </div>
+              <div style="background: #f6f6f6;width: 100%;padding: 5px 5px;text-align: right;margin: 5px 0px">
+                  <span style="color: #79bbff;">小计({{copiesNumber}}份):{{copiesMoney}}</span>
+              </div>
+              <el-row :gutter="10">
+                <el-col :span="6">
                   <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 class="text-right" :span="18">
+                  <span style="color: #79bbff;margin-right: 5px">{{orderFinances.deliverFee}}</span>
                 </el-col>
-                <el-col :span="16">
+                <el-col :span="6">
                   <span>平台补贴</span>
                 </el-col>
-                <el-col style="text-align: right" :span="4">
-                  <span></span>
+                <el-col class="text-right" :span="18">
+                  <span style="color: #79bbff;margin-right: 5px">{{orderFinances.orderPlatformSubsidy}}</span>
                 </el-col>
-                <el-col :span="4">
-                  <span style="color: #79bbff">0.00</span>
-                </el-col>
-                <el-col :span="16">
+                <el-col :span="6">
                   <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 class="text-right" :span="18">
+                  <span style="color: #79bbff;margin-right: 5px">{{orderFinances.storeDiscount}}</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 style="background: #f6f6f6;width: 100%;padding: 5px 5px;text-align: right;margin: 5px 0px">
+                  <span style="color: #79bbff;">顾客实付:{{orderFinances.customerPaid}}</span>
                 </div>
-                <el-col :span="16">
-                  <span>平台收服务费</span>
-                </el-col>
-                <el-col style="text-align: right" :span="4">
-                  <span></span>
+                <el-col :span="6">
+                  <span>平台服务费</span>
                 </el-col>
-                <el-col :span="4">
-                  <span style="color: #79bbff">-41.98</span>
+                <el-col class="text-right" :span="18">
+                  <span style="color: #79bbff;margin-right: 5px">{{orderFinances.platformServiceFee}}</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 style="background: #f6f6f6;width: 100%;padding: 5px 5px;text-align: right;margin: 5px 0px">
+                  <span style="color: #79bbff;">本店实收:{{orderFinances.storeRealCollection}}</span>
                 </div>
-                <el-col :span="16">
+                <el-col :span="6">
                   <span>订单渠道</span>
                 </el-col>
-                <el-col style="text-align: right" :span="4">
-                  <span></span>
+                <el-col class="text-right" :span="18">
+                  <span style="margin-right: 5px">{{busienssOrder.incomePlatformName}}</span>
                 </el-col>
-                <el-col :span="4">
-                  <span>抖音外卖</span>
-                </el-col>
-                <el-col :span="16">
+                <el-col :span="6">
                   <span>订单门店</span>
                 </el-col>
-                <el-col :span="8">
-                  <span>108海鲜砂锅粥(汇金店)</span>
+                <el-col class="text-right" :span="18">
+                  <span style="margin-right: 5px">{{busienssOrder.orderName}}</span>
                 </el-col>
-                <el-col :span="16">
+                <el-col :span="6">
                   <span>订单号</span>
                 </el-col>
-                <el-col :span="8">
-                  <span>2500984574161604386</span>
+                <el-col class="text-right" :span="18">
+                  <span style="margin-right: 5px">{{busienssOrder.incomePlatformOrderCode}}</span>
                 </el-col>
-                <el-col :span="8">
+                <el-col :span="6">
                   <span>收货信息</span>
                 </el-col>
-                <el-col :span="16">
-                  <span style="font-size: 12px">吴松(先生) 13237645474 5772(157****1807)铭仕2期(千帆广告 隔壁电梯房 203)</span>
+                <el-col class="text-left" :span="18">
+                  <span style="margin-right: 5px;;color: #303133">{{busienssOrder.deliverAddressAll}}</span>
                 </el-col>
-                <el-col :span="16">
+                <el-col :span="6">
                   <span>支付方式</span>
                 </el-col>
-                <el-col :span="8">
-                  <span style="display:block;text-align: right">在线支付(已支付)</span>
+                <el-col class="text-right" :span="18">
+                  <span style="margin-right: 5px;">在线支付(已支付)</span>
                 </el-col>
-                <el-col :span="16">
+                <el-col :span="6">
                   <span>备注</span>
                 </el-col>
-                <el-col :span="8">
-                  <span style="color: #79bbff;display:block;text-align: right">顾客需要餐昙</span>
+                <el-col class="text-right" :span="18">
+                  <span style="margin-right: 5px">{{busienssOrder.customerMemo}}</span>
                 </el-col>
               </el-row>
             </div>
@@ -210,6 +140,7 @@
 <script setup lang="ts">
 import {getBusinessOrder} from "@/api/order";
 import AMapLoader from '@amap/amap-jsapi-loader';
+
 const activities = [
   {
     content: '抖音外卖顾客完成下单，系统接单完成',
@@ -222,7 +153,11 @@ const activities = [
 ]
 let dialogVisible = ref(false)
 let dialogTitle = ref("")
+let copiesNumber = ref(0)
+let copiesMoney = ref(0)
 let map = null;
+const busienssOrder = ref({})
+const orderFinances = ref({})
 onMounted(() => {
 
 });
@@ -232,6 +167,12 @@ onUnmounted(() => {
 onBeforeMount(() => {
 
 })
+function getMoney() {
+  for (let i = 0; i < busienssOrder.value.detailItemList.length; i++) {
+    const datas = busienssOrder.value.detailItemList[i]
+    copiesMoney.value+=datas.itemMoney
+  }
+}
 async function initMapApi() {
   window._AMapSecurityConfig = {
     securityJsCode: "edc1b1db9238a076ed25375a82af006c",
@@ -266,18 +207,21 @@ async function initMapApi() {
     });
 
   }).catch((e) => {
-      console.log(e);
-    });
+    console.log(e);
+  });
 
 
 }
-async function getItemData(id) {
+function getItemData(id) {
   const data = {
     idOrder: id
   }
-  await getBusinessOrder(data).then(response => {
+  getBusinessOrder(data).then(response => {
     if (response.httpCode == 200) {
-      const data = response.data
+      busienssOrder.value = response.data
+      copiesNumber.value = busienssOrder.value.detailItemList.length
+      orderFinances.value = response.data.orderFinances
+      getMoney()
       initMapApi()
     }
 
@@ -300,11 +244,13 @@ defineExpose({
 :deep(.el-dialog__body) {
   padding-top: 10px !important;
 }
+
 :deep(.el-card__header) {
   padding: 8px !important;
 }
-#container{
-  padding:0px;
+
+#container {
+  padding: 0px;
   margin: 0px;
   width: 100%;
   height: 300px;

src/components/OrderStep/index.vue

@@ -17,7 +17,6 @@
             </template>
           </el-card>
         </el-timeline-item>
-
       </el-timeline>
     </el-drawer>
   </div>
@@ -35,7 +34,6 @@ function getBillStep(id) {
     if (response.httpCode == 200) {
       stepList.value = response.data
     }
-
   })
 }
 defineExpose({
@@ -44,14 +42,11 @@ defineExpose({
   drawer
 })
 </script>
-
-
-
 <style scoped lang="scss">
 :deep(.el-drawer__body) {
   padding-top: 0px !important;
 }
-:deep(.el-drawer__header) {
+:deep(.el-drawer__header){
   margin-bottom: 0px;
 }
 :deep(.el-card__body) {