|
|
@@ -2,7 +2,11 @@
|
|
|
<div class="InteractIssue">
|
|
|
<div class="txt1">
|
|
|
<div class="txtBs">{{ txt1.length }}/20</div>
|
|
|
- <van-field v-model="txt1" maxlength="20" placeholder="在此处填写标题" />
|
|
|
+ <van-field
|
|
|
+ v-model.trim="txt1"
|
|
|
+ maxlength="20"
|
|
|
+ placeholder="在此处填写标题"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="txt2">
|
|
|
<div class="txtBs">{{ txt2.length }}/500</div>
|
|
|
@@ -30,111 +34,182 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="imgTit" @click="locationClick">
|
|
|
+ <div class="imgTit" @click="LocationShow = true">
|
|
|
<div class="rightInco">
|
|
|
<van-icon name="arrow" />
|
|
|
</div>
|
|
|
<img src="../../../assets/img/interact/add.png" alt="" />
|
|
|
- 定位：
|
|
|
+ 位置：
|
|
|
</div>
|
|
|
<!-- 定位标签 -->
|
|
|
- <div class="locationBox">
|
|
|
- <div
|
|
|
- class="location"
|
|
|
- v-for="item in locationData"
|
|
|
- :key="item.id"
|
|
|
- :class="{ locationAc: location === item.id }"
|
|
|
- @click="location = item.id"
|
|
|
- >
|
|
|
- {{ item.name }}
|
|
|
- </div>
|
|
|
+ <div class="locationBox" v-show="locationInfo.id">
|
|
|
+ <div class="location locationAc">{{ locationInfo.name }}</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 上传图片 -->
|
|
|
<div class="upFile">
|
|
|
- <van-uploader accept=".png,.jpg">
|
|
|
- <div class="upImg"></div>
|
|
|
- </van-uploader>
|
|
|
+ <div>
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ accept=".png,.jpg,.gif"
|
|
|
+ ref="myInput"
|
|
|
+ @input="handeUpPhoto"
|
|
|
+ v-show="0"
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ class="upImg"
|
|
|
+ @click="$refs.myInput.click()"
|
|
|
+ v-show="imgList.length < 5"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
<Draggable
|
|
|
class="moveDraggable"
|
|
|
+ :class="{ moveDraggableAll: imgList.length === 5 }"
|
|
|
v-model="imgList"
|
|
|
group="itxst"
|
|
|
@start="start"
|
|
|
animation="300"
|
|
|
>
|
|
|
<transition-group>
|
|
|
- <div class="imgRow" v-for="(item, index) in imgList" :key="item.name">
|
|
|
+ <div class="imgRow" v-for="(item, index) in imgList" :key="item.id">
|
|
|
<img
|
|
|
- :src="require(`@/assets/img/interact/${item.url}.png`)"
|
|
|
+ :src="baseURL + item.filePath"
|
|
|
alt=""
|
|
|
- @click="lookImg"
|
|
|
+ @click="lookImg(baseURL + item.filePath)"
|
|
|
/>
|
|
|
<!-- 删除 -->
|
|
|
- <div class="delImg" @click="delImg(item.name)"></div>
|
|
|
+ <div class="delImg" @click="delImg(item.id)"></div>
|
|
|
<!-- 封面 -->
|
|
|
<div class="imgCover" v-show="index === 0">封面</div>
|
|
|
</div>
|
|
|
</transition-group>
|
|
|
</Draggable>
|
|
|
</div>
|
|
|
- <div class="imgUpTit">可拖动图片调整顺序，首张图将作为封面。</div>
|
|
|
+ <div class="imgUpTit">
|
|
|
+ 可拖动图片调整顺序，首张图将作为封面。<br />最大支持5M，最多可上传5张图片。
|
|
|
+ </div>
|
|
|
<!-- 发布按钮 -->
|
|
|
<div class="issueBtn" @click="issueDone">发 布</div>
|
|
|
+
|
|
|
+ <!-- 点击定位之后出来的页面 -->
|
|
|
+ <Location
|
|
|
+ v-show="LocationShow"
|
|
|
+ @closeLoc="LocationShow = false"
|
|
|
+ @setLocationInfo="setLocationInfo"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { baseURL } from "@/utils/request";
|
|
|
+import {
|
|
|
+ uploadImgAPI,
|
|
|
+ shareSaveAPI,
|
|
|
+ delImgAPI,
|
|
|
+ getDictAPI,
|
|
|
+} from "@/api/interact.js";
|
|
|
+import Location from "./interactLocation.vue";
|
|
|
+import { Toast } from "vant";
|
|
|
//导入draggable组件
|
|
|
import Draggable from "vuedraggable";
|
|
|
import { Dialog, ImagePreview } from "vant";
|
|
|
export default {
|
|
|
name: "InteractIssue",
|
|
|
- components: { Draggable },
|
|
|
+ components: { Draggable, Location },
|
|
|
data() {
|
|
|
return {
|
|
|
+ baseURL,
|
|
|
txt1: "",
|
|
|
txt2: "",
|
|
|
topicData: [
|
|
|
- { id: 1, name: "景点" },
|
|
|
- { id: 2, name: "美食" },
|
|
|
- { id: 3, name: "游玩" },
|
|
|
- { id: 4, name: "酒店" },
|
|
|
+ // { id: 1, name: "景点" },
|
|
|
+ // { id: 2, name: "美食" },
|
|
|
+ // { id: 3, name: "游玩" },
|
|
|
+ // { id: 4, name: "酒店" },
|
|
|
],
|
|
|
topic: 1,
|
|
|
- locationData: [
|
|
|
- { id: 1, name: "鸠兹广场" },
|
|
|
- { id: 2, name: "中江塔" },
|
|
|
- { id: 3, name: "老海关" },
|
|
|
- { id: 4, name: "鸠兹古镇" },
|
|
|
- ],
|
|
|
- location: 1,
|
|
|
+ locationInfo: {},
|
|
|
+ LocationShow: false,
|
|
|
// 上传相关
|
|
|
- imgCover: "",
|
|
|
- dragging: null,
|
|
|
imgList: [
|
|
|
- { name: "1", url: "1" },
|
|
|
- { name: "2", url: "2" },
|
|
|
- { name: "3", url: "3" },
|
|
|
+ // {
|
|
|
+ // id: 65,
|
|
|
+ // fileName: "22222.jpg",
|
|
|
+ // filePath: "/comment/img/20221125_1113069452.jpg",
|
|
|
+ // },
|
|
|
],
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
watch: {},
|
|
|
methods: {
|
|
|
- // 点击定位
|
|
|
- locationClick(){
|
|
|
- this.$router.push('/layout/interact/location')
|
|
|
+ // -------------关于上传
|
|
|
+ async handeUpPhoto(e) {
|
|
|
+ if (e.target.files) {
|
|
|
+ // 拿到files信息
|
|
|
+ const filesInfo = e.target.files[0];
|
|
|
+ // 校验格式
|
|
|
+ const type = ["image/jpeg", "image/png", "image/gif"];
|
|
|
+ if (!type.includes(filesInfo.type)) {
|
|
|
+ e.target.value = "";
|
|
|
+ return Toast.fail("只支持jpg、png、gif格式!");
|
|
|
+ }
|
|
|
+ // 校验大小
|
|
|
+ if (filesInfo.size > 5 * 1024 * 1024) {
|
|
|
+ e.target.value = "";
|
|
|
+ return Toast.fail("最大支持5M!");
|
|
|
+ }
|
|
|
+ // 创建FormData对象
|
|
|
+ const fd = new FormData();
|
|
|
+ // 把files添加进FormData对象（‘photo’为后端需要的字段）
|
|
|
+ fd.append("file", filesInfo);
|
|
|
+ fd.append("type", "img");
|
|
|
+ const res = await uploadImgAPI(fd);
|
|
|
+ if (res.code === 0) {
|
|
|
+ Toast.success("上传成功!");
|
|
|
+ } else Toast.fail(res.msg);
|
|
|
+ this.imgList.push(res.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 设置位置
|
|
|
+ setLocationInfo(item) {
|
|
|
+ this.locationInfo = item;
|
|
|
+ this.LocationShow = false;
|
|
|
},
|
|
|
// 点击发布
|
|
|
- issueDone(){
|
|
|
- console.log('-------发布');
|
|
|
+ async issueDone() {
|
|
|
+ if (this.txt1 === "") return Toast.fail("标题不能为空!");
|
|
|
+ if (this.txt2.replaceAll("\n", "").replaceAll(" ", "") === "")
|
|
|
+ return Toast.fail("正文不能为空!");
|
|
|
+ if (!this.locationInfo.id) return Toast.fail("请选择位置!");
|
|
|
+ if (this.imgList.length === 0) return Toast.fail("至少上传一张图片!");
|
|
|
+ // 图片id数组
|
|
|
+ const imgArr = this.imgList.map((v) => {
|
|
|
+ return v.id;
|
|
|
+ });
|
|
|
+ const obj = {
|
|
|
+ description: this.txt2
|
|
|
+ .replaceAll("\n", "<br/>")
|
|
|
+ .replaceAll(" ", " "),
|
|
|
+ positionId: this.locationInfo.id,
|
|
|
+ dictTopicId: this.topic,
|
|
|
+ fileIds: imgArr.join(","),
|
|
|
+ name: this.txt1,
|
|
|
+ thumb: this.imgList[0].filePath,
|
|
|
+ };
|
|
|
+ const res = await shareSaveAPI(obj);
|
|
|
+ if (res.code === 0) {
|
|
|
+ Toast.success("发布成功!");
|
|
|
+ this.$router.push("/layout/interact");
|
|
|
+ } else Toast.fail(res.msg);
|
|
|
},
|
|
|
// 拖拽图片
|
|
|
start(e) {},
|
|
|
// 查看大图
|
|
|
- lookImg() {
|
|
|
+ lookImg(url) {
|
|
|
ImagePreview({
|
|
|
- images: ["https://img01.yzcdn.cn/vant/apple-1.jpg"],
|
|
|
+ images: [url],
|
|
|
showIndex: false,
|
|
|
});
|
|
|
},
|
|
|
@@ -142,17 +217,23 @@ export default {
|
|
|
delImg(id) {
|
|
|
Dialog.confirm({
|
|
|
title: "确定删除吗?",
|
|
|
- beforeClose: (action, done) => {
|
|
|
+ beforeClose: async (action, done) => {
|
|
|
if (action === "confirm") {
|
|
|
+ await delImgAPI(id);
|
|
|
// 点击了确定
|
|
|
- this.imgList = this.imgList.filter((v) => v.name !== id);
|
|
|
+ this.imgList = this.imgList.filter((v) => v.id !== id);
|
|
|
+ Toast.success("删除成功!");
|
|
|
}
|
|
|
done();
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
- created() {},
|
|
|
+ async created() {
|
|
|
+ // 获取话题列表
|
|
|
+ const res = await getDictAPI("topic");
|
|
|
+ this.topicData = res.data;
|
|
|
+ },
|
|
|
mounted() {},
|
|
|
beforeCreate() {}, //生命周期 - 创建之前
|
|
|
beforeMount() {}, //生命周期 - 挂载之前
|
|
|
@@ -277,6 +358,7 @@ export default {
|
|
|
line-height: 32px;
|
|
|
margin-right: 16px;
|
|
|
margin-bottom: 12px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
.locationAc {
|
|
|
border: none;
|
|
|
@@ -290,18 +372,21 @@ export default {
|
|
|
margin: 20px 0 0px;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- /deep/.van-uploader {
|
|
|
- margin: 0 10px 10px 0;
|
|
|
- }
|
|
|
+
|
|
|
.upImg {
|
|
|
width: 80px;
|
|
|
height: 80px;
|
|
|
background-image: url("../../../assets/img/interact/upload.png");
|
|
|
background-size: 100% 100%;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
- .moveDraggable{
|
|
|
+ .moveDraggable {
|
|
|
width: calc(100% - 90px);
|
|
|
}
|
|
|
+ .moveDraggableAll {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
.moveDraggable span {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
@@ -343,18 +428,18 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .imgUpTit{
|
|
|
- font-size: 14px;
|
|
|
- color: #A6A6A6;
|
|
|
+ .imgUpTit {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #a6a6a6;
|
|
|
margin: 10px 0 40px;
|
|
|
}
|
|
|
- .issueBtn{
|
|
|
+ .issueBtn {
|
|
|
width: 80%;
|
|
|
height: 50px;
|
|
|
max-width: 300px;
|
|
|
margin: 0 auto 30px;
|
|
|
line-height: 50px;
|
|
|
- background-color: #FF7E89;
|
|
|
+ background-color: #ff7e89;
|
|
|
border-radius: 25px;
|
|
|
text-align: center;
|
|
|
color: #fff;
|
任一存
