<template>
  <view class="login">
    <image :src="avatarUrl" mode=""></image>
    <view class="nickname">
      <text>昵称：</text>
      <input type="nickname" class="weui-input" :value="nickName" @blur="bindblur" placeholder="点击获取昵称"
        @input="bindinput" />
    </view>
    <button type="balanced" open-type="chooseAvatar" @chooseavatar="chooseAvatar">获取头像</button>
    <button @click="onSubmit">授权登录</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        nickName: '',
        avatarUrl: 'https://pic.imgdb.cn/item/648448141ddac507ccf110ca.png',
        activeRadio: ''
      }
    },
    methods: {
      bindblur(e) {
        // console.log(e);
        this.nickName = e.detail.value; // 获取微信昵称
      },
      bindinput(e) {
        // console.log(e);
        this.nickName = e.detail.value; //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
      },
      chooseAvatar(e) {
        console.log(e);
        this.avatarUrl = e.detail.avatarUrl
        uni.login({
          "provider": "weixin",
          // "onlyAuthorize": true, // 微信登录仅请求授权认证
          success: function(run) {
            // console.log(run);
            const {
              code
            } = run
            console.log(code);
            //客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
            uni.request({
              url: '地址链接',//这里用自己的地址获取
              method: 'POST',
              data: {
                code: code
              },
              success: (res) => {
                //获得token完成登录
                console.log(res.data.openid);
                uni.setStorageSync('token', res.data.openid)
              }
            });
          },
          fail: function(err) {
            // 登录授权失败  
            // err.code是错误码
          }
        })
        let {
          avatarUrl
        } = e.detail;
        uni.showLoading({
          title: '加载中',
          duration: 1000
        });
      },
      onSubmit() {
        //这里是提交事件 根据自己的情况写
      }
    }
  }
</script>