活动

src/views/Activity/ActivityReward/index.vue

@@ -16,8 +16,8 @@
       <el-table-column prop="id" label="ID" width="80" align="center" />
       <el-table-column prop="title" label="活动名称" min-width="150" />
       <el-table-column prop="sub_title" label="副标题" min-width="150" />
-      <el-table-column prop="start_time" label="开始时间" width="160" />
-      <el-table-column prop="end_time" label="结束时间" width="160" />
+      <el-table-column prop="start_time" label="活动开始时间" width="160" />
+      <el-table-column prop="end_time" label="活动结束时间" width="160" />
       <el-table-column label="详情图片" width="100" align="center">
         <template slot-scope="scope">
           <el-image style="width: 50px; height: 50px" :src="scope.row.detail_image" :preview-src-list="[scope.row.detail_image]" />
@@ -72,12 +72,12 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="开始时间" prop="start_time">
+            <el-form-item label="活动开始时间" prop="start_time">
               <el-date-picker v-model="formData.start_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="结束时间" prop="end_time">
+            <el-form-item label="活动结束时间" prop="end_time">
               <el-date-picker v-model="formData.end_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" style="width: 100%" :picker-options="pickerOptions" />
             </el-form-item>
           </el-col>
@@ -121,6 +121,71 @@
             </el-form-item>
           </el-col>
 
+          <el-col :span="24">
+            <el-form-item label="发布平台" prop="publish_platform" required>
+              <el-checkbox-group v-model="formData.publish_platform">
+                <el-checkbox label="pc">PC</el-checkbox>
+                <el-checkbox label="h5">H5</el-checkbox>
+                <el-checkbox label="app">APP</el-checkbox>
+              </el-checkbox-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="活动预算" prop="activity_budget" required>
+              <el-input v-model="formData.activity_budget" placeholder="请输入活动预算" class="activity-budget-input" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="排序" prop="sort" required>
+              <el-input-number v-model="formData.sort" :controls="false" style="width: 100%" />
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="24">
+            <div class="qualification-section">
+              <div class="qualification-title">参加会员资格设定</div>
+              <el-form-item label="会员注册区间" required>
+                <el-radio-group v-model="formData.register_unlimited">
+                  <el-radio :label="true">不限制</el-radio>
+                  <el-radio :label="false">注册时间</el-radio>
+                </el-radio-group>
+                <el-date-picker
+                  v-model="formData.register_start_time"
+                  type="datetime"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  placeholder="请选择开始时间"
+                  :disabled="formData.register_unlimited"
+                  class="qualification-date"
+                />
+                <span class="range-separator">至</span>
+                <el-date-picker
+                  v-model="formData.register_end_time"
+                  type="datetime"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  placeholder="请选择结束时间"
+                  :disabled="formData.register_unlimited"
+                  class="qualification-date"
+                />
+              </el-form-item>
+              <el-form-item label="会员注册平台" prop="register_platform" required>
+                <el-checkbox-group v-model="formData.register_platform">
+                  <el-checkbox label="pc">PC</el-checkbox>
+                  <el-checkbox label="h5">H5</el-checkbox>
+                  <el-checkbox label="app">APP</el-checkbox>
+                </el-checkbox-group>
+              </el-form-item>
+              <el-form-item label="会员存款总额" required>
+                <el-radio-group v-model="formData.deposit_unlimited">
+                  <el-radio :label="true">不限制</el-radio>
+                  <el-radio :label="false">生涯存款</el-radio>
+                </el-radio-group>
+                <el-input v-model="formData.deposit_min_amount" :disabled="formData.deposit_unlimited" placeholder="请输入数字" class="qualification-amount" />
+                <span class="range-separator">至</span>
+                <el-input v-model="formData.deposit_max_amount" :disabled="formData.deposit_unlimited" placeholder="请输入数字" class="qualification-amount" />
+              </el-form-item>
+            </div>
+          </el-col>
+
           <template v-if="formData.type === 3">
             <el-col :span="12">
               <el-form-item label="单笔充值金额" prop="min_recharge_amount">
@@ -163,8 +228,6 @@
           </el-col>
           </template>
 
-
-
           <template v-if="formData.type === 4">
             <el-col :span="12">
               <el-form-item label="单笔充值金额" prop="min_recharge_amount">
@@ -216,8 +279,8 @@
           </template>
 
           <el-col :span="24">
