feat: # 后台活动页面接口

src/api/activity/index.js

@@ -0,0 +1,15 @@
+import api from '@/utils/request';
+
+export const getList = params =>
+	api.post(`/yxl-back-end/admin/activity/page`, params);
+export const getItem = ({ id, ...params }) =>
+	api.get(`/yxl-back-end/admin/activity/${id}`, params);
+export const saveItem = ({ id, ...params }) => {
+	if (id) {
+		return api.put(`/yxl-back-end/admin/activity/${id}`, params);
+	} else {
+		return api.post(`/yxl-back-end/admin/activity/save`, params);
+	}
+};
+export const delItem = ({ id, ...params }) =>
+	api.del(`/yxl-back-end/admin/activity/${id}`, params);

src/utils/dialog-helper.js

@@ -11,6 +11,7 @@ import SceneVerifyItem from 'views/sceneManagement/sceneVerify/modal/ItemModal.v
 import SceneItem from 'views/sceneManagement/sceneList/modal/ItemModal.vue';
 import WithdrawalRecordVerifyItem from 'views/statistics/withdrawalRecord/modal/ItemModal.vue';
 import PhotoerVerifyItem from 'views/photographerManagement/photographerVerify/modal/ItemModal.vue';
+import ActivityItem from 'views/photoManagement/eventsList/modal/ItemModal.vue';
 
 const modal = (Component, props) => {
   let _component = null;
@@ -109,3 +110,10 @@ let PhotoerVerifyItemModal = data => {
 Vue.prototype.$PhotoerVerifyItemModal = params => {
   PhotoerVerifyItemModal(params);
 };
+
+let ActivityItemModal = data => {
+  modal(ActivityItem, data);
+};
+Vue.prototype.$ActivityItemModal = params => {
+  ActivityItemModal(params);
+};

src/views/baseManagement/bannerManagement/modal/ItemModal.vue

@@ -11,7 +11,6 @@
     "
   >
     <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-      <!-- TODO 补充图片上传 -->
       <el-form-item label="图片" prop="imgUrl">
         <upload v-model="form.imgUrl" params="prefix=/banner" />
       </el-form-item>

src/views/photoManagement/eventsList/index.vue

@@ -2,19 +2,24 @@
   <div class="">
     <toolbar @on-filter="filterData" @on-reset="filterData" />
 
-    <base-table
-      class="m-10 bg-w p-20 br-10"
-      :columns="columns"
-      :items="items"
-      :pagination="pagination"
-      :page-change="pageChange"
-    />
+    <div class="m-10 bg-w p-20 br-10">
+      <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
+        >新增</el-button
+      >
+      <base-table
+        :columns="columns"
+        :items="items"
+        :pagination="pagination"
+        :page-change="pageChange"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import toolbar from './toolbar';
 import mxFilterList from '@/mixins/filterList';
+import { getList, delItem } from '@/api/activity';
 
 export default {
   name: 'EventsList',
@@ -23,7 +28,7 @@ export default {
 
   mixins: [
     mxFilterList({
-      // fetchList: iGetList // 在下方data再声明一个 fetchList: iGetList 同等效果
+      fetchList: getList // 在下方data再声明一个 fetchList: iGetList 同等效果
     })
   ],
 
@@ -31,27 +36,125 @@ export default {
     return {
       columns: [
         {
-          key: 'photo',
-          name: '用户名称',
-          width: '160'
+          key: 'name',
+          name: '活动名称',
+          minWidth: '160'
         },
         {
-          key: 'region',
-          name: '手机号',
+          key: 'cover',
+          name: '封面',
+          width: '160',
+          render: (h, { row }) =>
+            h('img', {
+              style: {
+                width: '160px',
+                height: '90px'
+              },
+              attrs: {
+                src: row.cover
+              },
+              on: {
+                click: () =>
+                  this.$AdvanceViewImageModal({
+                    items: [{ src: row.cover }]
+                  })
+              }
+            })
+        },
+        {
+          key: 'kindergartenName',
+          name: '所属场景',
           width: '180'
         },
         {
-          key: 'region',
-          name: '反馈内容',
-          minWidth: '120'
+          key: 'createBy',
+          name: '创建者',
+          width: '120'
+        },
+        {
+          key: 'time',
+          name: '活动时间',
+          width: '280',
+          render: (h, { row }) =>
+            h('span', `${row.eventStartDate}~${row.eventEndDate}`)
+        },
+        {
+          key: 'isShow',
+          name: '状态',
+          width: '80',
+          type: 'tag',
+          fetchTagType: val => (val ? 'success' : 'info'),
+          tagName: row => (row.isShow ? '显示' : '隐藏')
         },
         {
-          key: 'region',
-          name: '反馈时间',
-          width: '140'
+          key: 'action',
+          name: '操作',
+          width: '120',
+          render: (h, { row }) => {
+            const action = [];
+            action.push(
+              h(
+                'el-button',
+                {
+                  props: {
+                    type: 'text'
+                  },
+                  on: {
+                    click: () =>
+                      this.$ActivityItemModal({
+                        id: row.id
+                      })
+                  }
+                },
+                '编辑'
+              )
+            );
+            action.push(
+              h(
+                'BaseBtn',
+                {
+                  props: {
+                    popip: true,
+                    txt: '删除',
+                    type: 'text'
+                  },
+                  class: 'ml-10',
+                  on: {
+                    ok: () => this.handleDelItem(row)
+                  }
+                },
+                '删除'
+              )
+            );
+
+            return h('div', action);
+          }
         }
       ]
     };
+  },
+
+  created() {
+    this.$g_on('activity_reload', this.reload);
+  },
+
+  beforeDestroy() {
+    this.$g_off('activity_reload', this.reload);
+  },
+
+  methods: {
+    handleAdd() {
+      this.$ActivityItemModal();
+    },
+    async handleDelItem(item) {
+      const { success, msg } = await delItem({
+        id: item.id
+      });
+      if (success) {
+        this.$success('删除成功！');
+        this.$g_emit('activity_reload');
+      }
+    }
   }
 };
 </script>

src/views/photoManagement/eventsList/modal/ItemModal.vue

@@ -0,0 +1,204 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="modal"
+    width="800px"
+    :close-on-click-modal="false"
+    @close="
+      res => {
+        $emit('cancel');
+      }
+    "
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form-item label="活动名称" prop="name">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+
+      <el-form-item label="封面图" prop="cover">
+        <upload v-model="form.cover" params="prefix=/activity" />
+      </el-form-item>
+
+      <el-form-item label="活动介绍" prop="brief">
+        <el-input v-model="form.brief" type="textarea" :rows="2"></el-input>
+      </el-form-item>
+
+      <el-form-item label="场景" prop="type">
+        <el-select
+          v-model="form.type"
+          :clearable="true"
+          placeholder="请选择所属位置"
+        >
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="活动时间" prop="eventTimeArr">
+        <el-date-picker
+          v-model="form.eventTimeArr"
+          :picker-options="pickerOptions"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-radio-group v-model="form.isShow" prop="isShow">
+          <el-radio :label="true">显示</el-radio>
+          <el-radio :label="false">隐藏</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number
+          v-model="form.sort"
+          :precision="0"
+          :min="1"
+          :max="9999"
+          label="序号"
+        ></el-input-number>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="modal = false">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { getItem, saveItem } from '@/api/activity';
+
+export default {
+  name: 'ActivityItemModal',
+
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    const validateTimer = (rule, value, callback) => {
+      if (value === null || value[0] === null || value[1] === null) {
+        callback(new Error('请选择时间段'));
+      } else {
+        callback();
+      }
+    };
+    const disabledDate = e => {
+      if (e > new Date()) {
+        return false;
+      }
+      return true;
+    };
+    return {
+      modal: true,
+
+      form: {
+        name: '',
+        cover: [
+          {
+            url: 'abc'
+          }
+        ],
+        brief: '',
+        kindergartenId: '123',
+        eventTimeArr: [new Date(), new Date()],
+        isShow: false,
+        sort: 1
+      },
+      rules: {
+        name: [
+          { required: true, message: '请输入活动名称', trigger: 'change' }
+        ],
+        cover: [
+          {
+            type: 'array',
+            required: true,
+            message: '请上传图片',
+            trigger: 'change'
+          }
+        ],
+        brief: [
+          { required: true, message: '请输入活动介绍', trigger: 'change' }
+        ],
+        eventTimeArr: [{ validator: validateTimer, trigger: 'blur' }]
+      },
+
+      typeOptions: [],
+
+      pickerOptions: {
+        disabledDate
+      }
+    };
+  },
+
+  computed: {
+    title() {
+      if (this.id) {
+        return '编辑活动';
+      } else {
+        return '新增活动';
+      }
+    }
+  },
+
+  watch: {
+    id: {
+      handler(id) {
+        id && this.loadData();
+      },
+      immediate: true
+    }
+  },
+
+  mounted() {},
+
+  methods: {
+    async loadData() {
+      const { success, data, msg } = await getItem({
+        id: this.id
+      });
+      if (success) {
+        let result = data;
+        result.cover = [
+          {
+            url: data.cover
+          }
+        ];
+        result.eventTimeArr = [result.eventStartDate, result.eventEndDate];
+        this.form = result;
+      }
+    },
+
+    handleConfirm() {
+      this.$refs.form.validate(async valid => {
+        console.warn(valid);
+        if (valid) {
+          let params = Object.assign({}, this.form);
+          params.cover = this.form.cover[0].url;
+          params.eventStartDate = this.form.eventTimeArr[0];
+          params.eventEndDate = this.form.eventTimeArr[1];
+          if (this.id) params.id = this.id;
+          const { success, msg } = await saveItem(params);
+          if (success) {
+            this.$success('保存成功！');
+            this.modal = false;
+            this.$g_emit('activity_reload');
+          }
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/views/photoManagement/eventsList/toolbar.vue

@@ -3,6 +3,8 @@
 </template>
 
 <script>
+import TYPE from '@/const/type';
+
 export default {
   name: 'EventsListToolbar',
 
@@ -11,20 +13,28 @@ export default {
       fields: [
         {
           type: 'text',
-          name: 'title',
-          label: '用户名称'
+          name: 'name',
+          label: '活动名称'
         },
         {
+          // TODO 场景选择框
           type: 'text',
           name: 'status',
-          label: '用户手机号',
-          labelWidth: '100px'
+          label: '所属场景'
+        },
+        {
+          type: 'select',
+          name: 'isShow',
+          label: '状态',
+          options: TYPE,
+          format: val => (val !== null && val !== '' ? !!val : null)
         },
         {
           type: 'dateArray',
           name: 'date',
-          label: '反馈日期',
-          apiName: ['start', 'end']
+          label: '活动开始时间',
+          apiName: ['startTime', 'endTime'],
+          labelWidth: '100px'
         }
       ]
     };