wanzb_admin/src/views/match/addChampionSay.vue

<style lang="scss">
.content {
  .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;
  }
  height: 110vh!important;
}
</style>
<template>
  <section class="content">
    <h4>新增文章</h4>
    <el-divider></el-divider>
    <el-form label-width="80px">
      <el-form-item label="分类">
        <el-select v-model="form.category" placeholder="">
          <el-option
            v-for="item in categoryList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="置顶">
        <el-select v-model="form.isbanner" placeholder="">
          <el-option
            v-for="item in bannerList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题">
        <el-input placeholder="标题" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="封面图">
        <el-upload
          class="avatar-uploader"
          action="/api/admin/uploadfile"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.img" :src="form.img" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="详情">
        <!-- <fuEditor
          v-model="form.content"
          :isClear="isClear"
          @change="change"
        ></fuEditor> -->

        <vue-ueditor-wrap ref="editor" v-model="form.content" :config="myConfig"></vue-ueditor-wrap>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择状态">
          <el-option key="1" label="编辑中" :value="1"></el-option>
          <el-option key="2" label="上线" :value="2"></el-option>
          <el-option key="-1" label="下线" :value="-1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>
<script>
import fuEditor from "@/components/fuEditor/index.vue";
export default {
  components: {
    fuEditor,
  },
  data() {
    return {
      imageUrl: "",
      test: "",
      list: [],
      form: {
        title: "",
        category_id: "",
        content: "",
        imgs: [],
        address: "",
        point: "",
        status: 1,
        img: "",
      },
      isClear: false,
      keyword: "",
      point: {
        lng: "",
        lat: "",
      },
      BMap: null,
      myConfig: {
	      // 编辑器自动被内容撑高
	      autoHeightEnabled: true,
	      // 初始容器高度
	      initialFrameHeight: 500,
	      // 初始容器宽度
	      initialFrameWidth: '100%',
	      // 上传文件接口，实现上传图片功能必须的配置，这个地址会在后端配置的时候产生，此处先放上结果
	      serverUrl: '/api/admin/ueditor/upload',
	    },
      categoryList:[
        {label:"游资专场",value:"游资专场"},
        {label:"冠军交割",value:"冠军交割"},
        {label:"牛人专场",value:"牛人专场"},
        {label:"妖股列传",value:"妖股列传"}
      ],
      bannerList:[
        {label:"否",value:0},
        {label:"是",value:1}
      ]
    };
  },
  methods: {
    getData() {
      this.$api.getArticleById({ id: this.form.id }).then((res) => {
        this.form = res.data.data;
      });
    },
    getContent() {
      this.$api.getContentList({ page: this.page }).then((res) => {
        this.loading = false;
        if (res.status == 200) {
          this.list = res.data.data.list;
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
        }
      });
    },
    change(val) {
      this.form.content = val;
    },
    upload(type) {
      var file = document.getElementById(type).files;
      var data = new FormData();
      data.append("file", file[0]);
      this.$api.uploadFile(data).then((res) => {
        if (res.data.code == 0) {
          let imgs = this.form.imgs || [];
          imgs.push(res.data.data.url);
          this.form.imgs = imgs;
          // this.$set(form,type,res.data.data.url)
          this.$message({ message: "上传成功！", type: "success" });
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    save() {
      var parm = this.form;
      // parm.point=this.point.lng+','+this.point.lat
      parm.type = "champion";
      if (parm.id) {
        // debugger;
        this.$api.editArticle(parm).then((res) => {
          if (res.data.code == 0) {
            this.$message({ message: "修改成功！", type: "success" });
            this.$router.push({ path: "/championsay" });
          } else {
            this.$message.error(res.data.message);
          }
        });
      } else {
        this.$api.addArticle(parm).then((res) => {
          if (res.data.code == 0) {
            this.$message({ message: "添加成功！", type: "success" });
            this.$router.push({ path: "/championsay" });
          } else {
            this.$message.error(res.data.message);
          }
        });
      }
    },
    handleAvatarSuccess(res, file) {
      this.form.img = res.data.url;
    },
    beforeAvatarUpload(file) {
      return;
      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;
    },
    onBaiduMapReady(e) {
      // const that = this
      this.BMap = e.BMap;
    },
    getClickInfo(e) {
      // 调整地图中心位置
      this.point = e.point;

      // 此时已经可以获取到BMap类
      if (this.BMap) {
        const that = this;
        // Geocoder() 类进行地址解析
        // 创建地址解析器的实例
        const geoCoder = new this.BMap.Geocoder();
        // getLocation() 类--利用坐标获取地址的详细信息
        // getPoint() 类--获取位置对应的坐标
        geoCoder.getLocation(e.point, function (res) {
          const addrComponent = res.addressComponents;
          const surroundingPois = res.surroundingPois;
          const province = addrComponent.province;
          const city = addrComponent.city;
          const district = addrComponent.district;
          let addr = addrComponent.street;
          if (surroundingPois.length > 0 && surroundingPois[0].title) {
            if (addr) {
              addr += `-${surroundingPois[0].title}`;
            } else {
              addr += `${surroundingPois[0].title}`;
            }
          } else {
            addr += addrComponent.streetNumber;
          }
          that.form.address = province + city + district + addr;
        });
      }
    },
  },
  created() {
    // this.getContent()
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id;
      this.id = this.$route.query.id;
      this.getData();
    }
  },
};
</script>