-            <el-form-item label="内容" prop="content">
-              <quill-editor v-model="formData.content" style="height: 300px; margin-bottom: 50px;" />
+            <el-form-item label="内容" prop="content" class="content-form-item">
+              <quill-editor v-model="formData.content" class="content-editor" style="height: 300px; margin-bottom: 50px;" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -269,6 +332,16 @@ export default {
         sub_title: '',
         start_time: '',
         end_time: '',
+        publish_platform: [],
+        activity_budget: '',
+        sort: 0,
+        register_unlimited: true,
+        register_start_time: '',
+        register_end_time: '',
+        register_platform: [],
+        deposit_unlimited: true,
+        deposit_min_amount: '',
+        deposit_max_amount: '',
         detail_image: '',
         pc_image: '',
         status: 1,
@@ -284,13 +357,17 @@ export default {
         reward_limit_count: '',
         daily_interest_rate: '',
         no_login_days: '',
-        number_of_consecutive_days_of_deposit: '',
+        number_of_consecutive_days_of_deposit: ''
       },
       rules: {
         title: [{ required: true, message: '活动名称不能为空', trigger: 'blur' }],
         sub_title: [{ required: true, message: '副标题不能为空', trigger: 'blur' }],
         start_time: [{ required: true, message: '开始时间不能为空', trigger: 'change' }],
         end_time: [{ required: true, message: '结束时间不能为空', trigger: 'change' }],
+        publish_platform: [{ type: 'array', required: true, message: '请选择发布平台', trigger: 'change' }],
+        activity_budget: [{ required: true, message: '活动预算不能为空', trigger: 'blur' }],
+        sort: [{ required: true, message: '排序不能为空', trigger: 'change' }],
+        register_platform: [{ type: 'array', required: true, message: '请选择会员注册平台', trigger: 'change' }],
         detail_image: [{ required: true, message: 'App详情图片不能为空', trigger: 'change' }],
         pc_image: [{ required: true, message: 'PC详情图片不能为空', trigger: 'change' }],
         status: [{ required: true, message: '请选择状态', trigger: 'change' }],
@@ -356,6 +433,16 @@ export default {
         sub_title: '',
         start_time: '',
         end_time: '',
+        publish_platform: [],
+        activity_budget: '',
+        sort: 0,
+        register_unlimited: true,
+        register_start_time: '',
+        register_end_time: '',
+        register_platform: [],
+        deposit_unlimited: true,
+        deposit_min_amount: '',
+        deposit_max_amount: '',
         detail_image: '',
         pc_image: '',
         status: 1,
@@ -377,7 +464,22 @@ export default {
       if (data.params) {
         Object.assign(data, data.params)
       }
-      this.formData = data
+      data.publish_platform = this.normalizePlatformValue(data.publish_platform)
+      data.register_platform = this.normalizePlatformValue(data.register_platform)
+      data.register_unlimited = data.register_unlimited !== false && data.register_unlimited !== 0
+      data.deposit_unlimited = data.deposit_unlimited !== false && data.deposit_unlimited !== 0
+      this.formData = Object.assign({
+        publish_platform: [],
+        activity_budget: '',
+        sort: 0,
+        register_unlimited: true,
+        register_start_time: '',
+        register_end_time: '',
+        register_platform: [],
+        deposit_unlimited: true,
+        deposit_min_amount: '',
+        deposit_max_amount: ''
+      }, data)
       this.dialogVisible = true
       this.$nextTick(() => {
         this.$refs.form.clearValidate()
@@ -408,6 +510,11 @@ export default {
         this.$message.error('状态修改失败')
       })
     },
+    normalizePlatformValue(value) {
+      if (Array.isArray(value)) return value
+      if (!value) return []
+      return String(value).split(',').map(item => item.trim()).filter(Boolean)
+    },
     // 提交表单
     submitForm() {
       this.$refs.form.validate(valid => {
@@ -432,9 +539,7 @@ export default {
             delete postData.no_login_days
             delete postData.min_recharge_amount
             delete postData.reward_rules
-          }
-
-          else if (postData.type === 6) {
+          } else if (postData.type === 6) {
             businessParams.daily_interest_rate = postData.daily_interest_rate
             businessParams.number_of_consecutive_days_of_deposit = postData.number_of_consecutive_days_of_deposit
             delete postData.daily_interest_rate
@@ -482,4 +587,59 @@ export default {
   flex-direction: column;
   height: calc(100vh - 50px);
 }
+
+.qualification-section {
+  margin-bottom: 18px;
+  padding: 14px 14px 0;
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+
+.activity-budget-input {
+  width: 100%;
+}
+
+.content-editor {
+  width: 100%;
+}
+
+.content-form-item >>> .el-form-item__label {
+  display: block;
+  float: none;
+  width: 100%;
+  padding: 0 0 10px;
+  line-height: 20px;
+  text-align: left;
+}
+
+.content-form-item >>> .el-form-item__content {
+  width: 100%;
+  margin-left: 0 !important;
+}
+
+.qualification-title {
+  margin: -2px 0 14px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ebeef5;
+  color: #303133;
+  font-weight: 600;
+}
+
+.qualification-date {
+  width: 180px;
+  margin-left: 14px;
+}
+
+.qualification-amount {
+  width: 180px;
+  margin-left: 14px;
+}
+
+.range-separator {
+  margin-left: 8px;
+  color: #606266;
+}
+
 </style>