feat: 提交积分规则设置的弹窗

src/views/pointsManagement/pointsRules/Expiration_points.vue

@@ -0,0 +1,215 @@
+<script>
+export default {
+  name: "Expiration_points",
+  data() {
+    return {
+      validityPeriod: false,
+      tabList: [],
+      activeTab: "sign",
+      radio: 3, // 3: 永久有效, 6: 逐笔过期, 9: 逐年过期
+      days: "",
+      years: ""
+    }
+  },
+  methods: {
+    clickSet(row) {
+      this.validityPeriod = true;
+      this.tabList = row || this.tabList;
+      this.activeTab = row && row.length > 0 ? row[0].value : this.tabList[0].value;
+    },
+    handleClose() {
+      this.validityPeriod = false;
+    },
+    handleClick() {
+      // 标签页切换处理
+    },
+    handleCancel() {
+      this.validityPeriod = false;
+    },
+    handleConfirm() {
+      // 确定按钮处理
+      this.validityPeriod = false;
+    }
+  }
+}
+</script>
+
+<template>
+  <el-dialog
+    title="积分有效期"
+    :visible.sync="validityPeriod"
+    width="700px"
+    :before-close="handleClose"
+    custom-class="expiration-dialog">
+    <div class="tabs-container">
+      <el-tabs v-model="activeTab" @tab-click="handleClick" type="card" class="custom-tabs">
+        <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in tabList" :key="index"/>
+      </el-tabs>
+    </div>
+
+    <div class="radio-group">
+      <el-radio-group v-model="radio">
+        <el-radio :label="3" class="radio-item">永久有效</el-radio>
+        <el-radio :label="6" class="radio-item">
+          逐笔过期
+          <span>每笔积分，在发放之日起</span>
+          <el-input v-model="days" placeholder="" class="input-short"></el-input>
+          <span>天后过期</span>
+        </el-radio>
+        <el-radio :label="9" class="radio-item">
+          逐年过期
+          <span>1月1日至12月31日获取的积分，将在</span>
+          <el-input v-model="years" placeholder="" class="input-short"></el-input>
+          <span>年后的1月1日过期</span>
+        </el-radio>
+      </el-radio-group>
+    </div>
+
+    <div class="button-container">
+      <el-button @click="handleCancel" class="cancel-btn">返回</el-button>
+      <el-button type="primary" @click="handleConfirm" class="confirm-btn">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped lang="scss">
+.expiration-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;
+  }
+}
+
+.tabs-container {
+  margin-bottom: 30px;
+
+  .custom-tabs {
+    .el-tabs__nav {
+      border-bottom: none;
+
+      .el-tabs__item {
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+        margin-right: 12px;
+        padding: 8px 20px;
+        font-size: 14px;
+        transition: all 0.3s ease;
+
+        &:hover {
+          border-color: #409eff;
+          color: #409eff;
+        }
+
+        &.is-active {
+          background-color: #409eff;
+          color: white;
+          border-color: #409eff;
+          box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
+        }
+      }
+
+      .el-tabs__active-bar {
+        display: none;
+      }
+    }
+  }
+}
+
+.radio-group {
+  margin-bottom: 30px;
+
+  .radio-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    padding: 5px 16px;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background-color: #f5f7fa;
+    }
+
+    span {
+      margin: 0 8px;
+      font-size: 14px;
+      color: #606266;
+    }
+
+    .el-radio {
+      margin-right: 10px;
+    }
+  }
+}
+
+.input-short {
+  width: 100px;
+  margin: 0 8px;
+
+  .el-input__inner {
+    border-radius: 4px;
+    transition: all 0.3s ease;
+
+    &:focus {
+      border-color: #409eff;
+      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+    }
+  }
+}
+
+.button-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px solid #e8e8e8;
+
+  .cancel-btn {
+    margin-right: 30px;
+    width: 100px;
+    height: 36px;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+
+    &:hover {
+      border-color: #c6e2ff;
+      color: #409eff;
+    }
+  }
+
+  .confirm-btn {
+    width: 100px;
+    height: 36px;
+    border-radius: 4px;
+    background-color: #409eff;
+    border-color: #409eff;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background-color: #66b1ff;
+      border-color: #66b1ff;
+      box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+    }
+
+    &:active {
+      background-color: #3a8ee6;
+      border-color: #3a8ee6;
+    }
+  }
+}
+</style>

src/views/pointsManagement/pointsRules/index.vue

@@ -32,10 +32,15 @@
             <el-button
               type="primary"
               plain
-              icon="el-icon-plus"
               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>
@@ -63,6 +68,8 @@
       :limit.sync="queryParams.pageSize"
       @pagination="getList"
     />
+
+    <expiration-points ref="expirationPointsRef" />
   </div>
 </template>
 
@@ -70,11 +77,13 @@
 import { getActivityList } from "@/api/points/rules_api";
 import tableCompontent from "@/components/tableCompontent/index.vue";
 import listMixin from '@/utils/listMixin';
+import ExpirationPoints from "./Expiration_points.vue";
 export default {
   name: "pointsRules",
   mixins: [listMixin],
   components: {
     tableCompontent,
+    ExpirationPoints
   },
   data() {
     return {
@@ -167,6 +176,10 @@ export default {
     /** 新增操作 */
     handleRuleAdd() {
 
+    },
+    /** 积分时效 */
+    setExpiration() {
+      this.$refs.expirationPointsRef?.clickSet(this.activityTypeOption);
     },
     /** 查看统计 */
     viewStatistics(row){