解决支付模块代码冗余了的问题，基本完善了Lab4代码

components.d.ts

@@ -34,6 +34,7 @@ declare module 'vue' {
     Header: typeof import('./src/components/Header.vue')['default']
     OrderItem: typeof import('./src/components/OrderItem.vue')['default']
     PayComponent: typeof import('./src/components/PayComponent.vue')['default']
+    PayDialog: typeof import('./src/components/PayDialog.vue')['default']
     PayItem: typeof import('./src/components/PayItem.vue')['default']
     ProductItem: typeof import('./src/components/ProductItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/OrderItem.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import {ref, computed} from "vue"
-import {deliverOrder, getOrder, getOrderById, commentOrder, payOrder} from "../api/order"
-import {parseOrderType, parseRating, parseTime} from "../utils";
+import PayDialog from "./PayDialog.vue"
+import {deliverOrder, getOrder, getOrderById, commentOrder} from "../api/order.ts"
+import {parseOrderType, parseRating, parseTime} from "../utils"
+
 const props = defineProps({
   orderId: {
     type: Number,
@@ -11,36 +13,36 @@ const props = defineProps({
 
 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 productName = ref('')   //商品名字
+const price = ref(0)          //商品单价
+const amount = ref(0)         //购买数量
+const type = ref('')          //订单类型
+const rating = ref(0)         //订单评分
+const content = ref('')       //订单评论
+const status = ref('')        //订单状态
 const createTime = ref('')
 const finishTime = ref('')
 const storeId = ref(0)
-
+//订单总价（折扣前）
 const totalPrice = ref(0)
 
+//评论dialog
+const commentDialogVisible = ref(false)
+
+const dialogRef = ref()
+
 getOrderDetail()
 
 function getOrderDetail() {
   getOrderById(props.orderId).then(res => {
-    //console.log(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 = parseRating(res.data.result.rating)
@@ -48,35 +50,24 @@ function getOrderDetail() {
     createTime.value = res.data.result.createTime
     finishTime.value = res.data.result.finishTime
     storeId.value = res.data.result.storeId
-
-    totalPrice.value = amount.value * price.value
+    //根据单价和购买数量计算总价
+    totalPrice.value = price.value * amount.value
   })
 }
 
 function handlePay() {
-  orderDialogVisible.value = true
+  //触发支付订单弹窗，传入当前orderId
+  dialogRef.value.open(props.orderId)
 }
 
-function handleConfirmOrder() {
-  payOrder(props.orderId).then(res => {
-    if (res.data.code === '000') {
-      ElMessage({
-        message: '订单提交成功！',
-        type: 'success',
-        center: true,
-      })
-      getOrderDetail()
-      orderDialogVisible.value = false
-    } else if (res.data.code === '400') {
-      ElMessage({
-        message: res.data.msg,
-        type: 'error',
-        center: true,
-      })
-    }
-  })
+//注册回调，用于更新当前订单详情（如果不用这个，可能只能强制刷新整个界面了，用户体验不好）
+function handleConfirmOrder(success: boolean) {
+  if (success) {
+    getOrderDetail()
+  }
 }
 
+//发货
 function handleDeliver() {
   deliverOrder(props.orderId).then(res => {
     if (res.data.code === '000') {
@@ -96,6 +87,7 @@ function handleDeliver() {
   })
 }
 
+//收货
 function handleGet() {
   getOrder(props.orderId).then(res => {
     if (res.data.code === '000') {
@@ -115,10 +107,12 @@ function handleGet() {
   })
 }
 
+//打开评论dialog
 function handleComment() {
   commentDialogVisible.value = true
 }
 
+//评论
 function handleSendComment() {
   const payload = {
     orderId: props.orderId,
@@ -232,38 +226,10 @@ const statusText = computed(() => {
     </el-descriptions>
   </el-card>
 
-  <el-dialog v-model="orderDialogVisible">
-    <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>
-          {{ parseOrderType(type) }}
-        </el-form-item>
-        <el-form-item>
-          <label>总价：</label>
-          {{ totalPrice }} 元
-        </el-form-item>
-      </el-form>
-      <el-button @click="handleConfirmOrder" type="primary" plain>
-        确认支付
-      </el-button>
-    </div>
-  </el-dialog>
+  <PayDialog ref="dialogRef" @operation-finish="handleConfirmOrder"/>
 
-  <el-dialog
-      v-model="commentDialogVisible"
-      title="发起评价"
-  >
+  <el-dialog v-model="commentDialogVisible" title="发起评价">
     <el-form>
-
       <el-form-item>
         <span style="margin-right: 30px">商品满意度</span>
         <el-rate v-model="rating" clearable
@@ -284,7 +250,6 @@ const statusText = computed(() => {
       </el-form-item>
     </el-form>
   </el-dialog>
-
 </template>
 
 
@@ -304,9 +269,4 @@ const statusText = computed(() => {
 .status-change-button {
   margin-left: 10px;
 }
-
-.pay-dialog-title {
-  font-size: 30px;
-  margin-bottom: 20px;
-}
 </style>

src/components/PayDialog.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import {ref} from "vue"
+import {getOrderById, payOrder} from "../api/order.ts"
+import {parseOrderType} from "../utils"
+
+const saveOrderId = ref(0)
+const orderDialogVisible = ref(false)
+
+const emit = defineEmits(['operationFinish'])
+
+//通过父组件传来的orderId获取订单详情
+function open(orderId: number) {
+  //存储当前订单orderId
+  saveOrderId.value = orderId
+  getOrderDetail(orderId)
+  orderDialogVisible.value = true
+}
+
+defineExpose({
+  open
+})
+
+const amount = ref(0)
+const price = ref(0)
+const type = ref('')
+const totalPrice = ref(0)
+
+function getOrderDetail(orderId: number) {
+  getOrderById(orderId).then(res => {
+    amount.value = res.data.result.amount
+    type.value = res.data.result.type
+    price.value = res.data.result.price
+    //根据商品单价和购买数量计算总价
+    totalPrice.value = price.value * amount.value
+  })
+}
+
+function handleConfirmOrder() {
+  payOrder(saveOrderId.value).then(res => {
+    if (res.data.code === '000') {
+      ElMessage({
+        message: '订单支付成功！',
+        type: 'success',
+        center: true,
+      })
+
+      emit("operationFinish", true)
+      orderDialogVisible.value = false
+    } else if (res.data.code === '400') {
+      ElMessage({
+        message: res.data.msg,
+        type: 'error',
+        center: true,
+      })
+
+      emit("operationFinish", false)
+    }
+  })
+}
+</script>
+
+
+<template>
+  <el-dialog v-model="orderDialogVisible">
+    <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="totalPrice">总价：</label>
+          {{ totalPrice }} 元
+        </el-form-item>
+
+        <!--你可能会在这里添入优惠券的选用、并展示折扣后总价-->
+<!--        <el-form-item>-->
+<!--          <label for="type">优惠券：</label>-->
+<!--        </el-form-item>-->
+<!--        <el-form-item>-->
+<!--          <label>折扣后金额：</label>-->
+<!--        </el-form-item>-->
+
+      </el-form>
+
+      <el-button @click="handleConfirmOrder" type="primary" plain>确认支付</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+
+<style scoped>
+.pay-dialog-title {
+  font-size: 30px;
+  margin-bottom: 20px;
+}
+</style>

src/views/product/ProductDetail.vue

@@ -2,11 +2,12 @@
 import {ref, computed} from "vue"
 import {router} from '../../router'
 import {Back} from "@element-plus/icons-vue"
+import CommentItem from "../../components/CommentItem.vue"
+import PayDialog from "../../components/PayDialog.vue"
 import {addStock, getProductById} from "../../api/product.ts"
-import {createOrder, payOrder} from "../../api/order.ts"
+import {createOrder} from "../../api/order.ts"
 import {getCommentsById} from "../../api/product.ts"
-import CommentItem from "../../components/CommentItem.vue"
-import {parseCategory, parseOrderType, parseRating} from "../../utils"
+import {parseCategory, parseRating} from "../../utils"
 
 const role = sessionStorage.getItem("role")
 
@@ -15,37 +16,40 @@ 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(10)
-const category = ref('')
-const price = ref(0)
-
-const amount = ref(1)
-const totalPrice = ref(price.value)
+const rating = ref(0)          //评分
+const number = ref(0)          //评分人数
+const salesAmount = ref(0)     //销量
+const stock = ref(10)          //库存
+const category = ref('')       //品类
+const price = ref(0)           //单价
+
+const type = ref()                      //订单提货方式
+const addStockNumber = ref()            //添加库存量
+const amount = ref(1)             //购买数量
+const totalPrice = ref(price.value)     //总价（折扣前）
+const commentList = ref([])       //评论列表
+
+//关于支付订单弹窗
+const orderId = ref()
+const dialogRef = ref()
 
+//实时计算当前总价
 const handleChange = () => {
   totalPrice.value = amount.value * price.value
 }
-const type = ref()
-const orderDialogVisible = ref(false)
-const orderId = ref()
-const addStockNumber = ref()
 
+//验证创建订单按钮可用性
 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
 })
@@ -79,6 +83,7 @@ function AddStock() {
         center: true,
       })
       addStockNumber.value = null
+      //更新商品详情
       getProductDetail()
     } else if (res.data.code === '400') {
       ElMessage({
@@ -104,27 +109,9 @@ function handleCreateOrder() {
         type: 'success',
         center: true,
       })
+      //触发支付订单弹窗，传入当前orderId
       orderId.value = res.data.result.id
-      orderDialogVisible.value = true
-    } 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,
-      })
-      orderDialogVisible.value = false
+      dialogRef.value.open(orderId.value)
     } else if (res.data.code === '400') {
       ElMessage({
         message: res.data.msg,
@@ -154,7 +141,7 @@ function toBackPage() {
 
         <el-carousel trigger="click" arrow="always" indicator-position="outside">
           <el-carousel-item v-for="item in photoUrlList" :key="item">
-            <el-image class="logo-image" :src="item" />
+            <el-image class="logo-image" :src="item"/>
           </el-carousel-item>
         </el-carousel>
 
@@ -249,31 +236,8 @@ function toBackPage() {
       </div>
     </el-main>
 
-    <el-dialog v-model="orderDialogVisible">
-      <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>
-            {{ parseOrderType(type) }}
-          </el-form-item>
-          <el-form-item>
-            <label>总价：</label>
-            {{ totalPrice }} 元
-          </el-form-item>
-        </el-form>
-        <el-button @click="handleConfirmOrder" type="primary" plain>
-          确认支付
-        </el-button>
-      </div>
-    </el-dialog>
+    <!--支付弹窗组件-->
+    <PayDialog ref="dialogRef"/>
   </el-container>
 </template>
 
@@ -336,9 +300,4 @@ function toBackPage() {
   margin-left: 30px;
   margin-bottom: 40px;
 }
-
-.pay-dialog-title {
-  font-size: 30px;
-  margin-bottom: 20px;
-}
 </style>