!225 优惠券

Merge pull request !225 from 疯狂的世界/owen_dev

src/api/mall/promotion/coupon/coupon.ts

@@ -16,3 +16,11 @@ export const getCouponPage = async (params: PageParam) => {
     params: params
   })
 }
+
+// 发送优惠券
+export const sendCoupon = async (data: any) => {
+  return request.post({
+    url: '/promotion/coupon/send',
+    data: data
+  })
+}

src/api/mall/promotion/coupon/couponTemplate.ts

@@ -9,7 +9,7 @@ export interface CouponTemplateVO {
   takeType: number
   usePrice: number
   productScope: number
-  productSpuIds: string
+  productSpuIds: number[]
   validityType: number
   validStartTime: Date
   validEndTime: Date
@@ -73,6 +73,14 @@ export function getCouponTemplatePage(params: PageParam) {
   })
 }
 
+// 获得可用于领取的优惠劵模板分页
+export function getCanTakeCouponTemplatePage(params: PageParam) {
+  return request.get({
+    url: '/promotion/coupon-template/can-take-page',
+    params: params
+  })
+}
+
 // 导出优惠劵模板 Excel
 export function exportCouponTemplateExcel(params: PageParam) {
   return request.get({

src/utils/constants.ts

@@ -220,6 +220,10 @@ export const PromotionProductScopeEnum = {
   SPU: {
     scope: 2,
     name: '指定商品参与'
+  },
+  CATEGORY: {
+    scope: 3,
+    name: '指定品类参与'
   }
 }
 

src/views/mall/product/category/components/ProductCategorySelect.vue

+<template>
+  <el-tree-select
+    v-model="selectCategoryId"
+    :data="categoryList"
+    :props="defaultProps"
+    :multiple="multiple"
+    :show-checkbox="multiple"
+    class="w-1/1"
+    node-key="id"
+    placeholder="请选择商品分类"
+  />
+</template>
+<script lang="ts" setup>
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as ProductCategoryApi from '@/api/mall/product/category'
+import { oneOf } from 'vue-types'
+import { propTypes } from '@/utils/propTypes'
+
+/** 商品分类选择组件 */
+defineOptions({ name: 'ProductCategorySelect' })
+
+const props = defineProps({
+  value: oneOf([propTypes.number, propTypes.array.def([])]).isRequired, // 选中的ID
+  multiple: propTypes.bool.def(false) // 是否多选
+})
+
+/** 选中的分类ID */
+const selectCategoryId = computed({
+  get: () => {
+    return props.value
+  },
+  set: (val: number | number[]) => {
+    emit('update:modelValue', val)
+  }
+})
+
+/** 分类选择 */
+const emit = defineEmits(['update:modelValue'])
+
+const categoryList = ref([]) // 分类树
+
+onMounted(async () => {
+  // 获得分类树
+  const data = await ProductCategoryApi.getCategoryList({})
+  categoryList.value = handleTree(data, 'id', 'parentId')
+})
+</script>

src/views/mall/promotion/coupon/components/CouponSend.vue

+<template>
+  <Dialog v-model="dialogVisible" :appendToBody="true" title="发送优惠券" width="70%">
+    <el-form
+      ref="queryFormRef"
+      :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
+      label-width="82px"
+    >
+      <el-form-item label="优惠券名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          class="!w-240px"
+          placeholder="请输入优惠劵名"
+          clearable
+          @keyup="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-table v-loading="loading" :data="list" show-overflow-tooltip>
+      <el-table-column align="center" label="优惠券名称" prop="name" min-width="60" />
+      <el-table-column
+        label="优惠金额 / 折扣"
+        align="center"
+        prop="discount"
+        :formatter="discountFormat"
+        min-width="60"
+      />
+      <el-table-column
+        align="center"
+        label="最低消费"
+        prop="usePrice"
+        min-width="60"
+        :formatter="userPriceFormat"
+      />
+      <el-table-column
+        align="center"
+        label="有效期限"
+        prop="validityType"
+        min-width="140"
+        :formatter="validityTypeFormat"
+      />
+      <el-table-column
+        align="center"
+        label="剩余数量"
+        min-width="60"
+        :formatter="remainedCountFormat"
+      />
+      <el-table-column label="操作" align="center" min-width="60px" fixed="right">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            :disabled="sendLoading"
+            :loading="sendLoading"
+            @click="handleSendCoupon(scope.row.id)"
+            v-hasPermi="['member:level:update']"
+          >
+            发送
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
+import * as CouponApi from '@/api/mall/promotion/coupon/coupon'
+import {
+  discountFormat,
+  remainedCountFormat,
+  userPriceFormat,
+  validityTypeFormat
+} from '@/views/mall/promotion/coupon/formatter'
+
+defineOptions({ name: 'PromotionCouponSend' })
+
+const message = useMessage() // 消息弹窗
+const total = ref(0) // 列表的总页数
+const list = ref<any[]>([]) // 列表的数据
+const loading = ref(false) // 列表的加载中
+const sendLoading = ref(false) // 发送按钮的加载中
+const dialogVisible = ref(false) // 弹窗的是否展示
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  name: null
+}) // 查询参数
+const queryFormRef = ref() // 搜索的表单
+// 领取人的编号列表
+let userIds: number[] = []
+
+/** 打开弹窗 */
+const open = (ids: number[]) => {
+  userIds = ids
+  // 打开时重置查询，防止发送列表剩余数量未更新的问题
+  resetQuery()
+
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CouponTemplateApi.getCanTakeCouponTemplatePage(queryParams.value)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef?.value?.resetFields()
+  handleQuery()
+}
+
+/** 发送操作 **/
+const handleSendCoupon = async (templateId: number) => {
+  try {
+    sendLoading.value = true
+    await CouponApi.sendCoupon({ templateId, userIds })
+
+    message.success('发送成功')
+    dialogVisible.value = false
+  } finally {
+    sendLoading.value = false
+  }
+}
+
+/** 初始化 **/
+// onMounted(async () => {
+// await getList()
+// })
+</script>

src/views/mall/promotion/coupon/formatter.ts

+import { CouponTemplateValidityTypeEnum, PromotionDiscountTypeEnum } from '@/utils/constants'
+import { formatDate } from '@/utils/formatTime'
+import { CouponTemplateVO } from '@/api/mall/promotion/coupon/couponTemplate'
+import { floatToFixed2 } from '@/utils'
+
+// 格式化【优惠金额/折扣】
+export const discountFormat = (row: CouponTemplateVO) => {
+  if (row.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+    return `￥${floatToFixed2(row.discountPrice)}`
+  }
+  if (row.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
+    return `${row.discountPrice}%`
+  }
+  return '未知【' + row.discountType + '】'
+}
+
+// 格式化【领取上限】
+export const takeLimitCountFormat = (row: CouponTemplateVO) => {
+  if (row.takeLimitCount === -1) {
+    return '无领取限制'
+  }
+  return `${row.takeLimitCount} 张/人`
+}
+
+// 格式化【有效期限】
+export const validityTypeFormat = (row: CouponTemplateVO) => {
+  if (row.validityType === CouponTemplateValidityTypeEnum.DATE.type) {
+    return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}`
+  }
+  if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
+    return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`
+  }
+  return '未知【' + row.validityType + '】'
+}
+
+// 格式化【剩余数量】
+export const remainedCountFormat = (row: CouponTemplateVO) => {
+  return row.totalCount - row.takeCount
+}
+
+// 格式化【最低消费】
+export const userPriceFormat = (row: CouponTemplateVO) => {
+  return `￥${floatToFixed2(row.usePrice)}`
+}

