1

package-lock.json

@@ -11,6 +11,7 @@
         "@element-plus/icons-vue": "^2.3.1",
         "axios": "^1.6.8",
         "element-plus": "^2.6.3",
+        "mitt": "^3.0.1",
         "pinia": "^2.1.7",
         "sass": "^1.72.0",
         "vue": "^3.4.21",
@@ -1308,6 +1309,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
+    },
     "node_modules/muggle-string": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",

package.json

@@ -12,6 +12,7 @@
     "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.6.8",
     "element-plus": "^2.6.3",
+    "mitt": "^3.0.1",
     "pinia": "^2.1.7",
     "sass": "^1.72.0",
     "vue": "^3.4.21",

src/layout/index.vue

@@ -1,10 +1,6 @@
 <script setup>
 import myHeader from "./myHeader.vue";
 import myAside from "./myAside.vue";
-import { initWS } from "@/utils/ws";
-
-const ws = initWS('eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIxMjcuMC4wLjE6ODMyNCIsImF1ZCI6IjEyNy4wLjAuMTo4MzI0IiwiaWF0IjoxNzEyMTI4NDczLCJuYmYiOjE3MTIxMjg0NzMsImV4cCI6MTcxMjE1MDA3MywianRpIjpbMzAsIm1lciJdfQ.1HO_Ax3wxW-gloTRn6Psy4KYEdv8kuEqlgTJSl4G4Wk');
-
 </script>
 
 <template>

src/router/index.js

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import layout from '@/layout/index.vue';
 import { useUserStore } from '@/store/user.js';
 
@@ -46,7 +46,7 @@ const routes = [
 ];
 
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHashHistory(),
   routes
 });
 

src/utils/axios.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { ElMessage } from "element-plus";
-import { useRouter } from "vue-router";
+import router from "@/router/index.js";
 import { useUserStore } from "../store/user";
 
 const request = axios.create({
@@ -8,6 +8,7 @@ const request = axios.create({
     timeout: 10000
 })
 
+
 // 请求拦截器
 request.interceptors.request.use(
     config => {
@@ -31,17 +32,16 @@ request.interceptors.response.use(
     response => {
         // 对响应数据做些什么，例如解析数据、统一处理错误等
         if (response.data.status === 401 || response.data.status === 40000) {   
-            const router = useRouter();
             ElMessage({
                 message: response.data.message,
                 type: 'error',
             })
-            setTimeout(() => {
+            setTimeout(()=>{
                 const userStore = useUserStore();
                 userStore.setUserInfo({});
                 userStore.setToken('');
                 router.push('/login');
-            }, 800);
+            },700)
         }
         if (response.data.status === 400) {   
             ElMessage({

src/views/home/index.vue

@@ -29,7 +29,7 @@ const getStoreList = (data) => {
     ...data,
   };
   storeListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
-    if(res.data.list.length < where.value.limit) loadEnd.value = true;
+    if(res.data?.list?.length < where.value.limit) loadEnd.value = true;
     let list = res.data.list.map((item) => {
       item.attr = Object.keys(item.sku);
       return item;

src/views/order/component/order.vue

@@ -1,9 +1,44 @@
 <script setup>
 import { ref } from "vue";
-import { cartListApi, cartDeleteApi, cartChangeApi } from "@/api/store.js";
+import {
+  orderListApi,
+  orderStatusApi,
+  orderLadingApi,
+  cartListApi
+} from "@/api/store.js";
+import { useUserStore } from "@/store/user.js";
+import { ElMessage } from "element-plus";
+import { useRouter } from "vue-router";
+
+const userStore = useUserStore();
 
 const list = ref([]);
-const keyword = ref('')
+const keyword = ref('');
+
+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 orderList = ref([]);
+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();
 
 </script>
 
@@ -13,12 +48,24 @@ const keyword = ref('')
       <div class="nav-item">
         订单列表
       </div>
-      <div class="nav-item-clear" @click="clearAll">
+      <div class="nav-item-clear">
-        <el-icon><Delete /></el-icon>清空
+        <el-icon><Delete /></el-icon>
       </div>
     </div>
     <div class="header-input">
-      <el-input v-model="keyword" placeholder="请输入付款"></el-input>
+      <el-input v-model="keyword" placeholder="请输入订单编号">
+        <template #append>
+          <el-button type="primary" style="background-color: #1890ff;color: #fff;border-radius: 0 5px 5px 0;">搜索</el-button>
+        </template>
+      </el-input>
+    </div>
+    <div class="order-list">
+      <div class="item" v-for="(item, index) in orderList" :key="index">
+        <div class="top">
+          <div class="sn">单号: {{ item.order_sn }}</div>
+          <div class="create-time"> {{ item.create_time }}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -51,95 +98,30 @@ const keyword = ref('')
   .header-input{
     padding: 1rem;
     padding-top: 0;
-    padding-bottom: 2rem;
+    height: 2.5rem;
-    height: 1.5rem;
     border-bottom: 1px solid #eee;
   }
   .order-list {
-    height: calc(100vh - 100px - 14rem);
+    height: calc(100vh - 100px - 8.2rem);
     overflow-y: auto;
-    .order-item {
+    .item{
-      display: flex;
       padding: 1rem;
-      border-bottom: 1px solid #eee;
+      .top{
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        .sn{
+          font-weight: bold;
+          font-size: 0.9rem;
+          &::before{
             
-      .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 {
+        .create-time{
-          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/indexList.vue

@@ -2,7 +2,6 @@
 import { ref } from "vue";
 import {
   orderListApi,
-  groupOrderListApi,
   orderStatusApi,
   orderLadingApi,
   cartListApi

src/vite-env.d.ts

@@ -1 +1,3 @@
 /// <reference types="vite/client" />
+declare module 'element-plus/dist/locale/zh-cn.mjs'
+declare module './router'

tsconfig.json

@@ -14,6 +14,8 @@
     "noEmit": true,
     "jsx": "preserve",
 
+    "allowJs": true,
+
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,

vite.config.ts

@@ -4,6 +4,7 @@ import vue from '@vitejs/plugin-vue'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  base: './',
   server: {
     port: '5175',
     host: '0.0.0.0',