From 4facc5cc99311e36fb9aa7f7a84f68ba87906519 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AD=8F=E5=95=BE?= <1144797966@qq.com>
Date: Mon, 4 Mar 2024 15:47:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=AE=A2=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/order/index.js             |  27 ++++
 src/views/home/index.vue           |   2 +-
 src/views/member/index.vue         |  11 +-
 src/views/order/components/add.vue | 109 +++++++++++++
 src/views/order/index.vue          | 235 ++++++++++++++++++++---------
 5 files changed, 302 insertions(+), 82 deletions(-)
 create mode 100644 src/api/order/index.js
 create mode 100644 src/views/order/components/add.vue

diff --git a/src/api/order/index.js b/src/api/order/index.js
new file mode 100644
index 0000000..d145065
--- /dev/null
+++ b/src/api/order/index.js
@@ -0,0 +1,27 @@
+import request from "@/utils/request.js";
+
+/**
+ * 获取订单列表
+ * @param {*} params 
+ * @returns 
+ */
+export function orderfindOrder(params) {
+    return request({
+        method: "get",
+        url: "order/findOrder",
+        params
+    });
+}
+/**
+ * 订单详情
+ * @param {*} params 
+ * @returns 
+ */
+export function orderorderDetail(params) {
+    return request({
+        method: "get",
+        url: "order/orderDetail",
+        params
+    });
+}
+
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index e66aec5..7f30571 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -80,7 +80,7 @@
   <!-- 修改取餐号 -->
   <takeFoodCode />
   <el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员" >
-    <member :membershow="1"></member>
+    <member :membershow="'1'"></member>
   </el-drawer>
   <takeFoodCode ref="takeFoodCodeRef" title="修改取餐号" placeholder="请输入取餐号" @success="takeFoodCodeSuccess" />
   <!-- 结算订单 -->
diff --git a/src/views/member/index.vue b/src/views/member/index.vue
index edbfdcf..cda2f80 100644
--- a/src/views/member/index.vue
+++ b/src/views/member/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="orderbox">
         <div class="orderbox_left">
-            <div class="demo_tabs" v-if="props.membershow == 0">
+            <div class="demo_tabs" v-if="props.membershow == '0'">
                 <div class="demo_tabs_div">
                     <el-input v-model="tableData.phone" placeholder="请输入手机号或编号" @input="inputChange" clearable />
                     <el-button style="margin-left: 10px;" type="primary" @click="memberaddshow = true">添加</el-button>
@@ -75,17 +75,17 @@
                     </div>
                 </div> -->
             </div>
-            <div class="orderbox_right_input" style="margin-top:20px ;" v-if="props.membershow == 1">
+            <div class="orderbox_right_input" style="margin-top:20px ;" v-if="props.membershow == '1'">
                 <el-input placeholder="请输入会员手机号或者编号" v-model="tableData.phone" clearable @input="inputChange"></el-input>
             </div>
-            <keyboard v-if="props.membershow == 1" @consumeFees="consumeFees"></keyboard>
-            <div class="orderbox_right_button" v-if="props.membershow == 0">
+            <keyboard v-if="props.membershow == '1'" @consumeFees="consumeFees"></keyboard>
+            <div class="orderbox_right_button" v-if="props.membershow == '0'">
                 <router-link to="/" style="width: 35%;">
                     <el-button style="width: 100%;" @click="recharge = true">创建订单</el-button>
                 </router-link>
                 <el-button style="width: 60%;" type="primary">账户充值</el-button>
             </div>
-            <div class="orderbox_right_button" v-if="props.membershow == 1">
+            <div class="orderbox_right_button" v-if="props.membershow == '1'">
                 <router-link to="/" style="width: 35%;">
                     <el-button style="width: 100%;" @click="memberaddshowclose">添加会员</el-button>
                 </router-link>
@@ -189,7 +189,6 @@ const consumeFee = (e) => { //接收子组件值  并赋值给父组件
     moneys.value = e
 }
 const consumeFees = (e) => {
-    console.log(22222,44)
     tableData.phone = e
 
 }
diff --git a/src/views/order/components/add.vue b/src/views/order/components/add.vue
new file mode 100644
index 0000000..eb2b1b1
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/views/order/index.vue b/src/views/order/index.vue
index 246bc15..03bd7f8 100644
--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@@ -1,50 +1,34 @@
 <template>
     <div class="orderbox">
         <div class="orderbox_left">
