upp

yfyc/src/api/interact.js

@@ -2,6 +2,31 @@ import axios from '../utils/request'
 // 登录----
 export const getCodeAPI = (code) => {
   return axios({
-    url: `wxMini/mp/wxLogin/${code}`,
+    url: `wx/wxLogin/${code}`,
   })
-}
+}
+
+// 上传图片
+export const uploadImgAPI = (fd) => {
+  return axios({
+    method: 'post',
+    url: 'cms/comment/upload',
+    data:fd
+  })
+}
+
+// 删除图片
+export const delImgAPI = (id) => {
+  return axios({
+    url: `cms/comment/delFile/${id}`,
+  })
+}
+
+// 建筑可对话发布
+export const shareSaveAPI = (data) => {
+  return axios({
+    method: 'post',
+    url: 'cms/share/save',
+    data
+  })
+}

yfyc/src/utils/request.js

@@ -1,7 +1,10 @@
 import axios from 'axios'
+import { Toast } from "vant";
+export const baseURL = process.env.NODE_ENV === 'development' ? 'http://192.168.20.55:8037/api' : ''
+//export const baseURL = process.env.NODE_ENV === 'development' ? 'http://192.168.20.55:8037/api' : ''
+
 const service = axios.create({
-  baseURL: process.env.NODE_ENV === 'development' ? 'http://192.168.20.55:8037/api' : '',
-  // baseURL: process.env.NODE_ENV === 'development' ? 'https://hnbwg.4dage.com/api' : '',
+  baseURL: baseURL,
   timeout: 5000
 })
 // 请求拦截器
@@ -10,6 +13,7 @@ service.interceptors.request.use(function (config) {
   // 在发送请求之前做些什么：看看有没有token，如果有通过请求头的方式传递token
   const token = localStorage.getItem('YFYC_token')
   if (token) { // 判断是否有token,有，则
+
     // config.headers['Authorization'] = token
     config.headers.token = token
   }
@@ -30,6 +34,7 @@ service.interceptors.response.use(function (response) {
   }
   return response.data
 }, function (error) {
+  Toast.fail(error.message);
   // 对响应错误做点什么
   return Promise.reject(error)
 })

yfyc/src/views/Construct/components/search.vue

@@ -46,7 +46,7 @@ export default {
       txt: '',
       data: [
         { id: 1, name: '全部', done: false, children: [{ id: 1001, name: '芜湖老海关' }] },
-        { id: 2, name: '镜湖', done: false, children: [] },
+        { id: 2, name: '镜湖', done: false, children: [{ id: 1001, name: '芜湖老海关' }] },
         { id: 3, name: '鸠江', done: false, children: [] },
         { id: 4, name: '弋江', done: false, children: [] },
         { id: 5, name: '湾沚', done: false, children: [] },

yfyc/src/views/Goods/index.vue

@@ -15,7 +15,7 @@
           />
         </van-swipe-item>
       </van-swipe>
-      <div class="title_rr">
+      <div class="title_rr" v-show="0">
         <div>
           <img src="../../assets/img/goods/inco1.png" alt="" />
           <p>130</p>
@@ -307,7 +307,7 @@ export default {
   methods: {
     toPage(path) {
       if (!path) return Toast("敬请期待!");
-      this.$router.push(item.path);
+      this.$router.push(path);
     },
 
     videoPlayFu() {

yfyc/src/views/Interact/components/InteractIssue.vue

@@ -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,68 +34,90 @@
       </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 />最多可上传5张图片。
+    </div>
     <!-- 发布按钮 -->
     <div class="issueBtn" @click="issueDone">发 布</div>
+
+    <!-- 点击定位之后出来的页面 -->
+    <Location
+      v-show="LocationShow"
+      @closeLoc="LocationShow = false"
+      @setLocationInfo="setLocationInfo"
+    />
+    <!-- 上传出现的loading -->
+    <div class="loading" v-show="loading">
+      <van-loading color="#1989fa" />
+    </div>
   </div>
 </template>
 
 <script>
+import { baseURL } from "@/utils/request";
+import { uploadImgAPI, shareSaveAPI,delImgAPI } 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: [
@@ -101,40 +127,91 @@ export default {
         { 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,
+      loading: false,
       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!");
+        }
+        this.loading = true;
+        // 创建FormData对象
+        const fd = new FormData();
+        // 把files添加进FormData对象（‘photo’为后端需要的字段）
+        fd.append("file", filesInfo);
+        fd.append("type", "img");
+        const res = await uploadImgAPI(fd);
+        this.loading = false;
+        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(" ", "&ensp;"),
+        dictPlaceId: 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,10 +219,12 @@ 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();
         },
@@ -169,7 +248,18 @@ export default {
   height: 100%;
   padding: 20px 15px;
   overflow-y: auto;
-
+  .loading {
+    background-color: rgba(0, 0, 0, 0.4);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 11;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
   /deep/.van-cell {
     width: 100%;
     height: 36px;
@@ -277,6 +367,7 @@ export default {
       line-height: 32px;
       margin-right: 16px;
       margin-bottom: 12px;
+      text-align: center;
     }
     .locationAc {
       border: none;
@@ -290,18 +381,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 +437,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;

yfyc/src/views/Interact/components/interactLocation.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="interactLocation">
+    <!-- 关闭按钮 -->
+    <div class="close" @click="$emit('closeLoc')"><van-icon name="cross" /></div>
     <!-- 输入框 -->
-    <div class="inputBox" @keydown.enter="searchFu()">
+    <div class="inputBox" @keydown.enter="searchFu()" v-show="0">
       <div class="searInco" @click="searchFu()">
         <van-icon name="search" />
       </div>
       <van-field maxlength="20" v-model="txt" placeholder="搜索位置" />
     </div>
     <div class="locationBox">
-      <div class="row" v-for="item in locationData" :key="item.id">
+      <div class="row" v-for="item in locationData" :key="item.id" @click="$emit('setLocationInfo',item)">
         <h3>{{item.name}}</h3>
         <div class="row_floo">
           <div class="row_flooLL">{{item.loc}}</div>
@@ -57,11 +59,22 @@ export default {
 </script>
 <style lang='less' scoped>
 .interactLocation {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
   width: 100%;
   height: 100%;
   padding: 10px 15px 40px;
   overflow-y: auto;
-
+  background-color: #fff;
+  .close{
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    font-size: 24px;
+    color: black;
+  }
   .inputBox {
     margin: 0px auto;
     width: 100%;

yfyc/src/views/Interact/index.vue

@@ -49,7 +49,6 @@
 </template>
 
 <script>
-import { Toast } from "vant";
 import { getCodeAPI } from "@/api/interact.js";
 export default {
   components: {},
@@ -57,11 +56,10 @@ export default {
     return {
       txt: "",
       bsData: [
-        { id: 1, name: "梦幻游乐王国" },
-        { id: 2, name: "古建筑" },
-        { id: 3, name: "美食" },
-        { id: 4, name: "周边风景游玩" },
-        { id: 5, name: "美景" },
+        { id: 1, name: "景点" },
+        { id: 2, name: "美食" },
+        { id: 3, name: "游玩" },
+        { id: 4, name: "酒店" },
       ],
       spotData: [
         {
@@ -132,9 +130,11 @@ export default {
           "YFYC_userInfo",
           JSON.stringify({ ...res.data.wxUser, time: Date.now() })
         );
-      } else {
-        Toast.fail("登录失败，请联系管理人员");
-      }
+        this.$router.push("/layout/interact/issue");
+      } 
+      // else {
+      //   Toast.fail("登录失败，请联系管理人员");
+      // }
     }
   },
   mounted() {},