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

<template>
  <div class="mobile-fix-content user-info">
    <div class="info">
      <div class="line">
        <input type="file"
               class="file-input"
               name="name"
               accept="image/*"
               @change="uploadImg"
               multiple
        />
        <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-id"></i>UU号：</span>
        <span class="describe">{{info.userUU}}</span>
      </div>
      <div class="line" @click="jumpSet('email')">
        <span><i class="iconfont icon-youxiang"></i>邮箱：</span>
        <span class="describe">{{info.userEmail}}
        <i class="iconfont icon-xiangyou"></i>
        </span>
      </div>
      <div class="line" @click="jumpSet('mobile')">
        <span><i class="iconfont icon-shouji"></i>手机：</span>
        <span class="describe">{{info.userTel}}
        <i class="iconfont icon-xiangyou"></i>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      info: {
        default: {},
        type: Object
      }
    },
    data () {
      return {
        imageUploadUrl: ''
      }
    },
    mounted: function () {
      this.$nextTick(() => {
        if (!this.$store.state.option.user.logged) {
          this.$router.push('/auth/login?returnUrl=' + window.location.href)
        }
      })
    },
    computed: {
      getEmail () {
        return this.$store.state.user.updateUser.email.data.content
      },
      getMobile () {
        return this.$store.state.user.updateUser.mobile.data.content
      }
    },
    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')
                    }
                  })
              }
            })
        }
      },
      jumpSet (info) {
        if (info === 'email') {
          window.location.href = decodeURIComponent(this.getEmail)
        } else if (info === 'mobile') {
          window.location.href = decodeURIComponent(this.getMobile)
        }
      }
    }
  }
</script>
<style lang="scss">
  .mobile-fix-content {
    background: #f1f3f6;
  }
  .user-info {
    .info {
      width: 7.1rem;
      background: #fff;
      margin: 0 auto;
      height: 5.82rem;
      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: #226ce7;
          text-align: left;
          i{
            margin-right: .15rem;
            font-size: .38rem;
            color: #f8953c;
          }
          i.icon-id{
            font-size: .46rem;
          }
          i.icon-tuxiang-{
            font-size: .32rem;
          }
        }
        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>