优惠卷模版样式调整

95d7d1eb · puhui999 · 75135e1e · 95d7d1eb · 95d7d1eb
Commit 95d7d1eb authored Oct 24, 2023 by puhui999
Hide whitespace changes
Inline Side-by-side

Showing with 77 additions and 67 deletions

src/views/mall/promotion/coupon/template/CouponTemplateForm.vue
+40 -43

src/views/mall/promotion/coupon/template/index.vue
+37 -24

No files found.
--- a/src/views/mall/promotion/coupon/template/CouponTemplateForm.vue
+++ b/src/views/mall/promotion/coupon/template/CouponTemplateForm.vue
@@ -22,14 +22,14 @@
        </el-radio-group>
      </el-form-item>
      <el-form-item
-        label="商品"
        v-if="formData.productScope === PromotionProductScopeEnum.SPU.scope"
+        label="商品"
        prop="productSpuIds"
      >
        <div class="flex flex-wrap items-center gap-1">
-          <div class="select-box spu-pic" v-for="(spu, index) in productSpus" :key="spu.id">
+          <div v-for="(spu, index) in productSpus" :key="spu.id" class="select-box spu-pic">
            <el-image :src="spu.picUrl" />
-            <Icon icon="ep:circle-close-filled" class="del-icon" @click="handleRemoveSpu(index)" />
+            <Icon class="del-icon" icon="ep:circle-close-filled" @click="handleRemoveSpu(index)" />
          </div>
          <div class="select-box" @click="openSpuTableSelect">
            <Icon icon="ep:plus" />
@@ -37,8 +37,8 @@
        </div>
      </el-form-item>
      <el-form-item
-        label="分类"
        v-if="formData.productScope === PromotionProductScopeEnum.CATEGORY.scope"
+        label="分类"
        prop="productCategoryIds"
      >
        <ProductCategorySelect v-model="formData.productCategoryIds" />
@@ -61,10 +61,10 @@
      >
        <el-input-number
          v-model="formData.discountPrice"
-          placeholder="请输入优惠金额，单位：元"
-          class="mr-2 !w-400px"
-          :precision="2"
          :min="0"
+          :precision="2"
+          class="mr-2 !w-400px"
+          placeholder="请输入优惠金额，单位：元"
        />
        元
      </el-form-item>
@@ -75,11 +75,11 @@
      >
        <el-input-number
          v-model="formData.discountPercent"
-          placeholder="优惠券折扣不能小于 1 折，且不可大于 9.9 折"
-          class="mr-2 !w-400px"
-          :precision="1"
-          :min="1"
          :max="9.9"
+          :min="1"
+          :precision="1"
+          class="mr-2 !w-400px"
+          placeholder="优惠券折扣不能小于 1 折，且不可大于 9.9 折"
        />
        折
      </el-form-item>
@@ -90,20 +90,20 @@
      >
        <el-input-number
          v-model="formData.discountLimitPrice"
-          placeholder="请输入最多优惠"
-          class="mr-2 !w-400px"
-          :precision="2"
          :min="0"
+          :precision="2"
+          class="mr-2 !w-400px"
+          placeholder="请输入最多优惠"
        />
        元
      </el-form-item>
      <el-form-item label="满多少元可以使用" prop="usePrice">
        <el-input-number
          v-model="formData.usePrice"
-          placeholder="无门槛请设为 0"
-          class="mr-2 !w-400px"
-          :precision="2"
          :min="0"
+          :precision="2"
+          class="mr-2 !w-400px"
+          placeholder="无门槛请设为 0"
        />
        元
      </el-form-item>
@@ -116,20 +116,20 @@
      <el-form-item v-if="formData.takeType === 1" label="发放数量" prop="totalCount">
        <el-input-number
          v-model="formData.totalCount"
-          placeholder="发放数量，没有之后不能领取或发放，-1 为不限制"
-          class="mr-2 !w-400px"
-          :precision="0"
          :min="-1"
