sj-miniprogram/pages/login/login.js

import PhonePopup from '../../components/phone-popup/phone-popup.vue';
import { ref } from 'vue';

export default {
    components: {
        PhonePopup
    },
    setup() {
        const isAgree = ref(false);
        const showPhonePopup = ref(false);
        const showAgreementModal = ref(false);

        const onAgreeChange = (e) => {
            isAgree.value = e.detail.value.length > 0;
        };

        const closeAgreementModal = () => {
            showAgreementModal.value = false;
        };

        const confirmAgreement = () => {
            isAgree.value = true;
            showAgreementModal.value = false;
            // Proceed to login
            handleLogin();
        };

        const handleLogin = () => {
            if (!isAgree.value) {
                showAgreementModal.value = true;
                return;
            }
            // Show customized bottom popup as designed in Image 2
            showPhonePopup.value = true;
        };

        const onAllowLogin = () => {
            showPhonePopup.value = false;
            uni.showToast({
                title: '登录成功',
                icon: 'success'
            });
            setTimeout(() => {
                // Go to next page as flow
                uni.navigateTo({
                    url: '/pages/profile/profile'
                });
            }, 1000);
        };
        return {
            isAgree,
            showPhonePopup,
            showAgreementModal,
            closeAgreementModal,
            confirmAgreement,
            onAgreeChange,
            handleLogin,
            onAllowLogin
        };
    }
}