拼手气红包

src/views/components/course/userCourseCatalogDetails.vue

@@ -157,6 +157,89 @@
         </el-form-item>
         <el-form-item label="红包金额" prop="redPacketMoney">
           <el-input-number v-model="form.redPacketMoney" :min="0.1" :max="200" :step="0.1"></el-input-number>
+        </el-form-item>
+         <!-- -->
+        <el-form-item label="随机红包金额" v-if="!!form.randomRedPacketRulesArr" >
+          <template >
+          <div v-for="(rule, index) in form.randomRedPacketRulesArr" :key="index" class="form-row">
+           <el-form-item
+            label="随机红包金额区间"
+            :prop="`randomRedPacketRulesArr.${index}.minAmount`"
+            :rules="[
+              { required: true, message: '请输入最小金额', trigger: 'blur' },
+              { validator: validateMinAmount, trigger: 'blur', index: index }
+            ]"
+            class="form-item-amount"
+          >
+            <el-input
+              v-model.number="rule.minAmount"
+              type="number"
+              :min="0.01"
+              :precision="2"
+              :step="0.01"
+              placeholder="最小金额"
+              size="small"
+              class="amount-input"
+              @input="handleAmountInput(rule, 'minAmount')"
+            ></el-input>
+            <span class="separator">-</span>
+            <el-input
+              v-model.number="rule.maxAmount"
+              type="number"
+              :min="rule.minAmount || 0.01"
+              :precision="2"
+              :step="0.01"
+              placeholder="最大金额"
+              size="small"
+              class="amount-input"
+              @input="handleAmountInput(rule, 'maxAmount')"
+            ></el-input>
+            <span class="suffix">元</span>
+          </el-form-item>
+              <el-form-item
+                label="随机权重"
+                :prop="`randomRedPacketRulesArr.${index}.weight`"
+                :rules="[
+                  { required: true, message: '请输入权重', trigger: 'blur' },
+                  { type: 'integer', message: '权重必须为整数', trigger: 'blur' },
+                ]"
+                class="form-item-weight"
+              >
+                <el-input
+                  v-model.number="rule.weight"
+                  type="number"
+                  :min="1"
+                  placeholder="权重"
+                  size="small"
+                ></el-input>
+              </el-form-item>
+              <el-tooltip class="item" effect="dark" content="权重越高，被随机到的概率越大" placement="top">
+                <i class="el-icon-question"></i>
+              </el-tooltip>
+              <div class="action-buttons">
+                <el-button
+                  icon="el-icon-plus"
+                  size="mini"
+                  type="text"
+                  @click="addRule(index)"
+                  class="add-btn"
+                >
+                  新增
+                </el-button>
+                <el-button
+                  icon="el-icon-delete"
+                  size="mini"
+                  type="text"
+                  @click="deleteRule(index)"
+                  :disabled="form.randomRedPacketRulesArr.length <= 1"
+                  class="delete-btn"
+                >
+                  删除
+                </el-button>
+              </div>
+          </div>
+        </template>
+           
         </el-form-item>
         <el-form-item label="是否关联商品">
           <el-radio v-model="form.isProduct" :label=0>否</el-radio>
@@ -355,10 +438,21 @@ import {getByIds} from '@/api/course/courseQuestionBank'
 import CourseWatchComment from "./courseWatchComment.vue";
 import {getCateListByPid, getCatePidList} from '@/api/course/userCourseCategory'
 import draggable from 'vuedraggable'
