投诉建议功能

yfyc/src/views/My/Feedback.vue

@@ -3,10 +3,11 @@
     <div class="text-card card">
       <div class="title-bar bar">
         <div class="key">主题：</div>
-        <input type="text">
+        <input v-model="title" type="text">
       </div>
       <textarea name="" id="" rows="8" minlength="10" maxlength="150"
         placeholder="请填写10个字以上的描述，以便我们提供更好的帮助。"
+        v-model="desc"
       ></textarea>
     </div>
 
@@ -14,28 +15,150 @@
       <div class="key">
         截图 0 / 4
       </div>
-      <button class="input-photo">
+      <input
+        type="file"
+        accept=".png,.jpg,.gif"
+        ref="myInput"
+        @input="handeUpPhoto"
+        v-show="0"
+      />
+      <button
+        class="input-photo"
+        @click="$refs.myInput.click()"
+        v-show="imgList.length < 5"
+      >
         <img class="" src="@/assets/img/my/camera.png" alt="" draggable="false">
       </button>
+      <Draggable
+        class="moveDraggable"
+        :class="{ moveDraggableAll: imgList.length === 5 }"
+        v-model="imgList"
+        group="itxst"
+        animation="300"
+      >
+        <transition-group>
+          <div class="imgRow" v-for="(item, index) in imgList" :key="item.id">
+            <img
+              :src="baseURL + item.filePath"
+              alt=""
+              @click="lookImg(baseURL + item.filePath)"
+            />
+            <!-- 删除 -->
+            <div class="delImg" @click="delImg(item.id)"></div>
+          </div>
+        </transition-group>
+      </Draggable>
+
+
       <div class="phone-bar bar">
         <div class="key">联系方式</div>
-        <input type="text" placeholder="手机号 / 邮箱">
+        <input v-model="contact" type="text" placeholder="手机号 / 邮箱">
       </div>
     </div>
 
-    <button class="submit">
-      <img class="" src="@/assets/img/my/submit.png" alt="" draggable="false">
-    </button>
+    <div class="submit-wrap">
+      <button
+        class="submit"
+        :class="{
+          active: canSubmit,
+        }"
+        @click="onSubmit"
+      >
+        <div>提交</div>
+      </button>
+    </div>
   </div>
 </template>
 
 <script>
+import { baseURL } from "@/utils/request";
+import {
+  uploadImgAPI,
+  delImgAPI,
+} from "@/api/interact.js";
+import { Toast } from "vant";
+//导入draggable组件
+import Draggable from "vuedraggable";
+import { Dialog, ImagePreview } from "vant";
+
 export default {
+  components: { Draggable },
   data() {
     return {
-      
+      title: '',
+      desc: '',
+      contact: '',
+      baseURL,
+      imgList: [
+        // {
+        //   id: 65,
+        //   fileName: "22222.jpg",
+        //   filePath: "/comment/img/20221125_1113069452.jpg",
+        // },
+      ],
     }
   },
+  computed: {
+    canSubmit() {
+      return this.title && this.desc && this.imgList.length && this.contact
+    },
+  },
+  methods: {
+    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);
+      }
+    },
+    lookImg(url) {
+      ImagePreview({
+        images: [url],
+        showIndex: false,
+      });
+    },
+    // 点击删除图片
+    delImg(id) {
+      Dialog.confirm({
+        title: "确定删除吗?",
+        beforeClose: async (action, done) => {
+          if (action === "confirm") {
+            await delImgAPI(id);
+            // 点击了确定
+            this.imgList = this.imgList.filter((v) => v.id !== id);
+            Toast.success("删除成功!");
+          }
+          done();
+        },
+      });
+    },
+    onSubmit() {
+      Toast.success("提交成功!");
+      setTimeout(() => {
+        this.$router.go(-1)
+      }, 1500);
+    }
+  }
 }
 </script>
 
@@ -103,6 +226,42 @@ export default {
         height: 4.7vw;
       }
     }
+    .moveDraggable {
+      margin-top: 10px;
+      width: 100%;
+    }
+    .moveDraggableAll {
+      width: 100%;
+    }
+    .moveDraggable span {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .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%;
+      }
+    }
+
+
+
     .phone-bar {
       margin-top: 13.6vw;
       .key {
@@ -112,18 +271,31 @@ export default {
         flex: 1 0 1px;
       }
     }
+
   }
 
-  > button.submit {
-    position: absolute;
-    left: 50%;
-    bottom: 9.5vw;
-    transform: translateX(-50%);
-    width: 42.7vw;
-    height: 8vw;
-    > img {
-      width: 100%;
-      height: 100%;
+  > .submit-wrap {
+    margin-top: 5.2vw;
+    margin-bottom: 5.2vw;
+    text-align: center;
+    > button.submit {
+      position: relative;
+      width: 42.7vw;
+      height: 8.0vw;
+      border-radius: 4.0vw;
+      background: gray;
+      &.active {
+        background: linear-gradient(180deg, #FF615C 9%, #FF9877 100%);
+      }
+      > div {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 3.2vw;
+        font-weight: bold;
+        color: #FFFFFF;
+      }
     }
   }
 }

yfyc/src/views/Serve/Booking.vue

@@ -76,20 +76,21 @@
       </button>
     </div>
 
-    <BookingSuccess v-if="isShowSuccess"
-    :bookingYear="bookingYear"
-    :bookingMonth="bookingMonth"
-    :bookingDay="bookingDay"
-    :bookingHour="bookingHour"
-    :bookingMinute="bookingMinute"
-    :bookingSecond="bookingSecond"
-    :year="year"
-    :month="month"
-    :day="day"
-    :weekDay="weekDay"
-    :time="timeList[timeIdx]?.time"
-    :number="number"
-    @close="$router.go(-1)"
+    <BookingSuccess
+      v-if="isShowSuccess"
+      :bookingYear="bookingYear"
+      :bookingMonth="bookingMonth"
+      :bookingDay="bookingDay"
+      :bookingHour="bookingHour"
+      :bookingMinute="bookingMinute"
+      :bookingSecond="bookingSecond"
+      :year="year"
+      :month="month"
+      :day="day"
+      :weekDay="weekDay"
+      :time="timeList[timeIdx]?.time"
+      :number="number"
+      @close="$router.go(-1)"
     ></BookingSuccess>
   </div>
 </template>