+          :precision="0"
+          class="mr-2 !w-400px"
+          placeholder="发放数量，没有之后不能领取或发放，-1 为不限制"
        />
        张
      </el-form-item>
      <el-form-item v-if="formData.takeType === 1" label="每人限领个数" prop="takeLimitCount">
        <el-input-number
          v-model="formData.takeLimitCount"
-          placeholder="设置为 -1 时，可无限领取"
-          class="mr-2 !w-400px"
-          :precision="0"
          :min="-1"
+          :precision="0"
+          class="mr-2 !w-400px"
+          placeholder="设置为 -1 时，可无限领取"
        />
        张
      </el-form-item>
@@ -151,10 +151,10 @@
      >
        <el-date-picker
          v-model="formData.validTimes"
+          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
          style="width: 240px"
-          value-format="x"
          type="datetimerange"
-          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
+          value-format="x"
        />
      </el-form-item>
      <el-form-item
@@ -165,18 +165,18 @@
        第
        <el-input-number
          v-model="formData.fixedStartTerm"
-          placeholder="0 为今天生效"
-          class="mx-2"
-          :precision="0"
          :min="0"
+          :precision="0"
+          class="mx-2"
+          placeholder="0 为今天生效"
        />
        至
        <el-input-number
          v-model="formData.fixedEndTerm"
-          placeholder="请输入结束天数"
-          class="mx-2"
-          :precision="0"
          :min="0"
+          :precision="0"
+          class="mx-2"
+          placeholder="请输入结束天数"
        />
        天有效
      </el-form-item>
@@ -199,6 +199,7 @@ import {
 } from '@/utils/constants'
 import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
 import ProductCategorySelect from '@/views/mall/product/category/components/ProductCategorySelect.vue'
+import { convertToInteger, formatToFraction } from '@/utils'
 defineOptions({ name: 'CouponTemplateForm' })
