editMe.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <template>
  2. <div class="edit-me" v-if="userInfo">
  3. <back-bar :title="$t('h5.editInfo')"></back-bar>
  4. <div class="edit-list">
  5. <div class="item avatar-item">
  6. <input type="file" accept="image/jpeg,image/png,image/jpg" @change="uploadImg($event)"/>
  7. <span class="title">{{$t('h5.avatar')}}</span>
  8. <div class="cont">
  9. <img class="user-avatar" @click.stop="$showImgPreview(userInfo.cover_photo)" v-if="userInfo.cover_photo" :src="userInfo.cover_photo" alt="">
  10. <div v-else class="user-avatar"
  11. :class="'avatar_bg' + userInfo.user_id % 9"
  12. :data-name="userInfo.nick_name.slice(0,2).toUpperCase()"
  13. ></div>
  14. <i class="el-icon-arrow-right"></i>
  15. </div>
  16. </div>
  17. <div class="item" @click="editName">
  18. <span class="title">{{$t('h5.nickname')}}</span>
  19. <span class="cont">
  20. {{userInfo.nick_name}} <i class="el-icon-arrow-right"></i>
  21. </span>
  22. </div>
  23. <div class="item" @click="editUserId">
  24. <span class="title">{{$t('h5.username')}}</span>
  25. <span class="cont">
  26. {{userInfo.user_name}}<i class="el-icon-arrow-right"></i>
  27. </span>
  28. </div>
  29. </div>
  30. <cropper v-bind="cropperOption" @close="cropperClose" @cropper="cropperSubmit"></cropper>
  31. </div>
  32. </template>
  33. <script>
  34. import { mapState, mapActions } from 'vuex'
  35. import backBar from '@/components/backBar'
  36. import cropper from '../components/cropper'
  37. import { avatarMixin } from '../mixins/index'
  38. export default {
  39. name: 'editMe',
  40. mixins: [avatarMixin],
  41. components: {
  42. backBar,
  43. cropper
  44. },
  45. data () {
  46. return {
  47. isMe: true
  48. }
  49. },
  50. computed: {
  51. ...mapState({
  52. userInfo: state => state.userInfo
  53. })
  54. },
  55. methods: {
  56. ...mapActions(['getUserInfo']),
  57. editName () {
  58. this.$router.push('/editInfo/nickname')
  59. },
  60. editUserId () {
  61. this.$router.push('/editInfo/username')
  62. }
  63. },
  64. created () {
  65. if (!this.userInfo) {
  66. this.getUserInfo()
  67. }
  68. }
  69. }
  70. </script>
  71. <style lang="scss" scoped>
  72. input[type=file]{
  73. position: absolute;
  74. left: 0;
  75. top: 0;
  76. width: 100%;
  77. height: 100%;
  78. -webkit-appearance: none;
  79. opacity: 0;
  80. z-index: 1;
  81. }
  82. .edit-list{
  83. background-color: #ffffff;
  84. .item{
  85. display: flex;
  86. justify-content: space-between;
  87. align-items: center;
  88. padding: 0 px2rem(20);
  89. height: px2rem(106);
  90. line-height: px2rem(106);
  91. position: relative;
  92. &.avatar-item{
  93. height: px2rem(166);
  94. line-height: px2rem(166);
  95. }
  96. &::after{
  97. content: '';
  98. position: absolute;
  99. height: 1px;
  100. background-color: #d8d8d8;
  101. right: 0;
  102. bottom: 0;
  103. left: px2rem(20);
  104. }
  105. &:last-child{
  106. &::after{
  107. display: none;
  108. }
  109. }
  110. }
  111. .title{
  112. font-size: px2rem(28);
  113. color: #000;
  114. }
  115. .cont{
  116. color: #999999;
  117. font-size: px2rem(28);
  118. i{
  119. display: inline-block;
  120. vertical-align: middle;
  121. margin-left: px2rem(10);
  122. }
  123. .user-avatar{
  124. position: relative;
  125. width: px2rem(120);
  126. height: px2rem(120);
  127. line-height: px2rem(120);
  128. z-index: 2;
  129. vertical-align: middle;
  130. display: inline-block;
  131. }
  132. }
  133. }
  134. </style>