|
|
@@ -1,37 +1,344 @@
|
|
|
<template>
|
|
|
- <div class='InteractIssue'>InteractIssue</div>
|
|
|
+ <div class="InteractIssue">
|
|
|
+ <div class="txt1">
|
|
|
+ <div class="txtBs">{{ txt1.length }}/20</div>
|
|
|
+ <van-field v-model="txt1" maxlength="20" placeholder="在此处填写标题" />
|
|
|
+ </div>
|
|
|
+ <div class="txt2">
|
|
|
+ <div class="txtBs">{{ txt2.length }}/500</div>
|
|
|
+ <van-field
|
|
|
+ v-model="txt2"
|
|
|
+ type="textarea"
|
|
|
+ maxlength="500"
|
|
|
+ placeholder="在此处填写正文"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="imgTit">
|
|
|
+ <img src="../../../assets/img/interact/topic.png" alt="" />
|
|
|
+ 话题：
|
|
|
+ </div>
|
|
|
+ <!-- 话题标签 -->
|
|
|
+ <div class="topicBox">
|
|
|
+ <div
|
|
|
+ class="topic"
|
|
|
+ v-for="item in topicData"
|
|
|
+ :key="item.id"
|
|
|
+ :class="{ topicAc: topic === item.id }"
|
|
|
+ @click="topic = item.id"
|
|
|
+ >
|
|
|
+ #{{ item.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="imgTit">
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- 上传图片 -->
|
|
|
+ <div class="upFile">
|
|
|
+ <van-uploader accept=".png,.jpg">
|
|
|
+ <div class="upImg"></div>
|
|
|
+ </van-uploader>
|
|
|
+ <div
|
|
|
+ class="imgRow"
|
|
|
+ draggable="true"
|
|
|
+ @dragstart="handleDragStart($event, item)"
|
|
|
+ @dragover.prevent="handleDragOver($event, item)"
|
|
|
+ @dragenter="handleDragEnter($event, item)"
|
|
|
+ @dragend="handleDragEnd($event, item)"
|
|
|
+ v-for="(item, index) in imgList"
|
|
|
+ :key="item.name"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="require(`@/assets/img/interact/${item.url}.png`)"
|
|
|
+ alt=""
|
|
|
+ @click="lookImg"
|
|
|
+ />
|
|
|
+ <!-- 删除 -->
|
|
|
+ <div class="delImg" @click="delImg(item.name)"></div>
|
|
|
+ <!-- 封面 -->
|
|
|
+ <div class="imgCover" v-show="index === 0">封面</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
+import { Dialog, ImagePreview } from "vant";
|
|
|
export default {
|
|
|
- name: 'InteractIssue',
|
|
|
+ name: "InteractIssue",
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ txt1: "",
|
|
|
+ txt2: "",
|
|
|
+ topicData: [
|
|
|
+ { 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,
|
|
|
+ // 上传相关
|
|
|
+ imgCover: "",
|
|
|
+ dragging: null,
|
|
|
+ imgList: [
|
|
|
+ { name: "1", url: "1" },
|
|
|
+ { name: "2", url: "2" },
|
|
|
+ { name: "3", url: "3" },
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
watch: {},
|
|
|
methods: {
|
|
|
-
|
|
|
+ // 查看大图
|
|
|
+ lookImg() {
|
|
|
+ ImagePreview({
|
|
|
+ images: ["https://img01.yzcdn.cn/vant/apple-1.jpg"],
|
|
|
+ showIndex: false,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 点击删除图片
|
|
|
+ delImg(id) {
|
|
|
+ Dialog.confirm({
|
|
|
+ title: "确定删除吗?",
|
|
|
+ beforeClose: (action, done) => {
|
|
|
+ if (action === "confirm") {
|
|
|
+ // 点击了确定
|
|
|
+ this.imgList = this.imgList.filter((v) => v.name !== id);
|
|
|
+ }
|
|
|
+ done();
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 拖动图片
|
|
|
+ handleDragStart(e, items) {
|
|
|
+ console.log('--------',items);
|
|
|
+ this.dragging = items; //开始拖动时，暂时保存当前拖动的数据。
|
|
|
+ },
|
|
|
+ handleDragEnd(e, items) {
|
|
|
+ this.dragging = null; //拖动结束后，清除数据
|
|
|
+ },
|
|
|
+ handleDragOver(e) {
|
|
|
+ e.dataTransfer.dropEffect = "move"; //在dragenter中针对放置目标来设置!
|
|
|
+ },
|
|
|
+ handleDragEnter(e, items) {
|
|
|
+ e.dataTransfer.effectAllowed = "move"; //为需要移动的元素设置dragstart事件
|
|
|
+ if (items == this.dragging) return;
|
|
|
+ const newItems = [...this.imgList]; //拷贝一份数据进行交换操作。
|
|
|
+ const src = newItems.indexOf(this.dragging); //获取数组下标
|
|
|
+ const dst = newItems.indexOf(items);
|
|
|
+ newItems.splice(dst, 0, ...newItems.splice(src, 1)); //交换位置
|
|
|
+ this.imgList = newItems;
|
|
|
+ },
|
|
|
},
|
|
|
- created() {
|
|
|
-
|
|
|
- },
|
|
|
- mounted() {
|
|
|
-
|
|
|
- },
|
|
|
- beforeCreate() { }, //生命周期 - 创建之前
|
|
|
- beforeMount() { }, //生命周期 - 挂载之前
|
|
|
- beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
- updated() { }, //生命周期 - 更新之后
|
|
|
- beforeDestroy() { }, //生命周期 - 销毁之前
|
|
|
- destroyed() { }, //生命周期 - 销毁完成
|
|
|
- activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
-}
|
|
|
+ created() {},
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
+.InteractIssue {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px 15px;
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
+ /deep/.van-cell {
|
|
|
+ width: 100%;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ padding: 0 40px 0 5px;
|
|
|
+ background-color: #f4f4f4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txt1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 36px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .txtBs {
|
|
|
+ z-index: 3;
|
|
|
+ color: #9e9a9a;
|
|
|
+ font-size: 14px;
|
|
|
+ position: absolute;
|
|
|
+ right: 3px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .txt2 {
|
|
|
+ margin: 20px 0;
|
|
|
+ position: relative;
|
|
|
+ .txtBs {
|
|
|
+ z-index: 3;
|
|
|
+ color: #9e9a9a;
|
|
|
+ font-size: 14px;
|
|
|
+ position: absolute;
|
|
|
+ right: 3px;
|
|
|
+ bottom: 5px;
|
|
|
+ }
|
|
|
+ /deep/.van-field__body {
|
|
|
+ height: calc(100% - 30px);
|
|
|
+ }
|
|
|
+ /deep/textarea {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ /deep/.van-cell {
|
|
|
+ line-height: 21px;
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ padding: 0 5px;
|
|
|
+ background-color: #f4f4f4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgTit {
|
|
|
+ margin: 20px 0;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ .rightInco {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ color: #c2c2c2;
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ & > img {
|
|
|
+ width: 20px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .topicBox {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .topic {
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 17px;
|
|
|
+ border: 1px solid #393939;
|
|
|
+ min-width: 60px;
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 34px;
|
|
|
+ line-height: 32px;
|
|
|
+ margin-right: 16px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ .topicAc {
|
|
|
+ border: none;
|
|
|
+ line-height: 34px;
|
|
|
+ background-color: #ff7e89;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .locationBox {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .location {
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 17px;
|
|
|
+ border: 1px solid #393939;
|
|
|
+ min-width: 60px;
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 34px;
|
|
|
+ line-height: 32px;
|
|
|
+ margin-right: 16px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ }
|
|
|
+ .locationAc {
|
|
|
+ border: none;
|
|
|
+ line-height: 34px;
|
|
|
+ background-color: #b5d4ff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upFile {
|
|
|
+ margin: 20px 0 40px;
|
|
|
+ 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%;
|
|
|
+ }
|
|
|
+ .imgRow {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 6px;
|
|
|
+ & > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ .delImg {
|
|
|
+ position: absolute;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ top: -6px;
|
|
|
+ right: -6px;
|
|
|
+ background-image: url("../../../assets/img/interact/del.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .imgCover {
|
|
|
+ pointer-events: none;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ background-image: url("../../../assets/img/interact/bg.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
