尝试实现首页，遇到了渲染顺序的问题

components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AllStore: typeof import('./src/components/AllStore.vue')['default']
     Dashboard: typeof import('./src/components/Dashboard.vue')['default']
     DropFile: typeof import('./src/components/DropFile.vue')['default']
     ElAside: typeof import('element-plus/es')['ElAside']
@@ -30,5 +31,6 @@ declare module 'vue' {
     Register: typeof import('./src/components/Register.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SingleStore: typeof import('./src/components/SingleStore.vue')['default']
   }
 }

index.html

@@ -10,3 +10,12 @@
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
+
+<style>
+  html,body,#app{
+    height:100%;
+    width: 100%;
+    margin: 0px;
+    padding: 0px;
+  }
+</style>

src/App.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
-
+//import SingleStore from './components/SingleStore.vue'
+import AllStore from './components/AllStore.vue'
 </script>
 
 <template>
-
-    <router-view />
-
+  <AllStore />
 </template>
 
 <style scoped>
-
 </style>

src/api/store.ts

@@ -3,10 +3,11 @@ import {STORE_MODULE} from './_prefix'
 
 // 创建商店
 export const createStore = payload => {
-    return axios.post(`${STORE_MODULE}/create`, payload)
+    console.log(payload)
+    return axios.post(`${STORE_MODULE}/`, payload, {headers: {'Content-Type': 'application/json','token': localStorage.getItem('token')}})
         .then(res => {
-        return res;
-    })
+            return res;
+        })
 }
 
 // 获取全部商店

src/components/AllStore.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import {getStoreById} from "../api/store.ts";
+import { router } from "../router";
+type StoreList = [
+    {
+        "id": number,
+        "name": string,
+        "logoUrl": string,
+        "rating": number,
+        "number": number,
+        "location": string
+    }
+]
+const storelist:StoreList=[{id:1001, name:'123', logoUrl:'', rating:0, number:0, location:'F4'}]
+
+async function showStore(id:number) {
+    const payload = {id:id}
+
+    getStoreById(payload)
+        .then(res => {
+            console.log(res)
+            const token = res.result
+            localStorage.setItem('token', token)
+            router.push({path:"/singlestore"})
+        })
+}
+    
+</script>
+
+<template>
+    <div class="common-layout">
+      <el-container>
+        <el-header style="background-color: #409EFF; height: auto;"><h1 style="color: white;">商店列表</h1></el-header>
+        <el-main style="width: 80%; margin-left: 10vw">
+            <ul style="list-style: none;">
+                <template v-for="store in storelist" :key="storelist.id">
+                    <li class="item" @click="showStore(store.id)">
+                        <el-container>
+                            <el-aside><el-image :src = "store.logoUrl" style="height: 200px; width: 300px;"></el-image></el-aside>
+                            <el-main style="text-align: left; height: 200px; position: relative;">
+                                <h3 style="text-align: left; margin-top: 0;">商店名称</h3>
+                                <el-space>
+                                    xx个评分
+                                    <el-container>
+                                    <el-icon><Star /></el-icon>
+                                    <el-icon><Star /></el-icon>
+                                    <el-icon><Star /></el-icon>
+                                    <el-icon><Star /></el-icon>
+                                    <el-icon><Star /></el-icon>
+                                    </el-container>
+                                </el-space>
+                                <div style="bottom: 10px; position: absolute;">商店位置</div>
+                            </el-main>
+                        </el-container>
+                    </li>
+                </template>
+            </ul>
+        </el-main>
+      </el-container>
+    </div>
+</template>
+
+<style>
+.item{
+    border: 1px solid black;
+    /*边框合并*/
+    margin:0 0 -1px -1px;
+    position: relative; 
+    z-index: 0;
+}
+ 
+.item:hover{
+    border-color: #409EFF;
+    border-width: medium;
+    z-index: 1;
+}
+</style>

src/components/Register.vue

@@ -123,7 +123,6 @@
                 </select>
               </el-form-item>
             </el-col>
-
           </el-row>
 
 
@@ -248,4 +247,4 @@
   background-image: url("../assets/shopping-1s-1084px.svg");
 }
 
-</style>
+</style>

src/components/SingleStore.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+    const url = 'src/assets/img/eg.jpg'
+</script>
+
+<template>
+    <div>
+      <el-container>
+        <el-header>
+          <h1 style="color: white;">XX商店</h1>
+        </el-header>
+          <el-container>
+            <el-aside width="600px">
+              <el-image :src="url" />
+            </el-aside>
+            <el-main>
+              <el-space>
+                xx个评分
+                <el-container>
+                  <el-icon><Star /></el-icon>
+                  <el-icon><Star /></el-icon>
+                  <el-icon><Star /></el-icon>
+                  <el-icon><Star /></el-icon>
+                  <el-icon><Star /></el-icon>
+                </el-container>
+              </el-space>
+            </el-main>
+          </el-container>
+          <el-footer><h2 style="color: white;">地址：</h2></el-footer>
+      </el-container>
+    </div>
+</template>
+
+<style scoped>
+.el-header, .el-footer {
+  max-width: 100%;
+  background-color: #409EFF;
+  height: auto;
+}
+</style>

src/main.ts

