<template>

    <view class="tianjiatouxiangnicheng">
        <view class="tianjiatouxiangnicheng_top">
            <!-- 2.0.19支持autoBack，默认为false -->
            <uni-nav-bar left-icon="left" title="添加头像昵称" :statusBar="true" :border="false" @clickLeft="backBtn"
                color="white" backgroundColor="#D72C22" />
        </view>       
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <u--image width="116rpx" height="116rpx" :src="image"></u--image>
        </button>       
        <form @submit="formSubmit">
            <view class="row">
                <view class="text1">昵称：</view>
                <input type="nickname" v-model="nickname" class="weui-input" name="nickname" placeholder="请输入昵称" />
            </view>
            <button type="primary" class="denglubtn" form-type="submit">登录</button>

        </form>

    </view>
</template>

<script>
    export default {

        async onLoad(options) {

//获取手机号的code
            this.code = options.code;
            console.log(this.code);
        },
        data() {
            return {
                gerenxinxilist: [],
                image: "https://cdn.uviewui.com/uview/album/6.jpg",
                avatarUrl: "",
                nickname: "",
                openid: "",
                code: ''
            };
        },
        methods: {

            backBtn() {

                uni.navigateBack({
                    delta: 0
                });

            },


            onChooseAvatar(e) {
                console.log(e);
                let that = this;
                console.log(e.detail.avatarUrl);
                var url=e.detail.avatarUrl?e.detail.avatarUrl:"https://cdn.uviewui.com/uview/album/6.jpg"
                
                wx.uploadFile({
                    /* // 拿到临时图片路径后上传到服务器，服务器将返回一个公网地址，
                      届时在任意角落都将能访问到这张图片 */
                    filePath: url, //临时文件路径
                    url: "xxxxx",
                    name: 'file',
                    /* //非常重要！！！！是后台访问二进制数据的关键 
                                    该 file 是对应接口，所需要传递的参数 */
                    timeout: 5000,
                    header: {
                        'content-type': 'multipart/form-data',

                    }, // header 值
                    success: res => {
                        that.image = ''
                        let obj = JSON.parse(res.data)
                        if (obj.code == 1) {
                            let imgPath = JSON.parse(res.data)
                                .data.fullurl //将二进制转换成字符串类型
                            console.log(imgPath);

                            that.image = imgPath

                        } else {
                            this.image="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0",
                            
                            uni.showToast({
                                icon: 'none',
                                title: '自定义头像请在手机端选择图片！'
                            });
                        }
                    },
                    fail: e => {
                        this.$toast('上传失败')
                    }

                })
            },
            formSubmit(e) {
                const URL = "XXXXX"
                this.nickname = e.detail.value.nickname
                console.log(this.image);
                if (this.nickname == '') {
                    uni.showToast({
                        title: '请输入昵称',
                        icon: 'error'
                    })
                    return
                } else if (this.image == '') {
                    uni.showToast({
                        title: '请选择头像',
                        icon: 'error'
                    })
                    return
                } else {

                    // #ifdef MP-WEIXIN
                    var that = this;
                    console.log("微信授权登录被点击");
                    wx.login({
                        //成功放回
                        success: (res) => {
                            console.log(res);
                            let code = res.code
                            wx.request({
                                url: URL + `/get_secret`,
                                success(res1) {
                                    
                                    let secret = res1.data.data
                                    uni.setStorageSync(
                                        'secret', res1
                                        .data.data,
                                    );
                                    wx.request({

//登录接口
                                        url: URL + `/oauth_user`,
                                        data: {
                                            avatar: that.image,
                                            nickname: that.nickname,
                                            jscode: code,
                                            code:that.code
                                        },
                                        success: (res) => {
                                         
                                            uni.setStorageSync(
                                                'token', res
                                                .data.data
                                                .token,
                                            );
                                         
                                    
                                    
                                    
                                        },
                                        fail(err) {
                                            console.log('err', err);
                                        },
                                        complete(cp) {
                                            console.log(cp);
                                        }
                                    })
                                    
                                    
                                


                                },
                            })


                        }
                    })

                    // #endif
                }


            },

        }
    }
</script>

<style lang="scss">
    .tianjiatouxiangnicheng {
        .avatar-wrapper {
            // text-align: center;
            width: 116rpx;
            height: 116rpx;
            padding-left: 0;
            padding-right: 0;
            margin: 0 auto;
            margin-top: 198rpx;
            margin-bottom: 90rpx;

            image {
                width: 116rpx;
                height: 116rpx;
            }
        }

        .row {
            display: flex;
            justify-content: start;
            margin: 30rpx;
            align-items: center;
            border-bottom: #f5f5f5 4rpx solid;
            border-top: #f5f5f5 4rpx solid;

            .weui-input {
                // background-color: #f5f5f5;
                height: 112rpx;

            }
        }

        .denglubtn {
            margin-top: 90rpx;
            margin-left: 34rpx;
            width: 684rpx;
            height: 88rpx;
            background: #D62D24;
            border-radius: 120rpx 120rpx 120rpx 120rpx;
            opacity: 1;
            text-align: center;
            font-size: 32rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 88rpx;

        }
    }
</style>

对于新版本的使用可能会存在PC端的不兼容问题，有的PC端掉不起  onChooseAvatar这个方法，所以给用户一个默认头像，对于PC端自定义头像也会有图片大小要求