封装基础信息组件

src/components/yqrange/baseinfo.vue

+<template>
+  <el-form ref="formData" :model="formData" :rules="rules" label-width="150px" label-suffix="：" class="basic-form">
+    <el-form-item label="圈子名称" prop="projectName">
+      <el-col :span="13">
+        <el-input size="small" v-model="formData.projectName" placeholder="请输入圈子名称"  style="width:70%;"></el-input>
+        <span class="word-num">{{(formData.projectName).replace(/\s+/g,"").length}}/24</span>
+      </el-col>
+    </el-form-item>
+    <div class="basic-item-icon">
+      <el-form-item label="圈子头像" class="required-label">
+        <el-upload v-model="formData.imgUrl1" class="bg-uploader" action="#" :show-file-list="false"
+          :before-upload="beforeUploadPic1">
+          <img v-if="formData.imgUrl1" :src="formData.imgUrl1" @mouseover.stop="imgMouseOver1=true" class="bg-img" />
+          <img v-if="!formData.imgUrl1" class="bg-img" src="../../assets/image/small.png" />
+          <div class="img-delete" v-show="imgMouseOver1" @click.stop="deleteImg(1)"
+            @mouseout.stop="imgMouseOver1=false">
+            <i class="el-icon-delete"></i>
+          </div>
+          <div class="limit-text">
+            <p>尺寸:48*48</p>
+            <p>限制大小: 500kb</p>
+            <p>支持.jpg,.png格式</p>
+          </div>
+        </el-upload>
+      </el-form-item>
+      <p class="upload-message" v-if="uploadImgMessage1">请选择圈子头像</p>
+    </div>
+    <div class="basic-item-icon">
+      <el-form-item label="圈子封面" class="required-label">
+        <el-upload v-model="formData.imgUrl2" class="bg-uploader" action="#" :show-file-list="false"
+          :before-upload="beforeUploadPic2">
+          <img v-if="formData.imgUrl2" :src="formData.imgUrl2" @mouseover.stop="imgMouseOver2=true" class="bg-img" />
+          <img v-if="!formData.imgUrl2" class="bg-img" src="../../assets/image/small.png" />
+          <div class="img-delete" v-show="imgMouseOver2" @click.stop="deleteImg(2)"
+            @mouseout.stop="imgMouseOver2=false">
+            <i class="el-icon-delete"></i>
+          </div>
+          <div class="limit-text">
+            <p>尺寸:750*420</p>
+            <p>限制大小: 2Mb</p>
+            <p>支持.jpg,.png格式</p>
+          </div>
+        </el-upload>
+      </el-form-item>
+      <p class="upload-message" v-if="uploadImgMessage2">请选择圈子头像</p>
+    </div>
+    <el-form-item label="圈子介绍" prop="introduce">
+      <el-col :span="13">
+        <el-input size="small" v-model="formData.introduce" placeholder="请输入圈子介绍" @change="returnTypeData('introduce')" style="width:70%;"></el-input>
+        <span class="word-num">{{(formData.introduce).replace(/\s+/g,"").length}}/24</span>
+      </el-col>
+    </el-form-item>
+    <el-form-item label="内容发布权限" prop="contentRole">
+      <el-select v-model="formData.contentRole" @change="returnTypeData('contentRole')" placeholder="请选择发布权限" size="small" clearable>
+        <el-option v-for="item in contentList" :key="item.value" :label="item.label" :value="item.label">
+        </el-option>
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+<script>
+  import { openLoading, closeLoading } from "../../utils/utils";
+  import { doUpload, getFilePath } from "../../utils/qiniu-util";
+  export default {
+    name: "baseinfo",
+    props: {
+      formData: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      }
+    },
+    data() {
+      let checkProjectStr = (rule, value, callback) => {
+        if (value.indexOf("\\") != -1) {
+          //存在
+          callback(new Error("请勿输入字符“ \\ ”"));
+        } else if (value.indexOf(".") != -1) {
+          callback(new Error("请勿输入字符“ . ”"));
+        } else {
+          callback();
+        }
+      };
+      return {
+        rules: {
+          projectName: [
+            { required: true, message: "请输入圈子名称", trigger: "blur" },
+            {
+              min: 2,
+              max: 24,
+              message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
+              trigger: "blur"
+            },
+            { validator: checkProjectStr, trigger: "blur" }
+          ],
+          introduce: [
+            { required: true, message: "请输入圈子名称", trigger: "blur" },
+            {
+              min: 2,
+              max: 24,
+              message: "输入长度为2-24的内容，可包含中英文、数字及特殊符号",
+              trigger: "blur"
+            },
+            { validator: checkProjectStr, trigger: "blur" }
+          ],
+          contentRole: [
+            { required: true, message: "请选择内容发布权限", trigger: "blur" },
+          ]
+        },
+        imgMouseOver1: false,
+        uploadImgMessage1: false,//未上传图片，校验提示语
+        imgMouseOver2: false,
+        uploadImgMessage2: false,
+        contentList: [
+          {
+            value: '1',
+            label: '所有人可发布动态'
+          }, {
+            value: '2',
+            label: '嘉宾可发布动态'
+          },
+        ],
+      }
+    },
+
+    methods: {
+      returnTypeData(name) {
+        this.$emit('returnTypeData', {
+          name: name,
+          val: this.formData[name]
+
+        })}
+        ,
+      //上传圈子头像
+      beforeUploadPic1(file) {
+        let fileLimit = {
+          width: 48,
+          height: 48,
+          size: 0.5,
+          sizeText: "500K",
+          key: "imgUrl1",
+          more: "imgUrl1More",
+          show: "uploadImgMessage1"
+        };
+        this.beforeUpload(file, fileLimit);
+      },
+      beforeUploadPic2(file) {
+        let fileLimit = {
+          width: 750,
+          height: 420,
+          size: 2,
+          sizeText: "2Mb",
+          key: "imgUrl2",
+          more: "imgUrl2More",
+          show: "uploadImgMessage2"
+        };
+        this.beforeUpload(file, fileLimit);
+      },
+      //上传图片
+      beforeUpload(file, fileLimit) {
+        let vm = this;
+        const isJPG = file.type === "image/jpeg";
+        const isPNG = file.type === "image/png";
+        const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
+        if (!isJPG && !isPNG) {
+          vm.$message.error("图片格式不符合规范，请根据规范上传图片");
+          // return;
+        }
+        if (!isLt2M) {
+          vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
+          // return;
+        }
+        let _img = new FileReader();
+        _img.readAsDataURL(file);
+        _img.onload = function (theFile) {
+          let image = new Image();
+          image.src = theFile.target.result;
+          image.onload = function () {
+            let _this = this;
+            if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
+              vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
+            } else {
+              openLoading(vm);
+              doUpload(vm, file, getFilePath(file, null), "preview4", "progress1", 1).then(function (path) {
+                closeLoading(vm);
+                console.log('上传成功后路径', path);
+                if (fileLimit.show == "uploadImgMessage1") {
+                  vm.uploadImgMessage1 = false;
+                } else if (fileLimit.show == "uploadImgMessage2") {
+                  vm.uploadImgMessage2 = false;
+                }
+                vm.formData[fileLimit.key] = path.fullPath;
+                vm.formData[fileLimit.more] = {
+                  attachmentName: path.name,
+                  attachmentExt: path.ext,
+                  attachmentSize: path.size
+                };
+                vm.$message.success("上传成功");
+              });
+            }
+          };
+        };
+        return isJPG && isLt2M;
+      },
+      //删除图片
+      deleteImg(type) {
+        if (type == 1) {
+          vm.formData.imgUrl1 = "";
+          vm.imgMouseOver1 = false;
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .form-container {
+    margin-top: 40px;
+  }
+</style>
\ No newline at end of file

src/router/range.js

+<!-- 圈子router -->
\ No newline at end of file

src/views/yqrange/yq-range.vue

@@ -106,8 +106,9 @@ export default {
     },
     //新建小圈
     createRange() {
+      let enterType = 1;//1:add 2 edit
       this.$router.push({
-        path: '/create-range',
+        path: `/create-range?enterType=${enterType}`
       })
     },
     //上线
@@ -152,8 +153,13 @@ export default {
     },
     //编辑
     editRange(row) {
-      this.$router.push( {
-        path: '/edit-range',
+      let enterType = 2;//1:add 2 edit
+      this.$router.push({
+        path: `/create-range?enterType`,
+        query:{
+          id:row.id,
+          enterType:enterType
+        }
       })
     },
     //解散圈子