优惠卷模版样式调整

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"
-          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)]"
+          style="width: 240px"
+          type="datetimerange"
+          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:
-          data.discountLimitPrice !== undefined ? data.discountLimitPrice / 100.0 : undefined,
-        usePrice: data.usePrice !== undefined ? data.usePrice / 100.0 : undefined,
+        discountLimitPrice: formatToFraction(data.discountLimitPrice),
+        usePrice: formatToFraction(data.usePrice),
         validTimes: [data.validStartTime, data.validEndTime]
       }
       // 获得商品范围
@@ -294,17 +294,13 @@ const submitForm = async () => {
   try {
     const data = {
       ...formData.value,
-      discountPrice:
-        formData.value.discountPrice !== undefined ? formData.value.discountPrice * 100 : undefined,
+      discountPrice: convertToInteger(formData.value.discountPrice),
       discountPercent:
         formData.value.discountPercent !== undefined
           ? formData.value.discountPercent * 10
           : undefined,
-      discountLimitPrice:
-        formData.value.discountLimitPrice !== undefined
-          ? formData.value.discountLimitPrice * 100
-          : undefined,
-      usePrice: formData.value.usePrice !== undefined ? formData.value.usePrice * 100 : undefined,
+      discountLimitPrice: convertToInteger(formData.value.discountLimitPrice),
+      usePrice: convertToInteger(formData.value.usePrice),
       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;