up

src/router/index.js

@@ -41,6 +41,16 @@ const routes = [{
     name: 'goodsPlay',
     component: () => import('../views/Goods/components/GoodsPlay.vue')
   },
+  // 悦·互动发布
+  {
+    path: '/layout/interact/issue',
+    name: 'interactIssue',
+    meta: {
+      myInd: 3,
+      myTitle: '悦·互动发布'
+    },
+    component: () => import('../views/Interact/components/InteractIssue.vue')
+  },
   {
     path: '/layout',
     name: 'layout',
@@ -84,10 +94,11 @@ const routes = [{
         name: 'interact',
         meta: {
           myInd: 3,
-          myTitle:'悦·互动'
+          myTitle: '悦·互动'
         },
         component: () => import('../views/Interact/index.vue')
       },
+
       {
         path: '/layout/my',
         name: 'my',

src/views/Interact/components/InteractIssue.vue

@@ -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>

src/views/Interact/index.vue

@@ -30,7 +30,7 @@
     </div>
     <!-- +号 -->
     <div class="issue">
-      <img src="../../assets/img/interact/issue.png" alt="" />
+      <img src="../../assets/img/interact/issue.png" alt="" @click="$router.push('/layout/interact/issue')"/>
     </div>
     
   </div>