feat: 提交积分规则的新增、编辑、查看 弹窗

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

@@ -0,0 +1,465 @@
+<template>
+  <el-dialog
+    title="积分活动"
+    :visible.sync="pointsActivity"
+    width="900px"
+    :before-close="handleClose"
+    custom-class="activity-edit-dialog">
+
+    <el-form :model="form" :rules="rules" ref="formRef" label-width="140px" class="activity-form">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="活动名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入活动名称" :disabled="type === 'view'"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="活动简述" prop="description">
+            <el-input v-model="form.description" placeholder="请输入活动简述" :disabled="type === 'view'"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="活动城市" prop="city">
+             <DictSelect v-model="form.city" :dictOptions="cityOptions" placeholder="请选择" :disabled="type === 'view'"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="活动类型" prop="activityType">
+            <DictSelect v-model="form.activityType" :dictOptions="activityTypeOption" placeholder="请选择" :disabled="type === 'view'" @change="handleActivityTypeChange"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="活动时间" prop="isLongTerm">
+            <el-radio-group v-model="form.isLongTerm" :disabled="type === 'view'">
+              <el-radio label="1">长期有效</el-radio>
+              <el-radio label="2">指定时间</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" v-if="form.isLongTerm === '2'">
+           <el-form-item label="指定时间" prop="dateRange">
+              <el-date-picker
+                v-model="form.dateRange"
+                type="daterange"
+                range-separator="→"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                style="width: 100%"
+                :disabled="type === 'view'"
+                :picker-options="pickerOptions"
+                @change="handleDateChange"
+            ></el-date-picker>
+           </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 签到活动特有的内容 -->
+      <template v-if="form.activityType === '1'">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="每日签到基础积分" prop="dailyBasePoints">
+              <el-input v-model="form.dailyBasePoints" type="number" placeholder="请输入" :disabled="type === 'view'"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="连续签到加成">
+              <el-table :data="form.consecutiveBonus" style="width: 100%" :disabled="type === 'view'" size="mini">
+                <el-table-column prop="period" label="连续签到周期（天）">
+                  <template slot-scope="scope">
+                    <span v-if="type === 'view'">
+                      {{ scope.row.period }}天
+                    </span>
+                    <el-input v-else v-model="scope.row.period" type="number" placeholder="天数" @blur="updatePeriod(scope.$index, scope.row.period)"></el-input>
+                  </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>
+                </el-table-column>
+                <el-table-column width="50">
+                  <template slot="header" slot-scope="scope">
+                    <span>
+                      <el-button v-if="type !== 'view' && form.consecutiveBonus.length < 5" type="text" size="medium" @click="addPeriod" title="添加周期">
+                        <i class="el-icon-circle-plus-outline"></i>
+                      </el-button>
+                    </span>
+                  </template>
+                  <template slot-scope="scope">
+                    <el-button v-if="type !== 'view'" type="text" @click="deletePeriod(scope.$index)" title="删除周期">
+                        <i class="el-icon-remove-outline"></i>
+                      </el-button>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="断签规则">
+              <el-radio-group v-model="form.breakRule" :disabled="type === 'view'">
+                <el-radio label="reset">
+                  断签重置
+                </el-radio>
+                <el-radio label="keep">
+                  保留进度
+                </el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </template>
+
+      <!-- 其他活动类型的内容 -->
+      <template v-else>
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item label="任务列表">
+              <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">
+                  <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>
+                  </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>
+                </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>
+                </el-table-column>
+                <el-table-column label="是否开启" width="120">
+                  <template slot-scope="scope">
+                    <el-switch v-model="scope.row.isEnabled" :disabled="type === 'view'"></el-switch>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </template>
+    </el-form>
+
+    <div class="button-container" v-if="type !== 'view'">
+      <el-button @click="handleCancel" 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>
+    <div class="button-container" v-else>
+      <el-button type="primary" @click="handleClose" class="confirm-btn">关闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "Activity_editBox",
+  props: ['activityTypeOption', 'cityOptions'],
+  data() {
+    return {
+      pointsActivity: false,
+      type: '',
+      minDate: null,
+      form: {
+        name: '',
+        description: '',
+        city: '',
+        activityType: '',
+        isLongTerm: '',
+        startTime: '',
+        endTime: '',
+        dateRange: '',
+        dailyBasePoints: '',
+        consecutiveBonus: [
+          { 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 }
+        ]
+      },
+      pickerOptions: {
+        onPick: ({ maxDate, minDate }) => {
+          if (minDate) {
+            this.minDate = minDate;
+          }
+          if (maxDate) {
+            this.minDate = null;
+          }
+        },
+        disabledDate: (time) => {
+          if (this.minDate) {
+            const minTime = this.minDate.getTime();
+            const sevenDaysLater = minTime + 6 * 24 * 60 * 60 * 1000; // 6天后（总共7天）
+            return time.getTime() < minTime || (time.getTime() < sevenDaysLater && time.getTime() > minTime);
+          }
+          return false;
+        }
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          { min: 2, max: 18, message: '请输入2-18个字符', trigger: 'blur' }
+        ],
+        description: [
+          { required: true, message: '请输入活动简述', trigger: 'blur' },
+          { min: 2, max: 30, message: '请输入2-30个字符', trigger: 'blur' }
+        ],
+        city: [
+          { required: true, message: '请选择活动城市', trigger: 'change' }
+        ],
+        activityType: [
+          { required: true, message: '请选择活动类型', trigger: 'change' }
+        ],
+        dailyBasePoints: [
+          { required: true, message: '请输入基础积分', trigger: 'blur' }
+        ],
+        dateRange: [
+          { required: true, message: '请选择活动时间', trigger: 'change' }
+        ]
+      },
+    }
+  },
+  methods: {
+    getRow(row, type) {
+      /** type ==== 添加：add 复制：copy 编辑：edit 查看：view */
+      this.type = type;
+      // 重置表单
+      this.resetForm();
+      if (row) {
+        if (type === 'copy') {
+          this.form = {...row, id: ''};
+        } else if (type === 'edit' || type === 'view') {
+          this.form = { ...row };
+        }
+      }
+      this.pointsActivity = true;
+    },
+    handleClose() {
+      this.pointsActivity = false;
+    },
+    resetForm() {
+      this.form = {
+        name: '',
+        description: '',
+        city: '',
+        activityType: '1',
+        isLongTerm: '1',
+        startTime: '',
+        endTime: '',
+        dateRange: '',
+        dailyBasePoints: '',
+        consecutiveBonus: [
+          { 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 }
+        ]
+      };
+    },
+    handleDateChange(val) {
+      if (val) {
+        this.form.startTime = val[0];
+        this.form.endTime = val[1];
+      } else {
+        this.form.startTime = '';
+        this.form.endTime = '';
+      }
+    },
+    deletePeriod(index) {
+      if (this.form.consecutiveBonus.length <= 1) {
+        this.$message.warning('至少保留一个连续签到周期');
+        return;
+      }
+      this.form.consecutiveBonus.splice(index, 1);
+    },
+    handleActivityTypeChange() {
+      // 重置相关内容
+      if (this.form.activityType === '1') {
+        // 签到活动
+        this.form.dailyBasePoints = '';
+        this.form.consecutiveBonus = [
+          { period: '3', points: ''},
+        ];
+        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 }
+        ];
+      }
+    },
+    addPeriod() {
+      // 添加新周期
+      this.form.consecutiveBonus.push({
+        period: '',
+        points: ''
+      });
+    },
+    updatePeriod(index, value) {
+      // 计算活动总天数
+      let totalDays = 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;
+      }
+
+      // 检查当前周期是否小于后一个
+      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;
+      }
+
+      // 如果选择指定时间，检查当前周期是否大于总天数
+      if (this.form.isLongTerm === '2' && totalDays > 0 && Number(value) > totalDays) {
+        this.$message.warning('连续签到周期不能大于活动总天数');
+        this.form.consecutiveBonus[index].period = totalDays;
+        return;
+      }
+    },
+    handleCancel() {
+      this.pointsActivity = false;
+    },
+    handleSaveDraft() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          console.log('Form内容:', this.form);
+          // 保存草稿逻辑
+          this.$message.success('草稿已保存');
+          this.pointsActivity = false;
+        } else {
+          return false;
+        }
+      });
+    },
+    handlePublish() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          // 发布逻辑
+          this.$message.success('活动已发布');
+          this.pointsActivity = false;
+        } else {
+          return false;
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.activity-edit-dialog {
+  .el-dialog__header {
+    padding: 20px;
+    border-bottom: 1px solid #e8e8e8;
+
+    .el-dialog__title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 25px;
+  }
+
+  .el-dialog__footer {
+    padding: 15px 20px;
+    border-top: 1px solid #e8e8e8;
+  }
+}
+
+.activity-form {
+  .form-tip {
+    font-size: 12px;
+    color: #f56c6c;
+    margin-top: 5px;
+  }
+
+  .el-form-item {
+    margin-bottom: 20px;
+  }
+
+  .el-table {
+    margin-top: 10px;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+  }
+
+  .el-table__header-wrapper {
+    background-color: #f5f7fa;
+  }
+
+  .el-table th {
+    font-weight: 600;
+  }
+}
+
+.button-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 30px;
+
+  .cancel-btn {
+    margin-right: 10px;
+  }
+
+  .confirm-btn {
+    min-width: 100px;
+  }
+}
+</style>

