|
@@ -0,0 +1,226 @@
|
|
|
|
|
+<style lang="scss">
|
|
|
|
|
+.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>
|
|
|
|
|
+<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="封面图">
|
|
|
|
|
+ <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>
|
|
|
|
|
+ </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,
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ 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>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|