实现了创建订单购买商品，但在个人订单列表界面更新订单状态上遇到了问题

components.d.ts

@@ -6,19 +6,30 @@
 export {}
 
 declare module 'vue' {
-    export interface GlobalComponents {
-        ElButton: typeof import('element-plus/es')['ElButton']
-        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']
-        Login: typeof import('./src/components/Login.vue')['default']
-        Register: typeof import('./src/components/Register.vue')['default']
-        RouterLink: typeof import('vue-router')['RouterLink']
-        RouterView: typeof import('vue-router')['RouterView']
-    }
+  export interface GlobalComponents {
+    ElAside: typeof import('element-plus/es')['ElAside']
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    Footer: typeof import('./src/components/Footer.vue')['default']
+    Header: typeof import('./src/components/Header.vue')['default']
+    Login: typeof import('./src/components/Login.vue')['default']
+    Register: typeof import('./src/components/Register.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
 }

src/api/_prefix.ts

@@ -6,5 +6,7 @@ export const USER_MODULE= `${API_MODULE}/users`
 export const STORE_MODULE= `${API_MODULE}/stores`
 //商品模块
 export const PRODUCT_MODULE= `${API_MODULE}/products`
+//订单模块
+export const ORDER_MODULE= `${API_MODULE}/orders`
 //图片模块
 export const IMAGE_MODULE= `${API_MODULE}/images`

src/api/order.ts

@@ -0,0 +1,43 @@
+import {axios} from '../utils/request'
+import {ORDER_MODULE} from './_prefix'
+
+//创建订单
+export const createOrder = payload => {
+    return axios.post(`${ORDER_MODULE}/`, payload,
+        {headers: {'Content-Type': 'application/json'}})
+        .then(res => {
+            return res;
+        })
+}
+
+//订单支付
+export const payOrder = orderId => {
+    return axios.post(`${ORDER_MODULE}/pay/?orderId=${orderId}`)
+        .then(res => {
+            return res;
+        })
+}
+
+//获取用户下订单
+export const getAllOrder = () => {
+    return axios.get(`${ORDER_MODULE}/`, )
+        .then(res => {
+            return res;
+        })
+}
+
+//订单发货
+export const deliverOrder = orderId => {
+    return axios.post(`${ORDER_MODULE}/deliver/?orderId=${orderId}`)
+        .then(res => {
+            return res;
+        })
+}
+
+//订单收货
+export const getOrder = orderId => {
+    return axios.post(`${ORDER_MODULE}/get/?orderId=${orderId}`)
+        .then(res => {
+            return res;
+        })
+}

src/api/product.ts

@@ -1,7 +1,7 @@
 import {axios} from '../utils/request'
 import {PRODUCT_MODULE} from './_prefix'
 
-// 创建商店
+// 创建商品
 export const createProduct = payload => {
     return axios.post(`${PRODUCT_MODULE}/`, payload,
         {headers: {'Content-Type': 'application/json'}})
@@ -9,3 +9,19 @@ export const createProduct = payload => {
             return res;
         })
 }
+
+// 获取商店下所有商品
+export const getProductsByStoreId = storeId => {
+    return axios.get(`${PRODUCT_MODULE}/?storeId=${storeId}`)
+        .then(res => {
+            return res;
+        })
+}
+
+// 根据Id获取商品信息
+export const getProductById = productId => {
+    return axios.get(`${PRODUCT_MODULE}/${productId}`)
+        .then(res => {
+            return res;
+        })
+}

src/components/Login.vue

@@ -2,7 +2,7 @@
   import {ElForm, ElFormItem } from "element-plus";
   import { ref, computed } from 'vue';
   import {router} from '../router'
-  import {userLogin} from "../api/user.ts";
+  import {userInfo, userLogin} from "../api/user.ts";
 
 
   // 输入框值
@@ -32,13 +32,10 @@
 
     userLogin(payload)
         .then(res => {
-
-          console.log(res)
           const token = res.result
           sessionStorage.setItem('token', token)
 
-          // 路由跳转
-          router.push({ path: "/allStore" })
+          router.push({ path: "/allStore"})
         })
         .catch(e => {
           console.log(e.message)

src/router/index.ts

@@ -39,6 +39,21 @@ const router = createRouter({
                 name: 'createProduct',
                 component: () => import('../views/staff/CreateProduct.vue'),
             },
+            {
+                path: '/productDetail/:productId',
+                name: 'productDetail',
+                component: () => import('../views/portal/ProductDetail.vue'),
+            },
+            {
+                path: '/customer/buyProduct/:productId',
+                name: 'buyProduct',
+                component: () => import('../views/customer/BuyProduct.vue'),
+            },
+            {
+                path: '/customer/allOrder',
+                name: 'bugProduct',
+                component: () => import('../views/customer/AllOrder.vue'),
+            },
         ]
     }, {
         path: '/manager/createStore',
@@ -49,8 +64,6 @@ const router = createRouter({
 router.beforeEach((to, from, next) => {
     const role = sessionStorage.getItem('token');
 
-    console.log(role);
-
     if (role) {
         next();
     } else {

src/views/common/OrderItem.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import {deliverOrder, getOrder, payOrder} from "../../api/order.ts";
+import {ref} from "vue";
+
+const props = defineProps({
+  orderVO: {
+    type: Object,
+    required: true
+  },
+  getOrderList: {
+    type: Function,
+    required: true
+  }
+})
+
+const orderId = props.orderVO.id
+const userId = props.orderVO.userId
+const productId = props.orderVO.productId
+const amount = props.orderVO.amount
+const paid = props.orderVO.paid
+const type = props.orderVO.type
+const content = props.orderVO.content
+const rating = props.orderVO.rating
+const status = props.orderVO.status
+const createTime = props.orderVO.createTime
+const finishTime = props.orderVO.finishTime
+
+function handleType() {
+  if (type === 'DELIVERY') {
+    return "快递到家"
+  } else if (type === 'PICKUP') {
+    return "到店自取"
+  }
+}
+
+function handleStatus() {
+  if (status === 'UNPAID') {
+    return "待支付"
+  } else if (status === 'UNSEND') {
+    return "待发货"
+  } else if (status === 'UNGET') {
+    return "待收货"
+  } else if (status === 'UNCOMMENT') {
+    return "待评价"
+  } else if (status === 'DONE') {
+    return "已完成"
+  }
+}
+
+function handleTime(time) {
+  if (time === null) {
+    return "暂未完成"
+  }
+  let times = time.split(/T|\./)
+  return times[0] + " " + times[1]
+}
+
+let orderDialogVisible = ref(false)
+
+function handlePay() {
+  orderDialogVisible.value = true
+}
+
+function handleConfirmOrder() {
+  payOrder(orderId).then(res => {
+    if (res.code === '000') {
+      ElMessage({
+        message: '订单支付成功！',
+        type: 'success',
+        center: true,
+      })
+      orderDialogVisible.value = false
+      //props.getOrderList()
+    } else if (res.code === '400') {
+      ElMessage({
+        message: res.msg,
+        type: 'error',
+        center: true,
+      })
+    }
+  })
+}
+
+function handleDeliver() {
+  deliverOrder(orderId).then(res => {
+    if (res.code === '000') {
+      ElMessage({
+        message: '订单发货成功！',
+        type: 'success',
+        center: true,
+      })
+      props.getOrderList()
+    } else if (res.code === '400') {
+      ElMessage({
+        message: res.msg,
+        type: 'error',
+        center: true,
+      })
+    }
+  })
+}
+
+function handleGet() {
+  getOrder(orderId).then(res => {
+    if (res.code === '000') {
+      ElMessage({
+        message: '订单收货成功！',
+        type: 'success',
+        center: true,
+      })
+      props.getOrderList()
+    } else if (res.code === '400') {
+      ElMessage({
+        message: res.msg,
+        type: 'error',
+        center: true,
+      })
+    }
+  })
+}
+</script>
+
+<template>
+  <div>
+    <el-card class="order-item-card">
+      <el-row style="font-size: 15px">
+        数量：{{ amount }} 件
+      </el-row>
+      <el-row style="font-size: 15px">
+        支付金额：{{ paid }} 元
+      </el-row>
+      <el-row style="font-size: 15px">
+        取货类型：{{ handleType() }}
+      </el-row>
+      <el-row style="font-size: 15px">
+        评分：{{ rating }}
+      </el-row>
+      <el-row style="font-size: 15px">
+        状态：{{ handleStatus() }}
+        <el-button v-if="status === 'UNPAID'"
+                   class="status-change-button" size="small" type="primary"
+                   @click="handlePay">去支付
+        </el-button>
+        <el-button v-if="status === 'UNSEND'"
+                   class="status-change-button" size="small" type="primary"
+                   @click="handleDeliver">去发货
+        </el-button>
+        <el-button v-if="status === 'UNGET'"
+                   class="status-change-button" size="small" type="primary"
+                   @click="handleGet">去收货
+        </el-button>
+        <el-button v-if="status === 'UNCOMMENT'"
+                   class="status-change-button" size="small" type="primary">去评价
+        </el-button>
+      </el-row>
+      <el-row style="font-size: 15px">
+        创建时间: {{ handleTime(createTime) }}
+      </el-row>
+      <el-row style="font-size: 15px">
+        完成时间: {{ handleTime(finishTime) }}
+      </el-row>
+    </el-card>
+
+    <el-dialog v-model="orderDialogVisible">
+      <el-form>
+        <el-form-item>
+          <label for="amount">购买数量：</label>
+          {{ amount }} 件
+        </el-form-item>
+        <el-form-item>
+          <label for="discountPrice">总价：</label>
+          {{ paid }} 元
+        </el-form-item>
+        <el-form-item>
+          <label for="type">提货方式：</label>
+          {{ handleType() }}
+        </el-form-item>
+        <el-form-item>
+          <label for="type">优惠券：</label>
+          <!--          <el-select id="type"-->
+          <!--                     v-model="type"-->
+          <!--                     placeholder="请选择"-->
+          <!--          >-->
+          <!--            <el-option value="DELIVERY">到店自提</el-option>-->
+          <!--            <el-option value="PICKUP">快递到家</el-option>-->
+          <!--          </el-select>-->
+        </el-form-item>
+      </el-form>
+      <el-button @click="handleConfirmOrder">确认支付</el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.order-item-card {
+  margin-bottom: 10px;
+  width: 30%;
+  border-radius: 8px;
+}
+
+.status-change-button {
+  margin-left: 10px;
+}
+</style>

src/views/common/ProductItem.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+const props = defineProps({
+  productVO: {
+    type: Object,
+    required: true
+  }
+})
+
+const id = props.productVO.id
+const storeId = props.productVO.storeId
+const name = props.productVO.name
+const photoUrlList = props.productVO.photoUrlList
+const rating = props.productVO.rating
+const number = props.productVO.number
+const salesAmount = props.productVO.salesAmount
+const stock = props.productVO.stock
+const category = props.productVO.category
+const price = props.productVO.price
+</script>
+
+<template>
+  <el-card class="product-item-card" >
+    <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">
+      销量: {{ salesAmount }}
+    </el-row>
+    <el-row style="font-size: 10px">
+      品类: {{ category }}
+    </el-row>
+    <el-row style="font-size: 10px">
+      价格: {{ price }}
+    </el-row>
+    <el-row style="font-size: 10px">
+      库存: {{ stock }}
+    </el-row>
+  </el-card>
+</template>
+
+<style scoped>
+.product-item-card {
+  margin-bottom: 10px;
+  width:30%;
+  border-radius: 8px;
+}
+</style>

src/views/common/StoreItem.vue

@@ -7,8 +7,6 @@ const props = defineProps({
   }
 })
 
-console.log(props.storeVO)
-
 const id = props.storeVO.id
 const name = props.storeVO.name
 const logoUrl = props.storeVO.logoUrl
@@ -19,7 +17,7 @@ const location = props.storeVO.location
 </script>
 
 <template>
-  <el-card class="store-item-card" >
+  <el-card class="store-item-card">
     <el-image class="logo-image" :src="logoUrl"/>
     <el-row style="font-size: 20px">
       {{ name }}

src/views/customer/AllOrder.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import {ref} from "vue";
+import {getAllOrder} from "../../api/order.ts";
+import OrderItem from "../common/OrderItem.vue";
+
+let orderList = ref()
+
+getOrderList()
+
+function getOrderList() {
+  getAllOrder().then(res => {
+    orderList.value = res.result
+    console.log("获取订单列表")
+  })
+}
+</script>
+
+<template>
+  <div>
+    <OrderItem class="order-item-list"
+               v-for="orderVO in orderList" :orderVO="orderVO" :getOrderList="getOrderList"/>
+  </div>
+</template>
+
+<style scoped>
+.order-item-list {
+  margin-top: 20px;
+  margin-left: 50px;
+}
+</style>

src/views/customer/BuyProduct.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import {useRouter} from "vue-router";
+import {ref} from "vue";
+import {getProductById} from "../../api/product.ts";
+import {createOrder, payOrder} from "../../api/order.ts";
+
+const router = useRouter();
+const productId = router.currentRoute.value.params.productId;
+const productVO = ref()
+let storeId = ref(0)
+let name = ref('')
+let photoUrlList = ref([])
+let rating = ref(0)
+let number = ref(0)
+let salesAmount = ref(0)
+let stock = ref(0)
+let category = ref('')
+let price = ref(0)
+
+getProductDetail()
+
+function getProductDetail() {
+  getProductById(productId).then(res => {
+    console.log(res.result)
+    productVO.value = res.result
+    storeId.value = productVO.value.storeId
+    name.value = productVO.value.name
+    photoUrlList.value = productVO.value.photoUrlList
+    rating.value = productVO.value.rating
+    number.value = productVO.value.number
+    salesAmount.value = productVO.value.salesAmount
+    stock.value = productVO.value.stock
+    category.value = productVO.value.category
+    price.value = productVO.value.price
+  })
+}
+
+
+const amount = ref(1)
+const totalPrice = ref(price)
+const handleChange = () => {
+  totalPrice.value = amount.value * price.value
+}
+
+const type = ref()
+
+let orderDialogVisible = ref(false)
+
+const orderId = ref()
+
+function handleCreateOrder() {
+  const payload = {
+    productId: productId,
+    amount: amount.value,
+    type: type.value
+  };
+  createOrder(payload).then(res => {
+    if (res.code === '000') {
+      ElMessage({
+        message: '创建订单成功！',
+        type: 'success',
+        center: true,
+      })
+      orderId.value = res.result.id
+      orderDialogVisible.value = true
+    } else if (res.code === '400') {
+      ElMessage({
+        message: res.msg,
+        type: 'error',
+        center: true,
+      })
+    }
+  })
+}
+
+function handleConfirmOrder() {
+  payOrder(orderId.value).then(res => {
+    if (res.code === '000') {
+      ElMessage({
+        message: '订单支付成功！',
+        type: 'success',
+        center: true,
+      })
+      orderDialogVisible.value = false
+      amount.value = 1
+      type.value = ''
+      totalPrice.value = price.value
+    } else if (res.code === '400') {
+      ElMessage({
+        message: res.msg,
+        type: 'error',
+        center: true,
+      })
+    }
+  })
+}
+
+</script>
+
+<template>
+  <div>
+    <el-form class="buy-form-main">
+      <el-form-item>
+        <label for="amount">商品单价：</label>
+        {{price}}
+      </el-form-item>
+      <el-form-item>
+        <label for="amount">购买数量：</label>
+        <el-input-number v-model="amount" :min="1" :max="stock + 10" @change="handleChange"/>
+      </el-form-item>
+      <el-form-item>
+        <label for="type">提货方式：</label>
+        <el-select id="type"
+                   v-model="type"
+                   placeholder="请选择"
+        >
+          <el-option value="DELIVERY">到店自提</el-option>
+          <el-option value="PICKUP">快递到家</el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <label for="discountPrice">折扣前总价：</label>
+        {{ totalPrice }} 元
+      </el-form-item>
+    </el-form>
+    <el-button class="buy-button"
+               @click="handleCreateOrder">创建订单
+    </el-button>
+
+    <el-dialog v-model="orderDialogVisible">
+      <el-form>
+        <el-form-item>
+          <label for="amount">购买数量：</label>
+          {{amount}}
+        </el-form-item>
+        <el-form-item>
+          <label for="discountPrice">折扣前总价：</label>
+          {{ totalPrice }}
+        </el-form-item>
+        <el-form-item>
+          <label for="type">提货方式：</label>
+          {{ type }}
+        </el-form-item>
+        <el-form-item>
+          <label for="type">优惠券：</label>
+<!--          <el-select id="type"-->
+<!--                     v-model="type"-->
+<!--                     placeholder="请选择"-->
+<!--          >-->
+<!--            <el-option value="DELIVERY">到店自提</el-option>-->
+<!--            <el-option value="PICKUP">快递到家</el-option>-->
+<!--          </el-select>-->
+        </el-form-item>
+      </el-form>
+      <el-button @click="handleConfirmOrder">确认支付</el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.buy-form-main {
+  margin-top: 50px;
+  margin-left: 30px;
+}
+
+.buy-button {
+  margin-left: 30px;
+}
+</style>

src/views/manager/CreateStore.vue

@@ -70,7 +70,6 @@ function handleCreateStore() {
     logoUrl: logoUrl.value
   };
   createStore(payload).then(res => {
-    console.log(res);
     if (res.code === '000') {
       ElMessage({
         message: '添加商户成功！',
@@ -80,7 +79,7 @@ function handleCreateStore() {
       name.value = '';
       location.value = '';
       logoUrl.value = '';
-      files.value.splice(i, 1);
+      files.value.splice(0);
     } else if (res.code === '400') {
       ElMessage({
         message: res.msg,

src/views/portal/AllStore.vue

@@ -2,10 +2,11 @@
 
 import StoreItem from "../common/StoreItem.vue";
 import {ref} from "vue";
-import {getAllStore, getStoreById} from "../../api/store.ts";
+import {getAllStore} from "../../api/store.ts";
 import {useRouter} from "vue-router";
 
 const router = useRouter();
+const userId = router.currentRoute.value.params.userId;
 
 let storeList = ref()
 
@@ -15,17 +16,20 @@ function getStoreList() {
   getAllStore().then(res => {
     storeList.value = res.result;
   })
-
-  console.warn(storeList.value)
 }
 
 function toStoreDetailPage(storeId) {
   router.push("/storeDetail/" + storeId);
 }
+
+function toAllOrderPage() {
+  router.push("/customer/allOrder");
+}
 </script>
 
 <template>
   <el-main>
+    <el-button @click="toAllOrderPage">全部订单</el-button>
     <StoreItem class="store-item-list"
                v-for="storeVO in storeList" :storeVO="storeVO"
                @click="toStoreDetailPage(storeVO.id)" />

src/views/portal/ProductDetail.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import {useRouter} from "vue-router";
+import {ref} from "vue";
+import {getProductById} from "../../api/product.ts";
+
+const router = useRouter();
+const productId = router.currentRoute.value.params.productId;
+const productVO = ref()
+let storeId = ref(0)
+let name = ref('')
+let photoUrlList = ref([])
+let rating = ref(0)
+let number = ref(0)
+let salesAmount = ref(0)
+let stock = ref(0)
+let category = ref('')
+let price = ref(0)
+
+getProductDetail()
+
+function getProductDetail() {
+  getProductById(productId).then(res => {
+    console.log(res.result)
+    productVO.value = res.result
+    storeId.value = productVO.value.storeId
+    name.value = productVO.value.name
+    photoUrlList.value = productVO.value.photoUrlList
+    rating.value = productVO.value.rating
+    number.value = productVO.value.number
+    salesAmount.value = productVO.value.salesAmount
+    stock.value = productVO.value.stock
+    category.value = productVO.value.category
+    price.value = productVO.value.price
+  })
+}
+
+function toBuyProduct() {
+  router.push("/customer/buyProduct/" + productId)
+}
+
+</script>
+
+<template>
+  <div>
+    <div class="product-detail-main">
+      <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">
+        销量：{{ salesAmount }}
+      </el-row>
+      <el-row style="font-size: 10px">
+        品类：{{ category }}
+      </el-row>
+      <el-row style="font-size: 10px">
+        价格：{{ price }}
+      </el-row>
+      <el-row style="font-size: 10px">
+        库存：{{ stock }}
+      </el-row>
+      <el-button class="buy-product-button" type="primary" plain
+                 @click="toBuyProduct">购买商品
+      </el-button>
+    </div>
+
+
+  </div>
+</template>
+
+<style scoped>
+.product-detail-main {
+  margin-left: 50px;
+}
+
+.buy-product-button {
+  margin-top: 20px;
+}
+</style>

src/views/portal/StoreDetail.vue

@@ -3,23 +3,25 @@
 import {getStoreById} from "../../api/store.ts";
 import {useRouter} from "vue-router";
 import {ref} from "vue";
+import {getProductsByStoreId} from "../../api/product.ts";
+import ProductItem from "../common/ProductItem.vue";
 
 const router = useRouter();
 const storeId = router.currentRoute.value.params.storeId;
-let storeVO = ref()
-let id = ref(0)
-let name = ref('')
-let logoUrl = ref('')
-let rating = ref(0)
-let number = ref(0)
-let location = ref('')
+const storeVO = ref()
+const name = ref('')
+const logoUrl = ref('')
+const rating = ref(0)
+const number = ref(0)
+const location = ref('')
+const productList = ref()
 
-getStoreDetail();
+getStoreDetail()
+getAllProduct()
 
 function getStoreDetail() {
   getStoreById(storeId).then(res => {
     storeVO.value = res.result
-    id.value = storeVO.value.id
     name.value = storeVO.value.name
     logoUrl.value = storeVO.value.logoUrl
     rating.value = storeVO.value.rating
@@ -29,28 +31,46 @@ function getStoreDetail() {
 }
 
 function toCreateProduct() {
-  router.push("/staff/createProduct/" + storeId);
+  router.push("/staff/createProduct/" + storeId)
 }
 
+function getAllProduct() {
+  getProductsByStoreId(storeId).then(res => {
+    productList.value = res.result
+  })
+}
+
+function toProductDetailPage(productId) {
+  router.push("/productDetail/" + productId);
+}
 </script>
 
 <template>
-  <div class="store-detail-main">
-    <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>
-    <el-button class="create-product-button" type="primary" plain
-               @click="toCreateProduct()" >新增商品</el-button>
+  <div>
+    <div class="store-detail-main">
+      <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>
+      <el-button class="create-product-button" type="primary" plain
+                 @click="toCreateProduct()">新增商品
+      </el-button>
+    </div>
+    <div class="all-product-main">
+      <productItem class="product-item-list"
+                   v-for="productVO in productList" :productVO="productVO"
+                   @click="toProductDetailPage(productVO.id)" />
+
+    </div>
   </div>
 </template>
 
@@ -66,4 +86,9 @@ function toCreateProduct() {
 .create-product-button {
   margin-top: 20px;
 }
+
+.product-item-list {
+  margin-top: 20px;
+  margin-left: 50px;
+}
 </style>

src/views/staff/CreateProduct.vue

@@ -73,9 +73,25 @@ function handleCreateProduct() {
     price: price.value,
     photoUrlList: photoUrlList.value
   };
-  console.log(payload)
   createProduct(payload).then(res => {
-    console.log(res);
+    if (res.code === '000') {
+      ElMessage({
+        message: '添加商品成功！',
+        type: 'success',
+        center: true,
+      })
+      name.value = '';
+      category.value = '';
+      price.value = '';
+      photoUrlList.value = [];
+      files.value.splice(i, 1);
+    } else if (res.code === '400') {
+      ElMessage({
+        message: res.msg,
+        type: 'error',
+        center: true,
+      })
+    }
   })
 }
 
@@ -159,7 +175,7 @@ function handleCreateProduct() {
                 <div class="preview-container mt-4" v-if="files.length">
                   <div v-for="file in files" :key="file.name" class="preview-card">
                     <div>
-                      <el-image class="preview-img" :src="generateURL(file)" />
+                      <el-image class="preview-img" :src="generateURL(file)"/>
                       <p>
                         {{ file.name }}
                       </p>