新增现金收款

src/components/pay.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, nextTick } from "vue";
+import { ref, watch, nextTick, computed } from "vue";
 import { orderCreateApi, orderStatusApi, orderPayApi } from "@/api/store.js";
 import { ElMessage } from "element-plus";
 import { audioplay } from "@/utils/audio.js";
@@ -24,6 +24,13 @@ const open = () => {
   });
 };
 
+const changeActive = (e) => {
+  active.value = e;
+  if (active.value == 2) {  // 添加键盘事件监听器
+    document.addEventListener('keydown', keyboard);
+  }else document.removeEventListener('keydown', keyboard);
+};
+
 const form = ref({});
 const cart_id = ref([]);
 const setForm = (e) => {
@@ -40,6 +47,21 @@ const emit = defineEmits(["paySuccess"]);
 
 const reLoad = ref(false);
 
+const numList = ref([
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "0",
+  "00",
+  ".",
+]);
+
 let timecount = 0; //刷新间隔
 
 const order_id = ref("");
@@ -85,7 +107,7 @@ const handleEnter = () => {
       .catch((err) => {
         loading.value = false;
         nextTick(() => {
-          codeRef.value.focus();
+          codeRef.value?.focus();
         });
       });
 };
@@ -115,7 +137,7 @@ const orderPay = (id) => {
       input.value = "";
       loading.value = false;
       nextTick(() => {
-        codeRef.value.focus();
+        codeRef.value?.focus();
       });
     });
 };
@@ -143,20 +165,23 @@ const getOrderStatus = (id) => {
         input.value = "";
         loading.value = false;
         nextTick(() => {
-          codeRef.value.focus();
+          codeRef.value?.focus();
         });
       }
     })
     .catch((err) => {
       if (reLoad.value && count.value < 3)
-        setTimeout(() => {
+        setTimeout(
+          () => {
             getOrderStatus(id);
-        }, 15000 - timecount > 0 ? 15000 - timecount : 0);
+          },
+          15000 - timecount > 0 ? 15000 - timecount : 0
+        );
       else {
         input.value = "";
         loading.value = false;
         nextTick(() => {
-          codeRef.value.focus();
+          codeRef.value?.focus();
         });
       }
     });
@@ -166,7 +191,7 @@ const beforeClose = () => {
   reLoad.value = false;
   loading.value = false;
   input.value = "";
-  codeRef.value.blur();
+  codeRef.value?.blur();
   emit("paySuccess");
   drawer.value = false;
 };
@@ -178,6 +203,150 @@ defineExpose({
   setForm,
   setRePay,
 });
