基本实现优惠券

src/api/order.ts

@@ -11,8 +11,8 @@ export const createOrder = payload => {
 }
 
 //订单支付
-export const payOrder = orderId => {
-    return axios.post(`${ORDER_MODULE}/pay/?orderId=${orderId}&couponId=0`)
+export const payOrder = (orderId, couponId) => {
+    return axios.post(`${ORDER_MODULE}/pay/?orderId=${orderId}&couponId=${couponId}`)
         .then(res => {
             return res;
         })

src/views/common/OrderItem.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import {deliverOrder, getOrder, getOrderById, payOrder, commentOrder} from "../../api/order.ts";
 import {ref, computed} from "vue";
+import {getAvailableCouponsByStoreId} from "../../api/coupon.ts";
+import {ElTable} from "element-plus";
 
 const props = defineProps({
   orderId: {
@@ -23,6 +25,9 @@ const rating = ref(0)
 const status = ref('')
 const createTime= ref('')
 const finishTime = ref('')
+const storeId = ref(0)
+
+const couponId = ref(0)
 
 getOrderDetail()
 
@@ -39,10 +44,10 @@ function getOrderDetail() {
     status.value = res.result.status
     createTime.value = res.result.createTime
     finishTime.value = res.result.finishTime
+    storeId.value = res.result.storeId
   })
 }
 
-
 // 对于变化的内容使用计算属性返回响应式结果
 const statusText = computed(() => {
   switch (status.value) {
@@ -84,10 +89,11 @@ function parseType() {
 
 function handlePay() {
   orderDialogVisible.value = true
+  getAvailableCouponList()
 }
 
 function handleConfirmOrder() {
-  payOrder(props.orderId).then(res => {
+  payOrder(props.orderId, couponId.value).then(res => {
     if (res.code === '000') {
       ElMessage({
         message: '订单支付成功！',
@@ -145,7 +151,6 @@ function handleGet() {
   })
 }
 
-
 function handleComment() {
   commentDialogVisible.value = true
 }
@@ -177,7 +182,6 @@ function handleSendComment() {
   })
 }
 
-
 function switchButtonFunction() {
     switch (status.value) {
       case 'UNPAID': handlePay(); break;
@@ -188,7 +192,45 @@ function switchButtonFunction() {
     }
 }
 
+// 处理优惠券
+interface Coupon {
+  id: number
+  groupId: number
+  type: string
+  satisfaction: number
+  minus: number
+}
+
+const availableCouponList = ref<Coupon[]>([])
+const currentRow = ref()
+const singleTableRef = ref<InstanceType<typeof ElTable>>()
+
+function getAvailableCouponList() {
+  getAvailableCouponsByStoreId(storeId.value).then(res => {
+    availableCouponList.value = res.result
+  })
+}
 
+const handleCurrentChange = (val: Coupon | undefined) => {
+  if (val) {
+    couponId.value = val.id
+  } else {
+    couponId.value = 0
+  }
+  currentRow.value = val
+}
+
+const setCurrent = (row?: User) => {
+  singleTableRef.value!.setCurrentRow(row)
+}
+
+function handleCouponType(type) {
+  if (type === "FULL_REDUCTION") {
+    return "满减"
+  } else if (type === "SPECIAL") {
+    return "折扣"
+  }
+}
 </script>
 
 <template>
@@ -242,7 +284,6 @@ function switchButtonFunction() {
           {{ content }}
         </el-descriptions-item >
       </el-descriptions>
-
     </el-card>
 
     <el-dialog v-model="orderDialogVisible">
@@ -260,14 +301,23 @@ function switchButtonFunction() {
           {{ parseType() }}
         </el-form-item>
         <el-form-item>
-          <label for="type">优惠券：</label>
-          <!--          <el-select id="type"-->
-          <!--                     v-model="type"-->
-          <!--                     placeholder="请选择"-->
-          <!--          >-->
-          <!--            <el-option value="DELIVERY">到店自提</el-option>-->
-          <!--            <el-option value="PICKUP">快递到家</el-option>-->
-          <!--          </el-select>-->
+          <label for="type">优惠券：</label> <el-button @click="setCurrent()">不使用优惠券</el-button>
+          <el-table
+              ref="singleTableRef"
+              :data="availableCouponList"
+              highlight-current-row
+              style="width: 100%"
+              @current-change="handleCurrentChange"
+          >
+            <el-table-column type="index" width="50"/>
+            <el-table-column prop="type" label="类型" width="180">
+              <template #default="scope">
+                {{ handleCouponType(scope.row.type) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="satisfaction" label="满（元）" width="180"/>
+            <el-table-column prop="minus" label="减（元）" width="180"/>
+          </el-table>
         </el-form-item>
       </el-form>
       <el-button @click="handleConfirmOrder">确认支付</el-button>

src/views/customer/BuyProduct.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import {useRouter} from "vue-router";
-import {ref} from "vue";
+import {ref, reactive, toRefs, toRaw} from "vue";
 import {getProductById} from "../../api/product.ts";
 import {createOrder, payOrder} from "../../api/order.ts";
 import {getAvailableCouponsByStoreId} from "../../api/coupon.ts";
+import {ElTable} from "element-plus";
 
 const router = useRouter();
 const productId = router.currentRoute.value.params.productId;
@@ -43,8 +44,7 @@ const handleChange = () => {
 const type = ref()
 let orderDialogVisible = ref(false)
 const orderId = ref()
-const couponId = ref()
-const availableCouponList = ref()
+const couponId = ref(0)
 
 function handleCreateOrder() {
   const payload = {
@@ -75,6 +75,7 @@ function handleCreateOrder() {
 function handleConfirmOrder() {
   console.log(couponId.value)
   payOrder(orderId.value, couponId.value).then(res => {
+    console.log(res.code)
     if (res.code === '000') {
       ElMessage({
         message: '订单支付成功！',
@@ -111,24 +112,38 @@ function handleCouponType(type) {
   }
 }
 
+// 处理优惠券
+interface Coupon {
+  id: number
+  groupId: number
+  type: string
+  satisfaction: number
+  minus: number
+}
+
+const availableCouponList = ref<Coupon[]>([])
+const currentRow = ref()
+const singleTableRef = ref<InstanceType<typeof ElTable>>()
+
 function getAvailableCouponList() {
   getAvailableCouponsByStoreId(storeId.value).then(res => {
-    console.log(res)
     availableCouponList.value = res.result
   })
 }
 
-interface Coupon {
-  groupId: number
-}
-const currentRow = ref()
-function handleChooseCoupon(val: Coupon) {
-  couponId.value = val.groupId
+const setCurrent = (row?: User) => {
+  singleTableRef.value!.setCurrentRow(row)
 }
 
-const setCurrent = (row?: Coupon) => {
-  singleTableRef.value!.setCurrentRow(row)
+const handleCurrentChange = (val: Coupon | undefined) => {
+  if (val) {
+    couponId.value = val.id
+  } else {
+    couponId.value = 0
+  }
+  currentRow.value = val
 }
+
 </script>
 
 <template>
@@ -173,12 +188,17 @@ const setCurrent = (row?: Coupon) => {
         </el-form-item>
         <el-form-item>
           <label for="type">提货方式：</label>
-            {{ handleOrderType(type) }}
+          {{ handleOrderType(type) }}
         </el-form-item>
         <el-form-item>
-          <label for="type">优惠券：</label>
-          <el-table :data="availableCouponList" stripe class="coupon-table"
-                    highlight-current-row @current-change="handleChooseCoupon">
+          <label for="type">优惠券：</label> <el-button @click="setCurrent()">不使用优惠券</el-button>
+          <el-table
+              ref="singleTableRef"
+              :data="availableCouponList"
+              highlight-current-row
+              style="width: 100%"
+              @current-change="handleCurrentChange"
+          >
             <el-table-column type="index" width="50"/>
             <el-table-column prop="type" label="类型" width="180">
               <template #default="scope">

src/views/customer/ManageCoupon.vue

@@ -40,7 +40,8 @@ function receiveCoupon(couponGroupId) {
         type: 'success',
         center: true,
       })
-      getCouponList()
+      getMyCouponList()
+      getReceiveCouponList()
     } else if (res.code === '400') {
       ElMessage({
         message: res.msg,