订单管理-外卖订单-订单详情

src/views/platform/components/order_detail.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog :visible="showDetail" :show-close="false" @closed="view = true">
+    <el-dialog :visible="open" :show-close="false" @closed="view = true">
         <div slot="title" class="title">
             <span>订单详情</span>
             <i :class="{
@@ -19,6 +19,9 @@
                 <el-form-item label="订单号">
                     <el-input v-model="form.orderId"></el-input>
                 </el-form-item>
+                <el-form-item label="购买门店" v-if="type === 2" style="margin-left:20px">
+                    <el-input v-model="form.shopName"></el-input>
+                </el-form-item>
                 <br />
                 <el-form-item label="用户昵称">
                     <el-input v-model="form.user.nickName"></el-input>
@@ -26,14 +29,16 @@
                 <el-form-item label="用户ID" style="margin-left:20px">
                     <el-input v-model="form.user.userId"></el-input>
                 </el-form-item>
-                <el-form-item label="配送物流">
+                <el-form-item :label="'配送' + (type === 1 ? '物流' : '类型')">
                     <el-input v-model="form.logisticsCompany"></el-input>
                 </el-form-item>
-                <el-form-item label="快递单号" style="margin-left:20px">
-                    <el-input v-model="form.expressNumber"></el-input>
-                </el-form-item>
-                <br />
-                <el-form-item label="创建时间">
+                <template v-if="type === 1">
+                    <el-form-item label="快递单号" style="margin-left:20px">
+                        <el-input v-model="form.expressNumber"></el-input>
+                    </el-form-item>
+                    <br />
+                </template>
+                <el-form-item label="创建时间" :style="type === 2 ? 'margin-left:20px' : ''">
                     <el-input v-model="form.createTime"></el-input>
                 </el-form-item>
                 <br />
@@ -92,7 +97,7 @@
                 <el-button @click="$emit('close')">关闭</el-button>
             </div>
         </div>
-        <order-progress v-else />
+        <order-progress :type="type" v-else />
     </el-dialog>
 </template>
 <script>
@@ -101,7 +106,10 @@ export default {
     name: "OrderDetail",
     components: { OrderProgress },
     props: {
-        showDetail: Boolean
+        // 是否显示dialog
+        open: Boolean,
+        //TODO: 1 自营商城订单详情，2 骑手配送订单详情，应该通过订单类型来判断，先开发UI所以这么写。
+        type: Number
     },
     data() {
         return {
@@ -113,6 +121,7 @@ export default {
                     userId: 123131,
                     nickName: '用户昵称'
                 },
+                shopName: '门店名称',
                 logisticsCompany: '美团转送',
                 expressNumber: '13132131361313132',
                 createTime: '2022-12-31 12:31',

src/views/platform/components/progress.vue

@@ -1,15 +1,22 @@
 <template>
     <div>
-        <div class="logistics-info">物流公司：xxxxx<br />
-            物流单号：xxxx<br />
-            起点：湖北省武汉市东西湖区xxx<br />
-            目的地：xxxx<br />
-            发货时间：xxx<br />
-            签收时间：xxx<br />
-            完成时间：xxx
+        <div class="logistics-info">
+            <div>
+                物流公司：xxxxx<br />
+                物流单号：xxxx<br />
+                起点：湖北省武汉市东西湖区xxx<br />
+                目的地：xxxx<br />
+                发货时间：xxx<br />
+                签收时间：xxx<br />
+                完成时间：xxx
+            </div>
+            <div class="right" v-if="type === 2">
+                <div>送达时间：xxx</div>
+                <img src="http://www.dummyimage.com/100x100" />
+            </div>
         </div>
 
-        <div class="progress">
+        <div class="progress" v-if="type === 1">
             <div class="circle start"></div>
             <template v-for="item in 4">
                 <div class="line"></div>
@@ -28,12 +35,20 @@
             <div class="line"></div>
             <i class="el-icon-caret-right end" />
         </div>
+
+        <div class="map" v-else>
+            地图
+        </div>
     </div>
 </template>
 <script>
 
 export default {
-    name: 'Progress'
+    name: 'Progress',
+    props: {
+        //TODO: 1 自营商城订单详情，2 骑手配送订单详情，应该通过订单类型来判断，先开发UI所以这么写。
+        type: Number
+    }
 }
 </script>
 <style scoped lang="scss">
@@ -42,6 +57,22 @@ $circle-size: 20px;
 
 .logistics-info {
     font-size: 16px;
+    display: flex;
+
+    &>.right {
+        margin-left: 10%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+}
+
+.map {
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.2);
+    font-size: 20px;
+    height: 50vh;
+    margin-top: 10px;
 }
 
 .progress {

src/views/platform/order_management/delivery_order.vue

@@ -55,20 +55,25 @@
             <el-table-column align="center" label="创建时间">2022-12-31 12:31</el-table-column>
             <el-table-column align="center" label="收货地址">河南省郑州市金水区光明路125号</el-table-column>
             <el-table-column align="center" label="操作">
-                <el-button type="text">订单详情</el-button>
+                <el-button type="text" @click="open = true">订单详情</el-button>
             </el-table-column>
         </el-table>
 
+        <order-detail :open="open" @close="open = false" :type="2" />
+
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
             :limit.sync="queryParams.pageSize" @pagination="getList" />
     </div>
 </template>
 <script>
+import OrderDetail from '../components/order_detail';
 export default {
     name: 'DeliveryOrder',
+    components: { OrderDetail },
     dicts: ['delivery_type'],
     data() {
         return {
+            open: false,
             dataList: [{}],
             total: 1,
             activeName: "all",

src/views/platform/self-operated-mall/components/refund_order_detail.vue

@@ -144,11 +144,11 @@
                 <el-button @click="$emit('close')">关闭</el-button>
             </div>
         </template>
-        <order-progress v-else />
+        <order-progress :type="1" v-else />
     </el-dialog>
 </template>
 <script>
-import OrderProgress from "./progress"
+import OrderProgress from "@/views/platform/components/progress"
 export default {
     name: 'RefundOrderDetail',
     components: { OrderProgress },

src/views/platform/self-operated-mall/order.vue

@@ -77,7 +77,7 @@
         </el-table>
 
 
-        <order-detail :show-detail="open" @close="open = false" />
+        <order-detail :open="open" @close="open = false" :type="1" />
 
 
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
@@ -85,7 +85,7 @@
     </div>
 </template>
 <script>
-import OrderDetail from "./components/order_detail.vue"
+import OrderDetail from "../components/order_detail"
 export default {
     name: "Order",
     components: { OrderDetail },