自营商城-订单管理-订单详情

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

@@ -0,0 +1,236 @@
+<template>
+    <div v-if="showDetail">
+        <div class="title">订单动态</div>
+        <el-steps :active="4" finish-status="success" align-center>
+            <el-step title="2022-12-31 12:31" description="创建订单"></el-step>
+            <el-step title="2022-12-31 12:31" description="支付成功/待支付"></el-step>
+            <el-step title="2022-12-31 12:31" description="已收货/待收货"></el-step>
+            <el-step title="2022-12-31 12:31" description="已完成/已取消"></el-step>
+        </el-steps>
+        <div class="title">订单信息</div>
+        <el-form :inline="true" label-width="100px" label-position="left" class="form">
+            <el-form-item label="订单号">
+                <el-input v-model="form.orderId"></el-input>
+            </el-form-item>
+            <br />
+            <el-form-item label="用户昵称">
+                <el-input v-model="form.user.nickName"></el-input>
+            </el-form-item>
+            <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-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="创建时间">
+                <el-input v-model="form.createTime"></el-input>
+            </el-form-item>
+            <br />
+            <el-form-item label="收货人姓名">
+                <el-input v-model="form.address.userName"></el-input>
+            </el-form-item>
+            <el-form-item label="收货电话" style="margin-left:20px">
+                <el-input v-model="form.address.phone"></el-input>
+            </el-form-item>
+            <br />
+            <el-form-item label="收货地址">
+                <el-select v-model="form.address.province" placeholder="请选择">
+
+                </el-select>
+                <el-select v-model="form.address.city" placeholder="请选择">
+
+                </el-select>
+                <el-select v-model="form.address.area" placeholder="请选择">
+
+                </el-select>
+                <br />
+                <el-input v-model="form.address.address" style="margin-top:10px"></el-input>
+            </el-form-item>
+
+        </el-form>
+        <div class="title">商品列表</div>
+        <el-row type="flex" class="count">
+            <el-col>合计：￥1230.00</el-col>
+            <el-col>店铺优惠：-￥10.00</el-col>
+            <el-col>平台优惠券：￥125.00</el-col>
+            <el-col>实付款：￥1234.00</el-col>
+        </el-row>
+        <el-table :data="form.shopList" border>
+            <el-table-column label="商品编码" align="center">
+                DS000001
+            </el-table-column>
+            <el-table-column label="商品名称" align="center">
+                联想笔记本
+            </el-table-column>
+            <el-table-column label="商品图片" align="center">
+                <img src="http://dummyimage.com/50x50" />
+            </el-table-column>
+            <el-table-column label="规格" align="center">
+                黑色，L
+            </el-table-column>
+            <el-table-column label="数量" align="center">
+                10
+            </el-table-column>
+            <el-table-column label="金额" align="center">
+                ￥120.00
+            </el-table-column>
+        </el-table>
+        <div class="btn">
+            <el-button type="primary" @click="save">保存</el-button>
+            <el-button @click="$emit('view')">查看物流信息</el-button>
+            <el-button @click="$emit('close')">关闭</el-button>
+        </div>
+    </div>
+    <div v-else>
+        <div class="logistics-info">物流公司：xxxxx<br />
+            物流单号：xxxx<br />
+            起点：湖北省武汉市东西湖区xxx<br />
+            目的地：xxxx<br />
+            发货时间：xxx<br />
+            签收时间：xxx<br />
+            完成时间：xxx
+        </div>
+
+        <div class="progress">
+            <div class="circle start"></div>
+            <template v-for="item in 4">
+                <div class="line"></div>
+                <div class="info">
+                    昨天<br />
+                    15:56
+                    <div class="line-f">
+                        <div class="line"></div>
+                        <div class="circle"></div>
+                        <div class="line"></div>
+                    </div>
+                    已揽件<br />
+                    xxxxxxxxxxxxxxx
+                </div>
+            </template>
+            <div class="line"></div>
+            <i class="el-icon-caret-right end" />
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: "OrderDetail",
+    props: {
+        showDetail: Boolean
+    },
+    data() {
+        return {
+
+            form: {
+                orderId: '1213154154153',
+                user: {
+                    userId: 123131,
+                    nickName: '用户昵称'
+                },
+                logisticsCompany: '美团转送',
+                expressNumber: '13132131361313132',
+                createTime: '2022-12-31 12:31',
+                address: {
+                    userName: '账单',
+                    phone: '18888888888',
+                    province: '河南省',
+                    city: '郑州市',
+                    area: '金水区',
+                    address: '光明路128号'
+                },
+                shopList: [undefined]
+            }
+        }
+    },
+    mounted() {
+        console.info(this.showDetail)
+        debugger
+    },
+    methods: {
+        save() {
+            this.$modal.msgSuccess('保存成功')
+            this.$emit('close')
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+$progress-color: #1684fc;
+$circle-size: 20px;
+
+.logistics-info {
+    font-size: 16px;
+}
+
+.progress {
+    margin-top: 50px;
+    display: flex;
+    align-items: center;
+
+    &>.end {
+        font-size: #{$circle-size*1.5};
+        position: relative;
+        left: -2%;
+        color: $progress-color;
+    }
+
+    &>.line {
+        background-color: $progress-color;
+        height: 2px;
+        width: 8%;
+    }
+
+    &>.info {
+        text-align: center;
+
+        &>div {
+            display: flex;
+            align-items: center;
+        }
+
+
+        .line {
+            background-color: $progress-color;
+            height: 2px;
+            flex: auto;
+        }
+    }
+
+    .circle {
+        border-radius: 50%;
+        width: $circle-size;
+        height: $circle-size;
+        background-color: #555353;
+    }
+
+    .circle.start {
+
+        background-color: $progress-color;
+    }
+
+}
+
+.btn {
+    margin-top: 20px;
+    text-align: center;
+}
+
+.count {
+    margin: 20px 0
+}
+
+.form {
+    margin-top: 20px;
+}
+
+.title {
+    font-size: 16px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+    margin: 10px 0;
+}
+</style>

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

@@ -69,22 +69,41 @@
                 河南省郑州市金水区光明路125号
             </el-table-column>
             <el-table-column label="操作" align="center">
-                <el-button type="text">订单详情</el-button>
+                <el-button type="text" @click="open = true">订单详情</el-button>
             </el-table-column>
         </el-table>
 
+        <el-dialog :visible.sync="open" :show-close="false" @closed="view = true">
+            <div slot="title" class="title">
+                <span>订单详情</span>
+                <i :class="{
+                    'el-icon-close': view, 'el-icon-refresh-left': !view
+                }" @click="view ? open = false : view = true"></i>
+            </div>
+            <order-detail :show-detail="view" @close="open = false" @view="view = false" />
+        </el-dialog>
+
         <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.vue"
 export default {
     name: "Order",
+    components: { OrderDetail },
     data() {
         return {
+            //订单详情 true:显示动态，false:显示物流
+            view: true,
+            //订单详情dialog
+            open: false,
+            //表格数据
             dataList: [undefined],
             activeName: "all",
+            //总记录数
             total: 1,
+            //查询参数
             queryParams: {
                 pageNum: 1,
                 pageSize: 10,
@@ -108,4 +127,14 @@ export default {
     display: flex;
     justify-content: right;
 }
+
+.title {
+    display: flex;
+    justify-content: space-between;
+    font-size: 16px;
+
+    &>i {
+        cursor: pointer;
+    }
+}
 </style>