feat: 将支付dialog公共化

components.d.ts

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

src/components/OrderItem.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {ref, computed} from "vue"
-import {deliverOrder, getOrder, getOrderById, payOrder, commentOrder} from "../api/order.ts"
+import {deliverOrder, getOrder, getOrderById, commentOrder} from "../api/order.ts"
+import PayDialog from "./PayDialog.vue";
 
 const props = defineProps({
   orderId: {
@@ -31,6 +32,8 @@ const storeId = ref(0)
 const totalPrice = ref(0)
 const discountPrice = ref(0)
 
+const dialogRef = ref()
+
 getOrderDetail()
 
 function getOrderDetail() {
@@ -55,31 +58,35 @@ function getOrderDetail() {
 }
 
 function handlePay() {
-  orderDialogVisible.value = true
+  dialogRef.value.open(props.orderId)
 }
 
-function handleConfirmOrder() {
-  payOrder(props.orderId).then(res => {
-    if (res.code === '000') {
-      ElMessage({
-        message: '订单提交成功！',
-        type: 'success',
-        center: true,
-      })
-      getOrderDetail()
-    } else if (res.code === '400') {
-      ElMessage({
-        message: res.msg,
-        type: 'error',
-        center: true,
-      })
-    }
-  })
+// function handleConfirmOrder() {
+//   payOrder(props.orderId).then(res => {
+//     if (res.code === '000') {
+//       ElMessage({
+//         message: '订单提交成功！',
+//         type: 'success',
+//         center: true,
+//       })
+//       getOrderDetail()
+//     } else if (res.code === '400') {
+//       ElMessage({
+//         message: res.msg,
+//         type: 'error',
+//         center: true,
+//       })
+//     }
+//   })
+// }
+
+function handleConfirmOrder(success: boolean) {
+  if (success) {
+    getOrderDetail()
+  }
 }
 
-function handlePayDialogClose() {
-  orderDialogVisible.value = false
-}
+
 
 function handleDeliver() {
   deliverOrder(props.orderId).then(res => {
@@ -279,38 +286,41 @@ function parseNull(value) {
     </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>
-        </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="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>-->
+<!--        </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>-->
+
+  <PayDialog ref="dialogRef" @operation-finish="handleConfirmOrder"/>
+
 
   <el-dialog
       v-model="commentDialogVisible"
@@ -358,9 +368,4 @@ function parseNull(value) {
 .status-change-button {
   margin-left: 10px;
 }
-
-.pay-dialog-title {
-  font-size: 30px;
-  margin-bottom: 20px;
-}
 </style>

src/components/PayDialog.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import {ref} from "vue"
+import {getOrderById, payOrder} from "../api/order.ts";
+
+const orderDialogVisible = ref(false)
+
+const emit = defineEmits(['operationFinish'])
+
+
+function open(orderId: number) {
+  orderDialogVisible.value = true
+  getOrderDetail(orderId)
+}
+
+defineExpose({
+  open
+})
+
+const totalPrice = ref(0)
+const discountPrice = ref(0)
+const amount = ref(0)
+const price = ref(0)
+const type = ref('')
+const saveOrderId = ref(0)
+
+function getOrderDetail(orderId: number) {
+  getOrderById(orderId).then(res => {
+
+    amount.value = res.result.amount
+    type.value = res.result.type
+    price.value = res.result.price
+    saveOrderId.value = orderId
+
+    totalPrice.value = amount.value * price.value
+    discountPrice.value = totalPrice.value
+
+  })
+}
+
+function parseOrderType(type) {
+  if (type === "PICKUP") {
+    return "到店自提"
+  } else if (type === "DELIVERY") {
+    return "快递到家"
+  }
+}
+
+function handleConfirmOrder() {
+
+  payOrder(saveOrderId.value).then(res => {
+    if (res.code === '000') {
+      ElMessage({
+        message: '订单提交成功！',
+        type: 'success',
+        center: true,
+      })
+
+      emit("operationFinish", true)
+
+      orderDialogVisible.value = false
+    } else if (res.code === '400') {
+      ElMessage({
+        message: res.msg,
+        type: 'error',
+        center: true,
+      })
+
+      emit("operationFinish", false)
+    }
+  })
+}
+
+function handlePayDialogClose() {
+  orderDialogVisible.value = false
+}
+
+</script>
+
+<template>
+  <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 for="type">优惠券：</label>
+        </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>
+</template>
+
+<style scoped>
+.pay-dialog-title {
+  font-size: 30px;
+  margin-bottom: 20px;
+}
+</style>

src/views/product/ProductDetail.vue

@@ -3,9 +3,10 @@ import {ref, computed} from "vue"
 import {router} from '../../router'
 import {Back} from "@element-plus/icons-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 PayDialog from "../../components/PayDialog.vue";
 
 const role = sessionStorage.getItem("role")
 
@@ -25,6 +26,8 @@ const amount = ref(1)
 const totalPrice = ref(price.value)
 const discountPrice = ref(0)
 
+const dialogRef = ref()
+
 const handleChange = () => {
   totalPrice.value = amount.value * price.value
 }
@@ -105,8 +108,8 @@ function handleCreateOrder() {
         center: true,
       })
       orderId.value = res.result.id
-      orderDialogVisible.value = true
-      discountPrice.value = totalPrice.value
+      dialogRef.value.open(orderId.value)
+
     } else if (res.code === '400') {
       ElMessage({
         message: res.msg,
@@ -117,29 +120,31 @@ function handleCreateOrder() {
   })
 }
 
+
 // 确定订单按钮
-function handleConfirmOrder() {
-  payOrder(orderId.value).then(res => {
-    if (res.code === '000') {
-      ElMessage({
-        message: '订单提交成功！',
-        type: 'success',
-        center: true,
-      })
-      orderDialogVisible.value = false
-    } 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
+//     } else if (res.code === '400') {
+//       ElMessage({
+//         message: res.msg,
+//         type: 'error',
+//         center: true,
+//       })
+//     }
+//   })
+// }
+
+function handleConfirmOrder(success: boolean) {
+  // currently do nothing
 }
 
-function handlePayDialogClose() {
-  orderDialogVisible.value = false
-}
 
 function parseCategory(category) {
   if (category === 'FOOD') {
@@ -288,38 +293,42 @@ function toBackPage() {
       </div>
     </el-main>
 
-    <el-dialog v-model="orderDialogVisible" :before-close="handlePayDialogClose">
-      <el-row>
-        <span class="pay-dialog-title">订单支付</span>
-      </el-row>
+<!--    <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 for="type">优惠券：</label>-->
+<!--          </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>-->
+
+    <PayDialog ref="dialogRef" @operation-finish="handleConfirmOrder"/>
 
-      <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 for="type">优惠券：</label>
-          </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>
 
@@ -383,8 +392,5 @@ function toBackPage() {
   margin-bottom: 40px;
 }
 
-.pay-dialog-title {
-  font-size: 30px;
-  margin-bottom: 20px;
-}
+
 </style>