+
+const collectionArray = ref([]);
+const collection = ref(""); //输入的金额
+const changePrice = computed(()=>{ // 找零
+  if(+collection.value>0){
+    return (collection.value - form.value.order_price).toFixed(2);
+  }
+  return -1;
+})
+const defaultcalc = ref(false);
+
+//清除计算机输入的数字
+const delNum = (type) => {
+  if (type === -1) {
+    collectionArray.value = [];
+  } else {
+    collectionArray.value.pop();
+  }
+  collection.value = collectionArray.value.length
+    ? collectionArray.value.join("")
+    : 0;
+};
+//输入实际收款金额
+const numTap = (item) => {
+  if (defaultcalc.value === false) {
+    collection.value = "";
+    defaultcalc.value = true;
+  }
+  let x = String(collection.value).indexOf(".") + 1;
+  let y = String(collection.value).length - x;
+  console.log(x, y);
+  if (x === 0 || y < 2) {
+    if (collectionArray.value.join("") <= 9999999) {
+      collectionArray.value.push(item);
+    }
+    collection.value =
+      collectionArray.value.join("") > 99999999
+        ? 99999999
+        : collectionArray.value.join("");
+  }
+};
+// 现金结算
+const cashBnt = () => {
+  console.log("结算");
+  orderCreateApi({
+      address_id: "",
+      key: form.value.key,
+      cart_id: cart_id.value,
+      pay_type: "cash_payment",
+      source: 300,
+    })
+      .then((res) => {
+        if (res.status == 200 && res.message == "支付成功") {
+          drawer.value = false;
+          ElMessage({
+            message: res.message,
+            type: "success",
+          });
+          audioplay(res.data.message);
+          beforeClose();
+        } else {
+          if (!res.data.group_order_sn) {
+            order_id.value = res.data.result.order_id;
+            loading.value = false;
+            return ElMessage({
+              message: res.message,
+              type: "error",
+            });
+          } else {
+            order_id.value = res.data.group_order_id;
+            count.value = 0;
+            timecount = 0;
+            getOrderStatus(res.data.group_order_sn);
+          }
+        }
+      })
+      .catch((err) => {
+        loading.value = false;
+        nextTick(() => {
+          codeRef.value?.focus();
+        });
+      });
+};
+
+// 监听键盘函数
+const keyboard = (event) => {
+  let e = event || window.event;
+  let key = e.keyCode;
+  if (true) {
+    event.stopPropagation(); // 阻止事件冒泡传递
+    event.preventDefault(); //阻止默认事件原有功能
+  }
+  switch (key) {
+    case 96:
+    case 48:
+      numTap(0);
+      break;
+    case 97:
+    case 49:
+      numTap(1);
+      break;
+    case 98:
+    case 50:
+      numTap(2);
+      break;
+    case 99:
+    case 51:
+      numTap(3);
+      break;
+    case 100:
+    case 52:
+      numTap(4);
+      break;
+    case 101:
+    case 53:
+      numTap(5);
+      break;
+    case 102:
+    case 54:
+      numTap(6);
+      break;
+    case 103:
+    case 55:
+      numTap(7);
+      break;
+    case 104:
+    case 56:
+      numTap(8);
+      break;
+    case 105:
+    case 57:
+      numTap(9);
+      break;
+    case 110:
+      numTap(".");
+      break;
+    case 190:
+      numTap(".");
+      break;
+    case 8:
+      delNum();
+      break;
+  }
+};
 </script>
 
 <template>
