vue3_YDHL/pages/authentication/authentication.vue

<template>
    <view style="height: 100%;">
        <view v-if="agreeFlag" :style="'margin-top: ' + (height * 2 - 2) + 'rpx; height: calc(100vh - ' + (height * 2 - 2) + 'rpx)'">
            <view class="userinfo">
                <image class="userinfo-avatar" src="/assets/image/pro_icon.png" mode="cover"></image>
            </view>
            <view class="usermotto">
                <view class="account">
                    <text class="title">医院IP/端口:</text>
                    <input class="text-input" v-model="hospUrlIP" type="text" />
                </view>
                <view class="account">
                    <text class="title">工号/手机号:</text>
                    <input class="text-input" v-model="wxUserValue" type="number" />
                </view>
                <view class="account">
                    <text class="title">密码:</text>
                    <input class="text-input" v-model="wxUserValuePass" type="text" confirm-type="done" password />
                </view>
                <view class="bottomBtn">
                    <text @tap="confirm" class="applyBtn">登录</text>
                </view>
                <text @tap="agreemeetOpen" class="user-agreement">《用户隐私协议》</text>
            </view>
            <view class="usermotto">
                <text class="user-motto">{{ motto }}</text>
            </view>
        </view>

        <scroll-view :scroll-y="true" style="height: 100%; width: 100%;" v-if="!agreeFlag">
            <text style="font-size: 40rpx; font-weight: 700; margin-top: 100rpx; display: block; text-align: center">隐私协议</text>
            <text :decode="true" style="padding: 0 20rpx; display: block; line-height: 35px">
                1.开发者处理的信息 根据法律规定，开发者仅处理实现小程序功能所必要的信息。 为了身份识别，开发者将在获取你的明示同意后，收集你的微信昵称、头像。
                为了身份验证，开发者将在获取你的明示同意后，收集你的手机号。 2.你的权益 2.1&emsp;关于收集你的手机号，你可以通过以下路径：小程序主页右上角“...” — “设置” —
                “小程序已获取的信息” — 点击特定信息 — 点击“通知开发者删除”，开发者承诺收到通知后将删除信息。
                2.2&emsp;关于你的个人信息，你可以通过以下方式与开发者联系，行使查阅、复制、更正、删除等法定权利。
                2.3&emsp;若你在小程序中注册了账号，你可以通过以下方式与开发者联系，申请注销你在小程序中使用的账号。在受理你的申请后，开发者承诺在十五个工作日内完成核查和处理，并按照法律法规要求处理你的相关信息。
                电话:15884411612 3.开发者对信息的存储 3.1&emsp;开发者承诺，除法律法规另有规定外，开发者对你的信息的保存期限应当为实现处理目的所必要的最短时间。 4.信息的使用规则
                4.1&emsp;开发者将会在本指引所明示的用途内使用收集的信息
                4.2&emsp;如开发者使用你的信息超出本指引目的或合理范围，开发者必须在变更使用目的或范围前，再次以通知方式告知并征得你的明示同意。 5.信息对外提供
                5.1&emsp;开发者承诺，不会主动共享或转让你的信息至任何第三方，如存在确需共享或转让时，开发者应当直接征得或确认第三方征得你的单独同意。
                5.2&emsp;开发者承诺，不会对外公开披露你的信息，如必须公开披露时，开发者应当向你告知公开披露的目的、披露信息的类型及可能涉及的信息，并征得你的单独同意。
                6.你认为开发者未遵守上述约定，或有其他的投诉建议、或未成年人个人信息保护相关问题，可通过以下方式与开发者联系；或者向微信进行投诉。 电话 : 15884411612
            </text>
            <button style="width: 100%; background-color: rgb(48, 118, 250); padding: 10rpx; color: white" type="default" @tap.stop.prevent="agree">已阅读并同意</button>
        </scroll-view>
    </view>
</template>

<script setup>
import { onLaunch, onShow } from '@dcloudio/uni-app'
import { ref, onMounted, onUnmounted, computed } from 'vue';
import Aes from '../../config/Aes';
import { $http } from '../../config/https';

// 获取应用实例
const app = getApp();

// 响应式数据
const hospUrlIP = ref('http://10.1.?.29:8090');
// const hospUrlIP = ref('https://np.h03.p0551.com');
const wxUserValue = ref('');
const wxUserValuePass = ref('');
const motto = ref('请确保设备在医院内网环境下使用！');
const userInfo = ref({});
const hasUserInfo = ref(false);
const canIUse = ref(uni.canIUse('button.open-type.getUserInfo'));
const agreeFlag = ref(true);

// 导航栏数据
const navbarData = ref({
    background: '',
    title: '登录移动护理',
    height: '100',
    bottom: true,
    isGoBack: true,
    cleanPat: 'Y'
});

// 计算高度
const height = ref(app.globalData.height * 2 + 20);

// 页面加载时
onMounted(() => {
    // 可以在这里处理页面初始化逻辑
    const storageUrl = uni.getStorageSync('appUrlAddress');
    if (storageUrl) {
        hospUrlIP.value = storageUrl;
    }
});

// 页面显示时
onShow(() => {
    const storageUrl = uni.getStorageSync('appUrlAddress');
    if (storageUrl) {
        hospUrlIP.value = storageUrl;
    }
});

// 方法定义
const getUserInfo = (e) => {
    // 注释掉的代码保持不变
    // userInfo.value = e.detail.userInfo;
    // hasUserInfo.value = true;
};

const confirm = () => {
    const currentHospUrl = hospUrlIP.value;
    const userName = wxUserValue.value;
    const passWord = wxUserValuePass.value;

    uni.setStorageSync('appUrlAddress', currentHospUrl);
    
    const data = {
        params: [
            {
                userName,
                passWord: Aes.Encrypt(passWord)
            }
        ]
    };

    $http.post('urlDeault', this , {
        code: '1001',
        data: data,
        success: (res) => {
            if (res.errorCode === '0') {
                uni.setStorageSync('userData', res.result[0]);
                uni.showToast({
                    title: '登录成功',
                    icon: 'none'
                });
                setTimeout(() => {
                    uni.redirectTo({
                        url: '../index/index'
                    });
                }, 1000);
            }
        }
    });
};

const agreemeetOpen = () => {
    agreeFlag.value = false;
};

const agree = () => {
    agreeFlag.value = true;
};
</script>

<style scoped>
.userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 200rpx;
}

.userinfo-avatar {
    width: 128rpx;
    height: 138rpx;
    margin: 20rpx;
}

.userinfo-nickname {
    color: #809aff;
}

.usermotto {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}
.user-motto {
    color: red;
}
.applyBtn {
    display: block;
    text-align: center;
    padding: 15rpx 110rpx;
    letter-spacing: 4px;
    font-size: 32rpx;
    color: #fff;
    background: dodgerblue;
    margin: 35rpx 14rpx !important;
    border-radius: 20px;
}
.account {
    font-size: 32rpx;
    height: 88rpx;
    padding-left: 50rpx;
    line-height: 88rpx;
    border-bottom: 2rpx solid #ebedf0e0;
}
.account .title {
    width: 200rpx;
    height: 100%;
    display: inline-block;
}
.account .text-input {
    display: inline-block;
    width: calc(100% - 220rpx);
    font-size: 30rpx;
    vertical-align: sub;
}
.bottomBtn {
    display: flex;
}
.user-agreement {
    font-size: 22rpx;
    color: rgb(61, 95, 245);
}
</style>