src/views/mall/promotion/coupon/template/CouponTemplateForm.vue

@@ -29,7 +29,7 @@
         <el-input-number
           v-model="formData.discountPrice"
           placeholder="请输入优惠金额，单位：元"
-          style="width: 400px"
+          class="!w-400px mr-2"
           :precision="2"
           :min="0"
         />
@@ -43,7 +43,7 @@
         <el-input-number
           v-model="formData.discountPercent"
           placeholder="优惠券折扣不能小于 1 折，且不可大于 9.9 折"
-          style="width: 400px"
+          class="!w-400px mr-2"
           :precision="1"
           :min="1"
           :max="9.9"
@@ -58,7 +58,7 @@
         <el-input-number
           v-model="formData.discountLimitPrice"
           placeholder="请输入最多优惠"
-          style="width: 400px"
+          class="!w-400px mr-2"
           :precision="2"
           :min="0"
         />
@@ -68,7 +68,7 @@
         <el-input-number
           v-model="formData.usePrice"
           placeholder="无门槛请设为 0"
-          style="width: 400px"
+          class="!w-400px mr-2"
           :precision="2"
           :min="0"
         />
@@ -84,7 +84,7 @@
         <el-input-number
           v-model="formData.totalCount"
           placeholder="发放数量，没有之后不能领取或发放，-1 为不限制"