src/views/pointsManagement/pointsRules/index.vue

@@ -1,63 +1,63 @@
 <template>
   <div class="app-container">
-        <el-form :model="queryParams" ref="queryRef" size="small" :inline="true" v-show="showSearch" label-width="68px">
-          <el-form-item label="活动类型" prop="activityType">
-            <DictSelect v-model="queryParams.activityType" :dictOptions="activityTypeOption" placeholder="请选择"/>
-          </el-form-item>
-          <el-form-item label="城市" prop="activityCity">
-            <DictSelect v-model="queryParams.activityCity" :dictOptions="navigateMenuOption" placeholder="请选择"/>
-          </el-form-item>
-          <el-form-item label="状态" prop="activityStatus">
-            <DictSelect v-model="queryParams.activityStatus" :dictOptions="navigateMenuOption" placeholder="请选择"/>
-          </el-form-item>
-          <el-form-item label="活动时间" prop="dateRange">
-            <el-date-picker
-              v-model="queryParams.dateRange"
-              style="width: 240px"
-              value-format="yyyy-MM-dd"
-              type="daterange"
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-            ></el-date-picker>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-          </el-form-item>
-        </el-form>
+    <el-form :model="queryParams" ref="queryRef" size="small" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="活动类型" prop="activityType">
+        <DictSelect v-model="queryParams.activityType" :dictOptions="activityTypeOption" placeholder="请选择"/>
+      </el-form-item>
+      <el-form-item label="城市" prop="activityCity">
+        <DictSelect v-model="queryParams.activityCity" :dictOptions="cityOptions" placeholder="请选择"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="activityStatus">
+        <DictSelect v-model="queryParams.activityStatus" :dictOptions="statusOption" placeholder="请选择"/>
+      </el-form-item>
+      <el-form-item label="活动时间" prop="dateRange">
+        <el-date-picker
+          v-model="queryParams.dateRange"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
 
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button
-              type="primary"
-              plain
-              size="mini"
-              @click="handleRuleAdd"
-            >新增积分活动</el-button>
-            <el-button
-              type="primary"
-              plain
-              size="mini"
-              @click="setExpiration"
-            >积分时效</el-button>
-          </el-col>
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          size="mini"
+          @click="handleRule('','add')"
+        >新增积分活动</el-button>
+        <el-button
+          type="primary"
+          plain
+          size="mini"
+          @click="setExpiration"
+        >积分时效</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
 
     <tableCompontent ref="tableRef" height="72vh" :loading="loading" :tableData="list" :columnData="columnData">
       <template v-slot:activityStatus="row">
