初步实现优惠券（存在bug）

components.d.ts

@@ -28,6 +28,8 @@ declare module 'vue' {
     ElRate: typeof import('element-plus/es')['ElRate']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     Footer: typeof import('./src/components/Footer.vue')['default']
     Header: typeof import('./src/components/Header.vue')['default']

src/api/_prefix.ts

@@ -10,3 +10,5 @@ export const PRODUCT_MODULE= `${API_MODULE}/products`
 export const ORDER_MODULE= `${API_MODULE}/orders`
 //图片模块
 export const IMAGE_MODULE= `${API_MODULE}/images`
+//优惠券模块
+export const COUPON_MODULE= `${API_MODULE}/coupons`

src/api/coupon.ts

@@ -0,0 +1,38 @@
+import {axios} from '../utils/request'
+import {COUPON_MODULE} from './_prefix'
+
+export const getCoupons = () => {
+    return axios.get(`${COUPON_MODULE}/`, )
+        .then(res => {
+            return res;
+        })
+}
+
+export const getCouponGroups = () => {
+    return axios.get(`${COUPON_MODULE}/group`, )
+        .then(res => {
+            return res;
+        })
+}
+
+export const createCoupons = payload => {
+    return axios.post(`${COUPON_MODULE}/`, payload,
+        {headers: {'Content-Type': 'application/json'}})
+        .then(res => {
+            return res;
+        })
+}
+
+export const receiveCouponGroup = couponGroupId => {
+    return axios.post(`${COUPON_MODULE}/receive/?couponGroupId=${couponGroupId}`)
+        .then(res => {
+            return res;
+        })
+}
+
+export const getAvailableCouponsByStoreId = storeId => {
+    return axios.get(`${COUPON_MODULE}/available/?storeId=${storeId}`)
+        .then(res => {
+            return res;
+        })
+}

src/components/Header.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {CirclePlus, UserFilled, SwitchButton, Document} from "@element-plus/icons-vue";
+import {CirclePlus, UserFilled, Discount, SwitchButton, Document} from "@element-plus/icons-vue";
 import {router} from '../router'
 
 // const searchContent = ref('')
@@ -62,13 +62,18 @@ function search() {
         </router-link>
       </el-col>
 
-
       <el-col :span="1" class="header-icon">
         <router-link to="/customer/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="/customer/coupon" v-slot="{navigate}">
+          <el-icon @click="navigate" :size="35" color="white" ><Discount /></el-icon>
+        </router-link>
+      </el-col>
+
       <el-col :span="1" class="header-icon">
         <router-link to="/dashboard" v-slot="{navigate}">
           <el-icon @click="navigate" :size="35" color="white" ><UserFilled /></el-icon>

src/router/index.ts

@@ -39,6 +39,16 @@ const router = createRouter({
                 name: 'createProduct',
                 component: () => import('../views/staff/CreateProduct.vue'),
             },
+            {
+                path: '/customer/coupon/',
+                name: 'manageCoupon',
+                component: () => import('../views/customer/ManageCoupon.vue'),
+            },
+            {
+                path: '/staff/coupon/',
+                name: 'releaseCoupon',
+                component: () => import('../views/staff/AllCoupon.vue'),
+            },
             {
                 path: '/productDetail/:productId',
                 name: 'productDetail',

src/views/customer/BuyProduct.vue

@@ -3,6 +3,7 @@ import {useRouter} from "vue-router";
 import {ref} from "vue";
 import {getProductById} from "../../api/product.ts";
 import {createOrder, payOrder} from "../../api/order.ts";
+import {getAvailableCouponsByStoreId} from "../../api/coupon.ts";
 
 const router = useRouter();
 const productId = router.currentRoute.value.params.productId;
@@ -21,7 +22,6 @@ getProductDetail()
 
 function getProductDetail() {
   getProductById(productId).then(res => {
-    console.log(res.result)
     productVO.value = res.result
     storeId.value = productVO.value.storeId
     name.value = productVO.value.name
@@ -35,18 +35,16 @@ function getProductDetail() {
   })
 }
 
-
 const amount = ref(1)
 const totalPrice = ref(price)
 const handleChange = () => {
   totalPrice.value = amount.value * price.value
 }
-
 const type = ref()
-
 let orderDialogVisible = ref(false)
-
 const orderId = ref()
+const couponId = ref()
+const availableCouponList = ref()
 
 function handleCreateOrder() {
   const payload = {
@@ -61,6 +59,7 @@ function handleCreateOrder() {
         type: 'success',
         center: true,
       })
+      getAvailableCouponList()
       orderId.value = res.result.id
       orderDialogVisible.value = true
     } else if (res.code === '400') {
@@ -74,7 +73,8 @@ function handleCreateOrder() {
 }
 
 function handleConfirmOrder() {
-  payOrder(orderId.value).then(res => {
+  console.log(couponId.value)
+  payOrder(orderId.value, couponId.value).then(res => {
     if (res.code === '000') {
       ElMessage({
         message: '订单支付成功！',
@@ -95,6 +95,40 @@ function handleConfirmOrder() {
   })
 }
 
+function handleOrderType(type) {
+  if (type === "PICKUP") {
+    return "到店自提"
+  } else if (type === "DELIVERY") {
+    return "快递到家"
+  }
+}
+
+function handleCouponType(type) {
+  if (type === "FULL_REDUCTION") {
+    return "满减"
+  } else if (type === "SPECIAL") {
+    return "折扣"
+  }
+}
+
+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?: Coupon) => {
+  singleTableRef.value!.setCurrentRow(row)
+}
 </script>
 
 <template>
@@ -102,7 +136,7 @@ function handleConfirmOrder() {
     <el-form class="buy-form-main">
       <el-form-item>
         <label for="amount">商品单价：</label>
-        {{price}}
+        {{ price }}
       </el-form-item>
       <el-form-item>
         <label for="amount">购买数量：</label>
@@ -114,8 +148,8 @@ function handleConfirmOrder() {
                    v-model="type"
                    placeholder="请选择"
         >
-          <el-option value="DELIVERY" label="到店自提" />
-          <el-option value="PICKUP" label="快递到家" />
+          <el-option value="PICKUP" label="到店自提"/>
+          <el-option value="DELIVERY" label="快递到家"/>
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -131,7 +165,7 @@ function handleConfirmOrder() {
       <el-form>
         <el-form-item>
           <label for="amount">购买数量：</label>
-          {{amount}}
+          {{ amount }}
         </el-form-item>
         <el-form-item>
           <label for="discountPrice">折扣前总价：</label>
@@ -139,20 +173,24 @@ function handleConfirmOrder() {
         </el-form-item>
         <el-form-item>
           <label for="type">提货方式：</label>
-          {{ type }}
+            {{ handleOrderType(type) }}
         </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>-->
+          <el-table :data="availableCouponList" stripe class="coupon-table"
+                    highlight-current-row @current-change="handleChooseCoupon">
+            <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>
+      <el-button @click="handleConfirmOrder" type="primary" plain>确认支付</el-button>
     </el-dialog>
   </div>
 </template>

src/views/customer/ManageCoupon.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import {ref} from "vue";
+import {getCouponGroups, getCoupons, receiveCouponGroup} from "../../api/coupon.ts";
+
+const myCouponList = ref()
+const receiveCouponList = ref()
+const type = ref()
+const satisfaction = ref()
+const minus = ref()
+const rest = ref()
+
+getMyCouponList()
+getReceiveCouponList()
+
+function getMyCouponList() {
+  getCoupons().then(res => {
+    myCouponList.value = res.result
+  })
+}
+
+function getReceiveCouponList() {
+  getCouponGroups().then(res => {
+    receiveCouponList.value = res.result
+  })
+}
+
+function handleType(type) {
+  if (type === "FULL_REDUCTION") {
+    return "满减"
+  } else if (type === "SPECIAL") {
+    return "折扣"
+  }
+}
+
+function receiveCoupon(couponGroupId) {
+  receiveCouponGroup(couponGroupId).then(res => {
+    if (res.code === '000') {
+      ElMessage({
+        message: '获取优惠券成功！',
+        type: 'success',
+        center: true,
+      })
+      getCouponList()
+    } else if (res.code === '400') {
+      ElMessage({
+        message: res.msg,
+        type: 'error',
+        center: true,
+      })
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="all-coupon-main">
+    <span class="this-title">我的优惠券</span>
+    <el-table :data="myCouponList" stripe class="coupon-table">
+      <el-table-column type="index" width="50" />
+      <el-table-column prop="type" label="类型" width="180">
+        <template #default="scope">
+          {{ handleType(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-column prop="storeId" label="所属商店" width="180" />
+      <el-table-column prop="used" label="状态" width="180">
+        <template #default="scope">
+          <el-tag v-if="scope.row.used === false" type="success">待使用</el-tag>
+          <el-tag v-if="scope.row.used === true" type="info">已使用</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <span class="this-title">获取优惠券</span>
+    <el-table :data="receiveCouponList" stripe class="coupon-table">
+      <el-table-column type="index" width="50" />
+      <el-table-column prop="type" label="类型" width="180">
+        <template #default="scope">
+          {{ handleType(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-column prop="rest" label="数量（张）" width="180" />
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button @click="receiveCoupon(scope.row.id)" type="primary" plain>领取</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<style scoped>
+.all-coupon-main {
+  margin-left: 20px;
+  margin-top: 20px;
+}
+
+.this-title {
+  font-size: large;
+  margin-bottom: 20px;
+}
+
+.coupon-table {
+  margin-bottom: 30px;
+}
+</style>

src/views/manager/CreateStore.vue

@@ -117,7 +117,6 @@ function handleCreateStore() {
             <label for="location">商店地址</label>
             <el-input id="location" v-model="location"
                    required
-
                    placeholder="楼层-门牌号 如：3楼-305" />
           </el-form-item>
 

src/views/portal/AllStore.vue

@@ -6,7 +6,6 @@ import {getAllStore} from "../../api/store.ts"
 import {useRouter} from "vue-router"
 
 const router = useRouter()
-const userId = router.currentRoute.value.params.userId
 
 let storeList = ref()
 
@@ -18,19 +17,14 @@ function getStoreList() {
   })
 }
 
-function toStoreDetailPage(storeId) {
+function toStoreDetailPage(storeId: Number) {
   router.push("/storeDetail/" + storeId);
 }
 
-function toAllOrderPage() {
-  router.push("/customer/allOrder");
-}
 </script>
 
 <template>
   <el-main class="store-item-list">
-<!--    我挪到header去了 -->
-<!--    <el-button @click="toAllOrderPage">全部订单</el-button>-->
     <StoreItem
                v-for="storeVO in storeList" :storeId="storeVO.id"
                @click="toStoreDetailPage(storeVO.id)" />

src/views/portal/StoreDetail.vue

@@ -69,7 +69,6 @@ function toProductDetailPage(productId) {
       <productItem class="product-item-list"
                    v-for="productVO in productList" :productId="productVO.id"
                    @click="toProductDetailPage(productVO.id)" />
-
     </div>
   </div>
 </template>

src/views/staff/AllCoupon.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import {ref} from "vue";
+import {createCoupons, getCouponGroups, receiveCouponGroup} from "../../api/coupon.ts";
+
+const couponList = ref()
+const type = ref()
+const satisfaction = ref()
+const minus = ref()
+const rest = ref()
+
+
+getCouponList()
+
+function getCouponList() {
+  getCouponGroups().then(res => {
+    couponList.value = res.result
+  })
+}
+
+let couponDialogVisible = ref(false)
+
+function toCreateCoupon() {
+  couponDialogVisible.value = true
+}
+
+function handleCreateCoupon() {
+  const payload = {
+    type: type.value,
+    satisfaction: satisfaction.value,
+    minus: minus.value,
+    rest: rest.value
+  }
+  couponDialogVisible.value = false
+  createCoupons(payload).then(res => {
+    if (res.code === '000') {
+      ElMessage({
+        message: '创建优惠券成功！',
+        type: 'success',
+        center: true,
+      })
+      type.value = ''
+      satisfaction.value = null
+      minus.value = null
+      rest.value = null
+    } else if (res.code === '400') {
+      ElMessage({
+        message: res.msg,
+        type: 'error',
+        center: true,
+      })
+    }
+  })
+}
+
+function handleType(type) {
+  if (type === "FULL_REDUCTION") {
+    return "满减"
+  } else if (type === "SPECIAL") {
+    return "折扣"
+  }
+}
+
+function receiveCoupon(couponGroupId) {
+  receiveCouponGroup(couponGroupId).then(res => {
+    console.log(res)
+    if (res.code === '000') {
+      ElMessage({
+        message: '获取优惠券成功！',
+        type: 'success',
+        center: true,
+      })
+      getCouponList()
+    } else if (res.code === '400') {
+      ElMessage({
+        message: res.msg,
+        type: 'error',
+        center: true,
+      })
+    }
+  })
+}
+</script>
+
+<template>
+  <el-button class="create-coupon-button" type="primary" plain
+             @click="toCreateCoupon()">新增优惠券
+  </el-button>
+
+  <div class="all-coupon-main">
+    <el-table :data="couponList" style="width: 100%" stripe>
+      <el-table-column type="index" width="50" />
+      <el-table-column prop="type" label="类型" width="180">
+        <template #default="scope">
+          {{ handleType(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-column prop="rest" label="数量（张）" width="180" />
+      <el-table-column label="操作">
+        <template #default="scope">
+          <el-button @click="receiveCoupon(scope.row.id)" type="primary" plain>领取</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+
+  <el-dialog v-model="couponDialogVisible" title="创建优惠券">
+    <el-form>
+      <el-form-item>
+        <label for="type">类型：</label>
+        <el-select id="identity"
+                   v-model="type"
+                   placeholder="请选择"
+        >
+          <el-option value="FULL_REDUCTION" label="满减"/>
+          <el-option value="SPECIAL" label="折扣"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <label for="satisfaction">满：</label>
+        <el-input id="satisfaction" v-model="satisfaction" required placeholder="请输入金额"
+                  class="create-coupon-dialog-input">
+          <template #append>元</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <label for="minus">减：</label>
+        <el-input id="minus" v-model="minus" required placeholder="请输入金额"
+                  class="create-coupon-dialog-input">
+          <template #append>元</template>
+        </el-input>
+      </el-form-item>
+      <el-form-item>
+        <label for="rest">数量：</label>
+        <el-input id="rest" v-model="rest" required placeholder="请输入数量"
+                  class="create-coupon-dialog-input">
+          <template #append>张</template>
+        </el-input>
+      </el-form-item>
+
+      <el-form-item>
+        <button @click.prevent="handleCreateCoupon()">
+          添加
+        </button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<style scoped>
+.create-coupon-button {
+  width: 100px;
+  margin-left: 20px;
+  margin-top: 30px;
+}
+
+.all-coupon-main {
+  margin-left: 20px;
+  margin-top: 20px;
+}
+
+.create-coupon-dialog-input {
+  width: 200px;
+}
+</style>