dvcp_v2_wechat_app/src/project/tianfuxing/AppMy/UserInfo.vue

<template>
  <div class="userinfo">
    <div class="section">
      <div class="form">
        <div class="form-item avatar">
          <h2>头像</h2>
          <div class="form-item__right" @click="uploadImg">
            <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
              <image class="avatar" :src="userInfo.avatar"></image>
            </button>
            <image class="right" src="/static/images/next.png" />
          </div>
        </div>
        <div class="form-item">
          <h2>昵称</h2>
          <div class="form-item__right">
            <input placeholder="请输入昵称" type="nickname" v-model="userInfo.nickname" />
          </div>
        </div>
      </div>
    </div>
    <div class="btn" @click="save">保存</div>
  </div>
</template>

<script>
  export default {
    appName: '设置',
    name: 'UserInfo',
    data () {
      return {
        userInfo: {}
      }
    },

    onLoad () {
      if (uni.getStorageSync('token')) {
        this.userInfo = uni.getStorageSync('userInfo')
        console.log(this.userInfo)
      }

      uni.$on('updateUserInfo', () => {
        this.getUserInfo()
      })
    },

    methods: {
      getUserInfo () {
        this.$http.post(`/app/getUserInfo`).then(res => {
          if (res.code === 200) {
            this.isLogin = true
            this.userInfo = res.data
            uni.setStorageSync('userInfo', res.data)
            uni.setStorageSync('token', res.data.id)
          }
        })
      },


      uploadImg () {
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: res => {
          }
        })
      },

      save () {
        this.$loading()
        this.$http.post('/app/editUserInfo', null, {
          params: {
            ...this.userInfo
          }
        }).then(res => {
          if (res.code === 0) {
            this.$toast('保存成功')
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .userinfo {
    .btn {
      margin-top: 180rpx;
    }

    .section {
      background: #fff;

      &:first-child {
        margin-bottom: 20rpx;
      }

      & > h2 {
        position: relative;
        height: 98rpx;
        line-height: 98rpx;
        padding: 0 50rpx;
        color: #363636;
        border-bottom: 1rpx solid #e9e9e9;
        font-size: 34rpx;

        &:after {
          position: absolute;
          left: 30rpx;
          top: 50%;
          z-index: 1;
          width: 5rpx;
          height: 50rpx;
          background: #fd2c21;
          content: ' ';
          transform: translateY(-50%);
        }
      }

      .form {
        .form-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 88rpx;
          padding: 0 30rpx;
          border-bottom: 1rpx solid #e9e9e9;

          &:last-child {
            border: none;
          }

          h2 {
            color: #4e4e4e;
            font-size: 30rpx;
          }

          &.avatar {
            height: 160rpx;

            .avatar-img {
              width: 120rpx;
              height: 120rpx;
              border-radius: 50%;
            }
          }

          .form-item__right {
            display: flex;
            align-items: center;

            input {
              width: 500rpx;
              text-align: right;
              font-size: 30rpx;
            }

            span {
              color: #4e4e4e;
              font-size: 30rpx;
            }

            .right {
              width: 13rpx;
              height: 21rpx;
              margin-left: 10rpx;
            }
          }
        }
      }
    }
  }
</style>