feat: 提交积分规则的新增、编辑、查看 弹窗的业务逻辑修改

src/views/pointsManagement/pointsRules/compontents/Activity_editBox.vue

@@ -71,7 +71,7 @@
 
         <el-row :gutter="20">
           <el-col :span="24">
-            <el-form-item label="连续签到加成">
+            <el-form-item label="连续签到加成" prop="consecutiveBonus">
               <el-table :data="form.consecutiveBonus" style="width: 100%" :disabled="type === 'view'" size="mini">
                 <el-table-column prop="period" label="连续签到周期（天）">
                   <template slot-scope="scope">
@@ -89,6 +89,11 @@
                     <el-input v-else v-model="scope.row.points" type="number" placeholder="积分"></el-input>
                   </template>
                 </el-table-column>
+                <el-table-column prop="points" label="说明" width="280">
+                  <template slot-scope="scope">
+                    {{ getDescription(scope.$index) }}
+                  </template>
+                </el-table-column>
                 <el-table-column width="50">
                   <template slot="header" slot-scope="scope">
                     <span>
@@ -128,34 +133,53 @@
       <template v-else>
         <el-row :gutter="20">
           <el-col :span="24">
-            <el-form-item label="任务列表">
+            <el-form-item label="任务列表" prop="tasks">
               <el-table :data="form.tasks" style="width: 100%" :disabled="type === 'view'" size="medium">
                 <el-table-column prop="taskName" label="任务名称" width="150">
                   <template slot-scope="scope">
                     <span>{{ scope.row.taskName }}</span>
                   </template>
                 </el-table-column>
-                <el-table-column prop="triggerCondition" label="触发条件" width="150">
+                <el-table-column prop="triggerCondition" label="触发条件" width="200">
                   <template slot-scope="scope">
-                    <span v-if="type === 'view'">{{ scope.row.triggerCondition }}</span>
-                    <el-input v-else v-model="scope.row.triggerCondition" placeholder="请输入"></el-input>
+                    <span v-if="type === 'view'">
+                      {{ scope.row.triggerCondition }}
+                    </span>
+                    <template v-else>
+                      <span v-if="scope.row.taskName === '分享服务号' || scope.row.taskName === '浏览动态' || scope.row.taskName === '浏览商户'">
+                        点击
+                      </span>
+                      <span v-else style="display: flex; align-items: center;">
+                        <template v-if="scope.row.isEnabled">
+                           <span style="margin-right: 5px;">&gt;=</span>
+                          <el-input v-model="scope.row.triggerCondition" type="number" placeholder="请输入" style="width: 80px"></el-input>
+                        </template>
+                        <span v-else>--</span>
+                      </span>
+                    </template>
                   </template>
                 </el-table-column>
                 <el-table-column prop="points" label="积分">
                   <template slot-scope="scope">
                     <span v-if="type === 'view'">{{ scope.row.points }}</span>
-                    <el-input v-else v-model="scope.row.points" type="number" placeholder="请输入"></el-input>
+                    <template v-else>
+                      <el-input v-if="scope.row.isEnabled" v-model="scope.row.points" type="number" placeholder="请输入"></el-input>
+                      <span v-else>--</span>
+                    </template>
                   </template>
                 </el-table-column>
                 <el-table-column prop="limit" label="次数限制" width="120">
                   <template slot-scope="scope">
                     <span v-if="type === 'view'">{{ scope.row.limit }}</span>
