|
|
@@ -0,0 +1,223 @@
|
|
|
+<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="add">
|
|
|
+ <p>内容管理 > 新增公告</p>
|
|
|
+ <div class="content">
|
|
|
+ <el-form label-width="80px">
|
|
|
+ <el-form-item label="标题">
|
|
|
+ <el-input placeholder="标题" v-model="form.title"></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=" ">
|
|
|
+ <el-button type="primary" @click="save">保存</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </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;
|
|
|
+ this.point={
|
|
|
+ lng:this.form.point.split(',')[0],
|
|
|
+ lat:this.form.point.split(',')[1]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ if (parm.id) {
|
|
|
+ // debugger;
|
|
|
+ this.$api.editArticle(parm).then(res => {
|
|
|
+ if (res.data.code == 0) {
|
|
|
+ this.$message({ message: "修改成功！", type: "success" });
|
|
|
+ this.$router.push({ path: "/article" });
|
|
|
+ } 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: "/article" });
|
|
|
+ } 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>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
xjc