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">
            <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
              <image class="avatar" :src="userInfo.avatarUrl || 'https://cdn.cunwuyun.cn/wxmp/tianfuxing/avatar.png'"></image>
            </button>
          </div>
        </div>
        <div class="form-item">
          <h2>昵称</h2>
          <div class="form-item__right">
            <input placeholder="请输入昵称" type="nickname" v-model="userInfo.nickName" />
          </div>
        </div>
        <div class="form-item">
          <h2>手机号</h2>
          <div class="form-item__right">
            <input placeholder="请输入手机号" type="number" maxlength="11" v-model="userInfo.phone" />
          </div>
        </div>
        <div class="form-item">
          <h2>所在社区</h2>
          <div class="form-item__right">
            <input placeholder="请输入所在社区" v-model="userInfo.nickName" />
          </div>
        </div>
        <div class="form-item">
          <h2>所在小区</h2>
          <div class="form-item__right">
            <input placeholder="请输入所在小区" v-model="userInfo.phone" />
          </div>
        </div>
      </div>
    </div>
    <div class="btn-wrapper">
      <div class="btn" hover-class="text-hover" @click="save">提交</div>
    </div>
  </div>
</template>

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

    computed: {
      ...mapState(['user'])
    },

    onLoad () {
      this.userInfo = {
        ...this.user
      }
    },

    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)
          }
        })
      },

      save () {
        if (!this.userInfo.avatarUrl) {
          return this.$toast('请上传头像')
        }

        if (!this.userInfo.nickName) {
          return this.$toast('请输入昵称')
        }

        if (!this.userInfo.phone) {
          return this.$toast('请输入手机号')
        }

        this.$loading()
        this.$instance.post('/api/appwechatuser/update-nickName', null, {
          params: {
            ...this.userInfo
          }
        }).then(res => {
          if (res.code === 0) {
            this.$toast('保存成功')

            uni.$emit('updateUserInfo')

            setTimeout(() => {
              wx.navigateBack()
            }, 600)
          }
        })
      },

      onChooseAvatar (e) {
        this.$loading()
        uni.uploadFile({
          url: this.$instance.defaults.baseURL + (process.env.NODE_ENV == 'production' ? 'api' : '') + '/file/add',
          filePath: e.detail.avatarUrl,
          name: 'file',
          header: {
            'Content-Type': 'multipart/form-data',
            Authorization: uni.getStorageSync('token'),
          },
          success: (res) => {
            const data = JSON.parse(res.data)

            if (data.code === 0) {
              this.$set(this.userInfo, 'avatarUrl', data.data[0].split(';')[0])
            } else {
              this.$toast(data.msg)
            }
          },
          complete: () => {
            this.$nextTick(() => {
              this.$hideLoading()
            })
          }
        })
      },

      uploadImg () {
        uni.chooseImage({
          count: 1,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success: res => {
          }
        })
      }
    }
  }
</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%);
        }
      }

      .avatar-wrapper {
        padding: 0;
        width: 120px!important;
        height: 120px!important;
        border-radius: 50%;
        margin: 0;

        image {
          width: 120px;
          height: 120px;
        }
      }

      .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>