saas_manager/pages/profile/index.vue

<template>
  <view class="profile">
    <view class="profile-head">
      <image
        class="profile-head-img"
        @click="toProfile"
        :src="
          userInfo && userInfo.avatar
            ? $method.splitImgHost(userInfo.avatar, true)
            : defaultHead
        "
      ></image>
      <view>{{ userInfo && userInfo.realname }}</view>
      <image
        v-if="!userInfo.avatar"
        class="profile-head-icon"
        src="../../static/image/icon_camer.png"
        mode=""
      ></image>
    </view>
    <u-form v-if="userInfo" :model="userInfo" ref="uForm" labelWidth="160">
      <u-form-item label="业务员ID">
        <u-input disabled v-model="userInfo.userAccount" border="bottom" />
      </u-form-item>
      <u-form-item label="姓名">
        <u-input disabled v-model="userInfo.realname" border="bottom" />
      </u-form-item>
      <u-form-item label="手机号码">
        <u-input
          disabled
          v-model="userInfo.telphone"
          border="bottom"
          type="number"
          maxlength="11"
        />
      </u-form-item>
      <u-form-item label="身份证号">
        <u-input disabled v-model="userInfo.idCard" border="bottom" />
      </u-form-item>
    </u-form>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { uploadFile } from "@/common/upload";
import { sellerEdit } from "@/utils/user";
export default {
  data() {
    return {
      defaultHead: require("../../static/image/defhead.png"),
      fileList: [],
    };
  },
  async onShow() {
    if (this.$method.isLogin()) {
      !this.userInfo && (await this.$store.dispatch("getUserInfo"));
    }
  },
  methods: {
    toProfile() {
      uploadFile().then((avatar) => {
        sellerEdit({
          avatar,
        }).then((res) => {
          this.$u.toast("头像已上传");
          this.$store.dispatch("getUserInfo");
        });
      });
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
};
</script>

<style scoped lang="scss">
image {
  width: 100%;
  height: 100%;
}

.profile {
  padding: 68rpx 48rpx 0;

  .profile-head {
    margin: 0 auto 120rpx;
    width: 160rpx;
    position: relative;
    .profile-head-img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
    }
    .profile-head-icon {
      width: 56rpx;
      height: 56rpx;
      position: absolute;
      top: 104rpx;
      right: 0;
    }
    view {
      padding-top: 20rpx;
      font-weight: bold;
      color: #222222;
      font-size: 36rpx;
      text-align: center;
    }
  }

  /deep/ {
    .u-input {
      background-color: #ffffff !important;
    }
  }
}
</style>