完成优惠价格临时展示

components.d.ts

@@ -28,6 +28,7 @@ declare module 'vue' {
     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']
     ElTable: typeof import('element-plus/es')['ElTable']

src/api/order.ts

@@ -18,6 +18,14 @@ export const payOrder = (orderId, couponId) => {
         })
 }
 
+//预计算价格
+export const calculateOrder = (orderId, couponId) => {
+    return axios.get(`${ORDER_MODULE}/calculate/?orderId=${orderId}&couponId=${couponId}`)
+        .then(res => {
+            return res;
+        })
+}
+
 //获取用户下订单
 export const getAllOrder = () => {
     return axios.get(`${ORDER_MODULE}/`, )

src/components/OrderItem.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {deliverOrder, getOrder, getOrderById, payOrder, commentOrder} from "../api/order.ts";
+import {deliverOrder, getOrder, getOrderById, payOrder, commentOrder, calculateOrder} from "../api/order.ts";
 import {ref, computed} from "vue";
 import {getAvailableCouponsByStoreId} from "../api/coupon.ts";
 import {ElTable} from "element-plus";
@@ -20,7 +20,6 @@ const userId = ref(0)
 const productId = ref(0)
 const productName = ref('')
 const price = ref(0)
-const totalPrice = ref(0)
 const amount = ref(0)
 const paid = ref(0)
 const type = ref('')
@@ -31,6 +30,9 @@ const createTime = ref('')
 const finishTime = ref('')
 const storeId = ref(0)
 
+const totalPrice = ref(0)
+const discountPrice = ref(0)
+
 const couponId = ref(0)
 
 getOrderDetail()
@@ -52,6 +54,7 @@ function getOrderDetail() {
     storeId.value = res.result.storeId
 
     totalPrice.value = amount.value * price.value
+    discountPrice.value = totalPrice.value
   })
 }
 
@@ -231,6 +234,9 @@ const handleCurrentChange = (val: Coupon | undefined) => {
     couponId.value = 0
   }
   currentRow.value = val
+  calculateOrder(props.orderId, couponId.value).then(res => {
+    discountPrice.value = res.result
+  })
 }
 
 const setCurrent = (row?: User) => {
@@ -346,19 +352,19 @@ function parseOrderType(type) {
     <div>
       <el-form>
         <el-form-item>
-          <label for="amount">购买数量：</label>
+          <label>购买数量：</label>
           {{ amount }} 件
         </el-form-item>
         <el-form-item>
-          <label for="discountPrice">折扣前总价：</label>
+          <label>折扣前总价：</label>
           {{ totalPrice }} 元
         </el-form-item>
         <el-form-item>
-          <label for="type">提货方式：</label>
+          <label>提货方式：</label>
           {{ parseOrderType(type) }}
         </el-form-item>
         <el-form-item>
-          <label for="type">优惠券：</label>
+          <label>优惠券：</label>
           <el-button @click="setCurrent()">不使用优惠券</el-button>
           <el-table
               ref="singleTableRef"
@@ -377,6 +383,10 @@ function parseOrderType(type) {
             <el-table-column prop="minus" label="减（元）" width="180"/>
           </el-table>
         </el-form-item>
+        <el-form-item>
+          <label>折扣后金额：</label>
+          {{ discountPrice }} 元
+        </el-form-item>
       </el-form>
       <el-button @click="handleConfirmOrder" type="primary" plain>
         确认支付

src/views/product/ProductDetail.vue

@@ -4,7 +4,7 @@ import {ref, onMounted} from "vue";
 import {addStock, getProductById} from "../../api/product.ts";
 import {Back, RefreshRight} from "@element-plus/icons-vue";
 import {ElTable} from "element-plus";
-import {createOrder, payOrder} from "../../api/order.ts";
+import {calculateOrder, createOrder, payOrder} from "../../api/order.ts";
 import {getAvailableCouponsByStoreId} from "../../api/coupon.ts";
 
 const router = useRouter();
@@ -25,6 +25,8 @@ const photoUrl = ref(0)
 
 const amount = ref(1)
 const totalPrice = ref(price.value)
+const discountPrice = ref(0)
+
 const handleChange = () => {
   totalPrice.value = amount.value * price.value
 }
@@ -117,6 +119,7 @@ function handleCreateOrder() {
       getAvailableCouponList()
       orderId.value = res.result.id
       orderDialogVisible.value = true
+      discountPrice.value = totalPrice.value
     } else if (res.code === '400') {
       ElMessage({
         message: res.msg,
@@ -223,6 +226,9 @@ const handleCurrentChange = (val: Coupon | undefined) => {
     couponId.value = 0
   }
   currentRow.value = val
+  calculateOrder(orderId.value, couponId.value).then(res => {
+    discountPrice.value = res.result
+  })
 }
 
 function toBackPage() {
@@ -361,6 +367,11 @@ function toBackPage() {
                 <el-table-column prop="minus" label="减（元）" width="180"/>
               </el-table>
             </el-form-item>
+
+            <el-form-item>
+              <label>折扣后金额：</label>
+              {{ discountPrice }} 元
+            </el-form-item>
           </el-form>
 
           <el-button @click="handleConfirmOrder" type="primary" plain>确认支付</el-button>