-                    <el-select v-else v-model="scope.row.limit" placeholder="请选择">
-                      <el-option label="无限制" value="无限制"></el-option>
-                      <el-option label="每日1次" value="每日1次"></el-option>
-                      <el-option label="每周1次" value="每周1次"></el-option>
-                      <el-option label="每月1次" value="每月1次"></el-option>
-                    </el-select>
+                    <template v-else>
+                      <el-select v-if="scope.row.isEnabled" v-model="scope.row.limit" placeholder="请选择">
+                        <el-option label="无限制" value="无限制"></el-option>
+                        <el-option label="每日1次" value="每日1次"></el-option>
+                        <el-option label="每周1次" value="每周1次"></el-option>
+                        <el-option label="每月1次" value="每月1次"></el-option>
+                      </el-select>
+                      <span v-else>--</span>
+                    </template>
                   </template>
                 </el-table-column>
                 <el-table-column label="是否开启" width="120">
@@ -171,7 +195,7 @@
     </el-form>
 
     <div class="button-container" v-if="type !== 'view'">
-      <el-button @click="handleCancel" class="cancel-btn">取消</el-button>
+      <el-button @click="handleClose" class="cancel-btn">取消</el-button>
       <el-button @click="handleSaveDraft" class="cancel-btn">保存草稿</el-button>
       <el-button type="primary" @click="handlePublish" class="confirm-btn">发布</el-button>
     </div>
@@ -204,13 +228,7 @@ export default {
           { period: '3', points: '' },
         ],
         breakRule: 'reset', // reset: 断签重置, keep: 保留进度