-            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick(activeName)">
-                <el-tab-pane label="全部" name="first">
+            <el-tabs v-model="ordereData.status" class="demo-tabs" @tab-click="handleClick">
+                <el-tab-pane label="全部" name="closed">
                     <div class="demo_tabs_div">
-                        <el-input v-model="firstinput" placeholder="请输入订单号查询" clearable />
+                        <el-input v-model="ordereData.ordernumbr" placeholder="请输入订单号查询" @input="inputChange"
+                            clearable />
                         <el-button style="margin-left: 10px;" type="primary" @click="onSubmit">搜索</el-button>
                     </div>
-                    <div class="demo_tabs_box">
-                        <div class="demo_tabs_boxitem" @click="itemboxshow = true">
-                            <div class="demo_tabs_boxitem_one">
-                                <el-image style="width: 100px; height: 70px;border-radius: 10px;"
-                                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-                                    fit="scale-down" />
-                                <div class="demo_tabs_boxitem_oneone">
-                                    <div>
-                                        11:19
-                                    </div>
-                                    <div style="color: #757575;">
-                                        2024/02/01
-                                    </div>
-                                </div>
-                                <div class="demo_tabs_boxitem_onetow">
-                                    <div>
-                                        <span style="font-size: var(--el-font-size-base);">销售</span><span
-                                            style="font-size: 16px; color: #757575;">11111111111111111111111111</span>
-                                    </div>
-                                    <div>
-                                        <span
-                                            style="color: #5a31f1;font-size: var(--el-font-size-base);">[222]</span><span>待点单</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="demo_tabs_boxitem_tow">
-                                <div>
-                                    ￥0.0
-                                </div>
-                                <div style="color:#ff9e01;">
-                                    开台
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    <add :ordereData="ordereData" @emititemboxshow="emititemboxshow" v-if="ordereData.list.length">
+                    </add>
+                    <div v-else style="width: 100%; text-align: center; margin: 30px 0;">暂无数据</div>
+                    <el-pagination v-if="ordereData.list.length" layout="prev, pager, next, jumper"
+                        style="margin-top: 20px;" :total="Number(ordereData.total)"
+                        @current-change="handleCurrentChange" />
+                </el-tab-pane>
+                <el-tab-pane label="销售" name=" refund">
+                    <add :ordereData="ordereData" v-if="ordereData.list.length"></add>
+                    <div v-else style="width: 100%; text-align: center; margin: 30px 0;">暂无数据</div>
+                    <el-pagination v-if="ordereData.list.length" layout="prev, pager, next, jumper"
+                        style="margin-top: 20px;" :total="Number(ordereData.total)"
+                        @current-change="handleCurrentChange" />
+                </el-tab-pane>
+                <el-tab-pane label="退单" name="pending">
+                    <add :ordereData="ordereData" v-if="ordereData.list.length"></add>
+                    <div v-else style="width: 100%; text-align: center; margin: 30px 0;">暂无数据</div>
+                    <el-pagination v-if="ordereData.list.length" layout="prev, pager, next, jumper"
+                        style="margin-top: 20px;" :total="Number(ordereData.total)"
+                        @current-change="handleCurrentChange" />
                 </el-tab-pane>
-                <el-tab-pane label="销售" name="second">销售</el-tab-pane>
-                <el-tab-pane label="退单" name="third">退单</el-tab-pane>
             </el-tabs>
         </div>
         <div class="orderbox_right" v-if="itemboxshow">
@@ -56,36 +40,38 @@
             </div>
             <div class="tableDataclass">
                 <div class="orderbox_right_item">
-                    <span class="span">订单号：</span><span class="nunber">200000000000</span>
+                    <span class="span">订单号：</span><span class="nunber">{{ orderDetaildata.orderNo }}</span>
                 </div>
                 <div class="orderbox_right_item">
-                    <span class="span">收银员：</span><span class="nunber">V1</span>
+                    <span class="span">收银员：</span><span class="nunber">{{ orderDetaildata.userName }}</span>
                 </div>
                 <div class="orderbox_right_item">
-                    <span class="span">创建时间：</span><span class="nunber">2024-20-01 11:49:06</span>
+                    <span class="span">创建时间：</span><span class="nunber">{{ orderDetaildata.createdAt }}</span>
                 </div>
                 <div class="orderbox_right_item">
