hospital-accompaniment-wechat/pages/mine/personalDetails.vue

<template>
  <view class="container">
    <u-navbar title="个人信息" leftIconColor="#ffffff" titleStyle="color:#fff" :autoBack="true" placeholder></u-navbar>
    <view class="box">
      <view class="item">
        <view class="item_l">头像：</view>
        <view class="item_r">
          <button class="headPhoto-btn" type="default" open-type="chooseAvatar" @chooseavatar="getChooseavatar">
            <image :src="userInfo.headPhoto" mode="" v-if="userInfo.headPhoto" />
            <image src="@/static/default-head-photo.png" mode="" v-else />
          </button>
          <text class="iconfont icon-jiantou"></text>
        </view>
      </view>
      <view class="item" @click="show=true">
        <view class="item_l">昵称：</view>
        <view class="item_r">
          {{userInfo.nickname}}
          <text class="iconfont icon-jiantou"></text>
        </view>
      </view>
      <view class="item">
        <view class="item_l">手机号：</view>
        <view class="item_r">{{userInfo.mobile}}</view>
      </view>
    </view>
    <u-modal :show="show" title="昵称" show-cancel-button @confirm="modalConfirm" @cancel="modalCancel" confirm-color="#c90700">
      <view class="slot-content">
        <input type="nickname" v-model="nickname" placeholder-class="placeholderClass" placeholder="请输入昵称" />
      </view>
    </u-modal>
  </view>
</template>

<script>
import {
  storage,
  UserInfo
} from "@/utils/tools.js"
import {
  userInfo,
  updateUserInfo
} from "@/api/user.js"
export default {
  data () {
    return {
      userInfo: {},
      show: false,
      headPhoto: undefined,
      nickname: undefined
    }
  },
  onLoad () {
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      UserInfo().then(res => {
        this.userInfo = res
      })
    },
    getChooseavatar (e) {
      let that = this;
      uni.showLoading({
        title: '上传中',
      });
      // console.log('获取用户头像:' + JSON.stringify(res.detail.avatarUrl));
      let apiUrl = uni.$u.http.config.baseURL + '/common/upload';
      let a = uni.uploadFile({
        url: apiUrl, // 仅为示例，非真实的接口地址
        filePath: e.detail.avatarUrl,
        header: {
          apiToken: storage.get('apiToken')
        },
        name: 'file',
        success: (res) => {
          let newdata = JSON.parse(res.data);
          if (newdata.code == 200) {
            this.headPhoto = newdata.data.url;
            this.saveInfo({
              headPhoto: newdata.data.url
            })
          }
        },
        fail: () => {
          uni.$u.toast("上传失败");
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },
    modalConfirm () {
      if (!this.nickname) return uni.$u.toast("请先填写昵称");
      this.saveInfo({
        nickname: this.nickname
      })
    },
    modalCancel () {
      this.nickname = null
      this.show = false
    },
    saveInfo (data) {
      updateUserInfo(data).then(res => {
        this.getUserInfo()
        this.modalCancel()
        uni.$u.toast("修改成功");
      })
    }
  },
}
</script>

<style lang='scss' scoped>
::v-deep .u-navbar__content,
::v-deep .u-status-bar {
  background-color: #c90700 !important;
}

.container {
  background: #f5f5f5;
  min-height: 90vh;
  padding: 30rpx;

  .box {
    background: #ffffff;
    border-radius: 30rpx;
    padding: 20rpx;
    min-height: 80vh;

    .item {
      border-bottom: 1rpx solid #e6e6e6;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;

      .item_l {
        font-size: 28rpx;
        color: #1a1a1a;
      }

      .item_r {
        font-size: 28rpx;
        color: #808080;
        display: flex;
        align-items: center;

        image {
          width: 75rpx;
          height: 75rpx;
          border-radius: 50%;
          border: 2rpx solid #ffffff;
        }

        button {
          margin: 0;
          font-size: 24rpx;
        }

        button::after {
          border: none;
        }

        .headPhoto-btn {
          background-color: rgba(0, 0, 0, 0);
          line-height: inherit;
          border-radius: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}

.slot-content {
  padding: 40rpx;
  text-align: center;

  input {
    font-size: 28rpx;
    padding: 10rpx 20rpx;
    border: 1rpx solid #e6e6e6;
    border-radius: 4rpx;
  }

  ::v-deep .placeholderClass {
    font-size: 24rpx;
    font-family: FZZhunYuan-M02S;
  }
}
</style>