活动页面

VUECODE/smart-property-manage/src/api/activity.js

@@ -14,3 +14,59 @@ export function activityList(data) {
   })
 }
 
+// 添加活动
+export function addActivity(data) {
+  return request({
+    url: '/activity/add',
+    method: 'post',
+    data: {
+      activityTitle: data.activityTitle,
+      activityCarouselImg: data.activityCarouselImg, // 轮播图
+      activityContent: data.activityContent, // 活动内容详细
+      contentImg: data.contentImg, // 活动内容配图
+      signUpMax: data.signUpMax, //  活动人数上限
+      registrationEndTime: data.registrationEndTime, // 报名活动结束时间
+      sort: data.sort, // 权重
+      status: data.status // 状态 0 是已作废 1 是已发布   2 是草稿 3 是已修改
+    }
+  })
+}
+
+// 修改活动
+export function updateActivity(data) {
+  return request({
+    url: '/activity/update',
+    method: 'put',
+    data: {
+      id: data.id,
+      activityTitle: data.activityTitle,
+      activityCarouselImg: data.activityCarouselImg, // 轮播图
+      activityContent: data.activityContent, // 活动内容详细
+      contentImg: data.contentImg, // 活动内容配图
+      signUpMax: data.signUpMax, //  活动人数上限
+      registrationEndTime: data.registrationEndTime, // 报名活动结束时间
+      sort: data.sort, // 权重
+      status: data.status // 状态 0 是已作废 1 是已发布   2 是草稿 3 是已修改
+    }
+  })
+}
+
+// 查询 活动详情
+export function activityById(id) {
+  return request({
+    url: '/activity/' + id,
+    method: 'get'
+  })
+}
+
+// 批量活动作废
+export function invalidActivity(data) {
+  return request({
+    url: '/activity/invalid',
+    method: 'put',
+    data: {
+      ids: data
+    }
+  })
+}
+

VUECODE/smart-property-manage/src/store/modules/activity.js

@@ -1,4 +1,4 @@
-import { activityList } from '@/api/activity'
+import { activityList, addActivity, updateActivity, activityById, invalidActivity  } from '@/api/activity'
 
 const activityInfo = {
   state: {
@@ -14,7 +14,44 @@ const activityInfo = {
           reject(error)
         })
       })
