投诉建议

src/router/index.js

@@ -210,15 +210,27 @@ const routes = [{
         },
         component: () => import('../views/Interact/index.vue')
       },
-
+      /**
+       * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+       */
       {
         path: '/layout/my',
         name: 'my',
         meta: {
-          myInd: 4
+          myInd: 4,
+          myTitle: '',
         },
         component: () => import('../views/My/index.vue')
-      }
+      },
+      {
+        path: '/layout/my/feedback',
+        name: 'Feedback',
+        meta: {
+          myInd: 4,
+          myTitle: '投诉建议',
+        },
+        component: () => import('../views/My/Feedback.vue')
+      },
     ]
   },
 ]

src/views/My/Feedback.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="feedback">
+    <div class="text-card card">
+      <div class="title-bar bar">
+        <div class="key">主题：</div>
+        <input type="text">
+      </div>
+      <textarea name="" id="" rows="8" minlength="10" maxlength="150"
+        placeholder="请填写10个字以上的描述，以便我们提供更好的帮助。"
+      ></textarea>
+    </div>
+
+    <div class="photo-card card">
+      <div class="key">
+        截图 0 / 4
+      </div>
+      <button class="input-photo">
+        <img class="" src="@/assets/img/my/camera.png" alt="" draggable="false">
+      </button>
+      <div class="phone-bar bar">
+        <div class="key">联系方式</div>
+        <input type="text" placeholder="手机号 / 邮箱">
+      </div>
+    </div>
+
+    <button class="submit">
+      <img class="" src="@/assets/img/my/submit.png" alt="" draggable="false">
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.feedback {
+  background: #F5F5F5;
+  height: calc(100% - 80px);
+  overflow: auto;
+  position: relative;
+  > .card {
+    background-color: #fff;
+    margin-top: 3.2vw;
+    padding: 5vw 4.5vw 5.5vw 4.5vw;
+  }
+  .key {
+    font-size: 3.5vw;
+    font-weight: bold;
+    color: #000000;
+    line-height: 4vw;
+    margin-right: 5.3vw;
+  }
+  .bar {
+    display: flex;
+    align-items: center;
+    padding-bottom: 2.5vw;
+    border-bottom: 0.3vw solid #DCDCDC;
+  }
+  input {
+    font-size: 3.2vw;
+    color: #000000;
+    line-height: 4vw;
+  }
+
+  .text-card {
+    .title-bar {
+      .key {
+        flex: 0 0 auto;
+      }
+      input.text {
+        flex: 1 0 1px;
+      }
+    }
+    > textarea {
+      margin-top: 2.8vw;
+      width: 100%;
+      border: none;
+      resize: none;
+    }
+  }
+
+  .photo-card {
+    .key {
+    }
+    > button.input-photo {
+      margin-top: 2.8vw;
+      width: 15.5vw;
+      height: 15.5vw;
+      background: #f0f2f5;
+      border-radius: 1.3vw;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      > img {
+        width: 6.0vw;
+        height: 4.7vw;
+      }
+    }
+    .phone-bar {
+      margin-top: 13.6vw;
+      .key {
+        flex: 0 0 auto;
+      }
+      > input.text {
+        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%;
+    }
+  }
+}
+</style>

src/views/My/index.vue

@@ -19,6 +19,7 @@
       class="entry"
       v-for="(item, index) in entryList"
       :key="index"
+      @click="item.fn"
     >
       <img class="icon" :src="item.icon" alt="" draggable="false">
       <div class="name">{{item.name}}</div>
@@ -72,6 +73,7 @@ data() {
       {
         icon: require('@/assets/img/service/booking-check.png'),
         name: '我的预约',
+        fn: this.onClickFeedback,
       },
     ]
   }
@@ -79,7 +81,9 @@ data() {
 computed: {},
 watch: {},
 methods: {
-
+  onClickFeedback() {
+    this.$router.push({name: 'Feedback'})
+  }
 },
 created() {