ZangShiQi/addon/pc/source/os/pages/member/info.vue

<template>
  <div class="box">
    <div class="null-page" v-show="yes"></div>

    <div class="member-info" v-loading="loading">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form ref="infoRef" :model="memberInfo" :rules="infoRules" label-width="80px">
            <el-form-item label="账号" v-if="memberInfo.userName">
              <p>{{ memberInfo.userName }}</p>
            </el-form-item>
            <!-- <el-form-item label="邮箱">
							<p v-if="memberInfo.email">{{ memberInfo.email }}</p>
							<p v-else class="toBind" @click="$router.push({ path: '/member/security' })">去绑定</p>
						</el-form-item> -->
            <el-form-item label="手机号">
              <p v-if="memberInfo.tell">{{ memberInfo.tell }}</p>
              <p v-else class="toBind" @click="$router.push({ path: '/member/security' })">去绑定</p>
            </el-form-item>
            <el-form-item label="昵称" prop="nickName">
              <el-input v-model="memberInfo.nickName"></el-input>
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button size="medium" type="primary" @click="saveInfo">保存</el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="头像照片" name="second">
          <div class="preview">
            <div class="title">头像预览</div>
            <div class="content">
              完善个人信息资料，上传头像图片有助于您结识更多的朋友。
              <br />
              头像最佳默认尺寸为120x120像素。
            </div>
          </div>
          <el-upload :action="uploadActionUrl" :show-file-list="false" :on-success="handleAvatarSuccess" class="upload" accept=".png,.jpg,.jpeg">
            <div class="img-wrap">
              <img v-if="memberInfo.userHeadImg" :src="$img(memberInfo.userHeadImg)" />
              <img v-else :src="$img(defaultHeadImage)" />
            </div>
          </el-upload>
          <div class="btn">
            <el-button size="medium" type="primary" @click="uploadHeadImg">保存</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import {info, nickName, headImg} from '@/api/member/info';
  import Config from '@/plugins/config';
  import {mapGetters} from 'vuex';
  import {email} from '@/api/member/security';

  export default {
    name: 'info',
    layout: "member",
    components: {},
    data: () => {
      return {
        memberInfo: {
          userHeadImg: '',
          userName: '', //账号
          nickName: '', //昵称
          email: '',
          tell: ''
        },
        infoRules: {
          nickName: [{required: true, message: '请输入昵称', trigger: 'blur'}, {
            max: 30,
            message: '最大长度为30个字符',
            trigger: 'blur'
          }]
        },
        activeName: 'first',
        loading: true,
        uploadActionUrl: Config.baseUrl + '/api/upload/headimg',
        imgUrl: '',
        yes: true
      };
    },
    created() {
      this.getInfo();
    },
    mounted() {
      let self = this;
      setTimeout(function () {
        self.yes = false
      }, 300)
    },
    methods: {
      getInfo() {
        info().then(res => {
          if (res.code == 0) {
            this.memberInfo.userHeadImg = res.data.headimg;
            this.memberInfo.userName = res.data.username;
            this.memberInfo.nickName = res.data.nickname;
            this.memberInfo.email = res.data.email;
            this.memberInfo.tell = res.data.mobile;
          }
          this.loading = false;
        }).catch(err => {
          this.loading = false;
          this.$message.error(err.message);
        });
      },
      handleClick(tab, event) {
      },
      saveInfo() {
        this.$refs.infoRef.validate(valid => {
          if (valid) {
            nickName({nickname: this.memberInfo.nickName}).then(res => {
              if (res.code == 0) {
                this.$message({message: '修改昵称成功', type: 'success'});
                this.getInfo();
                this.$store.dispatch('member/member_detail', {refresh: 1});
              }
            }).catch(err => {
              this.$message.error(err.message);
            });
          } else {
            return false;
          }
        });
      },
      handleAvatarSuccess(res, file) {
        this.imgUrl = res.data.pic_path;
        this.memberInfo.userHeadImg = URL.createObjectURL(file.raw);
      },
      uploadHeadImg() {
        headImg({headimg: this.imgUrl}).then(res => {
          if (res.code == 0) {
            this.$message({message: '头像修改成功', type: 'success'});
            this.$store.dispatch('member/member_detail', {refresh: 1});
          }
        }).catch(err => {
          this.$message.error(err.message);
        });
      }
    },
    computed: {
      ...mapGetters(['defaultHeadImage'])
    }
  };
</script>
<style>
  .member-info .el-upload {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
</style>
<style lang="scss" scoped>
  .box {
    width: 100%;
    position: relative;
  }

  .null-page {
    width: 100%;
    height: 730px;
    background-color: #FFFFFF;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
  }

  .member-info {
    background: #ffffff;
    padding: 20px;

    .el-tab-pane {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;

      .preview {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;

        .title {
          margin-right: 20px;
          line-height: 3;
        }

        .content {
          color: $base-color;
          line-height: 1.5;
        }
      }

      .upload {
        display: flex;
        justify-content: center;
      }

      .el-upload {
        width: 120px;
      }

      .img-wrap {
        width: 120px;
        height: 120px;
        display: block;
        line-height: 120px;
        overflow: hidden;
        border: 1px solid #f1f1f1;
        cursor: pointer;

        img {
          display: inline-block;
        }
      }

      .el-form {
        margin-top: 20px;
        width: 500px;
        margin-left: 200px;

        .toBind {
          cursor: pointer;

          &:hover {
            color: $base-color;
          }
        }
      }

      .btn {
        text-align: center;
      }
    }
  }
</style>