-        <span v-if="row.activityStatus === '1'" style="color: #85c91e">进行中</span>
-        <span v-else-if="row.activityStatus === '3'" style="color: red">已结束</span>
+        <span v-if="row.activityStatus == '1'" style="color: #85c91e">进行中</span>
+        <span v-else-if="row.activityStatus == '3'" style="color: red">已结束</span>
         <span v-else>--</span>
       </template>
       <template v-slot:nickName="row">
         <el-link type="primary" slot="reference" @click="viewStatistics(row)">查看统计</el-link>
       </template>
       <template v-slot:operation="row">
-        <el-button size="mini" type="text" @click="handleView(row)">详情</el-button>
-        <el-button size="mini" type="text" @click="handleEdit(row)">编辑</el-button>
-        <el-button size="mini" type="text" @click="handleCopy(row)">复制</el-button>
+        <el-button size="mini" type="text" @click="handleRule(row,'view')">详情</el-button>
+        <el-button size="mini" type="text" @click="handleRule(row,'edit')">编辑</el-button>
+        <el-button size="mini" type="text" @click="handleRule(row,'copy')">复制</el-button>
       </template>
     </tableCompontent>
 
@@ -72,6 +72,10 @@
     <expiration-points ref="expirationPointsRef" />
     <!-- 活动统计 -->
     <activity-statistics ref="activityStatisticsRef" />
