index.vue

<template>
    <view class="box">
        <button @click="open">打开弹窗</button>
        <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>
        <button class='dialog-btn' open-type="getUserInfo" bindgetuserinfo="userInfoHandler">获取用户信息</button>

        <uni-popup ref="popup" type="dialog">
            <uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
        </uni-popup>
        <!-- <uni-popup ref="popup" type="bottom">
            <view class="modal-content">
                <view>请允许获取您的用户信息</view>
                <button @click="getUserInfo">授权</button>
            </view>
        </uni-popup> -->
    </view>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    onLoad() {
    },
    mounted() {

    },
    methods: {
        open(){
            // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
            this.$refs.popup.open('bottom')
        },

        getPhoneNumber(){

        },

        // getUserInfo() {
        //     // console.log(event)
        //     // this.$refs.popup.open('bottom')
        //     uni.getUserInfo({
        //         success: res => {
        //             console.log(res.userInfo);
        //             // 这里可以编写你的获取用户信息后的逻辑
        //         },
        //         fail: err => {
        //             console.error(err);
        //         }
        //     });
        // },

        userInfoHandler(e) {
            if (e.detail.authSetting) {
                // 用户点击了允许授权按钮
                console.log('用户信息:', e.detail);
                // 这里可以调用uni.getUserInfo()来获取用户信息，或者处理其他逻辑
            } else {
                // 用户点击了拒绝授权按钮
                console.log('用户拒绝授权');
                // 这里可以处理用户拒绝授权的情况
            }
        }
    }
}
</script>

<style scoped>

</style>