-          style="width: 400px"
+          class="!w-400px mr-2"
           :precision="0"
           :min="-1"
         />
@@ -94,7 +94,7 @@
         <el-input-number
           v-model="formData.takeLimitCount"
           placeholder="设置为 -1 时，可无限领取"
-          style="width: 400px"
+          class="!w-400px mr-2"
           :precision="0"
           :min="-1"
         />
@@ -133,7 +133,7 @@
         <el-input-number
           v-model="formData.fixedStartTerm"
           placeholder="0 为今天生效"
-          style="width: 165px"
+          class="mx-2"
           :precision="0"
           :min="0"
         />
@@ -141,7 +141,7 @@
         <el-input-number
           v-model="formData.fixedEndTerm"
           placeholder="请输入结束天数"
-          style="width: 165px"
+          class="mx-2"
           :precision="0"
           :min="0"
         />
@@ -162,21 +162,21 @@
         v-if="formData.productScope === PromotionProductScopeEnum.SPU.scope"
         prop="productSpuIds"
       >
-        <el-select
-          v-model="formData.productSpuIds"
-          placeholder="请选择活动商品"
-          clearable
-          multiple
-          filterable
-          style="width: 400px"
-        >
-          <el-option v-for="item in productSpus" :key="item.id" :label="item.name" :value="item.id">
-            <span style="float: left">{{ item.name }}</span>
-            <span style="float: right; font-size: 13px; color: #8492a6">
-              ￥{{ (item.minPrice / 100.0).toFixed(2) }}
-            </span>
-          </el-option>
-        </el-select>
+        <div class="flex items-center gap-1 flex-wrap">
+          <div class="select-box spu-pic" v-for="(spu, index) in productSpus" :key="spu.id">
+            <el-image :src="spu.picUrl" />
+            <Icon icon="ep:circle-close-filled" class="del-icon" @click="handleRemoveSpu(index)" />
+          </div>
+          <div class="select-box" @click="openSpuTableSelect">
+            <Icon icon="ep:plus" />
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item
+        v-if="formData.productScope === PromotionProductScopeEnum.CATEGORY.scope"
+        prop="productCategoryIds"
+      >
+        <ProductCategorySelect v-model="formData.productCategoryIds" multiple />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -184,6 +184,7 @@
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+  <SpuTableSelect ref="spuTableSelectRef" multiple @change="handleSpuSelected" />
 </template>
 <script lang="ts" setup>
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
@@ -194,6 +195,8 @@ import {
   PromotionDiscountTypeEnum,
   PromotionProductScopeEnum
 } from '@/utils/constants'
+import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
+import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
 
 defineOptions({ name: 'CouponTemplateForm' })
 