-                    <span class="span">终端：</span><span class="nunber">mobile</span>
+                    <span class="span">终端：</span><span class="nunber">{{ orderDetaildata.zdNo }}</span>
                 </div>
                 <div class="orderbox_right_item">
-                    <span class="span">会员：</span><span class="nunber">微信用户</span>
+                    <span class="span">会员：</span><span class="nunber">{{ orderDetaildata.memberName }}</span>
                 </div>
                 <div class="orderbox_right_item">
-                    <span class="span">台桌：</span><span class="nunber">222</span>
+                    <span class="span">台桌：</span><span class="nunber">{{ orderDetaildata.tableId }}</span>
                 </div>
                 <div class="orderbox_right_item">
-                    <span class="span">流水号：</span><span class="nunber">#1</span>
+                    <span class="span">流水号：</span><span class="nunber">{{ orderDetaildata.masterId }}</span>
                 </div>
                 <div class="orderbox_right_top" style="margin-top: 20px; border-bottom: 2px solid #ccc;">
                     <span>合计：</span>
-                    <span>￥0.00</span>
+                    <span>￥{{ orderDetaildata.orderAmount }}</span>
                 </div>
                 <div class="orderbox_right_top" style="margin-top: 20px; border-bottom: 2px solid #ccc;">
-                    <span style="font-size: 16px;">未支付</span>
+                    <span style="font-size: 16px;" v-if="orderDetaildata.status == 'pending'">挂单</span>
+                    <span style="font-size: 16px;" v-if="orderDetaildata.status == 'refund'">退单</span>
+                    <span style="font-size: 16px;" v-if="orderDetaildata.status == 'closed'">订单完成</span>
                 </div>
                 <div class="orderbox_right_top" style="margin-top: 20px;">
                     <span>商品明细</span>
-                    <span>0项</span>
+                    <span>{{ orderDetaildata.detailList.length }}项</span>
                 </div>
                 <div class="orderbox_right_list" style="margin-top: 20px;">
                     <div>商品</div>
@@ -93,18 +79,22 @@
                     <div>单价</div>
                     <div>小计</div>
                 </div>
-                <div class="orderbox_right_list_item" style="margin-top: 20px;">
-                    <div>1号商品</div>
-                    <div style="text-align: center;">3</div>
-                    <div style="text-align: center;">3</div>
-                    <div>3</div>
+                <div class="orderbox_right_list_item" style="margin-top: 20px;"
+                    v-for="(item, index) in orderDetaildata.detailList" :key="index">
+                    <div>{{ item.productName }}-{{ item.productSkuName }}号商品</div>
+                    <div style="text-align: center;">{{ item.num }}</div>
+                    <div style="text-align: center;">{{ item.price }}</div>
+                    <div>{{ item.priceAmount }}</div>
                 </div>
             </div>
             <div class="orderbox_right_button">
-                <el-button style="width: 100%;" type="primary" @click="onSubmit">点单</el-button>
-                <el-button style="width: 100%; margin-top: 10px; margin-left:0px;" type="danger"
-                    @click="onSubmit">取消</el-button>
-
+                <div class="orderbox_right_buttonbutton">
+                    <router-link to="/" style="width: 45%;">
+                        <el-button style="width: 100%;" type="primary">点单</el-button>
+                    </router-link>
+                    <el-button style="width: 45%;" type="danger" @click="onSubmit">取消</el-button>
+                </div>
+                <el-button style="width: 100%; margin-top: 10px;" type="primary" @click="onSubmit">结算</el-button>
             </div>
         </div>
         <div class="orderbox_rightbox" v-else>
@@ -120,7 +110,7 @@
                     <div style="font-size:14px;">今日本终端处理的订单</div>
                 </div>
             </div>
-            <div class="orderbox_rightbox_top">
+            <!-- <div class="orderbox_rightbox_top">
                 <div
                     style="padding: 6px; background:#187ead; border-radius:50%;width: 50px;height: 50px; display: flex; align-items: center; justify-content: center;">
                     <el-icon :size="30" color="#fff">
@@ -143,22 +133,24 @@
                     <div>今日普通订单</div>
                     <div style="font-size:14px;">今日本终端处理的订单</div>
                 </div>
-            </div>
+            </div> -->
         </div>
