个人信息调整

app.html

@@ -6,7 +6,7 @@
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" />
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css" />
   <!--<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_0d1jjt5tukcblnmi.css"/>-->
-  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_cwq6wcut03gl23xr.css">
+  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_0c0tncbpq6umzpvi.css">
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" />
   {{ HEAD }}
   <script>

components/mobile/user/Info.vue

@@ -2,16 +2,26 @@
   <div class="mobile-fix-content">
     <div class="info">
       <div class="line">
-        <span>用户名：</span>
-        {{info.userName}}
+        <input type="file"
+               class="file-input"
+               name="name"
+               accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png"
+               @change="uploadImg"/>
+        <span><i class="iconfont icon-tuxiang-" style="font-size: .29rem;"></i>头像：</span>
+        <span class="describe"><img :src="imageUploadUrl ? imageUploadUrl : info.imageUrl ? info.imageUrl : '/images/component/default.png'" alt="">
+          <i class="iconfont icon-xiangyou"></i></span>
       </div>
       <div class="line">
-        <span>手机：</span>
-        {{info.userTel}}
+        <span><i class="iconfont icon-yonghuming"></i>用户名：</span>
+        <span class="describe">{{info.userName}}</span>
       </div>
       <div class="line">
-        <span>邮箱：</span>
-        {{info.userEmail}}
+        <span><i class="iconfont icon-youxiang"></i>邮箱：</span>
+        <span class="describe">{{info.userEmail}}</span>
+      </div>
+      <div class="line">
+        <span><i class="iconfont icon-shouji"></i>手机：</span>
+        <span class="describe">{{info.userTel}}</span>
       </div>
     </div>
   </div>
@@ -23,10 +33,39 @@
         default: {},
         type: Object
       }
+    },
+    data () {
+      return {
+        imageUploadUrl: ''
+      }
+    },
+    methods: {
+      uploadImg (e) {
+        let file = e.target.files[0]
+        if (file) {
+          let param = new FormData()
+          param.append('image', file, file.name)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/api/images', param, config)
+            .then(response => {
+              if (response.data) {
+                let imageUrl = response.data[0].path
+                this.$http.post('/basic/user/setImageUrl', {imageUrl: imageUrl})
+                  .then(response => {
+                    if (response.data) {
+                      this.imageUploadUrl = response.data.imageUrl
+                    }
+                  })
+              }
+            })
+        }
+      }
     }
   }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
   .mobile-fix-content {
     background: #f1f3f6;
   }
@@ -34,13 +73,14 @@
     width: 7.1rem;
     background: #fff;
     margin: 0 auto;
-    height: 3.5rem;
+    height: 4.66rem;
     padding: 0 .24rem;
     font-size: .28rem;
     color: #999;
     border-radius: .05rem;
     margin-top: .3rem;
     .line {
+      position: relative;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -50,11 +90,37 @@
       &:last-child {
         border-bottom: none;
       }
-      span {
-        margin-left: .56rem;
+      input{
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 1.16rem;
+        width: 100%;
+        opacity: 0;
+      }
+      span{
         display: inline-block;
-        width: 1.2rem;
-        text-align: right;
+        font-size: 0.28rem;
+        color: #999;
+        text-align: left;
+        i{
+          margin-right: .15rem;
+          font-size: .3rem;
+          color: #f8953c;
+        }
+      }
+      span.describe {
+        float: right;
+        color: #333;
+        i{
+          margin: 0 0 0 .1rem;
+          font-size: .24rem;
+          color: #000;
+        }
+        img{
+          width: .43rem;
+          height: .43rem;
+        }
       }
     }
   }

pages/mobile/user/index.vue

@@ -7,12 +7,15 @@
       </p>
     </div>
     <div class="mobile-user mobile-fix-content">
-      <div class="line img-line">
+      <nuxt-link to="/mobile/user/info/personal" tag="div" class="line img-line">
         <div class="img-wrap">
-          <img src="/images/component/default.png" alt="">
+          <img :src="user.data.imageUrl ? user.data.imageUrl : '/images/component/default.png'" alt="" class="photo"/>
         </div>
         <span>{{user.data.userName}}</span>
-      </div>
+        <span class="edit" to="/mobile/user/info/personal">
+          <img src="/images/mobile/user/edit.png" alt=""/>
+        </span>
+      </nuxt-link>
       <div class="line" @click="showLogin=true">
         <div class="img-wrap">
           <img src="/images/mobile/user/icon_01.png" alt="">
@@ -36,14 +39,14 @@
         <i class="iconfont icon-xiangyou"></i>
         <div class="border-line"></div>
       </div>
-      <nuxt-link to="/mobile/user/info/personal" tag="div" class="line block-line">
-        <div class="img-wrap">
-          <img src="/images/mobile/user/icon_04.png" alt="">
-        </div>
-        <span>个人信息</span>
-        <i class="iconfont icon-xiangyou"></i>
-        <div class="border-line"></div>
-      </nuxt-link>
+      <!--<nuxt-link to="/mobile/user/info/personal" tag="div" class="line block-line">-->
+        <!--<div class="img-wrap">-->
+          <!--<img src="/images/mobile/user/icon_04.png" alt="">-->
+        <!--</div>-->
+        <!--<span>个人信息</span>-->
+        <!--<i class="iconfont icon-xiangyou"></i>-->
+        <!--<div class="border-line"></div>-->
+      <!--</nuxt-link>-->
       <div @click="go('/mobile/user/info/admin')" class="line block-line">
         <div class="img-wrap">
           <img src="/images/mobile/user/icon_05.png" alt="">
@@ -168,10 +171,19 @@
           max-width: .8rem;
           max-height: .8rem;
         }
+        img.photo {
+          width: 1.27rem;
+          height: 1.27rem;
+        }
+      }
+      span.edit img{
+        float: right;
+        margin-top: .43rem;
+        width: .3rem;
+        height: .3rem;
       }
       .l-right {
         color: #666;
-        float: right;
         margin-right: .35rem;
         max-width: 4.8rem;
         text-align: right;