md-h5/pages/login/login.vue

<template>
    <view class="head-image">
        <image src="/static/image/logo1.png" mode="heightFix" />
    </view>
    <view class="input-box">
        <view class="content">
            <picker class="picker" mode="selector" :range="countryCodes" range-key="name" :value="countryCode"
                @change="changeCountryCode">
                {{ countryCode }}
            </picker>
            <input type="number" :value="phonenumber" :focus="focused == 'phonenumber'"
                @input="onInput($event, 'phonenumber')" placeholder="请输入手机号" class="input" />
        </view>
    </view>
    <view class="input-box" style="margin-top:70rpx;">
        <view class="content">
            <input type="number" :value="password" :focus="focused == 'password'" @input="onInput($event, 'password')"
                placeholder="请输入验证码" class="input" />
            <view class="auth-code" @click="getAuthCode">
                {{ downTime == 0 ? '获取验证码' : downTime + "S" }}
            </view>
        </view>
    </view>
    <My-button :customStyle="customStyle" class="my-but" :loading="loading" :disabled="disabled" text="登录"
        :onClick="logIn" />
    <view class="agreement-box">
        <up-checkbox label="已阅读并同意" name="agree" usedAlone v-model:checked="isAgreement" />
        <view @click="checkTheAgreement" style="color: #3874F6;">
            《隐私协议》
        </view>
    </view>

    <up-modal asyncClose :show="showModal" confirmColor="#052E5D" showCancelButton confirmText="阅读并获取"
        @confirm="onConfirm1" @cancel="showModal = false">
        <view class="modal-u">请阅读并同意<text style="color: #3874F6;" @click="checkTheAgreement">《隐私协议》</text></view>
    </up-modal>

    <!-- 正式无需使用 -->
    <up-picker title="选择站点" :show="account_list.length != 0" :columns="account_list" keyName="sitename"
        @cancel="onCancel" @confirm='onConfirm' />
</template>