@@ -265,12 +266,11 @@ const open = async (type: string, id?: number) => {
      const data = await CouponTemplateApi.getCouponTemplate(id)
      formData.value = {
        ...data,
-        discountPrice: data.discountPrice !== undefined ? data.discountPrice / 100.0 : undefined,
+        discountPrice: formatToFraction(data.discountPrice),
        discountPercent:
          data.discountPercent !== undefined ? data.discountPercent / 10.0 : undefined,
-        discountLimitPrice:
+        discountLimitPrice: formatToFraction(data.discountLimitPrice),
-          data.discountLimitPrice !== undefined ? data.discountLimitPrice / 100.0 : undefined,
+        usePrice: formatToFraction(data.usePrice),
-        usePrice: data.usePrice !== undefined ? data.usePrice / 100.0 : undefined,
        validTimes: [data.validStartTime, data.validEndTime]
      }
      // 获得商品范围
@@ -294,17 +294,13 @@ const submitForm = async () => {
  try {
    const data = {
      ...formData.value,
-      discountPrice:
+      discountPrice: convertToInteger(formData.value.discountPrice),
-        formData.value.discountPrice !== undefined ? formData.value.discountPrice * 100 : undefined,
      discountPercent:
        formData.value.discountPercent !== undefined
          ? formData.value.discountPercent * 10
          : undefined,
-      discountLimitPrice:
+      discountLimitPrice: convertToInteger(formData.value.discountLimitPrice),
-        formData.value.discountLimitPrice !== undefined
+      usePrice: convertToInteger(formData.value.usePrice),
-          ? formData.value.discountLimitPrice * 100
-          : undefined,
-      usePrice: formData.value.usePrice !== undefined ? formData.value.usePrice * 100 : undefined,
      validStartTime:
        formData.value.validTimes && formData.value.validTimes.length === 2
          ? formData.value.validTimes[0]
@@ -385,6 +381,7 @@ const getProductScope = async () => {
      break
  }
 }
 /** 设置商品范围 */
 function setProductScopeValues(data: CouponTemplateApi.CouponTemplateVO) {
  switch (formData.value.productScope) {
@@ -420,7 +417,7 @@ const handleRemoveSpu = (index: number) => {
 }
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .select-box {
  display: flex;
  width: 60px;

--- a/src/views/mall/promotion/coupon/template/index.vue
+++ b/src/views/mall/promotion/coupon/template/index.vue
@@ -14,8 +14,8 @@
        <el-input
          v-model="queryParams.name"
          class="!w-240px"
-          placeholder="请输入优惠劵名"
          clearable
+          placeholder="请输入优惠劵名"
          @keyup="handleQuery"
        />
      </el-form-item>
@@ -23,8 +23,8 @@
        <el-select
          v-model="queryParams.discountType"
          class="!w-240px"
-          placeholder="请选择优惠券类型"
          clearable
+          placeholder="请选择优惠券类型"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE)"
@@ -38,8 +38,8 @@
        <el-select
          v-model="queryParams.status"
          class="!w-240px"
-          placeholder="请选择优惠券状态"
          clearable
+          placeholder="请选择优惠券状态"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
@@ -52,24 +52,31 @@
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-240px"
+          end-placeholder="结束日期"
+          start-placeholder="开始日期"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item>
-        <el-button @click="handleQuery"> <Icon icon="ep:search" class="mr-5px" />搜索 </el-button>
+        <el-button @click="handleQuery">
-        <el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" />重置 </el-button>
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
        <el-button
          v-hasPermi="['promotion:coupon-template:create']"
          plain
          type="primary"
          @click="openForm('create')"
        >
-          <Icon class="mr-5px" icon="ep:plus" /> 新增
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
        </el-button>
      </el-form-item>
    </el-form>
@@ -79,15 +86,15 @@
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
      <el-table-column label="优惠券名称" min-width="140" prop="name" />
-      <el-table-column label="类型" min-width="80" prop="productScope">
+      <el-table-column label="类型" min-width="130" prop="productScope">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="scope.row.productScope" />
        </template>
      </el-table-column>
-      <el-table-column label="优惠" min-width="100" prop="discount">
+      <el-table-column label="优惠" min-width="110" prop="discount">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="scope.row.discountType" />
-          {{ discountFormat(scope.row) }}
+          <div>{{ discountFormat(scope.row) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="领取方式" min-width="100" prop="takeType">
@@ -96,26 +103,26 @@
        </template>
      </el-table-column>
      <el-table-column
-        label="使用时间"
+        :formatter="validityTypeFormat"
        align="center"
+        label="使用时间"
        prop="validityType"
        width="185"
-        :formatter="validityTypeFormat"
      />
-      <el-table-column label="发放数量" align="center" prop="totalCount" />
+      <el-table-column align="center" label="发放数量" prop="totalCount" />
      <el-table-column
-        label="剩余数量"
+        :formatter="remainedCountFormat"
        align="center"
+        label="剩余数量"
        prop="totalCount"
-        :formatter="remainedCountFormat"
      />
      <el-table-column
-        label="领取上限"
+        :formatter="takeLimitCountFormat"
        align="center"
+        label="领取上限"
        prop="takeLimitCount"
-        :formatter="takeLimitCountFormat"
      />
-      <el-table-column label="状态" align="center" prop="status">
+      <el-table-column align="center" label="状态" prop="status">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
@@ -126,13 +133,19 @@
        </template>
      </el-table-column>
      <el-table-column
-        label="创建时间"
+        :formatter="dateFormatter"
        align="center"
+        label="创建时间"
        prop="createTime"
-        :formatter="dateFormatter"
        width="180"
      />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        align="center"
+        class-name="small-padding fixed-width"
+        fixed="right"
+        label="操作"
+        width="120"
+      >
        <template #default="scope">
          <el-button
            v-hasPermi="['promotion:coupon-template:update']"