wanzb_admin/src/views/match/addArticle.vue

<style lang="scss">
.add {
  .el-input,
  button {
    width: 300px;
  }
  .bm-view {
    width: 100%;
  }
  .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;
  }
  .imgs{
    li{
      display: inline-block;
      width: 150px;
      height: 150px;
      overflow: hidden;
      margin: 0 10px;
    }
    .up_img{
      border: 1px dashed #999;
      border-radius: 4px;
      font-size: 50px;
      text-align: center;
      line-height: 150px;
      color:#999;
      position: relative;
      input{
        position: absolute;
        width: 100%;
        height: 100%;
        left:0;
        top: 0;
        opacity: 0;
      }
    }
  }
}
</style>
<template>
  <section class="content">
        <h4>新增公告</h4>
        <el-divider></el-divider>
      <el-form label-width="80px">
        <el-form-item label="标题">
          <el-input placeholder="标题" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="详情">
          <fuEditor v-model="form.content" :isClear="isClear" @change="change"></fuEditor>
        </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 {
      test: "",
      list:[],
      form: {
        title: "",
        category_id: '',
        content: "",
        imgs: [],
        address: "",
        point: ""
      },
      isClear: false,
      keyword:'',
      point:{
        lng:'',
        lat:''
      },
      BMap:null
    };
  },
  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 = "notice"
      if (parm.id) {
        // debugger;
        this.$api.editArticle(parm).then(res => {
          if (res.data.code == 0) {
            this.$message({ message: "修改成功！", type: "success" });
            this.$router.push({ path: "/notice" });
          } 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: "/notice" });
          } else {
            this.$message.error(res.data.message);
          }
        });
      }
    },
    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>