feedback

src/sass/AppHome/AppHome.vue

@@ -21,7 +21,7 @@ export default {
 
   data() {
     return {
-      component: 'statistics',
+      component: 'home',
       params: {},
       refresh: true,
       tabIndex: 0,

src/sass/AppHome/feedback.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="feedback">
+    <div class="suggest">
+        <div class="title">请输入您的宝贵意见</div>
+        <textarea v-model="content" placeholder="请输入（500字以内）" placeholder-style="font-size: 16px;"></textarea>
+    </div>
+    <div class="space"></div>
+    <div class="photo">
+      <div class="photo-title">图片 <span>（最多9张）</span></div>
+      <div class="pad-120">
+        <AiUploader :limit="9" multiple :def.sync="picture" placeholder="上传图片"></AiUploader>
+      </div>
+    </div>
+    <div style="height: 56px;"></div>
+    <div class="btn" @click="submit">保存</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'feedback',
+
+  data() {
+    return {
+      content: '',
+      picture: []
+    }
+  },
+
+  methods: {
+    submit() {}
+  },
+  onShow() {
+    document.title = '意见反馈'
+    
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.feedback {
+  .suggest {
+    padding: 0 30px;
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+
+    .title {
+      width: 100%;
+      height: 120px;
+      line-height: 120px;
+      font-size: 32px;
+      color: #333333;
+    }
+  }
+
+  .space {
+    width: 100%;
+    height: 16px;
+    background-color: #F5F5F5;
+  }
+
+  .photo {
+    background-color: #FFFFFF;
+    padding: 20px 30px;
+
+    .photo-title {
+      width: 100%;
+      height: 100px;
+      line-height: 80px;
+      color: #333333;
+
+      & > span {
+        color: #999999;
+      }
+    }
+
+    .pad-120 {
+      // padding-left: 20px;
+    }
+  }
+
+  .btn {
+    position: fixed;
+    bottom: 0px;
+    left: 0px;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    background-color: #1365DD;
+    color: #FFFFFF;
+  }
+
+}
+</style>

src/sass/AppHome/my.vue

@@ -21,14 +21,54 @@
               <div class="grid-name"><span>长港路网格二</span></div>
               <div class="grid-name"><span>长港路网格三</span></div>
             </div>
-            <div class="arrow-right"><u-icon name="arrow-right"></u-icon></div>
+            <div class="arrow-right" @click="more"><u-icon name="arrow-right"></u-icon></div>
           </div>
         </div>
       </div>
     </div>
-    <!--  -->
+    <!-- 选项 -->
+    <div class="option">
+      <div class="option-item">
         <div>
+          <img src="./components/img/txsc@2x.png" alt="" class="option-img">
         </div>
+        <div class="option-info">
+          <div class="option-text">头像上传</div>
+          <div class="option-icon" @click="upload">
+            <u-icon name="arrow-right" size="28"></u-icon>
+          </div>
+        </div>
+      </div>
+      <div class="option-item">
+        <div>
+          <img src="./components/img/yjfk@2x.png" alt="" class="option-img">
+        </div>
+        <div class="option-info">
+          <div class="option-text">意见反馈</div>
+          <div class="option-icon" @click="feedback">
+            <u-icon name="arrow-right" size="28"></u-icon>
+          </div>
+        </div>
+      </div>
+      <div class="option-item">
+        <div>
+          <img src="./components/img/lxwm@2x.png" alt="" class="option-img">
+        </div>
+        <div class="option-info">
+          <div class="option-text">联系我们</div>
+          <div class="option-icon" @click="contactUs">
+            <u-icon name="arrow-right" size="28"></u-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 头像上传遮罩层 -->
+    <u-popup v-model="show" mode="bottom" border-radius="0">
+			<div class="btn-pat">拍照</div>
+			<div class="btn-album">从相册选择</div>
+      <div class="space"></div>
+      <div class="btn-cancel">取消</div>
+		</u-popup>
   </div>
 </template>
 
@@ -38,22 +78,31 @@ export default {
 
   data() {
     return {
-      
+      show: false,
     }
   },
 
   methods: {
+    upload() {
+      this.show = true
+    },
 
+    feedback() {
+      uni.navigateTo({url: './feedback'})
+    },
+
+    contactUs() {}
   },
   onShow() {
     document.title = '个人中心'
-    
   },
 }
 </script>
 
 <style lang="scss" scoped>
 .my {
+  background-color: #fff;
+  
   .card {
     position: relative;
     height: 458px;
@@ -140,5 +189,60 @@ export default {
     }
   }
 
+  .option {
+    margin-top: 64px;
+background-color: #fff;
+
+    .option-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      width: 100%;
+      height: 104px;
+      box-sizing: border-box;
+      padding: 0 30px;
+
+      .option-img {
+          width: 50px;
+       }
+
+      .option-info {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+
+        .option-text {
+          font-size: 20px;
+        }
+
+        .option-icon {
+          padding-left: 100px;
+        }
+      }
+      
+    }
+  }
+
+  .btn-pat,
+  .btn-album,
+  .btn-cancel {
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+  }
+
+  .btn-pat {
+    border-bottom: 1px solid #DDDDDD;
+  }
+
+  .space {
+    width: 100%;
+    height: 16px;
+    background-color: #F5F5F5;
+  }
+
+
+
 }
 </style>