+import { getConfigByKey } from '@/api/system/config'
 
 export default {
   name: "userCourseCatalog",
   components: {VideoUpload, QuestionBank, CourseWatchComment, CourseProduct, draggable},
+  watch:{
+    // 深度监听 rules 数组的变化，以更新总权重
+    "form.randomRedPacketRulesArr": {
+      handler(val) {
+        // this.calculateTotalWeight();
+        this.validateRules();
+      },
+      deep: true,
+    },
+  },
   data() {
     return {
       duration: null,
@@ -454,7 +548,15 @@ export default {
       openVideoSort: false,
       // 表单参数
       form: {
-        courseProducts: []
+        courseProducts: [],
+        randomRedPacketRules:null,
+        randomRedPacketRulesArr:[
+           {
+            minAmount: 0.01,
+            maxAmount: 0.01,
+            weight: 100,
+          }
+        ]
       },
       updateBatchData: {
         open: false,
@@ -477,12 +579,25 @@ export default {
         videoId: null,
         title: ""
       },
+      enableRandomRedPacket:false
     }
   },
   created() {
     this.getDicts("sys_course_temp_type").then(response => {
       this.typeOptions = response.data;
     });
+        getConfigByKey('randomRedpacket:config').then(res=>{
+        let configData = res.data;
+        if(!!configData && !!configData.configValue){
+           let configValue = JSON.parse(configData.configValue);
+           if(!!configValue.enableRandomRedpacket){
+            this.enableRandomRedPacket = configValue.enableRandomRedpacket;
+            console.log("this.enableRandomRedPacket ::" + this.enableRandomRedPacket)
+           }
+        }
+    }).catch(res=>{
+
+    })
   },
   methods: {
     getPickerOptions() {
@@ -713,6 +828,14 @@ export default {
         isFirst: 0,
         listingStartTime: null,
         listingEndTime: null,
+        randomRedPacketRules:null,
+        randomRedPacketRulesArr:[
+          {
+            minAmount: 0.01,
+            maxAmount: 0.01,
+            weight: 100,
+          }
+        ]
       };
       this.videoURL = '';
       this.progress = 0;
@@ -768,7 +891,12 @@ export default {
       this.packageList = [];
       const videoId = row.videoId || this.ids
       getUserCourseVideo(videoId).then(response => {
+        console.log(response);
         this.form = response.data;
+        if(!!this.form.randomRedPacketRules){
+           this.$set(this.form, 'randomRedPacketRulesArr', JSON.parse(this.form.randomRedPacketRules)) ;
+          // this.form.randomRedPacketRulesArr = JSON.parse(this.form.randomRedPacketRules);
+        }
         if (response.data.videoUrl != null && response.data.videoUrl !== '') {
           this.videoUrl = response.data.videoUrl;
         }
@@ -813,7 +941,7 @@ export default {
             });
             return
           }
-          if (this.form.isProduct != null && this.form.isProduct == 1 && this.form.courseProducts.length < 1) {
+          if (this.form.isProduct != null && this.form.isProduct == 1 && (this.form.courseProducts == null || this.form.courseProducts.length < 1)) {
             this.$message({
               message: '请选择关联商品',
               type: 'warning'
@@ -829,6 +957,11 @@ export default {
           if (this.form.courseProducts != null) {
             this.form.productId = this.form.courseProducts.map(item => item.id).join(',');
           }
+          if(!!this.form.randomRedPacketRulesArr){
+            let rulesJson = JSON.stringify(this.form.randomRedPacketRulesArr);
+            this.form.randomRedPacketRules =  rulesJson;
+          }
+
           if (this.form.videoId != null) {
             updateUserCourseVideo(this.form).then(response => {
               this.msgSuccess("修改成功");
@@ -981,7 +1114,15 @@ export default {
       this.redData.loading = true;
       this.redData.queryParams.courseId = this.courseId;
       getVideoListByCourseId(this.redData.queryParams).then(response => {
-        this.redData.list = response.rows;
+        if(!!response.rows && response.rows.length >0){
+          for(let i = 0; i < response.rows.length; i++){
+            if(!!response.rows[i].randomRedPacketRules){
+             this.$set(response.rows[i], 'randomRedPacketRulesArr', JSON.parse(response.rows[i].randomRedPacketRules)) ;
+            }
+          }
+        }
+         this.redData.list = response.rows;
+         console.log(this.redData.list);
         this.redData.loading = false;
       });
     },
@@ -998,6 +1139,80 @@ export default {
       this.commentDialog.title = `查看评论 - ${row.title}`;
       this.commentDialog.open = true;
     },
+    // 实时过滤金额输入，只允许两位小数
+    handleAmountInput(rule, field) {
+      let value = rule[field];
+      if (value === null || value === undefined) return;
+      
+      // 转换为字符串处理
+      let str = value.toString();
+      
+      // 移除除数字和小数点外的所有字符
+      str = str.replace(/[^0-9.]/g, '');
+      
+      // 只保留一个小数点
+      const dotIndex = str.indexOf('.');
+      if (dotIndex !== -1) {
+        str = str.substring(0, dotIndex + 1) + str.substring(dotIndex + 1).replace(/\./g, '');
+      }
+      
+      // 限制小数点后最多两位
+      if (dotIndex !== -1 && str.length > dotIndex + 3) {
+        str = str.substring(0, dotIndex + 3);
+      }
+      
+      // 转换回数字并更新
+      rule[field] = parseFloat(str) || 0;
+    },
+      deleteRule(index) {
+      this.$confirm("确定要删除这个区间吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.form.randomRedPacketRulesArr.splice(index, 1);
+        this.$message({
+          type: "success",
+          message: "删除成功!",
+        });
+      });
+    },
+      addRule(index) {
+      // 在当前行的后面插入一个新行
+      this.form.randomRedPacketRulesArr.splice(index + 1, 0, {
+        minAmount: 0.01,
+        maxAmount: 0.01,
+        weight: 100,
+      });
+    },
+       // 自定义校验规则：确保最大金额大于最小金额
+    validateMinAmount(rule, value, callback) {
+      // debugger;
+      // const maxAmount = this.form29.rules[].maxAmount
+      
+      const index = rule.index;
+      const maxAmount = this.form.randomRedPacketRulesArr[index].maxAmount;
+
+      if (value > maxAmount) {
+        callback(new Error("最小金额不能大于最大金额"));
+      } else {
+        callback();
+      }
+    },
+      validateRules() {        
+      this.form.randomRedPacketRulesArr.forEach((rule) => {
+        if (rule.minAmount === undefined || rule.minAmount < 0.01) {
+          rule.minAmount = 0.01;
+        }
+        if (rule.maxAmount === undefined || rule.maxAmount < rule.minAmount) {
+          rule.maxAmount = rule.minAmount;
+        }
+        if (rule.weight === undefined || rule.weight < 1) {
+          rule.weight = 1;
+        }
+      });
+    },
+
   }
 }
 </script>

src/views/course/userCourse/index.vue

@@ -276,6 +276,86 @@
         <el-form-item label="红包金额" prop="redPacketMoney">
           <el-input-number v-model="openRedPage.redPacketMoney" :min="0.1" :max="200" :step="0.1"></el-input-number>
         </el-form-item>
+        <div v-if="!!enableRandomRedPacket" style=" display: flex;
+                  flex-direction: column;">
+             <div v-for="(rule, index) in openRedPage.rules" :key="index" class="form-row">
+           <el-form-item
+            label="随机红包金额区间"
+            :prop="`rules.${index}.minAmount`"
+            :rules="[
+              { required: true, message: '请输入最小金额', trigger: 'blur' },
+              { validator: validateMinAmount, trigger: 'blur', index: index }
+            ]"
+            class="form-item-amount"
+          >
+            <el-input
+              v-model.number="rule.minAmount"
+              type="number"
+              :min="0.01"
+              :precision="2"
+              :step="0.01"
+              placeholder="最小金额"
+              size="small"
+              class="amount-input"
+              @input="handleAmountInput(rule, 'minAmount')"
+            ></el-input>
+            <span class="separator">-</span>
+            <el-input
+              v-model.number="rule.maxAmount"
+              type="number"
+              :min="rule.minAmount || 0.01"
+              :precision="2"
+              :step="0.01"
+              placeholder="最大金额"
+              size="small"
+              class="amount-input"
+              @input="handleAmountInput(rule, 'maxAmount')"
+            ></el-input>
+            <span class="suffix">元</span>
+          </el-form-item>
+              <el-form-item
+                label="随机权重"
+                :prop="`rules.${index}.weight`"
+                :rules="[
+                  { required: true, message: '请输入权重', trigger: 'blur' },
+                  { type: 'integer', message: '权重必须为整数', trigger: 'blur' },
+                ]"
+                class="form-item-weight"
+              >
+                <el-input
+                  v-model.number="rule.weight"
+                  type="number"
+                  :min="1"
+                  placeholder="权重"
+                  size="small"
+                ></el-input>
+              </el-form-item>
+              <el-tooltip class="item" effect="dark" content="权重越高，被随机到的概率越大" placement="top">
+                <i class="el-icon-question"></i>
+              </el-tooltip>
+              <div class="action-buttons">
+                <el-button
+                  icon="el-icon-plus"
+                  size="mini"
+                  type="text"
+                  @click="addRule(index)"
+                  class="add-btn"
+                >
+                  新增
+                </el-button>
+                <el-button
+                  icon="el-icon-delete"
+                  size="mini"
+                  type="text"
+                  @click="deleteRule(index)"
+                  :disabled="openRedPage.rules.length <= 1"
+                  class="delete-btn"
+                >
+                  删除
+                </el-button>
+              </div>
+            </div>
+        </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitFormRedPage">确 定</el-button>
@@ -380,7 +460,7 @@ import userCourseCatalogDetails from '../../components/course/userCourseCatalogD
 import {getAllCourseCategoryList, getCatePidList, getCateListByPid} from "@/api/course/userCourseCategory";
 import {allList} from "@/api/company/company";
 import VideoUpload from '@/components/VideoUpload/index.vue'
-
+import { getConfigByKey } from '@/api/system/config'
 export default {
   name: "UserCourse",
   components: {
@@ -388,6 +468,16 @@ export default {
     Treeselect,
     Editor, ImageUpload, userCourseCatalogDetails
   },
+  watch:{
+  // 深度监听 rules 数组的变化，以更新总权重
+    "openRedPage.rules": {
+      handler(val) {
+        // this.calculateTotalWeight();
+        this.validateRules();
+      },
+      deep: true,
+    },
+  },
   data() {
     return {
       talentParam: {
@@ -438,6 +528,14 @@ export default {
         courseId:null,
         courseName:null,
         redPacketMoney:0.1,
+        //随机红包配置
+        rules:[
+           {
+            minAmount: 0.01,
+            maxAmount: 0.01,
+            weight: 100,
+          }
+        ]
       },
       // 查询参数
       queryParams: {
@@ -552,11 +650,26 @@ export default {
             { required: true, message: '支持单位不能为空', trigger: 'blur' }
           ],
         }
-      }
+      },
+      enableRandomRedPacket:false
     };
   },
   created() {
     this.getList();
+    getConfigByKey('randomRedpacket:config').then(res=>{
+        console.log("res::")
+        console.log(res);
+        let configData = res.data;
+        if(!!configData && !!configData.configValue){
+           let configValue = JSON.parse(configData.configValue);
+           console.log(configValue);
+           if(!!configValue.enableRandomRedpacket){
+            this.enableRandomRedPacket = configValue.enableRandomRedpacket;
+           }
+        }
+    }).catch(res=>{
+
+    })
     getCatePidList().then(response => {
       this.categoryOptions = response.data;
     });
@@ -809,13 +922,14 @@ export default {
 
       const courseId = this.openRedPage.courseId;
       const redPacketMoney = this.openRedPage.redPacketMoney;
+      let randomRedPacketRules = JSON.stringify( this.openRedPage.rules);
+      console.log(randomRedPacketRules)
       this.$confirm('是否确认将课程id 为"' + courseId + '"的红包批量修改为：【'+redPacketMoney+'】?', "警告", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
         type: "warning"
       }).then(function () {
-
-        return updateUserCourseRedPage({courseId:courseId,redPacketMoney:redPacketMoney});
+        return updateUserCourseRedPage({courseId:courseId,redPacketMoney:redPacketMoney,randomRedPacketRules:randomRedPacketRules});
       }).then(() => {
         this.getList();
         this.msgSuccess("修改成功");
@@ -985,6 +1099,80 @@ export default {
       this.resetForm('configForm')
       this.configDialog.dialogVisible = false;
     },
+    // 实时过滤金额输入，只允许两位小数
+    handleAmountInput(rule, field) {
+      let value = rule[field];
+      if (value === null || value === undefined) return;
+      
+      // 转换为字符串处理
+      let str = value.toString();
+      
+      // 移除除数字和小数点外的所有字符
+      str = str.replace(/[^0-9.]/g, '');
+      
+      // 只保留一个小数点
+      const dotIndex = str.indexOf('.');
+      if (dotIndex !== -1) {
+        str = str.substring(0, dotIndex + 1) + str.substring(dotIndex + 1).replace(/\./g, '');
+      }
+      
+      // 限制小数点后最多两位
+      if (dotIndex !== -1 && str.length > dotIndex + 3) {
+        str = str.substring(0, dotIndex + 3);
+      }
+      
+      // 转换回数字并更新
+      rule[field] = parseFloat(str) || 0;
+    },
+      deleteRule(index) {
+      this.$confirm("确定要删除这个区间吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.openRedPage.rules.splice(index, 1);
+        this.$message({
+          type: "success",
+          message: "删除成功!",
+        });
+      });
+    },
+      addRule(index) {
+      // 在当前行的后面插入一个新行
+      this.openRedPage.rules.splice(index + 1, 0, {
+        minAmount: 0.01,
+        maxAmount: 0.01,
+        weight: 100,
+      });
+    },
+       // 自定义校验规则：确保最大金额大于最小金额
+    validateMinAmount(rule, value, callback) {
+      // debugger;
+      // const maxAmount = this.form29.rules[].maxAmount
+      
+      const index = rule.index;
+      const maxAmount = this.openRedPage.rules[index].maxAmount;
+
+      if (value > maxAmount) {
+        callback(new Error("最小金额不能大于最大金额"));
+      } else {
+        callback();
+      }
+    },
+      validateRules() {
+      this.openRedPage.rules.forEach((rule) => {
+        if (rule.minAmount === undefined || rule.minAmount < 0.01) {
+          rule.minAmount = 0.01;
+        }
+        if (rule.maxAmount === undefined || rule.maxAmount < rule.minAmount) {
+          rule.maxAmount = rule.minAmount;
+        }
+        if (rule.weight === undefined || rule.weight < 1) {
+          rule.weight = 1;
+        }
+      });
+    },
+
   }
 };
 </script>

src/views/system/config/config.vue

@@ -2255,6 +2255,107 @@
         </el-form>
       </el-tab-pane>
 
+      <el-tab-pane label="拼手气红包配置" name="randomRedpacket:config">
+        <el-form ref="form29" :model="form29" label-width="150px">
+          <el-form-item label="是否开启拼手气红包" prop="enableRandomRedpacket">
+          
+            <el-switch
+              v-model="form29.enableRandomRedpacket"
+              active-color="#13ce66"
+              inactive-color="#ff4949">
+            </el-switch>
+          </el-form-item>
+        <div v-if="!!form29.enableRandomRedpacket" style=" display: flex;
+                  flex-direction: column;
+                  margin-bottom: 50px;">
+                   
+             <div v-for="(rule, index) in form29.rules" :key="index" class="form-row">
+              
+           <el-form-item
+            label="金额区间"
+            :prop="`rules.${index}.minAmount`"
+            :rules="[
+              { required: true, message: '请输入最小金额', trigger: 'blur' },
+              { validator: validateMinAmount, trigger: 'blur', index: index }
+            ]"
+            class="form-item-amount"
+          >
+            <el-input
+              v-model.number="rule.minAmount"
+              type="number"
+              :min="0.01"
+              :precision="2"
+              :step="0.01"
+              placeholder="最小金额"
+              size="small"
+              class="amount-input"
+              @input="handleAmountInput(rule, 'minAmount')"
+            ></el-input>
+            <span class="separator">-</span>
+            <el-input
+              v-model.number="rule.maxAmount"
+              type="number"
+              :min="rule.minAmount || 0.01"
+              :precision="2"
+              :step="0.01"
+              placeholder="最大金额"
+              size="small"
+              class="amount-input"
+              @input="handleAmountInput(rule, 'maxAmount')"
+            ></el-input>
+            <span class="suffix">元</span>
+          </el-form-item>
+
+              <el-form-item
+                label="随机权重"
+                :prop="`rules.${index}.weight`"
+                :rules="[
+                  { required: true, message: '请输入权重', trigger: 'blur' },
+                  { type: 'integer', message: '权重必须为整数', trigger: 'blur' },
+                ]"
+                class="form-item-weight"
+              >
+                <el-input
+                  v-model.number="rule.weight"
+                  type="number"
+                  :min="1"
+                  placeholder="权重"
+                  size="small"
+                ></el-input>
+              </el-form-item>
+              <el-tooltip class="item" effect="dark" content="权重越高，被随机到的概率越大" placement="top">
+                <i class="el-icon-question"></i>
+              </el-tooltip>
+              <div class="action-buttons">
+                <el-button
+                  icon="el-icon-plus"
+                  size="mini"
+                  type="text"
+                  @click="addRule(index)"
+                  class="add-btn"
+                >
+                  新增
+                </el-button>
+                <el-button
+                  icon="el-icon-delete"
+                  size="mini"
+                  type="text"
+                  @click="deleteRule(index)"
+                  :disabled="form29.rules.length <= 1"
+                  class="delete-btn"
+                >
+                  删除
+                </el-button>
+              </div>
+            </div>
+        </div>
+
+          <div class="footer" style="margin-top:20px">
+            <el-button type="primary" @click="submitForm29">提 交</el-button>
+          </div>
+        </el-form>
+      </el-tab-pane>
+
     </el-tabs>
 
 
@@ -2433,6 +2534,18 @@ export default {
       },
       form27: {},
       form28: {},
+      form29:{
+        //是否开启拼手气红包
+        enableRandomRedpacket:false,
+         rules: [
+          {
+            minAmount: 0.01,
+            maxAmount: 0.01,
+            weight: 100,
+          },
+        ],
+
+      },
       storeProductScrmColumns:[],
       storeScrmColumns: [],
       photoArr: [],
@@ -2519,7 +2632,15 @@ export default {
     },
     appImages: function(val) {
       this.form25.images = val.join(',')
-    }
+    },
+     // 深度监听 rules 数组的变化，以更新总权重
+    "form29.rules": {
+      handler(val) {
+        this.calculateTotalWeight();
+        this.validateRules();
+      },
+      deep: true,
+    },
   },
   methods: {
 
@@ -2671,8 +2792,13 @@ export default {
     },
     getConfigByKey(key) {
       getConfigByKey(key).then(response => {
+        if(!!response.data){
         this.configId = response.data.configId
         this.configKey = response.data.configKey
+        }else{
+            this.configId = null;
+            this.configKey = key;
+          }
         if (key == 'sys.oss.cloudStorage') {
           this.form1 = JSON.parse(response.data.configValue)
         }
@@ -2807,6 +2933,13 @@ export default {
           this.configKey = response.data.configKey
           this.form28 = {...this.form28, ...JSON.parse(response.data.configValue)}
         }
+        if (key == 'randomRedpacket:config') {
+          if(!!response.data){
+          this.configId = response.data.configId
+          this.configKey = response.data.configKey
+          this.form29 = {...this.form29, ...JSON.parse(response.data.configValue)}
+          }
+        }
       })
     },
     /** 提交按钮 */
@@ -3162,7 +3295,104 @@ export default {
     },
     removeDisabledTime(index) {
       this.form18.disabledTimeList.splice(index, 1)
-    }
+    },
+    submitForm29(){
+      console.log("开始校验")
+       this.$refs['form29'].validate(valid => {
+        if (valid) {
+          var param = { configId: this.configId, configKey: this.configKey, configValue: JSON.stringify(this.form29) }
+          console.log(param)
+          param.configName = "拼手气红包配置";
+          updateConfigByKey(param).then(response => {
+            if (response.code === 200) {
+              this.msgSuccess('修改成功')
+            }
+          })
+        }
+      })
+    },
+     calculateTotalWeight() {
+      this.totalWeight = this.form29.rules.reduce((sum, rule) => {
+        return sum + (rule.weight || 0);
+      }, 0);
+    },
+
+    validateRules() {
+      this.form29.rules.forEach((rule) => {
+        if (rule.minAmount === undefined || rule.minAmount < 0.01) {
+          rule.minAmount = 0.01;
+        }
+        if (rule.maxAmount === undefined || rule.maxAmount < rule.minAmount) {
+          rule.maxAmount = rule.minAmount;
+        }
+        if (rule.weight === undefined || rule.weight < 1) {
+          rule.weight = 1;
+        }
+      });
+    },
+
+    // 自定义校验规则：确保最大金额大于最小金额
+    validateMinAmount(rule, value, callback) {
+      // debugger;
+      // const maxAmount = this.form29.rules[].maxAmount
+      
+      const index = rule.index;
+      const maxAmount = this.form29.rules[index].maxAmount;
+
+      if (value > maxAmount) {
+        callback(new Error("最小金额不能大于最大金额"));
+      } else {
+        callback();
+      }
+    },
+
+    addRule(index) {
+      // 在当前行的后面插入一个新行
+      this.form29.rules.splice(index + 1, 0, {
+        minAmount: 0.01,
+        maxAmount: 0.01,
+        weight: 100,
+      });
+    },
+
+    deleteRule(index) {
+      this.$confirm("确定要删除这个区间吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.form29.rules.splice(index, 1);
+        this.$message({
+          type: "success",
+          message: "删除成功!",
+        });
+      });
+    },
+     // 实时过滤金额输入，只允许两位小数
+    handleAmountInput(rule, field) {
+      let value = rule[field];
+      if (value === null || value === undefined) return;
+      
+      // 转换为字符串处理
+      let str = value.toString();
+      
+      // 移除除数字和小数点外的所有字符
+      str = str.replace(/[^0-9.]/g, '');
+      
+      // 只保留一个小数点
+      const dotIndex = str.indexOf('.');
+      if (dotIndex !== -1) {
+        str = str.substring(0, dotIndex + 1) + str.substring(dotIndex + 1).replace(/\./g, '');
+      }
+      
+      // 限制小数点后最多两位
+      if (dotIndex !== -1 && str.length > dotIndex + 3) {
+        str = str.substring(0, dotIndex + 3);
+      }
+      
+      // 转换回数字并更新
+      rule[field] = parseFloat(str) || 0;
+    },
   }
 }
 </script>
@@ -3174,4 +3404,101 @@ export default {
   align-items: flex-end;
   justify-content: flex-end;
 }
+
+
+
+
+.red-packet-config {
+  padding: 20px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.red-packet-form {
+  margin-top: 20px;
+}
+
+/* 每一行的样式 */
+.form-row {
+  display: flex;
+  /* align-items: center;
+  padding: 10px;
+  border-bottom: 1px solid #ebeef5; */
+   display: flex;
+  /* 关键改动：添加以下两行 */
+  align-items: center;    /* 垂直居中对齐 */
+  justify-content: flex-start; /* 水平方向从左到右排列（默认值，可显式写出） */
+  
+  padding: 10px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+/* 最后一行去掉下边框 */
+.form-row:last-child {
+  border-bottom: none;
+}
+
+.form-item-amount {
+  flex: 1;
+  margin-right: 20px;
+}
+
+.form-item-weight {
+  width: 220px;
+  margin-right: 20px;
+}
+
+.action-buttons {
+  display: flex;
+  align-items: center;
+}
+
+.amount-input {
+  width: 100px !important;
+  text-align: center;
+}
+
+/* 金额输入框之间的连接符 */
+.separator {
+  margin: 0 10px;
+  color: #999;
+}
+
+.suffix {
+  margin-left: 10px;
+  color: #999;
+}
+
+.add-btn {
+  /* color: #48bb78 !important; */
+}
+
+.delete-btn {
+  color: #f56c6c !important;
+}
+
+.rules-info {
+  margin-top: 20px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #666;
+}
+
+.info-number {
+  color: #1890ff;
+  font-weight: bold;
+  margin: 0 4px;
+}
+
+.action-bar {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
 </style>