@@ -197,14 +366,14 @@ defineExpose({
           <div
             class="left"
             :class="{ active: active == 1 }"
-            @click="active = 1"
+            @click="changeActive(1)"
           >
             微信
           </div>
           <div
             class="right"
             :class="{ active: active == 2 }"
-            @click="active = 2"
+            @click="changeActive(2)"
           >
             现金收款
           </div>
@@ -230,14 +399,43 @@ defineExpose({
           <div class="tips"></div>
         </div>
         <div class="card2" v-else>
-          <div>现金收款正在开发中</div>
+          <div class="drawer-body">
-          <!-- <el-input ref="codeRef" v-model="input" autofocus class="code-input" placeholder="请点击输入框输入金额" /> -->
+            <div class="counter">
+              <div class="received">
+                <span v-if="collection">{{ collection }}</span>
+                <span v-else style="font-size: 1rem;color: #999;">按下键盘输入客户支付金额</span>
+              </div>
+              <div class="balance" v-if="changePrice>=0">
+                需找零(元)：<span class="money">￥{{ changePrice }}</span>
+              </div>
+              <div class="balance" v-else>不够找零, 请支付更多金额</div>
+              <div class="keypad">
+                <div class="left">
+                  <el-button
+                    v-for="item in numList"
+                    :key="item"
+                    @click="numTap(item)"
+                    >{{ item }}</el-button
+                  >
+                </div>
+                <div class="right">
+                  <el-button @click="delNum"
+                    ><el-icon><Delete /></el-icon
+                  ></el-button>
+                  <el-button @click="delNum(-1)">C</el-button>
+                  <el-button class="enter" @click="cashBnt">确认</el-button>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </template>
     <template #footer>
       <div style="width: 100%; display: flex; justify-content: center">
-        <el-button class="cancel-btn" @click="cancelClick">取消收款</el-button>
+        <el-button class="cancel-btn" @click="cancelClick"
+          >取消收款</el-button
+        >
       </div>
     </template>
   </el-drawer>
@@ -298,4 +496,84 @@ defineExpose({
   height: 3rem;
   font-size: 1.2rem;
 }
+
+.drawer-body {
+  width: 100%;
+  overflow-x: hidden;
+}
+
+.counter {
+  padding: 20px;
+  border-radius: 20px;
+  background-color: #f3f9ff;
+
+  .received {
+    height: 58px;
+    padding: 0 20px;
+    border: 1px solid #eeeeee;
+    border-radius: 8px;
+    background-color: #ffffff;
+    font-size: 26px;
+    line-height: 58px;
+    color: #303133;
+  }
+
+  .balance {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 18px 0 18px 10px;
+    text-align: start;
+    font-size: 15px;
+    color: #303133;
+
+    .money {
+      color: #ff4a00;
+    }
+  }
+
+  .keypad {
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+    grid-gap: 10px;
+
+    .left {
+      grid-column-end: span 3;
+      display: grid;
+      grid-template-columns: auto auto auto;
+      grid-gap: 10px;
+    }
+
+    .right {
+      display: grid;
+      grid-template-columns: auto;
+      grid-gap: 10px;
+    }
+
+    .el-button {
+      height: 62px;
+      width: 130px;
+      margin: 0 !important;
+      border: 0;
+      border-radius: 8px;
+      font-weight: 500;
+      font-size: 28px !important;
+      line-height: 62px;
+      color: #1890ff;
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+
+    .enter {
+      grid-row-end: span 4;
+      height: 134px;
+      background-color: #1890ff;
+      font-weight: 500;
+      font-size: 22px !important;
+      line-height: 134px;
+      color: #ffffff;
+    }
+  }
+}
 </style>

src/views/order/component/order.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { ref } from "vue";
+import { cartListApi, cartDeleteApi, cartChangeApi } from "@/api/store.js";
+
+const list = ref([]);
+const keyword = ref('')
+
+</script>
+
+<template>
+  <div class="my-order">
+    <div class="header-nav">
+      <div class="nav-item">
+        订单列表
+      </div>
+      <div class="nav-item-clear" @click="clearAll">
+        <el-icon><Delete /></el-icon>清空
+      </div>
+    </div>
+    <div class="header-input">
+      <el-input v-model="keyword" placeholder="请输入付款"></el-input>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.my-order {
+  border-radius: 1.2rem;
+  height: 100%;
+  background-color: #fff;
+  width: 30rem;
+  position: relative;
+  overflow: hidden;
+
+  .header-nav {
+    display: flex;
+    justify-content: space-between;
+    padding: 1rem;
+    height: 1.5rem;
+
+    span {
+      color: #ff4a00;
+    }
+    .nav-item-clear {
+      display: flex;
+      align-items: center;
+      font-size: 0.8rem;
+      cursor: pointer;
+    }
+  }
+  .header-input{
+    padding: 1rem;
+    padding-top: 0;
+    padding-bottom: 2rem;
+    height: 1.5rem;
+    border-bottom: 1px solid #eee;
+  }
+  .order-list {
+    height: calc(100vh - 100px - 14rem);
+    overflow-y: auto;
+    .order-item {
+      display: flex;
+      padding: 1rem;
+      border-bottom: 1px solid #eee;
+
+      .order-item-img {
+        width: 5rem;
+        height: 5rem;
+        border-radius: 0.5rem;
+      }
+      .order-item-info {
+        flex: 1;
+        box-sizing: border-box;
+        padding-left: 12px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        & > div {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+        .order-item-title {
+          .title {
+            width: 18rem;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+          .delete {
+            color: #1890ff;
+            cursor: pointer;
+          }
+        }
+        .order-item-sku {
+          cursor: pointer;
+          font-size: 0.8rem;
+          color: #999;
+        }
+      }
+    }
+  }
+  .order-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    box-shadow: 0 -1px 10px #eee;
+
+    .order-total {
+      height: 2.5rem;
+      padding: 1rem 2rem;
+      display: flex;
+      justify-content: space-between;
+      border-bottom: 1px solid #eee;
+      align-items: center;
+      .price {
+        display: flex;
+        align-items: center;
+        .total-item {
+          padding-right: 1.5rem;
+          span {
+            color: #f5222d;
+          }
+        }
+      }
+      .update-price {
+        .btn {
+          border-radius: 3rem;
+        }
+      }
+    }
+    .order-btn {
+      height: 3.2rem;
+      padding: 1rem 1.5rem;
+      .btn {
+        width: 100%;
+        height: 100%;
+        font-size: 1.2rem;
+        border-radius: 3rem;
+      }
+    }
+  }
+}
+</style>

src/views/order/index.vue

@@ -1,219 +1,19 @@
 <script setup>
-import { ref } from "vue";
+import order from "./component/order.vue";
-import {
+import { ref, nextTick } from "vue";
-  orderListApi,
-  groupOrderListApi,
-  orderStatusApi,
-  orderLadingApi,
-  cartListApi
-} from "@/api/store.js";
-import { useUserStore } from "@/store/user.js";
-import pay from "@/components/pay.vue";
-import { ElMessage } from "element-plus";
-import { useRouter } from "vue-router";
-
-const userStore = useUserStore();
-const orderList = ref([]);
-const router = useRouter();
-
-const tabPosition = ref(1); // 1-全部, 2-未支付
-const payRef = ref(null);
-
-const where = ref({
-  page: 1,
-  limit: 20,
-});
-
-const loading = ref(false);
-const total = ref(0);
-
-const getOrderList = () => {
-  loading.value = true;
-  if (tabPosition.value == 1) where.value.paid = null;
-  if (tabPosition.value == 2) where.value.paid = 0;
-  orderListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
-    orderList.value = res.data.list;
-    total.value = res.data.count;
-    loading.value = false;
-  });
-};
-
-getOrderList();
 
 
-const cartCount = ref(0);
-const getCartList = () => {
-  cartListApi({
-    source: 300,
-  }).then((res) => {
-    cartCount.value = res.data.list?.length;
-  });
-};
-getCartList();
-
-const changeTabPosition = (e) => {
-  where.value.page = 1;
-  getOrderList();
-};
-
-const prevClick = (e) => {
-  where.value.page = e;
-  getOrderList();
-};
-
-const nextClick = (e) => {
-  where.value.page = e;
-  getOrderList();
-};
-
-const currentChange = (e) => {
-  where.value.page = e;
-  getOrderList();
-};
-
-const paySuccess = () => {
-  getOrderList();
-};
-
-const rePay = (row) => {
-  payRef.value.setRePay({
-    price: row.pay_price,
-    order_id: row.group_order_id,
-  });
-  payRef.value.drawer = true;
-};
-
-const getOrderStatus = (id) => {
-  orderStatusApi({
-    order_sn: id,
-  })
-    .then((res) => {
-      if (res.data.paid == 1 || res.message == "支付成功") {
-        ElMessage({
-          message: res.message,
-          type: "success",
-        });
-        getOrderList();
-      } else {
-        ElMessage({
-          message: res.message,
-          type: "error",
-        });
-      }
-    })
-    .catch((err) => {});
-};
-
-const orderLadingSn = ref('')
-const orderLading = () => {
-  dialogVisible.value = false;
-  orderLadingApi({
-    order_sn: orderLadingSn.value,
-  }).then((res) => {
-    ElMessage({
-      message: res.message,
-      type: "success",
-    });
-    router.push({
-      name: "home",
-    });
-  });
-};
-
-const dialogVisible = ref(false);
-const orderLadingComfirm = (order_sn)=>{
-  orderLadingSn.value = order_sn;
-  dialogVisible.value = true;
-}
-
-const goHome = ()=>{
-  router.push({
-      name: "home",
-    });
-}
 </script>
 
 <template>
-  <div v-loading="loading" element-loading-text="加载中" class="my-order">
+  <div class="my-card">
-    <el-radio-group
+    <order ref="orderRef" @goPay="goPay" @editPupop="editPupop"/>
-      v-model="tabPosition"
-      style="margin-bottom: 30px"
-      @change="changeTabPosition"
-    >
-      <el-radio-button :value="1">全部</el-radio-button>
-      <el-radio-button :value="2">未支付</el-radio-button>
-    </el-radio-group>
-    <el-table :data="orderList" style="width: 100%">
-      <el-table-column prop="group_order_id" label="ID" width="100" />
-      <el-table-column prop="order_sn" label="订单号" width="260" />
-      <el-table-column prop="total_price" label="订单金额" />
-      <el-table-column prop="paid" label="支付状态">
-        <template #default="scope">
-          <span v-if="scope.row.paid == 1">已支付</span>
-          <span v-else style="color: #ff4a00">未支付</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="create_time" label="订单创建时间" />
-      <el-table-column prop="pay_time" label="订单支付时间">
-        <template #default="scope">
-          <span v-if="scope.row.pay_time">{{ scope.row.pay_time }}</span>
-          <div v-else class="flex">
-            <el-button type="primary" link @click="rePay(scope.row)"
-              >重新支付</el-button
-            >
-            <el-button
-              type="primary"
-              link
-              @click="getOrderStatus(scope.row.order_sn)"
-              >检测状态</el-button
-            >
-            <el-button
-              type="primary"
-              link
-              @click="orderLadingComfirm(scope.row.order_sn)"
-              >提单</el-button
-            >
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      :page-size="where.limit"
-      layout="prev, pager, next"
-      :total="total"
-      @prev-click="prevClick"
-      @next-click="nextClick"
-      @current-change="currentChange"
-    />
-    <pay ref="payRef" @paySuccess="paySuccess" />
-    <el-dialog
-      v-model="dialogVisible"
-      title="提示"
-      width="500"
-    >
-      <span>提单前请清空购物车, 避免提单的商品与购物车商品混合, 请确保购物车内无数据后再进行提单</span>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button v-if="cartCount>0" @click="goHome">
-            前去清空购物车
-          </el-button>
-          <el-button v-else type="primary" @click="orderLading">
-            确认提单
-          </el-button>
-        </div>
-      </template>
-    </el-dialog>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
-.my-order {
+.my-card {
-  background-color: #fff;
+  display: flex;
-  border-radius: 1.2rem;
-  box-sizing: border-box;
-  padding: 1rem;
-  overflow-y: scroll;
 }
 /* 修改滚动条的样式 */
 ::-webkit-scrollbar {

src/views/order/indexList.vue

@@ -0,0 +1,239 @@
+<script setup>
+import { ref } from "vue";
+import {
+  orderListApi,
+  groupOrderListApi,
+  orderStatusApi,
+  orderLadingApi,
+  cartListApi
+} from "@/api/store.js";
+import { useUserStore } from "@/store/user.js";
+import pay from "@/components/pay.vue";
+import { ElMessage } from "element-plus";
+import { useRouter } from "vue-router";
+
+const userStore = useUserStore();
+const orderList = ref([]);
+const router = useRouter();
+
+const tabPosition = ref(1); // 1-全部, 2-未支付
+const payRef = ref(null);
+
+const where = ref({
+  page: 1,
+  limit: 20,
+});
+
+const loading = ref(false);
+const total = ref(0);
+
+const getOrderList = () => {
+  loading.value = true;
+  if (tabPosition.value == 1) where.value.paid = null;
+  if (tabPosition.value == 2) where.value.paid = 0;
+  orderListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
+    orderList.value = res.data.list;
+    total.value = res.data.count;
+    loading.value = false;
+  });
+};
+
+getOrderList();
+
+
+const cartCount = ref(0);
+const getCartList = () => {
+  cartListApi({
+    source: 300,
+  }).then((res) => {
+    cartCount.value = res.data.list?.length;
+  });
+};
+getCartList();
+
+const changeTabPosition = (e) => {
+  where.value.page = 1;
+  getOrderList();
+};
+
+const prevClick = (e) => {
+  where.value.page = e;
+  getOrderList();
+};
+
+const nextClick = (e) => {
+  where.value.page = e;
+  getOrderList();
+};
+
+const currentChange = (e) => {
+  where.value.page = e;
+  getOrderList();
+};
+
+const paySuccess = () => {
+  getOrderList();
+};
+
+const rePay = (row) => {
+  payRef.value.setRePay({
+    price: row.pay_price,
+    order_id: row.group_order_id,
+  });
+  payRef.value.drawer = true;
+};
+
+const getOrderStatus = (id) => {
+  orderStatusApi({
+    order_sn: id,
+  })
+    .then((res) => {
+      if (res.data.paid == 1 || res.message == "支付成功") {
+        ElMessage({
+          message: res.message,
+          type: "success",
+        });
+        getOrderList();
+      } else {
+        ElMessage({
+          message: res.message,
+          type: "error",
+        });
+      }
+    })
+    .catch((err) => {});
+};
+
+const orderLadingSn = ref('')
+const orderLading = () => {
+  dialogVisible.value = false;
+  orderLadingApi({
+    order_sn: orderLadingSn.value,
+  }).then((res) => {
+    ElMessage({
+      message: res.message,
+      type: "success",
+    });
+    router.push({
+      name: "home",
+    });
+  });
+};
+
+const dialogVisible = ref(false);
+const orderLadingComfirm = (order_sn)=>{
+  orderLadingSn.value = order_sn;
+  dialogVisible.value = true;
+}
+
+const goHome = ()=>{
+  router.push({
+      name: "home",
+    });
+}
+</script>
+
+<template>
+  <div v-loading="loading" element-loading-text="加载中" class="my-order">
+    <el-radio-group
+      v-model="tabPosition"
+      style="margin-bottom: 30px"
+      @change="changeTabPosition"
+    >
+      <el-radio-button :value="1">全部</el-radio-button>
+      <el-radio-button :value="2">未支付</el-radio-button>
+    </el-radio-group>
+    <el-table :data="orderList" style="width: 100%">
+      <el-table-column prop="group_order_id" label="ID" width="100" />
+      <el-table-column prop="order_sn" label="订单号" width="260" />
+      <el-table-column prop="total_price" label="订单金额" />
+      <el-table-column prop="paid" label="支付状态">
+        <template #default="scope">
+          <span v-if="scope.row.paid == 1">已支付</span>
+          <span v-else style="color: #ff4a00">未支付</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="create_time" label="订单创建时间" />
+      <el-table-column prop="pay_time" label="订单支付时间">
+        <template #default="scope">
+          <span v-if="scope.row.pay_time">{{ scope.row.pay_time }}</span>
+          <div v-else class="flex">
+            <el-button type="primary" link @click="rePay(scope.row)"
+              >重新支付</el-button
+            >
+            <el-button
+              type="primary"
+              link
+              @click="getOrderStatus(scope.row.order_sn)"
+              >检测状态</el-button
+            >
+            <el-button
+              type="primary"
+              link
+              @click="orderLadingComfirm(scope.row.order_sn)"
+              >提单</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      :page-size="where.limit"
+      layout="prev, pager, next"
+      :total="total"
+      @prev-click="prevClick"
+      @next-click="nextClick"
+      @current-change="currentChange"
+    />
+    <pay ref="payRef" @paySuccess="paySuccess" />
+    <el-dialog
+      v-model="dialogVisible"
+      title="提示"
+      width="500"
+    >
+      <span>提单前请清空购物车, 避免提单的商品与购物车商品混合, 请确保购物车内无数据后再进行提单</span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button v-if="cartCount>0" @click="goHome">
+            前去清空购物车
+          </el-button>
+          <el-button v-else type="primary" @click="orderLading">
+            确认提单
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-order {
+  background-color: #fff;
+  border-radius: 1.2rem;
+  box-sizing: border-box;
+  padding: 1rem;
+  overflow-y: scroll;
+}
+/* 修改滚动条的样式 */
+::-webkit-scrollbar {
+  width: 5px; /* 设置滚动条的宽度 */
+}
+
+/* 设置滚动条的轨道样式 */
+::-webkit-scrollbar-track {
+  background-color: #f1f1f1; /* 设置轨道的背景色 */
+  margin: 20px 0;
+}
+
+/* 设置滚动条的滑块样式 */
+::-webkit-scrollbar-thumb {
+  background-color: #ccc; /* 设置滑块的背景色 */
+  border-radius: 5px; /* 设置滑块的圆角 */
+}
+
+/* 设置滚动条鼠标悬停时的滑块样式 */
+::-webkit-scrollbar-thumb:hover {
+  background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
+}
+</style>