forestry-wx/src/pages/login/login.vue

<template>
    <z-paging ref="paging" bgColor="rgba(0,0,0,0)">
        <template #top>
            <up-navbar :fixed="false" title="登录">
                <template #left>
                    <!-- <image @click="$u.route({ type: 'switchTab', url: '/pages/list/index' })" class="home_icon" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/common/home.png" mode="widthFix" /> -->
                    <up-icon @click="homeBack()" name="arrow-left" color="#333" size="40rpx"></up-icon>
                </template>
            </up-navbar>
        </template>
        <view class="login-centent">
            <view class="login-logo-wrap p-rtv d-flex j-c a-c">
                <image class="bg-circle" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/login/bg_circle.png" mode="aspectFit" />
                <image class="login-logo" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/login/logo.png" mode="aspectFit" />
            </view>
            <view class="login-form pl-20 pd-25">
                <up-button type="primary" shape="circle" @click="$u.route({ url: '/pages/login/phone/phone', params: { redirect: encodeURIComponent(redirect) } })">
                    <view class="d-flex a-c j-c">
                        <!-- <image class="base-icon mr-20"
                            src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/login-phone/phone.png"
                            mode="widthFix" /> -->
                        手机号验证码登录
                    </view>
                </up-button>
                <view class="pd-20"></view>
                <template v-if="isBindPhone">
                    <up-button class="mb-40" @click="handleLogin" color="#28A94B" type="primary" shape="circle">
                        <view class="d-flex a-c j-c">
                            <!-- <image class="base-icon mr-20"
                                src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/login/weixin_logo.png"
                                mode="widthFix" /> -->
                            手机号快捷登录
                        </view>
                    </up-button>
                </template>
                <template v-else>
                    <up-button class="mb-40" color="#28A94B" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" type="primary" shape="circle">
                        <view class="d-flex a-c j-c">
                            <!-- <image class="base-icon mr-20"
                                src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/login/weixin_logo.png"
                                mode="widthFix" /> -->
                            手机号快捷登录
                        </view>
                    </up-button>
                </template>
                <view class="d-flex a-c pd-10 mb-20" @click="clickAgree">
                    <up-checkbox activeColor="#2A6D52" size="32rpx" name="agree" usedAlone v-model:checked="form.aloneChecked"></up-checkbox>
                    <view class="d-flex a-c f-s-24">
                        <text class="c-999">我已阅读并同意</text>
                        <text class="c-primary" @click="$u.route({ url: '/views/tool/agreement/agreement' })">《用户协议》</text>
                        <text class="c-666">、</text>
                        <text class="c-primary" @click="$u.route({ url: '/views/tool/privacy/privacy' })">《隐私政策》</text>
                    </view>
                </view>
                <official-account></official-account>
            </view>
        </view>
        <image class="login-bttom-bg" src="https://ta.zycpzs.cn/oss-file/smart-trace/szyy/images/login/bg_bottom.png" mode="widthFix" />
    </z-paging>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { useInfoStore } from '@/store';
import config from '@/config';
import { useRouter } from 'vue-router';
import { getCurrentPage } from '@/utils/public';
import { onLoad } from '@dcloudio/uni-app';
import { updateUserInfo } from '@/utils/common';
import { recursiveDecodeURIComponent } from '@/utils/ruoyi';
import { useClientRequest } from '@/utils/request';
const pages = ref(getCurrentPages());
const infoStore = useInfoStore();
const paging = ref(null);
const redirect = ref('');
// 判断是否绑定手机号
const isBindPhone = ref(0);
const form = ref({
    aloneChecked: false,
    phoneCode: '',
    xcxcode: '',
    grantType: 'xcx',
    clientId: config.clientId,
    // tenantId: config.tenantId,
});
const clickAgree = () => {
    form.value.aloneChecked = !form.value.aloneChecked;
};