<script setup>
import { ref, reactive, getCurrentInstance, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
const { $Http } = getCurrentInstance().proxy;

onLoad(() => {
    const storedPhone = uni.getStorageSync('phonenumber');
    if (storedPhone) {
        phonenumber.value = storedPhone;
        isAgreement.value = true;
    }

    if (wx.getStorageSync('userMsg').token) {
        $Http.basic({
            "classname": "common.adspace.adspace",
            "method": "query_adspacelist", //查询轮播图
            content: {
                nocache: true
            }
        }).then(res => {
            if (res.code !== 0) {
                uni.removeStorageSync('banner')
                uni.setStorageSync('banner', res.data);
                uni.redirectTo({
                    url: '/pages/index/index',
                });
            }
        })
    }
});

// 登陆按钮相关
const loading = ref(false);
const disabled = computed(() => {
    return !(phonenumber.value.length > 0 && password.value.length >= 4);
});
const customStyle = ref({
    width: '380rpx',
    margin: '120rpx auto 0',
});
// 表单相关
const focused = ref('');
const countryCode = ref('+86');
const phonenumber = ref('');
const password = ref('');
const countryCodes = reactive([
    { code: '+86', name: '中国 +86', regex: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/ }, // 中国手机号验证规则
    { code: '+1', name: '美国 +1', regex: /^[2-9]\d{2}[2-9](?!11)\d{6}$/ }, // 美国手机号验证规则
    { code: '+44', name: '英国 +44', regex: /^7\d{9}$/ }, // 英国手机号验证规则
]);
function onInput(e, name) {
    if (name == 'phonenumber') {
        phonenumber.value = e.detail.value;
    } else if (name == 'password') {
        password.value = e.detail.value;
    }

}
function validatephonenumber() {
    const selectedCountry = countryCodes.find(country => country.code === countryCode.value);
    if (!selectedCountry || !selectedCountry.regex.test(phonenumber.value)) {
        uni.showToast({
            title: `请输入有效的${selectedCountry ? selectedCountry.name.split(" ")[0] + '号码' : '手机号'}`,
            icon: 'none',
        });
        focused.value = 'phonenumber'; // 聚焦输入框
        return false;
    }
    return true;
}
function changeCountryCode(e) {
    countryCode.value = countryCodes[e.detail.value].code;
    if (phonenumber.value) validatephonenumber();
}
// 验证码相关
let countDown = null;
const downTime = ref(0); // 倒计时初始值

function getAuthCode() {
    console
    if (downTime.value > 0) return;
    if (!validatephonenumber()) return;
    $Http.getpassword({ "phonenumber": phonenumber.value, "systemclient": "wechatsaletool" }).then(res => {
        console.log('获取验证码结果:', res);
        if (res.code == 1) {
            downTime.value = 60;
            countDown = setInterval(() => {
                downTime.value--;
                if (downTime.value <= 0) {
                    clearInterval(countDown);
                    downTime.value = 0;
                }
            }, 1000);
            const code = res.msg.split('手机验证码为：');
            if (code[1]) {
                password.value = code[1].trim(); // 自动填充验证码

            } else {
                focused.value = 'password'; // 聚焦输入框
            }
        }
        uni.showToast({
            title: res.msg,
            icon: 'none',
        });
    })
}

// 登录相关
let account_list = reactive([]);
function logIn() {
    if (!validatephonenumber()) return;
    if (isAgreement.value == false) return showModal.value = true;
    loading.value = true;
    $Http.plogin({ "phonenumber": phonenumber.value, "password": hexMD5(password.value), "systemclient": "wechatsaletool" }).then(res => {
        if (res.code == 1) {
            if (res.account_list.length == 1) {
                handleLogin(res.account_list[0]);
            } else {
                account_list = reactive([res.account_list]);
            }
        } else {
            loading.value = false;
            uni.showToast({
                title: res.msg,
                icon: 'none',
            });
        }
    })
}

function onCancel() {
    account_list = reactive([]);

}
function onConfirm(e) {
    handleLogin(e.value[0]);
    account_list = reactive([]);
}
function handleLogin(data) {
    $Http.base({
        "id": 2025072809441203,
        "content": {
            "customerphone": phonenumber.value,
            siteid: data.siteid
        }
    }).then(res => {
        console.log("登录结果:", res);
        loading.value = false;
        if (res.code == 1) {
            uni.removeStorageSync('userMsg');
            uni.setStorageSync('userMsg', data);
            uni.removeStorageSync('phonenumber');
            uni.setStorageSync('phonenumber', phonenumber.value);
            uni.redirectTo({
                url: '/pages/index/index',
            });
        } else {
            uni.showToast({
                title: res.msg,
                icon: 'none',
            });
        }
    })
}

//隐私协议相关
const isAgreement = ref(false);
const showModal = ref(false);

function checkTheAgreement() {
    console.log(122222222222222222)
    uni.showLoading({
        title: "加载中...",
    });
    uni.downloadFile({
        url: "https://yossys22170.obs.cn-east-2.myhuaweicloud.com:443/202309261695715892017B6ef5bd76.docx",
        success: (res) => {
            uni.openDocument({
                filePath: res.tempFilePath,
                fileType: "docx",
                success: (s) => {
                    uni.hideLoading();
                },
                fail: (err) => {
                    console.log("openDocument", err);
                    uni.hideLoading();
                    uni.showToast({
                        title: "读取失败,请稍后再试",
                        icon: "none",
                    });
                },
            });
        },
        fail: (err) => {
            console.log("downloadFile", err);
            uni.hideLoading();
            uni.showToast({
                title: "读取失败,请稍后再试",
                icon: "none",
            });
        },
    });
}

function onConfirm1() {
    showModal.value = false;
    isAgreement.value = true;
    logIn();
}

/* 以下为MD5加密 */
function hexMD5(str) {
    return binl2hex(coreMD5(str2binl(str)))
}

function safe_add(x, y) {
    var lsw = (x & 0xFFFF) + (y & 0xFFFF)
    var msw = (x >> 16) + (y >> 16) + (lsw >> 16)
    return (msw << 16) | (lsw & 0xFFFF)
}
function rol(num, cnt) {
    return (num << cnt) | (num >>> (32 - cnt))
}
function cmn(q, a, b, x, s, t) {
    return safe_add(rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b)
}
function ff(a, b, c, d, x, s, t) {
    return cmn((b & c) | ((~b) & d), a, b, x, s, t)
}
function gg(a, b, c, d, x, s, t) {
    return cmn((b & d) | (c & (~d)), a, b, x, s, t)
}
function hh(a, b, c, d, x, s, t) {
    return cmn(b ^ c ^ d, a, b, x, s, t)
}
function ii(a, b, c, d, x, s, t) {
    return cmn(c ^ (b | (~d)), a, b, x, s, t)
}
function coreMD5(x) {
    var a = 1732584193
    var b = -271733879
    var c = -1732584194
    var d = 271733878

    for (var i = 0; i < x.length; i += 16) {
        var olda = a
        var oldb = b
        var oldc = c
        var oldd = d

        a = ff(a, b, c, d, x[i + 0], 7, -680876936)
        d = ff(d, a, b, c, x[i + 1], 12, -389564586)
        c = ff(c, d, a, b, x[i + 2], 17, 606105819)
        b = ff(b, c, d, a, x[i + 3], 22, -1044525330)
        a = ff(a, b, c, d, x[i + 4], 7, -176418897)
        d = ff(d, a, b, c, x[i + 5], 12, 1200080426)
        c = ff(c, d, a, b, x[i + 6], 17, -1473231341)
        b = ff(b, c, d, a, x[i + 7], 22, -45705983)
        a = ff(a, b, c, d, x[i + 8], 7, 1770035416)
        d = ff(d, a, b, c, x[i + 9], 12, -1958414417)
        c = ff(c, d, a, b, x[i + 10], 17, -42063)
        b = ff(b, c, d, a, x[i + 11], 22, -1990404162)
        a = ff(a, b, c, d, x[i + 12], 7, 1804603682)
        d = ff(d, a, b, c, x[i + 13], 12, -40341101)
        c = ff(c, d, a, b, x[i + 14], 17, -1502002290)
        b = ff(b, c, d, a, x[i + 15], 22, 1236535329)

        a = gg(a, b, c, d, x[i + 1], 5, -165796510)
        d = gg(d, a, b, c, x[i + 6], 9, -1069501632)
        c = gg(c, d, a, b, x[i + 11], 14, 643717713)
        b = gg(b, c, d, a, x[i + 0], 20, -373897302)
        a = gg(a, b, c, d, x[i + 5], 5, -701558691)
        d = gg(d, a, b, c, x[i + 10], 9, 38016083)
        c = gg(c, d, a, b, x[i + 15], 14, -660478335)
        b = gg(b, c, d, a, x[i + 4], 20, -405537848)
        a = gg(a, b, c, d, x[i + 9], 5, 568446438)
        d = gg(d, a, b, c, x[i + 14], 9, -1019803690)
        c = gg(c, d, a, b, x[i + 3], 14, -187363961)
        b = gg(b, c, d, a, x[i + 8], 20, 1163531501)
        a = gg(a, b, c, d, x[i + 13], 5, -1444681467)
        d = gg(d, a, b, c, x[i + 2], 9, -51403784)
        c = gg(c, d, a, b, x[i + 7], 14, 1735328473)
        b = gg(b, c, d, a, x[i + 12], 20, -1926607734)

        a = hh(a, b, c, d, x[i + 5], 4, -378558)
        d = hh(d, a, b, c, x[i + 8], 11, -2022574463)
        c = hh(c, d, a, b, x[i + 11], 16, 1839030562)
        b = hh(b, c, d, a, x[i + 14], 23, -35309556)
        a = hh(a, b, c, d, x[i + 1], 4, -1530992060)
        d = hh(d, a, b, c, x[i + 4], 11, 1272893353)
        c = hh(c, d, a, b, x[i + 7], 16, -155497632)
        b = hh(b, c, d, a, x[i + 10], 23, -1094730640)
        a = hh(a, b, c, d, x[i + 13], 4, 681279174)
        d = hh(d, a, b, c, x[i + 0], 11, -358537222)
        c = hh(c, d, a, b, x[i + 3], 16, -722521979)
        b = hh(b, c, d, a, x[i + 6], 23, 76029189)
        a = hh(a, b, c, d, x[i + 9], 4, -640364487)
        d = hh(d, a, b, c, x[i + 12], 11, -421815835)
        c = hh(c, d, a, b, x[i + 15], 16, 530742520)
        b = hh(b, c, d, a, x[i + 2], 23, -995338651)

        a = ii(a, b, c, d, x[i + 0], 6, -198630844)
        d = ii(d, a, b, c, x[i + 7], 10, 1126891415)
        c = ii(c, d, a, b, x[i + 14], 15, -1416354905)
        b = ii(b, c, d, a, x[i + 5], 21, -57434055)
        a = ii(a, b, c, d, x[i + 12], 6, 1700485571)
        d = ii(d, a, b, c, x[i + 3], 10, -1894986606)
        c = ii(c, d, a, b, x[i + 10], 15, -1051523)
        b = ii(b, c, d, a, x[i + 1], 21, -2054922799)
        a = ii(a, b, c, d, x[i + 8], 6, 1873313359)
        d = ii(d, a, b, c, x[i + 15], 10, -30611744)
        c = ii(c, d, a, b, x[i + 6], 15, -1560198380)
        b = ii(b, c, d, a, x[i + 13], 21, 1309151649)
        a = ii(a, b, c, d, x[i + 4], 6, -145523070)
        d = ii(d, a, b, c, x[i + 11], 10, -1120210379)
        c = ii(c, d, a, b, x[i + 2], 15, 718787259)
        b = ii(b, c, d, a, x[i + 9], 21, -343485551)

        a = safe_add(a, olda)
        b = safe_add(b, oldb)
        c = safe_add(c, oldc)
        d = safe_add(d, oldd)
    }
    return [a, b, c, d]
}
function binl2hex(binarray) {
    var hex_tab = "0123456789abcdef"
    var str = ""
    for (var i = 0; i < binarray.length * 4; i++) {
        str += hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8 + 4)) & 0xF) +
            hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8)) & 0xF)
    }
    return str
}
function str2binl(str) {
    var nblk = ((str.length + 8) >> 6) + 1 // number of 16-word blocks  
    var blks = new Array(nblk * 16)
    for (var i = 0; i < nblk * 16; i++) blks[i] = 0
    for (var i = 0; i < str.length; i++)
        blks[i >> 2] |= (str.charCodeAt(i) & 0xFF) << ((i % 4) * 8)
    blks[i >> 2] |= 0x80 << ((i % 4) * 8)
    blks[nblk * 16 - 2] = str.length * 8
    return blks
}
</script>

<style lang="scss" scoped>
.head-image {
    display: flex;
    justify-content: center;
    height: 148rpx;
    margin-top: 120rpx;
    margin-bottom: 120rpx;

    image {
        height: 100%;
    }
}

.input-box {
    width: 630rpx;
    padding-bottom: 20rpx;
    margin: 0 auto;
    border-bottom: 1px solid #dcdcdc;
    box-sizing: border-box;

    .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 48rpx;
        width: 100%;

        .picker {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: bold;
            font-size: 32rpx;
            color: #333333;
            margin-right: 20rpx;
        }

        .input {
            flex: 1;
        }

        .auth-code {
            margin-left: 20rpx;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: bold;
            font-size: 28rpx;
            color: #3874F6;
        }
    }
}

.my-but {
    width: 380rpx;
}

.agreement-box {
    position: fixed;
    bottom: 80rpx;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    up-checkbox {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
    }
}
</style>