对Lab4的代码进行初步完善

components.d.ts

@@ -7,34 +7,12 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    ElAside: typeof import('element-plus/es')['ElAside']
-    ElAvatar: typeof import('element-plus/es')['ElAvatar']
+    CommentItem: typeof import('./src/components/CommentItem.vue')['default']
     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']
-    ElResult: typeof import('element-plus/es')['ElResult']
-    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']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     Header: typeof import('./src/components/Header.vue')['default']
     OrderItem: typeof import('./src/components/OrderItem.vue')['default']
     ProductItem: typeof import('./src/components/ProductItem.vue')['default']
@@ -42,7 +20,4 @@ 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

@@ -7,6 +7,8 @@ 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`
 
-//Lab3新增
-//需要添加订单模块的api
+//Lab4新增
+//需要添加优惠券模块的api

src/api/order.ts

@@ -0,0 +1,71 @@
+import {axios} from '../utils/request'
+import {ORDER_MODULE} from './_prefix'
+
+type OrderInfo = {
+    productId: number,
+    amount: number,
+    type: string
+}
+
+type CommentInfo = {
+    orderId: number,
+    comment: string,
+    rating: number
+}
+
+// 创建订单
+export const createOrder = (orderInfo: OrderInfo) => {
+    return axios.post(`${ORDER_MODULE}/`, orderInfo,
+        {headers: {'Content-Type': 'application/json'}})
+        .then(res => {
+            return res
+        })
+}
+
+// 订单支付（你可能需要修改这个方法，把优惠券加进来）
+export const payOrder = (orderId: number) => {
+    return axios.post(`${ORDER_MODULE}/pay/?orderId=${orderId}`)
+        .then(res => {
+            return res
+        })
+}
+
+// 获取全部订单（用户下订单/门店下订单/全部订单）
+export const getAllOrder = () => {
+    return axios.get(`${ORDER_MODULE}/`, )
+        .then(res => {
+            return res
+        })
+}
+
+// 根据订单Id获取单个订单
+export const getOrderById = (orderId: number) => {
+    return axios.get(`${ORDER_MODULE}/${orderId}`, )
+        .then(res => {
+            return res
+        })
+}
+
+// 订单发货
+export const deliverOrder = (orderId: number) => {
+    return axios.post(`${ORDER_MODULE}/deliver/?orderId=${orderId}`)
+        .then(res => {
+            return res
+        })
+}
+
+// 订单收货
+export const getOrder = (orderId: number) => {
+    return axios.post(`${ORDER_MODULE}/get/?orderId=${orderId}`)
+        .then(res => {
+            return res
+        })
+}
+
+// 评价订单
+export const commentOrder = (commentInfo: CommentInfo) => {
+    return axios.post(`${ORDER_MODULE}/comment`, null, {params: commentInfo})
+        .then(res => {
+            return res
+        })
+}

src/api/product.ts

@@ -41,3 +41,11 @@ export const addStock = (id: number, number: number) => {
             return res
         })
 }
+
+//根据商品Id获取商品评论
+export const getCommentsById = (productId: number) => {
+    return axios.get(`${PRODUCT_MODULE}/comment/?productId=${productId}`)
+        .then(res => {
+            return res;
+        })
+}

src/components/CommentItem.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import {ref} from "vue"
+import {parseTime} from "../utils"
+
+const props = defineProps({
+  commentVO: {
+    type: Object,
+    required: true
+  }
+})
+
+const userName = ref('')
+const time = ref('')
+const rating = ref(0)
+const comment = ref('')
+
+userName.value = props.commentVO.userName
+time.value = parseTime(props.commentVO.time)
+rating.value = props.commentVO.rating
+comment.value = props.commentVO.comment
+</script>
+
+
+<template>
+  <el-card class="comment-item-card" :body-style="{ padding: '0px' }" shadow="hover">
+    <div class="comment-item-main">
+      <el-row>
+        用户“{{ userName }}”于 {{ time }} 为商品打分：
+        <el-rate
+            v-model="rating"
+            disabled
+            show-score
+            text-color="#ff9900"
+            score-template="{value} 分"
+            size="small"
+        />
+      </el-row>
+      并发布评论：{{ comment }}
+    </div>
+  </el-card>
+
+</template>
+
+
+<style scoped>
+.comment-item-card {
+  margin: 20px;
+  border-radius: 8px;
+  width: 60%;
+}
+
+.comment-item-main {
+  margin: 20px;
+  line-height: 30px;
+}
+</style>

src/components/Header.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {router} from '../router'
 import {parseRole} from "../utils"
-import {User, SwitchButton} from "@element-plus/icons-vue"   //图标
+import {User, Document, SwitchButton} from "@element-plus/icons-vue"   //图标
 
 const role = sessionStorage.getItem('role')    //登录的时候插入的
 
@@ -50,13 +50,11 @@ function logout() {
         </router-link>
       </el-col>
 
-<!--      Lab3新增-->
-<!--      添加下面这个按键，点击进入订单列表界面-->
-<!--      <el-col :span="1" class="header-icon">-->
-<!--        <router-link to="/allOrder" v-slot="{navigate}">-->
-<!--          <el-icon @click="navigate" :size="35" color="white" ><Document /></el-icon>-->
-<!--        </router-link>-->
-<!--      </el-col>-->
+      <el-col :span="1" class="header-icon">
+        <router-link to="/allOrder" v-slot="{navigate}">
+          <el-icon @click="navigate" :size="35" color="white" ><Document /></el-icon>
+        </router-link>
+      </el-col>
 
       <el-col :span="1" class="header-icon">
         <a @click="logout">

src/components/OrderItem.vue

@@ -0,0 +1,333 @@
+<script setup lang="ts">
+import {ref, computed} from "vue"
+import {ElTable} from "element-plus"
+import {deliverOrder, getOrder, getOrderById, payOrder, commentOrder, calculateOrder} from "../api/order"
+import {parseOrderType, parseTime} from "../utils";
+
+const props = defineProps({
+  orderId: {
+    type: Number,
+    required: true
+  }
+})
+
+const role = sessionStorage.getItem("role")
+
+const orderDialogVisible = ref(false)
+const commentDialogVisible = ref(false)
+
+const userId = ref(0)
+const productId = ref(0)
+const productName = ref('')
+const price = ref(0)
+const amount = ref(0)
+const paid = ref(0)
+const type = ref('')
+const content = ref('')
+const rating = ref(0)
+const status = ref('')
+const createTime = ref('')
+const finishTime = ref('')
+const storeId = ref(0)
+
+const totalPrice = ref(0)
+const discountPrice = ref(0)
+
+getOrderDetail()
+
+function getOrderDetail() {
+  getOrderById(props.orderId).then(res => {
+    userId.value = res.data.result.userId
+    productId.value = res.data.result.productId
+    productName.value = res.data.result.productName
+    amount.value = res.data.result.amount
+    price.value = res.data.result.price
+    paid.value = res.data.result.paid
+    type.value = res.data.result.type
+    content.value = res.data.result.content
+    rating.value = res.data.result.rating
+    status.value = res.data.result.status
+    createTime.value = res.data.result.createTime
+    finishTime.value = res.data.result.finishTime
+    storeId.value = res.data.result.storeId
+
+    totalPrice.value = amount.value * price.value
+    discountPrice.value = totalPrice.value
+  })
+}
+
+function handlePay() {
+  orderDialogVisible.value = true
+}
+
+function handleConfirmOrder() {
+  payOrder(props.orderId).then(res => {
+    if (res.data.code === '000') {
+      ElMessage({
+        message: '订单提交成功！',
+        type: 'success',
+        center: true,
+      })
+      getOrderDetail()
+    } else if (res.data.code === '400') {
+      ElMessage({
+        message: res.data.msg,
+        type: 'error',
+        center: true,
+      })
+    }
+  })
+}
+
+function handlePayDialogClose() {
+  orderDialogVisible.value = false
+}
+
+function handleDeliver() {
+  deliverOrder(props.orderId).then(res => {
+    if (res.data.code === '000') {
+      ElMessage({
+        message: '订单发货成功！',
+        type: 'success',
+        center: true,
+      })
+      getOrderDetail()
+    } else if (res.data.code === '400') {
+      ElMessage({
+        message: res.data.msg,
+        type: 'error',
+        center: true,
+      })
+    }
+  })
+}
+
+function handleGet() {
+  getOrder(props.orderId).then(res => {
+    if (res.data.code === '000') {
+      ElMessage({
+        message: '订单收货成功！',
+        type: 'success',
+        center: true,
+      })
+      getOrderDetail()
+    } else if (res.data.code === '400') {
+      ElMessage({
+        message: res.data.msg,
+        type: 'error',
+        center: true,
+      })
+    }
+  })
+}
+
+function handleComment() {
+  commentDialogVisible.value = true
+}
+
+function handleSendComment() {
+
+  const payload = {
+    orderId: props.orderId,
+    comment: content.value,
+    rating: rating.value
+  }
+
+  commentOrder(payload).then(res => {
+    if (res.data.code === '000') {
+      ElMessage({
+        message: '评价成功！',
+        type: 'success',
+        center: true,
+      })
+      getOrderDetail()
+      commentDialogVisible.value = false
+    } else {
+      ElMessage({
+        message: res.data.msg,
+        type: 'error',
+        center: true,
+      })
+    }
+  })
+}
+
+function parsePaid() {
+  if (paid.value === null) {
+    return "暂未支付"
+  } else {
+    return paid.value + " 元"
+  }
+}
+
+// 对于变化的内容使用计算属性返回响应式结果
+const statusText = computed(() => {
+  switch (status.value) {
+    case 'UNPAID':
+      return "待顾客支付"
+    case 'UNSEND':
+      return "待商家发货"
+    case 'UNGET':
+      return "待顾客收货"
+    case 'UNCOMMENT':
+      return "待顾客评价"
+    case 'DONE':
+      return "已完成"
+    default:
+      return "状态标签"
+  }
+})
+</script>
+
+
+<template>
+  <el-card class="order-item-card" shadow="hover">
+
+    <template #header>
+      <div class="card-header">
+        <div>
+          <span> 订单号 {{ props.orderId }}</span>
+          <el-tag style="margin-left: 8px" v-if="status!=='DONE'" type="info"> {{ statusText }}</el-tag>
+          <el-tag style="margin-left: 8px" v-if="status==='DONE'" type="success"> {{ statusText }}</el-tag>
+        </div>
+        <el-button @click="handlePay" v-if="status==='UNPAID' && role==='CUSTOMER'"
+                   class="status-change-button" size="small" type="primary">
+          支付
+        </el-button>
+        <el-button @click="handleDeliver" v-if="status==='UNSEND' && role==='STAFF'"
+                   class="status-change-button" size="small" type="primary">
+          发货
+        </el-button>
+        <el-button @click="handleGet" v-if="status==='UNGET' && role==='CUSTOMER'"
+                   class="status-change-button" size="small" type="primary">
+          收货
+        </el-button>
+        <el-button @click="handleComment" v-if="status==='UNCOMMENT'&& role==='CUSTOMER'"
+                   class="status-change-button" size="small" type="primary">
+          评价
+        </el-button>
+      </div>
+    </template>
+
+    <el-descriptions
+        :column="1"
+    >
+      <el-descriptions-item style="font-size: 15px" label="商品">
+        {{ productName }}
+      </el-descriptions-item>
+      <el-descriptions-item style="font-size: 15px" label="数量">
+        {{ amount }} 件
+      </el-descriptions-item>
+      <el-descriptions-item style="font-size: 15px" label="订单原价">
+        {{ totalPrice }} 元
+      </el-descriptions-item>
+      <el-descriptions-item style="font-size: 15px" label="实付金额">
+        {{ parsePaid() }}
+      </el-descriptions-item>
+      <el-descriptions-item style="font-size: 15px" label="取货类型">
+        <el-tag> {{ parseOrderType(type) }}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item style="font-size: 15px" label="创建时间">
+        {{ parseTime(createTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item style="font-size: 15px" label="完成时间">
+        {{ parseTime(finishTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item style="font-size: 15px" label="评分" v-if="status==='DONE'">
+        <el-rate
+            v-model="rating"
+            disabled
+            show-score
+            text-color="#ff9900"
+            score-template="{value} 分"
+            size="small"
+        />
+      </el-descriptions-item>
+      <el-descriptions-item style="font-size: 15px" label="评价内容" v-if="status==='DONE'">
+        {{ content }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </el-card>
+
+  <el-dialog v-model="orderDialogVisible" :before-close="handlePayDialogClose">
+    <el-row>
+      <span class="pay-dialog-title">订单支付</span>
+    </el-row>
+
+    <div>
+      <el-form>
+        <el-form-item>
+          <label>购买数量：</label>
+          {{ amount }} 件
+        </el-form-item>
+        <el-form-item>
+          <label>折扣前总价：</label>
+          {{ totalPrice }} 元
+        </el-form-item>
+        <el-form-item>
+          <label>提货方式：</label>
+          {{ parseOrderType(type) }}
+        </el-form-item>
+        <el-form-item>
+          <label>折扣后金额：</label>
+          {{ discountPrice }} 元
+        </el-form-item>
+      </el-form>
+      <el-button @click="handleConfirmOrder" type="primary" plain>
+        确认支付
+      </el-button>
+    </div>
+  </el-dialog>
+
+  <el-dialog
+      v-model="commentDialogVisible"
+      title="发起评价"
+  >
+    <el-form>
+
+      <el-form-item>
+        <span style="margin-right: 30px">商品满意度</span>
+        <el-rate v-model="rating" clearable
+                 :texts="['非常差', '差', '普通', '好', '非常好']"
+                 show-text/>
+      </el-form-item>
+
+      <el-form-item>
+        <label>文字评价</label>
+        <el-input v-model="content" type="textarea" rows="10" placeholder="说点什么吧">
+
+        </el-input>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="handleSendComment">评价</el-button>
+        <el-button @click="commentDialogVisible = false">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+
+</template>
+
+
+<style scoped>
+.order-item-card {
+  margin: 20px;
+  border-radius: 8px;
+  min-width: max-content;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.status-change-button {
+  margin-left: 10px;
+}
+
+.pay-dialog-title {
+  font-size: 30px;
+  margin-bottom: 20px;
+}
+</style>

src/router/index.ts

@@ -59,10 +59,15 @@ const router = createRouter({
                 name: 'productDetail',
                 component: () => import('../views/product/ProductDetail.vue'),
                 meta: {title: '商品详情'}
-            }
-
-            // Lab3新增
-            // 需要把订单模块生成的新界面添加到这里
+            },
+            {
+                path: '/allOrder',
+                name: 'allOrder',
+                component: () => import('../views/order/AllOrder.vue'),
+                meta: {
+                    title: '全部订单',
+                }
+            },
 
         ]
     }, {

src/utils/index.ts

@@ -36,3 +36,12 @@ export function parseCategory(category: string) {
     }
 }
 
+//将订单类型转化为中文显示
+export function parseOrderType(type: string) {
+    if (type === "PICKUP") {
+        return "到店自提"
+    } else if (type === "DELIVERY") {
+        return "快递到家"
+    }
+}
+

src/views/order/AllOrder.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {ref} from "vue"
+import {getAllOrder} from "../../api/order.ts"
+import OrderItem from "../../components/OrderItem.vue"
+
+const role = sessionStorage.getItem("role")
+
+const orderList = ref()
+
+getAllOrder().then(res => {
+  orderList.value = res.data.result
+})
+</script>
+
+
+<template>
+  <el-main>
+    <div class="order-item-list">
+      <OrderItem
+          v-for="orderVO in orderList" :orderId="orderVO.id"/>
+    </div>
+  </el-main>
+</template>
+
+
+<style scoped>
+.order-item-list {
+  display: flex;
+  padding: 2px;
+  flex-flow: wrap;
+  justify-content: center;
+}
+</style>

src/views/product/ProductDetail.vue

@@ -3,27 +3,54 @@ import {ref, computed} from "vue"
 import {router} from '../../router'
 import {Back} from "@element-plus/icons-vue"
 import {addStock, getProductById} from "../../api/product.ts"
-import {parseCategory} from "../../utils"
+import {createOrder, payOrder} from "../../api/order.ts"
+import {getCommentsById} from "../../api/product.ts"
+import CommentItem from "../../components/CommentItem.vue"
+import {parseCategory, parseOrderType} from "../../utils"
 
 const role = sessionStorage.getItem("role")
 
 const productId = Number(router.currentRoute.value.params.productId)
-const actualStoreId = Number(sessionStorage.getItem("storeId"))
 const productVO = ref()
 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(0)
 
+const amount = ref(1)
+const totalPrice = ref(price.value)
+const discountPrice = ref(0)
+
+const handleChange = () => {
+  totalPrice.value = amount.value * price.value
+}
+const type = ref()
+const orderDialogVisible = ref(false)
+const orderId = ref()
 const addStockNumber = ref()
 
-const hasAddStockInput = computed(() => addStockNumber.value != null)
+const hasTypeInput = computed(() => type.value != null)
+const amountLegal = computed(() => amount.value <= stock.value)
+const createOrderDisabled = computed(() => {
+  return !(amountLegal.value && hasTypeInput.value)
+})
+
+const hasAddStockInput = computed(() => addStockNumber.value != '')
 const addStockDisabled = computed(() => {
   return !(hasAddStockInput.value)
 })
 
+const commentList = ref([])
+
+getCommentsById(productId).then(res => {
+  commentList.value = res.data.result
+})
+
 getProductDetail()
 
 function getProductDetail() {
@@ -32,12 +59,14 @@ function getProductDetail() {
     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
 
-    console.log(storeId)
-    console.log(actualStoreId)
+    totalPrice.value = price.value
   })
 }
 
@@ -62,6 +91,56 @@ function AddStock() {
   })
 }
 
+// 创建订单按钮
+function handleCreateOrder() {
+  const payload = {
+    productId: productId,
+    amount: amount.value,
+    type: type.value
+  }
+  createOrder(payload).then(res => {
+    if (res.data.code === '000') {
+      ElMessage({
+        message: '创建订单成功！',
+        type: 'success',
+        center: true,
+      })
+      orderId.value = res.data.result.id
+      orderDialogVisible.value = true
+      discountPrice.value = totalPrice.value
+    } else if (res.data.code === '400') {
+      ElMessage({
+        message: res.data.msg,
+        type: 'error',
+        center: true,
+      })
+    }
+  })
+}
+
+// 确定订单按钮
+function handleConfirmOrder() {
+  payOrder(orderId.value).then(res => {
+    if (res.data.code === '000') {
+      ElMessage({
+        message: '订单提交成功！',
+        type: 'success',
+        center: true,
+      })
+    } else if (res.data.code === '400') {
+      ElMessage({
+        message: res.data.msg,
+        type: 'error',
+        center: true,
+      })
+    }
+  })
+}
+
+function handlePayDialogClose() {
+  orderDialogVisible.value = false
+}
+
 function toBackPage() {
   router.push("/storeDetail/" + storeId.value)
 }
@@ -96,6 +175,22 @@ function toBackPage() {
             {{ 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>
@@ -104,12 +199,36 @@ function toBackPage() {
     </el-aside>
 
     <el-main>
-<!--      对于顾客，他可以在这里拥有一个创建订单按钮，点击后创建订单，弹出一个订单的弹窗。-->
-<!--      他可以在弹窗中查看订单详情，并支付订单；也可以关闭弹窗，之后再在订单列表界面支付那个订单。-->
-<!--      我们期待你在这里做一个弹窗，学会弹窗的用法。-->
-<!--      当然，有其他形式的实现也可以。-->
+      <div v-if="role === 'CUSTOMER'">
+        <div>
+          <span class="main-title">购买商品</span>
+        </div>
+        <el-form class="buy-form">
+          <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="PICKUP" label="到店自提"/>
+              <el-option value="DELIVERY" label="快递到家"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <label for="discountPrice">折扣前总价：</label>
+            {{ totalPrice }} 元
+          </el-form-item>
+        </el-form>
+        <el-button @click="handleCreateOrder" :disabled="createOrderDisabled"
+                   class="buy-button" type="primary" plain>创建订单
+        </el-button>
+      </div>
 
-      <div v-if="role === 'STAFF' && storeId === actualStoreId">
+      <div v-if="role === 'STAFF'">
         <div>
           <span class="main-title">添加库存</span>
         </div>
@@ -125,7 +244,45 @@ function toBackPage() {
           </el-button>
         </div>
       </div>
+
+      <div>
+        <div>
+          <span class="main-title">评论区</span>
+        </div>
+        <CommentItem v-for="commentVO in commentList" :commentVO="commentVO">
+        </CommentItem>
+      </div>
     </el-main>
+
+    <el-dialog v-model="orderDialogVisible" :before-close="handlePayDialogClose">
+      <el-row>
+        <span class="pay-dialog-title">订单支付</span>
+      </el-row>
+
+      <div>
+        <el-form>
+          <el-form-item>
+            <label for="amount">购买数量：</label>
+            {{ amount }} 件
+          </el-form-item>
+          <el-form-item>
+            <label for="type">提货方式：</label>
+            {{ parseOrderType(type) }}
+          </el-form-item>
+          <el-form-item>
+            <label for="discountPrice">折扣前总价：</label>
+            {{ totalPrice }} 元
+          </el-form-item>
+
+          <el-form-item>
+            <label>折扣后金额：</label>
+            {{ discountPrice }} 元
+          </el-form-item>
+        </el-form>
+
+        <el-button @click="handleConfirmOrder" type="primary" plain>确认支付</el-button>
+      </div>
+    </el-dialog>
   </el-container>
 </template>
 
@@ -173,8 +330,24 @@ function toBackPage() {
   margin-left: 20px;
 }
 
+.buy-form {
+  margin-top: 20px;
+  margin-left: 30px;
+  width: 20%;
+}
+
 .add-stock-main {
   margin-top: 20px;
   margin-left: 30px;
 }
+
+.buy-button {
+  margin-left: 30px;
+  margin-bottom: 40px;
+}
+
+.pay-dialog-title {
+  font-size: 30px;
+  margin-bottom: 20px;
+}
 </style>