+    },
+    AddActivity({ commit, state }, data) { // 添加活动
+      return new Promise((resolve, reject) => {
+        addActivity(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    UpdateActivity({ commit, state }, data) { // 修改活动
+      return new Promise((resolve, reject) => {
+        updateActivity(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    ActivityById({ commit, state }, data) { // 查询活动详情
+      return new Promise((resolve, reject) => {
+        activityById(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    InvalidActivity({ commit, state }, data) { // 批量活动作废
+      return new Promise((resolve, reject) => {
+        invalidActivity(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
     }
+
   }
 }
 

VUECODE/smart-property-manage/src/views/social/activity/add/index.vue

@@ -16,10 +16,10 @@
           <i v-else class="el-icon-plus avatar-uploader-icon"/>
         </el-upload>
       </el-form-item>
-      <el-form-item label="活动详细描述" prop="activityContent">
+      <el-form-item label="活动详细描述">
         <el-input v-model="ruleForm.activityContent" :rows="10" type="textarea" placeholder="活动内容, 活动规则, 活动举办开始时间, 活动举办结束时间, 报名人数上限等"/>
       </el-form-item>
-      <el-form-item label="活动配图" prop="contentImg">
+      <el-form-item label="活动配图">
         <el-upload
           :on-preview="handlePictureCardPreview"
           :on-remove="handleRemove"
@@ -91,11 +91,38 @@ export default {
   },
   methods: {
     submitForm(formName) {
+      // 加载框
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
       this.$refs[formName].validate((valid) => {
         if (valid) {
+          if (this.ruleForm.activityContent.length <= 0 && this.ruleForm.contentImg.length <= 0) {
+            this.$message.error('活动内容描述 和 活动配图至少要存在一个!')
+            return false
+          }
           this.ruleForm.status = 1 // 发布状态
+          this.$store.dispatch('AddActivity', this.ruleForm).then((res) => {
+            if (res.code === '0') {
+              this.$message({
+                message: res.message,
+                type: 'success'
+              })
+              this.$router.push({ name: 'activity-index' })
+              loading.close()
+              return
+            }
+            this.$message.error(res.message)
+            loading.close()
+          }).catch(() => {
+            console.log('error AddActivity')
+          })
         } else {
           console.log('error submit!!')
+          loading.close()
           return false
         }
       })

VUECODE/smart-property-manage/src/views/social/activity/edi/index.vue

@@ -1,13 +1,210 @@
 <template>
-  <div>修改</div>
+  <div id="root">
+    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="top" label-width="150px" class="ruleForm">
+      <el-form-item label="活动标题" prop="activityTitle">
+        <el-input v-model="ruleForm.activityTitle" placeholder="15字以内"/>
+      </el-form-item>
+      <el-form-item label="活动轮播图" prop="activityCarouselImg">
+        <el-upload
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          :before-upload="beforeAvatarUpload"
+          class="avatar-uploader"
+          name="uploadFiles"
+          action="http://localhost:8086/property-api/uploadimage">
+          <img v-if="imageUrl" :src="imageUrl" class="avatar">
+          <i v-else class="el-icon-plus avatar-uploader-icon"/>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="活动详细描述">
+        <el-input v-model="ruleForm.activityContent" :rows="10" type="textarea" placeholder="活动内容, 活动规则, 活动举办开始时间, 活动举办结束时间, 报名人数上限等"/>
+      </el-form-item>
+      <el-form-item label="活动配图">
+        <el-upload
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove"
+          :on-success="handleSuccessContentImg"
+          name="uploadFiles"
+          action="http://localhost:8086/property-api/uploadimage"
+          list-type="picture-card">
+          <i class="el-icon-plus"/>
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+          <img :src="dialogImageUrl" width="100%" alt="">
+        </el-dialog>
+      </el-form-item>
+      <el-form-item label="报名人数上限" prop="signUpMax">
+        <el-input v-model="ruleForm.signUpMax" placeholder="填写0则不限制报名人数"/>
+      </el-form-item>
+      <el-form-item label="报名截止时间" prop="registrationEndTime">
+        <el-date-picker
+          v-model="ruleForm.registrationEndTime"
+          type="date"
+          placeholder="选择日期"/>
+      </el-form-item>
+      <el-form-item label="权重值" prop="sort">
+        <el-input-number v-model="ruleForm.sort" :min="1" :max="10" label="权重值" @change="sortHandleChange"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="resetForm('ruleForm')">存为草稿</el-button>
+        <el-button type="primary" @click="submitForm('ruleForm')">发布</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'Index'
+  name: 'Index',
+  data() {
+    return {
+      ruleForm: {
+        id: '',
+        activityTitle: '',
+        activityCarouselImg: '', // 轮播图
+        activityContent: '', // 活动内容详细
+        contentImg: [], // 活动内容配图
+        signUpMax: '', //  活动人数上限
+        registrationEndTime: '', // 报名活动结束时间
+        sort: 1, // 权重
+        status: '' // 状态 0 是已作废 1 是已发布   2 是草稿 3 是已修改
+      },
+      imageUrl: '', // 轮播图预览
+      rules: {
+        activityTitle: [
+          { required: true, message: '请输入活动名称', trigger: 'blur' },
+          { min: 1, max: 15, message: '长度在 15 个字符以内', trigger: 'blur' }
+        ],
+        activityContent: [
+          { required: true, message: '活动详细描述', trigger: 'blur' }
+        ],
+        signUpMax: [
+          { required: true, message: '请输入报名人数上限', trigger: 'blur' }
+        ],
+        registrationEndTime: [
+          { type: 'date', required: true, message: '报名截止时间', trigger: 'change' }
+        ],
+        sort: [
+          { required: true, message: '请输入权重值', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      // 加载框
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.ruleForm.activityContent.length <= 0 && this.ruleForm.contentImg.length <= 0) {
+            this.$message.error('活动内容描述 和 活动配图至少要存在一个!')
+            return false
+          }
+          this.ruleForm.status = 1 // 发布状态
+          this.$store.dispatch('UpdateActivity', this.ruleForm).then((res) => {
+            if (res.code === '0') {
+              this.$message({
+                message: res.message,
+                type: 'success'
+              })
+              this.$router.push({ name: 'activity-index' })
+              loading.close()
+              return
+            }
+            this.$message.error(res.message)
+            loading.close()
+          }).catch(() => {
+            console.log('error UpdateActivity')
+          })
+        } else {
+          console.log('error submit!!')
+          loading.close()
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    },
+    handleAvatarSuccess(res, file) { // 轮播图上传回调
+      this.ruleForm.activityCarouselImg = res.data[0]
+      this.imageUrl = URL.createObjectURL(file.raw)
+    },
+    beforeAvatarUpload(file) { // 轮播图上传前操作
+      // const isJPG = file.type === 'image/jpeg'
+      // const isLt2M = file.size / 1024 / 1024 < 2
+      //
+      // if (!isJPG) {
+      //   this.$message.error('上传头像图片只能是 JPG 格式!')
+      // }
+      // if (!isLt2M) {
+      //   this.$message.error('上传头像图片大小不能超过 2MB!')
+      // }
+      // return isJPG && isLt2M
+    },
+    handleRemove(file, fileList) { // 活动配图移除时
+      this.ruleForm.contentImg = []
+      for (let i = 0; i < fileList.length; i++) {
+        this.ruleForm.contentImg.push(fileList[i].response.data[0])
+      }
+      console.log(file, fileList)
+    },
+    handlePictureCardPreview(file) { // 点击活动配图文件列表中已上传的文件时的钩子
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    handleSuccessContentImg(response, file, fileList) { // 活动配图上传成功时回调
+      const resImg = response.data[0]
+      this.ruleForm.contentImg.push(resImg)
+      console.log('上传活动配图成功时回调!')
+    },
+    sortHandleChange(value) { // 权重值
+      this.ruleForm.sort = value
+      console.log(value)
+    },
+    getById() { // 根据 id 查询活动详情
+
+    }
+  }
 }
 </script>
 
 <style scoped>
-
+#root {
+  display: flex;
+}
+.ruleForm {
+  width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 50px;
+}
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
 </style>