<template>
  <view class="edit_user">
    <view class="center">
      <view class="avatar_box" @tap="editAvatar">
        <view>头像</view>
        <view class="avatar_right">
          <image
            src="https://upload-bbs.mihoyo.com/upload/2021/07/10/278678644/00185141732cb0f85adcf0ee68754554_8318448679343513426.jpg"
            mode="scaleToFill"
            class="avatar"
          />
          <image
            src="../../../static/right_all.png"
            mode="scaleToFill"
            style="width: 24rpx; height: 24rpx"
          />
        </view>
      </view>
      <view class="name_phone">
        <view class="list" @tap="to('editName', data.name)">
          <view>用户昵称</view>
          <view class="list_right">
            <view style="color: #333333">微信用户</view>
            <image
              src="../../../static/right_all.png"
              mode="scaleToFill"
              style="width: 24rpx; height: 24rpx"
            />
          </view>
        </view>
        <view class="list" @tap="to('editPhone')">
          <view>手机号</view>
          <view class="list_right">
            <view style="color: #333333">130****8745</view>
            <image
              src="../../../static/right_all.png"
              mode="scaleToFill"
              style="width: 24rpx; height: 24rpx"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        data: {
          avatar: '',
          name: '微信用户微信用户微信用户',
        },
      }
    },
    methods: {
      to(url, value) {
        uni.navigateTo({
          url: `/pages/user/edit/${url}?value=${value}`,
        })
      },
      // 修改头像
      editAvatar() {
        let that = this
        uni.chooseImage({
          count: 1,
          sourceType: ['album'],
          sizeType: ['compressed'],
          success(res) {
            console.log(res)
            res.tempFilePaths.forEach((item, index) => {
              uni.uploadFile({
                url: config.server + '/uploadGoods',
                filePath: item,
                name: 'file',
                header: {
                  'ssdmn-token': cache.get('token'),
                },
                success: uploadFileRes => {
                  //接口返回的数据
                  let r = JSON.parse(uploadFileRes.data)
                  that.$set(that.data, 'avatar', r.data.file)
                },
                fail: err => {
                  console.log(err)
                },
              })
            })
          },
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .center {
    padding: 24rpx;
  }
  .avatar_box {
    padding: 24rpx;
    background-color: white;
    border-radius: 16rpx;
    font-size: 28rpx;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .avatar_right {
      display: flex;
      align-items: center;
      .avatar {
        width: 70rpx;
        height: 70rpx;
        border-radius: 70rpx;
        margin-right: 10rpx;
      }
    }
  }
  .name_phone {
    padding: 24rpx 24rpx 0 24rpx;
    background-color: white;
    margin-top: 24rpx;
    border-radius: 16rpx;
  }
  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #666666;
    padding-bottom: 30rpx;
  }
  .list_right {
    display: flex;
    align-items: center;
  }
</style>
<style lang="scss">
  page {
    background-color: #f7f7f7;
  }
</style>
