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

<template>
  <div class="edit-me">
    <back-bar title="编辑资料"></back-bar>
    <div class="edit-list">
      <div class="item avatar-item">
        <span class="title">头像</span>
        <div class="cont">
          <img class="user-avatar" @click="$editUserAvatar(userInfo.cover_photo)" v-if="userInfo.cover_photo" :src="userInfo.cover_photo" alt="">
          <div v-else class="user-avatar"
          @click="$editUserAvatar"
          :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">昵称</span>
        <span class="cont">
          {{userInfo.nick_name}} <i class="el-icon-arrow-right"></i>
        </span>
      </div>
      <div class="item" @click="editUserId">
        <span class="title">ID</span>
        <span class="cont">
          {{userInfo.user_name}}<i class="el-icon-arrow-right"></i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import backBar from '@/components/backBar'
import API from '@/api'
import { Upload, MessageBox } from 'element-ui'
import Vue from 'vue'

Vue.component(Upload.name, Upload)

export default {
  name: 'editMe',
  components: {
    backBar
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      userInfo: state => {
        return state.userInfo
      }
    })
  },
  methods: {
    editName () {
      MessageBox.prompt('', '修改昵称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: this.userInfo.nick_name
      }).then(({ value }) => {
        if (value.length) {
          API.user.changeNickName({
            nick_name: value
          }).then(({ data }) => {
            this.$store.commit('setUserNickName', value)
            this.$store.commit('updateMemberNickName', {
              userId: this.$store.state.userId,
              nickName: value
            })
            this.$showTips('修改成功')
          })
        }
      }).catch(() => {
      })
    },
    editUserId () {
      MessageBox.prompt('', '修改ID', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: this.userInfo.user_name,
        inputPattern: /^[a-zA-Z_0-9-]{5,36}$/i,
        inputErrorMessage: '只能是5-36位数字字母下划线'
      }).then(({ value }) => {
        if (value.length) {
          API.user.changeUserName({
            user_name: value
          }).then(({ data }) => {
            this.$store.commit('setUserUserName', value)
            this.$store.commit('updateMemberNickName', {
              userId: this.$store.state.userId,
              userName: value
            })
            this.$showTips('修改成功')
          })
        }
      }).catch(() => {
      })
    }
  },
  created () {
  }
}
</script>

<style lang="scss" scoped>
.edit-list{
  background-color: #ffffff;
  .item{
    &.avatar-item{
      height: px2rem(166);
      line-height: px2rem(166);
    }
    padding: 0 px2rem(20);
    height: px2rem(106);
    line-height: px2rem(106);
    position: relative;
    &::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{
    float: right;
    color: #999999;
    font-size: px2rem(28);
    i{
      display: inline-block;
      margin-left: px2rem(10);
    }
    .user-avatar{
      width: px2rem(120);
      height: px2rem(120);
    }
  }
}
</style>