@@ -3,6 +3,9 @@ import {router} from './router'
 import App from './App.vue'
 import './style.css'
 import axios from 'axios'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 axios.defaults.baseURL = ("http://localhost:8080")
 axios.defaults.timeout = 30000;

src/style.css

@@ -3,55 +3,55 @@
 @tailwind utilities;
 
 :root {
-  font-family: sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+    font-family: sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
 }
 
 html, body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
+    margin: 0;
+    padding: 0;
+    height: 100%;
 }
 
 #app {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 
-  @apply min-h-screen
+    @apply min-h-screen
 }
 
 @layer components {
-  .main {
-    @apply flex grow items-center justify-center h-screen text-center;
-    height: auto;
-  }
-
-  .dropzone-container {
-    @apply p-16 bg-[#f7fafc] border border-solid border-[#e2e8f0];
-  }
-
-  .hidden-input {
-    @apply opacity-0 overflow-hidden absolute w-1 h-2;
-  }
-
-  .file-label {
-    @apply text-xl block cursor-pointer;
-    font-size: 10pt;
-  }
-
-  .preview-container {
-    @apply flex mt-8;
-  }
-
-  .preview-card {
-    @apply flex border border-solid border-[#a2a2a2] p-2 ml-2;
-  }
-
-  .preview-img {
-    @apply w-14 h-14 rounded-md border border-solid border-[#a2a2a2] bg-[#a2a2a2];
-  }
+    .main {
+        @apply flex grow items-center justify-center h-screen text-center;
+        height: auto;
+    }
+
+    .dropzone-container {
+        @apply p-16 bg-[#f7fafc] border border-solid border-[#e2e8f0];
+    }
+
+    .hidden-input {
+        @apply opacity-0 overflow-hidden absolute w-1 h-2;
+    }
+
+    .file-label {
+        @apply text-xl block cursor-pointer;
+        font-size: 10pt;
+    }
+
+    .preview-container {
+        @apply flex mt-8;
+    }
+
+    .preview-card {
+        @apply flex border border-solid border-[#a2a2a2] p-2 ml-2;
+    }
+
+    .preview-img {
+        @apply w-14 h-14 rounded-md border border-solid border-[#a2a2a2] bg-[#a2a2a2];
+    }
 }

src/utils/request.ts

@@ -8,8 +8,6 @@ function hasToken() {
     return !(localStorage.getItem('token') == '')
 }
 
-
-
 service.interceptors.request.use(
     config => {
         if(hasToken()) {

src/views/store/CreateStore.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import {ElForm, ElFormItem, ElMessage} from "element-plus"
 import {computed, ref} from 'vue'
 import {createStore} from "../../api/store.ts"
 import {uploadImage} from "../../api/image.ts"
@@ -7,7 +6,7 @@ import {uploadImage} from "../../api/image.ts"
 // 输入框值
 const name = ref('')
 const location = ref('')
-const logoURL = ref('')
+let logoUrl = ref('')
 
 // 用于前端阻拦不合法输入
 const hasNameInput = computed(() => name.value != '')
@@ -42,19 +41,17 @@ function drop(e) {
 
 function generateURL(file) {
   let formData = new FormData();
-  console.log(file)
   formData.append('file', file);
   uploadImage(formData).then(res => {
-    console.log(res);
-    this.logoURL = res.data;
-    return this.logoUrl;
+    logoUrl = res.result;
   });
-  // let fileSrc = URL.createObjectURL(file);
-  // setTimeout(() => {
-  //   URL.revokeObjectURL(fileSrc);
-  // }, 1000);
-  // console.log(fileSrc);
-  // return fileSrc;
+
+  let fileSrc = URL.createObjectURL(file);
+  setTimeout(() => {
+    URL.revokeObjectURL(fileSrc);
+  }, 1000);
+
+  return fileSrc;
 }
 
 function remove(i) {
@@ -67,21 +64,27 @@ const createDisabled = computed(() => {
 })
 
 function handleCreateStore() {
-  const payload1 = {
-    name: name,
-    location: location,
+  const payload = {
+    name: name.value,
+    location: location.value,
     logoUrl: logoUrl
   };
-  const payload2 = {
-    file: files[0]
-  };
-  createStore(payload1).then(res => {
-    uploadImage(payload2).then(res => {
-      ElMessage.success(`添加商户成功！`);
-    });
+  createStore(payload).then(res => {
+    console.log(res);
+    if (res.code === '000') {
+      ElMessage({
+        message: '添加商户成功！',
+        type: 'success',
+        center: true,
+      })
+    } else if (res.code === '400') {
+      ElMessage({
+        message: res.msg,
+        type: 'error',
+        center: true,
+      })
+    }
   });
-
-
 }
 </script>
 
@@ -146,7 +149,7 @@ function handleCreateStore() {
                 <div class="preview-container mt-4" v-if="files.length">
                   <div v-for="file in files" :key="file.name" class="preview-card">
                     <div>
-                      <img class="preview-img" :src="generateURL(file)" />
+                      <img class="preview-img" :src="generateURL(file)"/>
                       <p>
                         {{ file.name }}
                       </p>

tsconfig.json

@@ -20,6 +20,11 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "auto-imports.d.ts"
+  ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }