chat/_src/pages/h5/view/editMe.vue

<template>
  <div class="edit-me" v-if="userInfo">
    <back-bar :title="$t('h5.editInfo')"></back-bar>
    <div class="edit-list">
      <div class="item avatar-item">
        <input type="file" accept="image/jpeg,image/png,image/jpg" @change="uploadImg($event)"/>
        <span class="title">{{$t('h5.avatar')}}</span>
        <div class="cont">
          <img class="user-avatar" @click.stop="$showImgPreview(userInfo.cover_photo)" v-if="userInfo.cover_photo" :src="userInfo.cover_photo" alt="">
          <div v-else class="user-avatar"
          :class="'avatar_bg' + userInfo.user_id % 9"
          :data-name="userInfo.nick_name.slice(0,2).toUpperCase()"
          ></div>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="item" @click="editName">
        <span class="title">{{$t('h5.nickname')}}</span>
        <span class="cont">
          {{userInfo.nick_name}} <i class="el-icon-arrow-right"></i>
        </span>
      </div>
      <div class="item" @click="editUserId">
        <span class="title">{{$t('h5.username')}}</span>
        <span class="cont">
          {{userInfo.user_name}}<i class="el-icon-arrow-right"></i>
        </span>
      </div>
    </div>
    <cropper v-bind="cropperOption" @close="cropperClose" @cropper="cropperSubmit"></cropper>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import backBar from '@/components/backBar'
import cropper from '../components/cropper'
import { avatarMixin } from '../mixins/index'

export default {
  name: 'editMe',
  mixins: [avatarMixin],
  components: {
    backBar,
    cropper
  },
  data () {
    return {
      isMe: true
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    ...mapActions(['getUserInfo']),
    editName () {
      this.$router.push('/editInfo/nickname')
    },
    editUserId () {
      this.$router.push('/editInfo/username')
    }
  },
  created () {
    if (!this.userInfo) {
      this.getUserInfo()
    }
  }
}
</script>

<style lang="scss" scoped>
input[type=file]{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  opacity: 0;
  z-index: 1;
}
.edit-list{
  background-color: #ffffff;
  .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 px2rem(20);
    height: px2rem(106);
    line-height: px2rem(106);
    position: relative;
    &.avatar-item{
      height: px2rem(166);
      line-height: px2rem(166);
    }
    &::after{
      content: '';
      position: absolute;
      height: 1px;
      background-color: #d8d8d8;
      right: 0;
      bottom: 0;
      left: px2rem(20);
    }
    &:last-child{
      &::after{
        display: none;
      }
    }
  }
  .title{
    font-size: px2rem(28);
    color: #000;
  }
  .cont{
    color: #999999;
    font-size: px2rem(28);
    i{
      display: inline-block;
      vertical-align: middle;
      margin-left: px2rem(10);
    }
    .user-avatar{
      position: relative;
      width: px2rem(120);
      height: px2rem(120);
      line-height: px2rem(120);
      z-index: 2;
      vertical-align: middle;
      display: inline-block;
    }
  }
}
</style>