@@ -222,7 +225,8 @@ const formData = ref({
   fixedStartTerm: undefined,
   fixedEndTerm: undefined,
   productScope: PromotionProductScopeEnum.ALL.scope,
-  productSpuIds: []
+  productSpuIds: [],
+  productCategoryIds: []
 })
 const formRules = reactive({
   name: [{ required: true, message: '优惠券名称不能为空', trigger: 'blur' }],
@@ -239,10 +243,11 @@ const formRules = reactive({
   fixedStartTerm: [{ required: true, message: '开始领取天数不能为空', trigger: 'blur' }],
   fixedEndTerm: [{ required: true, message: '开始领取天数不能为空', trigger: 'blur' }],
   productScope: [{ required: true, message: '商品范围不能为空', trigger: 'blur' }],
-  productSpuIds: [{ required: true, message: '商品范围不能为空', trigger: 'blur' }]
+  productSpuIds: [{ required: true, message: '商品范围不能为空', trigger: 'blur' }],
+  productCategoryIds: [{ required: true, message: '分类范围不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
-const productSpus = ref([]) // 商品列表
+const productSpus = ref<ProductSpuApi.Spu[]>([]) // 商品列表
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -265,12 +270,12 @@ const open = async (type: string, id?: number) => {
         usePrice: data.usePrice !== undefined ? data.usePrice / 100.0 : undefined,
         validTimes: [data.validStartTime, data.validEndTime]
       }
+      // 获得商品范围
+      await getProductScope()
     } finally {
       formLoading.value = false
     }
   }
-  // 获得商品列表
-  productSpus.value = await ProductSpuApi.getSpuSimpleList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -306,6 +311,12 @@ const submitForm = async () => {
           ? formData.value.validTimes[1]
           : undefined
     } as CouponTemplateApi.CouponTemplateVO
+
+    if (formData.value.productCategoryIds?.length > 0) {
+      // 改个名字？加个字段？
+      data.productSpuIds = formData.value.productCategoryIds
+    }
+
     if (formType.value === 'create') {
       await CouponTemplateApi.createCouponTemplate(data)
       message.success(t('common.createSuccess'))
@@ -341,8 +352,67 @@ const resetForm = () => {
     fixedStartTerm: undefined,
     fixedEndTerm: undefined,
     productScope: PromotionProductScopeEnum.ALL.scope,
-    productSpuIds: []
+    productSpuIds: [],
+    productCategoryIds: []
   }
   formRef.value?.resetFields()
+  productSpus.value = []
+}
+
+/** 获得商品范围 */
+const getProductScope = async () => {
+  switch (formData.value.productScope) {
+    case PromotionProductScopeEnum.SPU.scope:
+      // 获得商品列表
+      productSpus.value = await ProductSpuApi.getSpuDetailList(formData.value.productSpuIds)
+      break
+    case PromotionProductScopeEnum.CATEGORY.scope:
+      formData.value.productCategoryIds = formData.value.productSpuIds
+      formData.value.productSpuIds = []
+      break
+    default:
+      break
+  }
+}
+
+/** 活动商品 按钮 */
+const spuTableSelectRef = ref()
+const openSpuTableSelect = () => {
+  spuTableSelectRef.value.open(productSpus.value)
+}
+
+/** 选择商品后触发 */
+const handleSpuSelected = (spus: ProductSpuApi.Spu[]) => {
+  productSpus.value = spus
+  formData.value.productSpuIds = spus.map((spu) => spu.id) as []
+}
+
+/** 选择商品后触发 */
+const handleRemoveSpu = (index: number) => {
+  productSpus.value.splice(index, 1)
+  formData.value.productSpuIds.splice(index, 1)
 }
 </script>
+
+<style scoped lang="scss">
+.select-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+  width: 60px;
+  height: 60px;
+}
+.spu-pic {
+  position: relative;
+}
+.del-icon {
+  position: absolute;
+  z-index: 1;
+  width: 20px !important;
+  height: 20px !important;
+  right: -10px;
+  top: -10px;
+}
+</style>

src/views/mall/promotion/coupon/template/index.vue

@@ -103,7 +103,7 @@
         label="剩余数量"
         align="center"
         prop="totalCount"
-        :formatter="(row) => row.totalCount - row.takeCount"
+        :formatter="remainedCountFormat"
       />
       <el-table-column
         label="领取上限"
@@ -171,14 +171,16 @@
 
 <script lang="ts" setup>
 import * as CouponTemplateApi from '@/api/mall/promotion/coupon/couponTemplate'
-import {
-  CommonStatusEnum,
-  CouponTemplateValidityTypeEnum,
-  PromotionDiscountTypeEnum
-} from '@/utils/constants'
+import { CommonStatusEnum } from '@/utils/constants'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { dateFormatter, formatDate } from '@/utils/formatTime'
+import { dateFormatter } from '@/utils/formatTime'
 import CouponTemplateForm from './CouponTemplateForm.vue'
+import {
+  discountFormat,
+  remainedCountFormat,
+  takeLimitCountFormat,
+  validityTypeFormat
+} from '@/views/mall/promotion/coupon/formatter'
 
 defineOptions({ name: 'PromotionCouponTemplate' })
 
@@ -193,6 +195,7 @@ const queryParams = reactive({
   pageSize: 10,
   name: null,
   status: null,
+  discountType: null,
   type: null,
   createTime: []
 })
@@ -258,36 +261,6 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
-// 格式化【优惠金额/折扣】
-const discountFormat = (row: any) => {
-  if (row.discountType === PromotionDiscountTypeEnum.PRICE.type) {
-    return `￥${(row.discountPrice / 100.0).toFixed(2)}`
-  }
-  if (row.discountType === PromotionDiscountTypeEnum.PERCENT.type) {
-    return `￥${(row.discountPrice / 100.0).toFixed(2)}`
-  }
-  return '未知【' + row.discountType + '】'
-}
-
-// 格式化【领取上限】
-const takeLimitCountFormat = (row: any) => {
-  if (row.takeLimitCount === -1) {
-    return '无领取限制'
-  }
-  return `${row.takeLimitCount} 张/人`
-}
-
-// 格式化【有效期限】
-const validityTypeFormat = (row: any) => {
-  if (row.validityType === CouponTemplateValidityTypeEnum.DATE.type) {
-    return `${formatDate(row.validStartTime)} 至 ${formatDate(row.validEndTime)}`
-  }
-  if (row.validityType === CouponTemplateValidityTypeEnum.TERM.type) {
-    return `领取后第 ${row.fixedStartTerm} - ${row.fixedEndTerm} 天内可用`
-  }
-  return '未知【' + row.validityType + '】'
-}
-
 /** 初始化 **/
 onMounted(() => {
   getList()

src/views/member/user/index.vue

@@ -60,13 +60,21 @@
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button @click="openCoupon" v-hasPermi="['promotion:coupon:send']">发送优惠券</el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
       <el-table-column label="用户编号" align="center" prop="id" width="120px" />
       <el-table-column label="头像" align="center" prop="avatar" width="80px">
         <template #default="scope">
@@ -145,6 +153,8 @@
   <UserForm ref="formRef" @success="getList" />
   <!-- 修改用户等级弹窗 -->
   <UpdateLevelForm ref="updateLevelFormRef" @success="getList" />
+  <!-- 发送优惠券弹窗 -->
+  <CouponSend ref="couponSend" />
 </template>
 <script setup lang="ts">
 import { dateFormatter } from '@/utils/formatTime'
@@ -154,9 +164,12 @@ import MemberTagSelect from '@/views/member/tag/components/MemberTagSelect.vue'
 import MemberLevelSelect from '@/views/member/level/components/MemberLevelSelect.vue'
 import MemberGroupSelect from '@/views/member/group/components/MemberGroupSelect.vue'
 import UpdateLevelForm from '@/views/member/user/UpdateLevelForm.vue'
+import CouponSend from '@/views/mall/promotion/coupon/components/CouponSend.vue'
 
 defineOptions({ name: 'MemberUser' })
 
+const message = useMessage() // 消息弹窗
+
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
@@ -173,6 +186,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const updateLevelFormRef = ref() // 修改会员等级表单
+const selectedIds = ref<number[]>([]) // 表格的选中 ID 数组
 
 /** 查询列表 */
 const getList = async () => {
@@ -204,6 +218,22 @@ const openDetail = (id: number) => {
   push({ name: 'MemberUserDetail', params: { id } })
 }
 
+/** 表格选中事件 */
+const handleSelectionChange = (rows: UserApi.UserVO[]) => {
+  selectedIds.value = rows.map((row) => row.id)
+}
+
+/** 发送优惠券 */
+const couponSend = ref()
+const openCoupon = () => {
+  if (selectedIds.value.length === 0) {
+    message.warning('请选择要发送优惠券的用户')
+    return
+  }
+
+  couponSend.value.open(selectedIds.value)
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()