const checkUserRegist = (data) => {
    return useClientRequest.post('/auth/checkUserRegist', data, false);
};
const getPhoneNumber = (e) => {
    console.log(e);
    // 判读是否获取成功
    if (!e.detail.code) {
        uni.showToast({
            title: '获取手机号失败',
            icon: 'none',
        });
        return;
    }
    form.value.phoneCode = e.detail.code;
    // 判断是否勾选隐私协议
    if (!form.value.aloneChecked) {
        uni.showToast({
            title: '请阅读并同意用户协议和隐私政策',
            icon: 'none',
        });
        return;
    }
    // 手机号登录方法
    handleLogin();
};
const handleLogin = () => {
    // 判断是否勾选隐私协议
    if (!form.value.aloneChecked) {
        uni.showToast({
            title: '请阅读并同意用户协议和隐私政策',
            icon: 'none',
        });
        return;
    }
    // 微信小程序登录获取的code
    uni.login({
        provider: 'weixin',
        success: function (loginRes) {
            // 获取用户信息
            if (loginRes.errMsg === 'login:ok') {
                form.value.xcxcode = loginRes.code;
                // 请求登录接口
                weixinLogin();
            }
        },
    });
};
const weixinLogin = async () => {
    try {
        // 请求登录接口
        uni.showLoading({
            title: '登录中...',
            mask: true,
        });
        await infoStore.wxLogin(form.value);
        // 调用获取用户信息接口
        infoStore.getUserInfo();
        console.log('调用获取用户信息接口');

        infoStore.getCompanyInfo();
        uni.hideLoading();
        // 重定向或跳转首页
        // 获取redirect参数
        const redirectUrl = redirect.value || '/pages/plant/index';
        // switchTab 页面
        const switchTabs = ['/pages/plant/index'];
        if (switchTabs.includes(redirectUrl)) {
            uni.$u.route({
                type: 'switchTab',
                url: redirectUrl,
            });
            return;
        }
        uni.$u.route({
            type: 'redirect',
            url: redirectUrl,
        });
    } catch (error) {
        uni.showToast({
            title: error.message || '登录失败，请稍后重试',
            icon: 'none',
        });
    }
};
// 判断用户是否绑定手机号
const hasBindPhone = async () => {
    // 微信小程序登录获取的code
    uni.login({
        provider: 'weixin',
        success: function (loginRes) {
            // 获取用户信息
            if (loginRes.errMsg === 'login:ok') {
                console.log(loginRes, 'loginRes');
                checkUserRegist({
                    code: loginRes.code,
                    clientId: config.clientId,
                }).then((res) => {
                    if (res.code === 200) {
                        isBindPhone.value = +res.data;
                    }
                });
            }
        },
    });
};
const homeBack = () => {
    const pages = getCurrentPages();
    if (pages.length > 1) {
        uni.navigateBack();
    } else {
        const redirectUrl = redirect.value || '/pages/list/index';
        const switchTabs = ['/pages/index/index', '/pages/find/index/index', '/pages/cart/index', '/pages/list/index', '/pages/user/index'];
        if (switchTabs.includes(redirectUrl)) {
            uni.$u.route({
                type: 'switchTab',
                url: redirectUrl,
            });
            return;
        } else {
            uni.$u.route({
                type: 'switchTab',
                url: '/pages/list/index',
            });
        }
    }
};
onLoad((options) => {
    // 获取redirect参数
    const redirectStr = options.redirect ? recursiveDecodeURIComponent(options.redirect) : '';
    console.log(redirectStr);
    redirect.value = redirectStr;
    // 判断用户是否绑定手机号
    hasBindPhone();
});
</script>

<style lang="scss" scoped>
.login-logo-wrap {
    width: 750rpx;
    height: 750rpx;
    margin: auto;
    box-sizing: border-box;
}

.bg-circle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 770rpx;
    height: 770rpx;
    // 360度旋转
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.login-logo {
    width: 493rpx;
    height: 284rpx;
}

.login-bttom-bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 687rpx;
    margin: auto;
    // 不能有事件
    pointer-events: none;
}
</style>