+    <!-- 活动编辑 -->
+    <activity-edit-box ref="activityEditBoxRef"
+                       :activityTypeOption="activityTypeOption"
+                       :cityOptions="cityOptions"/>
   </div>
 </template>
 
@@ -81,26 +85,38 @@ import tableCompontent from "@/components/tableCompontent/index.vue";
 import listMixin from '@/utils/listMixin';
 import ExpirationPoints from "./compontents/Expiration_points.vue";
 import ActivityStatistics from "./compontents/Activity_statistics.vue";
+import activityEditBox from "./compontents/Activity_editBox.vue";
 export default {
   name: "pointsRules",
   mixins: [listMixin],
   components: {
     tableCompontent,
     ExpirationPoints,
-    ActivityStatistics
+    ActivityStatistics,
+    activityEditBox
   },
   data() {
     return {
       // 用户表格数据
       list: null,
       activityTypeOption:[
-        {label:'签到任务',value:'1'},
-        {label:'新手任务',value:'2'},
+        { label: '签到活动', value: '1' },
+        { label: '新手活动', value: '2' },
+        { label: '每日活动', value: '3' },
+        { label: '每月活动', value: '4' }
       ],
-      navigateMenuOption:[
-        {label:'测试数据',value:'1'},
-        {label:'测试数据1',value:'2'},
-        {label:'测试数据2',value:'3'}
+      cityOptions: [
+        { label: '太原', value: '1' },
+        { label: '北京', value: '2' },
+        { label: '上海', value: '3' },
+        { label: '广州', value: '4' },
+        { label: '深圳', value: '5' }
+      ],
+      statusOption:[
+        {label:'进行中',value:'1'},
+        {label:'已结束',value:'2'},
+        {label:'未开始',value:'3'},
+        {label:'草稿',value:'4'}
       ],
       columnData:[
         {
@@ -166,9 +182,7 @@ export default {
     }
     this.isImmediateLoad = false;
     this.getListUrl = getActivityList;
-    // 或者设置自定义数据处理函数
     this.customProcessDataFun = (val) => {
-      // 自定义处理查询参数
       this.queryParams = this.DateRange(this.queryParams,val.dateRange || [],['startTime','endTime'],'s')
     };
   },
@@ -177,9 +191,9 @@ export default {
     this.handleQuery();
   },
   methods: {
-    /** 新增操作 */
-    handleRuleAdd() {
-
+    /** 添加：add 复制：copy 编辑：edit 查看：view */
+    handleRule(row,type) {
+      this.$refs.activityEditBoxRef?.getRow(row,type);
     },
     /** 积分时效 */
     setExpiration() {
@@ -189,20 +203,6 @@ export default {
     viewStatistics(row){
       this.$refs.activityStatisticsRef?.openDrawer(row);
     },
-    /** 查看详情 */
-    handleView(row) {
-
-    },
-
-    /** 编辑 */
-    handleEdit(row) {
-
-    },
-
-    /** 复制 */
-    handleCopy(row) {
-
-    },
   }
 };
 </script>