-        
+
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { useRoute } from "vue-router"
-import { ElMessage } from 'element-plus'
-const route = useRoute()
-console.log(route)
-const activeName = ref('first')//定义初始name
+import { ref, onMounted, reactive } from 'vue'
+import { ElMessage, dayjs } from 'element-plus'
+import { useUser } from "@/store/user.js"
+import lodash from 'lodash'
+import { orderfindOrder, orderorderDetail } from '@/api/order/index.js'
+import add from '@/views/order/components/add.vue'
+const store = useUser()
 const itemboxshow = ref(false)
-const handleClick = (Name) => {
-    console.log(Name)
+const handleClick = (Name) => {//切换teb
+    ordereData.status = Name.props.name
+    asyncorderfindOrder()
 }
 const firstinput = ref('')//搜索输入框
 const onSubmit = () => {
@@ -171,6 +163,68 @@ const onSubmit = () => {
         })
     }
 }
+const emititemboxshow = async (e) => { //接收子组件值  并赋值给父组件
+    try {
+        let res = await orderorderDetail({
+            shopId: store.userInfo.shopId,
+            id: e.id
+        })
+        itemboxshow.value = true
+        orderDetaildata.value = res
+        console.log(orderDetaildata)
+    } catch (error) {
+
+    }
+}
+const orderDetaildata = ref({//详情数据
+
+})
+const ordereData = reactive({//表格数据
+    list: [{
+        name: "",
+        amount: "",
+        levelConsume: "",
+        level: "",
+        code: "",
+        telephone: ""
+    }],
+    size: 10,
+    page: 1,
+    status: 'closed',
+    total: '',
+    orderNo: '',
+    ordernumbr: ''
+})
+const asyncorderfindOrder = async () => {//获取流水
+    try {
+        let res = await orderfindOrder({
+            shopId: store.userInfo.shopId,
+            status: ordereData.status,
+            size: ordereData.size,
+            page: ordereData.page,
+            ordernumbr: ordereData.ordernumbr
+        })
+        ordereData.total = res.total
+        ordereData.list = res.list
+    } catch (error) {
+        // ElMessage({
+        //     message: '获取失败',
+        //     type: 'error',
+        // })
+    }
+}
+const handleCurrentChange = (val) => { //页码
+    // ordereData.page = 1
+    ordereData.page = val
+    asyncorderfindOrder()
+}
+const inputChange = lodash.debounce(function () { //搜索手机号
+    asyncorderfindOrder()
+}, 500)
+onMounted(() => {
+    // resetMembrform.value = { ...membrform.value }
+    asyncorderfindOrder()
+})
 </script>
 
 <style scoped lang="scss">
@@ -185,6 +239,16 @@ const onSubmit = () => {
         border-radius: 10px;
 
         .demo-tabs {
+            height: 100%;
+
+            :deep(.el-tabs__content) {
+                height: 90%;
+            }
+
+            :deep(.el-tab-pane) {
+                height: 100%;
+            }
+
             :deep(.el-tabs__nav) {
                 width: 100%;
             }
@@ -195,9 +259,11 @@ const onSubmit = () => {
                 position: relative;
                 // width: 10px !important;
             }
-            :deep(.el-tabs__active-bar){
-                height:0 !important;
+
+            :deep(.el-tabs__active-bar) {
+                height: 0 !important;
             }
+
             :deep(.el-tabs__active-bar)::after {
                 content: '';
                 position: absolute;
@@ -206,9 +272,10 @@ const onSubmit = () => {
                 height: 2px;
                 width: 10px;
                 background: red;
-                transform:translateX(-50%);
+                transform: translateX(-50%);
                 // width: 10px !important;
             }
+
             :deep(.el-is-active) {
                 width: 33.33%;
                 color: var(--primary-color);
@@ -222,6 +289,8 @@ const onSubmit = () => {
             .demo_tabs_box {
                 width: 100%;
                 padding: 10px 20px;
+                height: 82%;
+                overflow: auto;
 
                 .demo_tabs_boxitem {
                     width: 100%;
@@ -245,16 +314,25 @@ const onSubmit = () => {
                         }
 
                         .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;
@@ -389,15 +467,22 @@ const onSubmit = () => {
             }
         }
 
-
         .orderbox_right_button {
             position: absolute;
             width: 90%;
             left: 50%;
             bottom: 16px;
+
+            .orderbox_right_buttonbutton {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+
             transform: translateX(-50%) !important;
         }
 
 
     }
-}</style>
\ No newline at end of file
+}
+</style>
\ No newline at end of file