-        tasks: [
-          { taskName: '完成订单', triggerCondition: '', points: '', limit: '无限制', isEnabled: false },
-          { taskName: '充值任务', triggerCondition: '', points: '', limit: '无限制', isEnabled: false },
-          { taskName: '分享服务号', triggerCondition: '', points: '', limit: '无限制', isEnabled: false },
-          { taskName: '浏览动态', triggerCondition: '', points: '', limit: '无限制', isEnabled: false },
-          { taskName: '浏览商户', triggerCondition: '', points: '', limit: '无限制', isEnabled: false }
-        ]
+        tasks: []
       },
       pickerOptions: {
         onPick: ({ maxDate, minDate }) => {
@@ -246,19 +264,101 @@ export default {
           { required: true, message: '请选择活动类型', trigger: 'change' }
         ],
         dailyBasePoints: [
-          { required: true, message: '请输入基础积分', trigger: 'blur' }
+          { required: true, message: '请输入基础积分', trigger: 'blur' },
+          { validator: (rule, value, callback) => {
+              if (Number(value) < 0) {
+                callback(new Error('基础积分不能小于0'));
+              } else {
+                callback();
+              }
+            },
+            trigger: 'blur'
+          }
+        ],
+        consecutiveBonus: [
+          { validator: (rule, value, callback) => {
+              if (!value || value.length === 0) {
+                callback(new Error('请添加连续签到加成'));
+                return;
+              }
+
+              for (let i = 0; i < value.length; i++) {
+                const bonus = value[i];
+                if (!bonus.period || Number(bonus.period) <= 0) {
+                  callback(new Error('连续签到周期必须大于0'));
+                  return;
+                }
+                if (!bonus.points || Number(bonus.points) <= 0) {
+                  callback(new Error('连续签到积分必须大于0'));
+                  return;
+                }
+              }
+
+              // 检查连续签到周期总和是否超过活动总天数
+              const totalDays = this.getTotalDays();
+              if (this.form.isLongTerm === '2' && totalDays > 0) {
+                const totalPeriod = value.reduce((sum, item) => sum + Number(item.period), 0);
+                if (totalPeriod > totalDays) {
+                  callback(new Error('连续签到周期总和不能超过活动总天数'));
+                  return;
+                }
+              }
+
+              callback();
+            },
+            trigger: 'change'
+          }
         ],
         dateRange: [
           { required: true, message: '请选择活动时间', trigger: 'change' }
+        ],
+        tasks: [
+          { validator: (rule, value, callback) => {
+              for (let i = 0; i < value.length; i++) {
+                const task = value[i];
+                // 只在任务开启的情况下才校验
+                if (task.isEnabled) {
+                  // 验证完成订单和充值任务的触发条件
+                  if ((task.taskName === '完成订单' || task.taskName === '充值任务') && (!task.triggerCondition || Number(task.triggerCondition) <= 0)) {
+                    callback(new Error('触发条件必须大于0'));
+                    return;
+                  }
+                  // 验证所有任务的积分
+                  if (!task.points || Number(task.points) <= 0) {
+                    callback(new Error('积分必须大于0'));
+                    return;
+                  }
+                }
+              }
+              callback();
+            },
+            trigger: 'change'
+          }
         ]
       },
     }
   },
   methods: {
+    getDefaultTasks() {
+      return [
+        { taskName: '完成订单', triggerCondition: '', points: '', limit: '无限制', isEnabled: false },
+        { taskName: '充值任务', triggerCondition: '', points: '', limit: '无限制', isEnabled: false },
+        { taskName: '分享服务号', triggerCondition: '点击', points: '', limit: '无限制', isEnabled: false },
+        { taskName: '浏览动态', triggerCondition: '点击', points: '', limit: '无限制', isEnabled: false },
+        { taskName: '浏览商户', triggerCondition: '点击', points: '', limit: '无限制', isEnabled: false }
+      ];
+    },
+    getTotalDays() {
+      if (this.form.isLongTerm === '2' && this.form.startTime && this.form.endTime) {
+        const start = new Date(this.form.startTime);
+        const end = new Date(this.form.endTime);
+        return Math.floor((end - start) / (1000 * 60 * 60 * 24)) + 1;
+      }
+      return 0;
+    },
     getRow(row, type) {
       /** type ==== 添加：add 复制：copy 编辑：edit 查看：view */
       this.type = type;
-      // 重置表单
       this.resetForm();
       if (row) {
         if (type === 'copy') {
@@ -287,13 +387,7 @@ export default {
           { period: '3', points: '' },
         ],
         breakRule: 'reset',
-        tasks: [
-          { taskName: '完成订单', triggerCondition: '', points: '', limit: '无限制', isEnabled: false },
-          { taskName: '充值任务', triggerCondition: '', points: '', limit: '无限制', isEnabled: false },
-          { taskName: '分享服务号', triggerCondition: '', points: '', limit: '无限制', isEnabled: false },
-          { taskName: '浏览动态', triggerCondition: '', points: '', limit: '无限制', isEnabled: false },
-          { taskName: '浏览商户', triggerCondition: '', points: '', limit: '无限制', isEnabled: false }
-        ]
+        tasks: this.getDefaultTasks()
       };
     },
     handleDateChange(val) {
@@ -304,6 +398,7 @@ export default {
         this.form.startTime = '';
         this.form.endTime = '';
       }
+      this.handleActivityTypeChange();
     },
     deletePeriod(index) {
       if (this.form.consecutiveBonus.length <= 1) {
@@ -323,77 +418,65 @@ export default {
         this.form.breakRule = 'reset';
       } else {
         // 其他活动
-        this.form.tasks = [
-          { taskName: '完成订单', triggerCondition: '', points: '', limit: '无限制', isEnabled: true },
-          { taskName: '充值任务', triggerCondition: '', points: '', limit: '无限制', isEnabled: true },
-          { taskName: '分享服务号', triggerCondition: '', points: '', limit: '无限制', isEnabled: true },
-          { taskName: '浏览动态', triggerCondition: '', points: '', limit: '无限制', isEnabled: true },
-          { taskName: '浏览商户', triggerCondition: '', points: '', limit: '无限制', isEnabled: true }
-        ];
+        this.form.tasks = this.getDefaultTasks();
       }
     },
     addPeriod() {
-      // 添加新周期
+      const totalDays = this.getTotalDays();
+      const currentTotalPeriod = this.form.consecutiveBonus.reduce((sum, item) => {
+        return sum + (Number(item.period) || 0);
+      }, 0);
+
+      if (this.form.isLongTerm === '2' && totalDays > 0 && currentTotalPeriod >= totalDays) {
+        this.$message.warning('连续签到周期总和不能超过活动总天数');
+        return;
+      }
+
       this.form.consecutiveBonus.push({
         period: '',
         points: ''
       });
     },
     updatePeriod(index, value) {
-      // 计算活动总天数
-      let totalDays = 0;
+      // 触发表单验证
+      this.$refs.formRef.validateField('consecutiveBonus');
+    },
+    getDescription(index) {
+      let totalPeriodDays = 0;
+      let totalPoints = 0;
 
-      if (this.form.isLongTerm === '2' && this.form.startTime && this.form.endTime) {
-        const start = new Date(this.form.startTime);
-        const end = new Date(this.form.endTime);
-        totalDays = Math.floor((end - start) / (1000 * 60 * 60 * 24)) + 1;
-      }
-      console.log(totalDays)
-      // 检查当前周期是否大于前一个
-      if (index > 0 && Number(value) <= Number(this.form.consecutiveBonus[index - 1].period)) {
-        this.$message.warning('后一个周期必须大于前一个周期');
-        this.form.consecutiveBonus[index].period = Number(this.form.consecutiveBonus[index - 1].period) + 1;
-        return;
+      for (let i = 0; i <= index; i++) {
+        totalPeriodDays += Number(this.form.consecutiveBonus[i].period) || 0;
+        totalPoints += Number(this.form.consecutiveBonus[i].points) || 0;
       }
 
-      // 检查当前周期是否小于后一个
-      if (index < this.form.consecutiveBonus.length - 1 && Number(value) >= Number(this.form.consecutiveBonus[index + 1].period)) {
-        this.$message.warning('前一个周期必须小于后一个周期');
-        this.form.consecutiveBonus[index].period = Number(this.form.consecutiveBonus[index + 1].period) - 1;
-        return;
-      }
+      const basePoints = Number(this.form.dailyBasePoints) || 0;
+      const finalPoints = totalPoints + basePoints;
 
-      // 如果选择指定时间，检查当前周期是否大于总天数
-      if (this.form.isLongTerm === '2' && totalDays > 0 && Number(value) > totalDays) {
-        this.$message.warning('连续签到周期不能大于活动总天数');
-        this.form.consecutiveBonus[index].period = totalDays;
-        return;
+      if (!totalPeriodDays || !finalPoints) {
+        return '--';
       }
+
+      return `连续签到 ${totalPeriodDays} 天后，继续签到可获得 ${finalPoints} 积分`;
     },
-    handleCancel() {
-      this.pointsActivity = false;
-    },
-    handleSaveDraft() {
+    validateForm(callback) {
       this.$refs.formRef.validate((valid) => {
         if (valid) {
-          console.log('Form内容:', this.form);
-          // 保存草稿逻辑
-          this.$message.success('草稿已保存');
-          this.pointsActivity = false;
-        } else {
-          return false;
+          callback();
         }
       });
     },
+    handleSaveDraft() {
+      this.validateForm(() => {
+        console.log('Form内容:', this.form);
+        this.$message.success('草稿已保存');
+        this.pointsActivity = false;
+      });
+    },
     handlePublish() {
-      this.$refs.formRef.validate((valid) => {
-        if (valid) {
-          // 发布逻辑
-          this.$message.success('活动已发布');
-          this.pointsActivity = false;
-        } else {
-          return false;
-        }
+      this.validateForm(() => {
+        this.$message.success('活动已发布');
+        this.pointsActivity = false;
       });
     }
   }
@@ -462,4 +545,14 @@ export default {
     min-width: 100px;
   }
 }
+
+/* 隐藏number输入框的上下小按钮 */
+::v-deep input[type="number"]::-webkit-inner-spin-button,
+::v-deep input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+::v-deep input[type="number"] {
+  -moz-appearance: textfield;
+}
 </style>