mall-web-ssr/components/mobile/user/Info.vue

<template>
  <div class="mobile-fix-content">
    <div class="info">
      <div class="line">
        <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><i class="iconfont icon-yonghuming"></i>用户名：</span>
        <span class="describe">{{info.userName}}</span>
      </div>
      <div class="line">
        <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>
</template>
<script>
  export default {
    props: {
      info: {
        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
                      this.$store.dispatch('loadUserInfo')
                    }
                  })
              }
            })
        }
      }
    }
  }
</script>
<style lang="scss">
  .mobile-fix-content {
    background: #f1f3f6;
  }
  .info {
    width: 7.1rem;
    background: #fff;
    margin: 0 auto;
    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;
      height: 1.16rem;
      line-height: 1.16rem;
      border-bottom: .01rem solid #d9d9d9;
      &:last-child {
        border-bottom: none;
      }
      input{
        position: absolute;
        top: 0;
        left: 0;
        height: 1.16rem;
        width: 100%;
        opacity: 0;
      }
      span{
        display: inline-block;
        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: #bebebe;
        }
        img{
          width: .58rem;
          height: .58rem;
          border: 1px solid #bebebe;
        }
      }
    }
  }
</style>