NN2023021801/addons/dbapp/pagesUser/userInfo/userInfo.vue

<script>
import { mapState } from 'vuex'
import api from '@/api'
export default {
  data() {
    return {
      tempImg: '',
      form: {
        avatar: '',
        nickname: ''
      }
    }
  },
  computed: {
    ...mapState({
      // 这里需使用普通函数，使 this 为vc
      user(state) {
        const { avatar, nickname } = state.user
        this.form.avatar = avatar
        this.form.nickname = nickname

        return state.user
      },
      token: 'token'
    })
  },
  methods: {
    selectAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'], // 只传压缩图
        crop: {
          width: 100,
          height: 100
        },
        success: res => (this.tempImg = res.tempFilePaths[0])
      })
    },
    async uploadImg() {
      try {
        let res = await api.uploadImg({ filePath: this.tempImg, formData: { type: 'avatar' } })
        let result = JSON.parse(res)
        this.form.avatar = result.data.base_url
        return true
      } catch (e) {
        return false
      }
    },
    async save() {
      // 存在新的头像 但未上传成功时拦截
      if (this.tempImg && !(await this.uploadImg())) return

      let params = JSON.parse(JSON.stringify(this.form))
      if (this.tempImg === '') delete params.avatar

      await api.editUserInfo(params)
      this.$common.toast('修改成功')
      setTimeout(() => {
        this.$common.back()
      }, 1000)
    }
  },
  mounted() {
    uni.$on('editName', name => (this.form.nickname = name))
  }
}
</script>

<template>
  <view>
    <u-navbar title="个人资料" placeholder autoBack leftIconSize="40rpx"></u-navbar>
    <view class="bg-white flex flex-column flex-center pt-20 relative">
      <u-avatar :src="tempImg || form.avatar" size="132rpx" @click="selectAvatar"></u-avatar>
      <u-text
        text="点击修改头像"
        color="#8D9399"
        size="24rpx"
        align="center"
        margin="20rpx 0"
      ></u-text>
      <view class="badge flex flex-center" @click="selectAvatar">
        <u-icon name="camera" color="#fff" size="28rpx"></u-icon>
      </view>
    </view>

    <view class="radius bg-white w-m mt-10 group">
      <view class="item">
        <view class="title f28">昵称</view>
        <u-icon
          name="arrow-right"
          color="#8D9399"
          :label="form.nickname"
          labelPos="left"
          labelColor="#8D9399"
          labelSize="28rpx"
          @click="$jump({ url: '/pagesUser/userInfo/editName' })"
        ></u-icon>
      </view>
      <view class="item">
        <view class="title f28">ID</view>
        <view class="value">{{ user.id }}</view>
      </view>
      <view class="item">
        <view class="title f28">用户名</view>
        <view class="value">{{ user.user_name }}</view>
      </view>
      <view class="item">
        <view class="title f28">手机号码</view>
        <view class="value">{{ user.mobile }}</view>
      </view>
    </view>

    <u-button
      text="保存"
      color="var(--theme)"
      @click="save"
      shape="circle"
      customStyle="width: 650rpx;height: 98rpx; position:fixed;bottom:100rpx;left:50%;transform:translate(-50%)"
    ></u-button>
  </view>
</template>

<style lang="scss" scoped>
.badge {
  position: absolute;
  width: 36rpx;
  height: 36rpx;
  background-color: #637bf7;
  border-radius: 50%;
  left: calc(50% + 40rpx);
  top: calc(50% - 70rpx);
}

.group {
  padding: 0 24rpx;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 98rpx;
    line-height: 98rpx;
    box-sizing: border-box;
    .title {
      color: #232323;
      font-weight: bold;
      font-size: 32rpx;
    }

    .value {
      color: #5d6167;
      font-size: 30rpx;
    }
  }
}
</style>