<template>
        <!--用户登录之后再获取手机号-->
    <view class="container" style="position:fixed;left:0;right:0;background: url(../xcximg/img.jpg) no-repeat;background-size: cover;">
        <view class="btns">
            <button type="default" open-type="getUserInfo" @getuserinfo="getUserInfo" class="wx">微信登录</button>
            <view @click="login(1)" class="tels">手机号登录</view>
        </view>
        
        <view class="tel_cont" v-show="isShowTel">
            <view class="mask"></view>
            <view class="tel">
                <view><text class="bold font30 color_black mr20">xxx</text>申请</view>
                <view class="bold font30 color_black mt30">获取您的手机号</view>
                <view class="tel_btns dflex center" style="">
                    <button type="default" class="wxbtn cancel" @click="cancel()">取消</button>
                    <button type="default" open-type="getPhoneNumber" class="wxbtn sure" @getphonenumber="getPhoneNumber">允许</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {checkTelNum} from '../../common/js/common.js'
    import {mapState,mapMutations} from 'vuex'
    let url = null;
    export default {
        data() {
            return {
                tel: '',
                pwd: '',
                isShowTel: false,
                userinfo:[],
                phone:[],
                isUser: false
            }
        },
        onShow() {
            
        },
        onLoad() {
            this.openid = '';
            this.session_key = '';
            url = uni.getStorageSync('currentUrl');
            this.getLoginCode()
        },
        methods: {
            ...mapMutations(['getLogin','getWxLogin']),
            cancel(){
                this.isShowTel = false;
                uni.removeStorage({
                    key: 'isUser'
                })
            },
            //存储信息
            saveWxdata(){
                this.$httpRequest('POST','api接口',{
                    phone: JSON.stringify(this.phone),
                    userinfo: JSON.stringify(this.userinfo),
                    openid: this.openid,
                    session_key: this.session_key
                }).then(res=>{
                    
                })
            },
            getPhoneNumber(e){
                //console.log('手机号',e)
                if(!e.detail.encryptedData){
                    //只授权了用户信息，没有授权手机号
                    uni.removeStorage({
                        key: 'isUser'
                    })
                }else{
                    //用户信息、手机号均授权，才授权成功跳转页面
                    let {encryptedData,iv} = e.detail;
                    this.phone.push({
                        encryptedData: encryptedData,
                        iv: iv
                    })
                    uni.switchTab({
                        url: url
                    })
                    this.saveWxdata();
                    this.isUser = true;
                    this.getWxLogin(this.isUser)
                }
                this.isShowTel = false;
                
            },
            getUserInfo(){
                console.log(1)
                let _this = this;
                _this.userinfo = [];
                _this.phone = [];
                uni.getUserInfo({
                    provider: 'weixin',
                    success: function(infoRes) {
                        console.log('信息',infoRes)
                        let {avatarUrl,city,country,gender,language,nickName,province} = infoRes.userInfo;
                        _this.userinfo.push({
                            avatarUrl: avatarUrl,
                            city: city,
                            country: country,
                            gender: gender,
                            language: language,
                            nickName: nickName,
                            province: province
                        })
                        console.log(_this.userinfo)
                        uni.getSetting({
                            success(res) {
                                //授权后直接获取用户手机
                                if(res.authSetting['scope.userInfo']){
                                    _this.isShowTel = true;
                                }else{
                                    //console.log('没有授权')
                                }
                            }
                        })
                    },
                    fail(res) {
                        //console.log(res)
                        uni.showToast({
                            title: '授权失败',
                            icon: 'none',
                            duration: 1500
                        })
                    }
                });
            },
            //获取openid 和 session_key
            //appid  secret  微信后台获取  授权类型，此处只需填写 authorization_code
            getdata(code){
                let url = 'https://api.weixin.qq.com/sns/jscode2session?appid='+'appid'+'&secret='+'secret'+'&js_code='+code+'&grant_type=authorization_code'; 
                uni.request({
                    method: 'get',
                    url: url,
                    data:'',
                    header: {
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                    success:(res) => {
                        //console.log(res)
                        this.openid = res.data.openid;
                        this.session_key = res.data.session_key;
                    },
                    fail:(err) => {
                        //也可以写code判断
                        console.log(err);
                    },
                    complete:() => {
                        
                    }
                })
            },
            //获取登录code
            getLoginCode(){
                let _self = this;
                uni.login({
                    provider: 'weixin',
                    success: function(loginRes) {
                        console.log('code',loginRes);
                        _self.getdata(loginRes.code)
                    },
                })
            },
            login(type){
                uni.navigateTo({
                    url: './login'
                })
            }
        }
    }
</script>

<style scoped>
.btns{
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.btns view,.btns .wx{
    width: 630upx;
    margin:114upx 60upx 0;
    border-radius: 44upx;
    background:#5178C8;
    text-align: center;
    line-height: 80upx;
    color: #fff;
    font-size: 30upx;
}
.btns button.wx{
    font-size: 34upx;
    line-height: 100upx;
}
.btns view.tels{
    background: transparent;
    border: 2upx solid #999;
}
.tel_cont{width: 100%;}
.tel_cont .mask{width: 100%;height: 100%;position: fixed;left: 0;right: 0;top: 0;background: rgba(0,0,0,.5)}
.tel{height: 400upx;background:#fff;position: fixed;bottom: 0;left: 0;right: 0;border-radius: 10upx;padding: 30upx 30upx ;}
.tel_btns .sure{background: #3BA0FF;margin-left: 30upx;}
.wxbtn::after{border: 0;}
.tel_btns .cancel{color: #303030;background: #DDDEE0;}
.tel_btns .wxbtn{padding: 0 70upx;}
.tel_btns{margin-top: 120upx;justify-content: center;}
.wxbtn{background: none;color: #fff;font-size: 26upx;font-weight: bold;margin: 0;padding-left: 10upx;}
</style>