正在准备lab3

components.d.ts

@@ -7,21 +7,31 @@ export {}
 
 declare module 'vue' {
   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']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     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']
+    ElRate: typeof import('element-plus/es')['ElRate']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     Header: typeof import('./src/components/Header.vue')['default']
     ProductItem: typeof import('./src/components/ProductItem.vue')['default']
@@ -29,4 +39,7 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     StoreItem: typeof import('./src/components/StoreItem.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/api/_prefix.ts

@@ -3,9 +3,11 @@ export const API_MODULE = '/api'
 
 //用户模块
 export const USER_MODULE = `${API_MODULE}/users`
-
-//Lab2新增
 //商店模块
 export const STORE_MODULE = `${API_MODULE}/stores`
 //商品模块
 export const PRODUCT_MODULE = `${API_MODULE}/products`
+
+//Lab3新增
+//订单模块
+export const ORDER_MODULE = `${API_MODULE}/orders`

src/api/orders.ts

@@ -0,0 +1,4 @@
+// Lab3新增
+// 开发时请解除3-4行的注释
+// import {axios} from '../utils/request'
+// import {ORDER_MODULE} from './_prefix'

src/api/product.ts

@@ -1,5 +1,39 @@
-// Lab2新增
-// 开发时请解除3-4行的注释
-// import {axios} from '../utils/request'
-// import {PRODUCT_MODULE} from './_prefix'
+import {axios} from '../utils/request'
+import {PRODUCT_MODULE} from './_prefix'
 
+type ProductInfo = {
+
+}
+
+// 创建商品
+export const createProduct = (productInfo: ProductInfo) => {
+    return axios.post(`${PRODUCT_MODULE}/`, productInfo,
+        {headers: {'Content-Type': 'application/json'}})
+        .then(res => {
+            return res
+        })
+}
+
+// 获取商店下所有商品
+export const getProductsByStoreId = (storeId: number) => {
+    return axios.get(`${PRODUCT_MODULE}/?storeId=${storeId}`)
+        .then(res => {
+            return res
+        })
+}
+
+// 根据商品Id获取商品信息
+export const getProductById = (productId: number) => {
+    return axios.get(`${PRODUCT_MODULE}/${productId}`)
+        .then(res => {
+            return res;
+        })
+}
+
+// 添加库存
+export const addStock = (id: number, number: number) => {
+    return axios.post(`${PRODUCT_MODULE}/${id}/stock?number=${number}`)
+        .then(res => {
+            return res;
+        })
+}

src/api/store.ts

@@ -1,4 +1,31 @@
-// Lab2新增
-// 开发时请解除3-4行的注释
-// import {axios} from '../utils/request'
-// import {STORE_MODULE} from './_prefix'
+import {axios} from '../utils/request'
+import {STORE_MODULE} from './_prefix'
+
+type StoreInfo = {
+
+}
+
+// 创建商店
+export const createStore = (storeInfo: StoreInfo) => {
+    return axios.post(`${STORE_MODULE}/`, storeInfo,
+        {headers: {'Content-Type': 'application/json'}})
+        .then(res => {
+            return res
+        })
+}
+
+// 获取全部商店
+export const getAllStore = () => {
+    return axios.get(`${STORE_MODULE}/`, )
+        .then(res => {
+            return res
+        })
+}
+
+// 根据商店Id获取指定商店
+export const getStoreById = (storeId: number) => {
+    return axios.get(`${STORE_MODULE}/${storeId}`)
+        .then(res => {
+            return res
+        })
+}

src/components/ProductItem.vue

@@ -1,13 +1,110 @@
-<!--Lab2新增-->
-<!--商品列表父组件中的单个商品子组件-->
 <script setup lang="ts">
+import {ref} from "vue"
+import {getProductById} from "../api/product.ts"
 
+// 使用props接收父界面传来的数据
+const props = defineProps({
+  productId: {
+    type: Number,
+    required: true
+  }
+})
+
+const storeId = ref(0)
+const name = ref('')
+const photoUrlList = ref([])
+const rating = ref(0)
+const number = ref(0)
+const salesAmount = ref(0)
+const stock = ref(0)
+const category = ref()
+const price = ref()
+const photoUrl = ref('')
+
+getProductById(props.productId).then(res => {
+  storeId.value = res.result.storeId
+  name.value = res.result.name
+  photoUrlList.value = res.result.photoUrlList
+  rating.value = res.result.rating
+  number.value = res.result.number
+  salesAmount.value = res.result.salesAmount
+  stock.value = res.result.stock
+  category.value = res.result.category
+  price.value = res.result.price
+
+  photoUrl.value = photoUrlList.value[0]
+})
+
+function parseCategory(category) {
+  if (category === 'FOOD') {
+    return "食品"
+  } else if (category === 'CLOTHES') {
+    return "服饰"
+  } else if (category === 'FURNITURE') {
+    return "家具"
+  } else if (category === 'ELECTRONICS') {
+    return "电子产品"
+  } else if (category === 'ENTERTAINMENT') {
+    return "娱乐"
+  } else if (category === 'SPORTS') {
+    return "体育产品"
+  } else if (category === 'LUXURY') {
+    return "奢侈品"
+  }
+}
 </script>
 
-<template>
 
+<template>
+  <el-card class="product-item-card" shadow="hover">
+    <div class="photo-div">
+      <el-image class="photo-image" :src="photoUrl"/>
+    </div>
+    <div style="padding: 14px">
+      <h1> {{ name }} </h1>
+      <el-descriptions :column="1">
+        <el-descriptions-item style="font-size: 10px" label="品类">
+          {{ parseCategory(category) }}
+        </el-descriptions-item>
+        <el-descriptions-item style="font-size: 10px" label="价格">
+          {{ price }} 元
+        </el-descriptions-item>
+        <el-descriptions-item style="font-size: 10px" label="评分">
+          <el-rate
+              v-model="rating"
+              disabled
+              show-score
+              text-color="#ff9900"
+              score-template="{value} 分"
+              size="small"
+          />
+          （共 {{ number }} 人打分）
+        </el-descriptions-item>
+        <el-descriptions-item style="font-size: 10px" label="销量">
+          {{ salesAmount }} 件
+        </el-descriptions-item>
+        <el-descriptions-item style="font-size: 10px" label="库存">
+          {{ stock }} 件
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+  </el-card>
 </template>
 
+
 <style scoped>
+.product-item-card {
+  margin: 8px;
+  border-radius: 8px;
+  min-width: 31%;
+}
+
+.photo-div {
+  display: flex;
+  justify-content: center;
+}
 
+.photo-image {
+  height: 200px;
+}
 </style>

src/views/store/AllStore.vue

@@ -1,14 +1,57 @@
-<!--Lab2新增-全部商店界面/主页-->
 <script setup lang="ts">
+import {ref} from "vue"
+import {router} from '../../router'
+import {getAllStore} from "../../api/store.ts"
+import StoreItem from "../../components/StoreItem.vue"
 
+const role = sessionStorage.getItem("role")
+
+const storeList = ref()
+
+// 获取商店列表
+getAllStore().then(res => {
+  console.log(res)
+  storeList.value = res.result
+})
+
+// 点击创建商店按钮，跳转到创建商店界面
+function toCreateStorePage() {
+  router.push("/createStore")
+}
+
+// 点击商店卡片，跳转到对应的商店界面
+function toStoreDetailPage(storeId: Number) {
+  router.push("/storeDetail/" + storeId)
+}
 </script>
 
 
 <template>
+  <el-main>
+    <div v-if="role === 'MANAGER' || role === 'CEO'">
+      <el-button class="add-store-button" type="primary" plain
+                 @click="toCreateStorePage()">
+        添加商店
+      </el-button>
+    </div>
 
+    <div class="store-item-list">
+      <StoreItem v-for="storeVO in storeList" :storeId="storeVO.id" @click="toStoreDetailPage(storeVO.id)"/>
+    </div>
+  </el-main>
 </template>
 
 
 <style scoped>
+.add-store-button {
+  margin-left: 30px;
+}
 
+.store-item-list {
+  display: flex;
+  padding: 2px;
+  flex-flow: wrap;
+  justify-content: center;
+  align-content: start;
+}
 </style>