简单调整了全部商店界面，试图实现单个商店界面，但在数据更新上又遇到了不更新的问题

components.d.ts

@@ -10,7 +10,10 @@ declare module 'vue' {
     AllStore: typeof import('./src/components/AllStore.vue')['default']
     DropFile: typeof import('./src/components/DropFile.vue')['default']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElRow: typeof import('element-plus/es')['ElRow']
     Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']

src/api/store.ts

@@ -4,7 +4,8 @@ import {STORE_MODULE} from './_prefix'
 // 创建商店
 export const createStore = payload => {
     console.log(payload)
-    return axios.post(`${STORE_MODULE}/`, payload, {headers: {'Content-Type': 'application/json','token': localStorage.getItem('token')}})
+    return axios.post(`${STORE_MODULE}/`, payload,
+        {headers: {'Content-Type': 'application/json','token': localStorage.getItem('token')}})
         .then(res => {
             return res;
         })
@@ -20,7 +21,7 @@ export const getAllStore = () => {
 
 // 获取指定商店
 export const getStoreById = storeId => {
-    return axios.get(`${STORE_MODULE}/?id=${storeId}`)
+    return axios.get(`${STORE_MODULE}/${storeId}`)
         .then(res => {
             return res;
         })

src/router/index.ts

@@ -29,6 +29,11 @@ const router = createRouter({
                     title: '个人信息'
                 }
             },
+            {
+                path: '/storeDetail/:storeId',
+                name: 'storeDetail',
+                component: () => import('../views/portal/StoreDetail.vue'),
+            },
         ]
     }, {
         path: '/manager/createStore',

src/views/common/StoreItem.vue

@@ -19,8 +19,8 @@ const location = props.storeVO.location
 </script>
 
 <template>
-  <el-card>
-    <img :src="logoUrl">
+  <el-card class="store-item-card" >
+    <el-image class="logo-image" :src="logoUrl"/>
     <el-row style="font-size: 20px">
       {{ name }}
     </el-row>
@@ -37,5 +37,13 @@ const location = props.storeVO.location
 </template>
 
 <style scoped>
+.store-item-card {
+  margin-bottom: 10px;
+  width:30%;
+  border-radius: 8px;
+}
 
+.logo-image {
+  height: 120px;
+}
 </style>

src/views/manager/CreateStore.vue

@@ -43,7 +43,7 @@ function generateURL(file) {
   let formData = new FormData();
   formData.append('file', file);
   uploadImage(formData).then(res => {
-    logoUrl = res.result;
+    logoUrl.value = res.result;
   });
 
   let fileSrc = URL.createObjectURL(file);
@@ -67,7 +67,7 @@ function handleCreateStore() {
   const payload = {
     name: name.value,
     location: location.value,
-    logoUrl: logoUrl
+    logoUrl: logoUrl.value
   };
   createStore(payload).then(res => {
     console.log(res);
@@ -77,6 +77,10 @@ function handleCreateStore() {
         type: 'success',
         center: true,
       })
+      name.value = '';
+      location.value = '';
+      logoUrl.value = '';
+      files.value.splice(i, 1);
     } else if (res.code === '400') {
       ElMessage({
         message: res.msg,

src/views/portal/AllStore.vue

@@ -2,25 +2,35 @@
 
 import StoreItem from "../common/StoreItem.vue";
 import {ref} from "vue";
-import {getAllStore} from "../../api/store.ts";
+import {getAllStore, getStoreById} from "../../api/store.ts";
+import {useRouter} from "vue-router";
+
+const router = useRouter();
 
 let storeList = ref([])
 
+getStoreList();
+
 function getStoreList() {
   getAllStore().then(res => {
     storeList.value = res.result;
-    console.log(storeList.value)
   })
 }
 
-getStoreList();
-
+function toStoreDetailPage(storeId) {
+  router.push("/storeDetail/" + storeId);
+}
 </script>
 
 <template>
-  <StoreItem v-for="storeVO in storeList" :storeVO="storeVO" />
+  <StoreItem class="store-item-list"
+             v-for="storeVO in storeList" :storeVO="storeVO"
+             @click="toStoreDetailPage(storeVO.id)" />
 </template>
 
 <style scoped>
-
+.store-item-list {
+  margin-top: 20px;
+  margin-left: 50px;
+}
 </style>

src/views/portal/StoreDetail.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+
+import {getStoreById} from "../../api/store.ts";
+import {useRouter} from "vue-router";
+import {ref} from "vue";
+
+const router = useRouter();
+const storeId = router.currentRoute.value.params.storeId;
+let storeVO = ref([]);
+let id = ref('')
+let name = ref('')
+let logoUrl = ref('')
+let rating = ref('')
+let number = ref('')
+let location = ref('')
+
+getStoreDetail();
+
+function getStoreDetail() {
+  getStoreById(storeId).then(res => {
+    storeVO.value = res.result;
+    console.log(storeVO.value);
+    id = storeVO.value.id
+    name = storeVO.value.name
+    logoUrl = storeVO.value.logoUrl
+    rating = storeVO.value.rating
+    number = storeVO.value.number
+    location = storeVO.value.location
+  })
+}
+
+</script>
+
+<template>
+  <el-image class="logo-image" :src="logoUrl"/>
+  <el-row style="font-size: 20px">
+    {{ name }}
+  </el-row>
+  <el-row style="font-size: 10px">
+    评分人数: {{ number }}
+  </el-row>
+  <el-row style="font-size: 10px">
+    评分: {{ rating }}
+  </el-row>
+  <el-row style="font-size: 10px">
+    地址: {{ location }}
+  </el-row>
+</template>
+
+<style scoped>
+.logo-image {
+  height: 120px;
+}
+</style>