<template>
    <view class="user_info" v-if="isShow">
        <view class="gray_con"></view>
        <view class="user_info_con">
            <image class="logo" src="/static/logo.png"></image>
            <view class="logo_inner">
                <view class="font_34 color_main">
                    <view>常熟小程序</view>
                    <view>微信授权获取手机号码</view>
                </view>
            </view>
            <button hover-class="none" @getphonenumber="getPhone" open-type="getPhoneNumber" class="content_btn_con">
                <view class="main_content_btn">授权</view>
            </button>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        isClose:{
            type: Boolean,
            default:true
        }
    },
    data() {
        return {
            isShow:false
        };
    },
    mounted() {},
    methods: {
        showAlert(){
            this.isShow = true;
        },
        hideAlert(){
            this.isShow = false;
        },
        getPhone(data) {
            let that = this;
            let loginInfo = that.$util.getLoginInfo();
            if (data.detail.errMsg == "getPhoneNumber:ok") {
                that.$doPost('WX.aspx', {
                    encryptedData: data.detail.encryptedData,
                    iv: data.detail.iv,
                    mod:"getPhone"
                }).then(res => {
                    if (res.data.resultcode==0) {
                        let phone = res.data.data.Phone;
                        loginInfo.hasPhone = true;
                        loginInfo.Phone = phone;
                        uni.setStorageSync(that.$constant.LOGIN_INFO, loginInfo);
                        that.$emit('success', loginInfo);
                        that.isShow = false;
                    }else{
                        that.$util.showToast(res.data.msg);
                    }
                })
                .catch(err => {
                    console.log('request fail', err);
                });
            }
        }
    }
};
</script>

<style lang="scss">
.user_info {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    left: 0;
    top: 0;
}
.gray_con {
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    left: 0;
    top: 0;
}
.user_info_con {
    width: 75%;
    position: absolute;
    height: 580upx;
    background-color: #fff;
    border-radius: 30upx;
    z-index: 2;
    left: 12.5%;
    top: 50%;
    transform: translateY(-50%);
}
.close_con {
    width: 80upx;
    height: 80upx;
    position: absolute;
    right: 0;
    top: 0;
}
.close_con .close_icon {
    width: 24upx;
    height: 26upx;
}
.logo {
    width: 240upx;
    height: 76upx;
    margin: auto;
    margin-top: 100upx;
    margin-bottom: 0;
    display: block;
}
.logo_title {
    font-size: 28upx;
    color: #000;
}
.logo_inner {
    text-align: center;
    margin-top:60upx;
    margin-bottom:60upx;
    line-height: 46upx;
}
.logo_txt {
    margin-top: 40upx;
    margin-bottom: 16upx;
}
.content_btn_con {
    padding: 0 50upx;
    margin-top: 70upx;
    background: transparent;
    border: none;
    outline: none;
}
</style>
