完成订单

2024-03-04 15:47:34 +08:00
parent c0caecf0fa
commit 4facc5cc99
5 changed files with 302 additions and 82 deletions
--- a/src/views/order/components/add.vue
+++ b/src/views/order/components/add.vue
@@ -0,0 +1,109 @@
+<template>
+    <div class="demo_tabs_box">
+        <div class="demo_tabs_boxitem" v-for="(item, index) in ordereData.list" :key="index"
+            @click="clickitemboxshow(item)">
+            <div class="demo_tabs_boxitem_one">
+                <el-image style="width: 100px; height: 70px;border-radius: 10px;" :src="item.imgUrl" fit="scale-down" />
+                <div class="demo_tabs_boxitem_oneone">
+                    <div>
+                        {{ dayjs(item.createAt).format(" hh:mm:ss") }}
+                    </div>
+                    <div style="color: #757575;">
+                        {{ dayjs(item.createAt).format("YYYY-MM-DD") }}
+                    </div>
+                </div>
+                <div class="demo_tabs_boxitem_onetow">
+                    <div>
+                        <span style="font-size: var(--el-font-size-base);" v-for="item1 in item.names" :key="item1">{{
+            item1 }}</span>
+                    </div>
+                    <span style="font-size: 16px; color: #757575;">{{ item.orderNo }}</span>
+                </div>
+            </div>
+            <div class="demo_tabs_boxitem_tow">
+                <div>
+                    ￥{{ item.productNum }}
+                </div>
+                <div style="color:#ff9e01;">
+                    <span v-if="item.status == 'pending'">挂单</span>
+                    <span v-if="item.status == 'refund'">退单</span>
+                    <span v-if="item.status == 'closed'">订单完成</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { dayjs } from 'element-plus'
+
+const props = defineProps({
+    ordereData: {
+        type: Object,
+        default: {}
+    }
+})
+const emit = defineEmits(["emititemboxshow"])
+const clickitemboxshow = (e) => {
+    emit('emititemboxshow', e)
+}
+</script>
+
+<style scoped lang="scss">
+.demo_tabs_box {
+    width: 100%;
+    padding: 10px 20px;
+    height: 82%;
+    overflow: auto;
+
+    .demo_tabs_boxitem {
+        width: 100%;
+        padding: 6px 16px;
+        border-radius: 6px;
+        display: flex;
+        justify-content: space-between;
+        // background: #eeeeee;
+        border-bottom: 1px solid #ccc;
+
+        .demo_tabs_boxitem_one {
+            display: flex;
+            justify-content: flex-start;
+
+            .demo_tabs_boxitem_oneone {
+                display: flex;
+                margin-left: 20px;
+                flex-direction: column;
+                height: 70px;
+                justify-content: space-around;
+            }
+
+            .demo_tabs_boxitem_onetow {
+                width: 40%;
+                display: flex;
+                margin-left: 20px;
+                flex-direction: column;
+                height: 70px;
+                justify-content: space-around;
+
+                div {
+                    width: 100%;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+            }
+        }
+    }
+
+    .demo_tabs_boxitem_tow {
+        width: 20%;
+        display: flex;
+        flex-direction: column;
+        height: 70px;
+        justify-content: space-around;
+        align-items: flex-end;
+
+    }
+}
+</style>