tf-business/pages/login/index.vue

<template>
    <view class="login">
        <capsule></capsule>
        <view class="login-container">
            <view class="login-tab">
                <view v-for="item in loginList" :key="item.id" :class="idx == item.id ? 'act' : ''"
                    @click="changeIdx(item.id)">{{ item.title }}</view>
            </view>
            <view class="login-ipt">
                <view class="ipt-list">
                    <tui-input placeholder="请输入您的账号" v-model="loginAccount.username" :inputBorder="true"
                        :radius="16"></tui-input>
                    <view class="password" v-show="idx == 0">
                        <view v-show="!showIcon">
                            <tui-input type="text" placeholder="请输入您的密码"
                            v-model="loginAccount.password" :inputBorder="true" :radius="16">
                            <template #right>
                                <tui-icon name="seen" :size="26" @click="changeIcon(true)"></tui-icon>
                            </template>
                        </tui-input>
                        </view>
                        <view v-show="showIcon">
                            <tui-input type="password" placeholder="请输入您的密码"
                            v-model="loginAccount.password" :inputBorder="true" :radius="16">
                            <template #right>
                                <tui-icon name="unseen" :size="26" @click="changeIcon(false)"></tui-icon>
                            </template>
                        </tui-input>
                        </view>
                        
                    </view>
                    <view class="code" v-show="idx == 1">
                        <tui-input placeholder="请输入验证码" v-model="loginAccount.code" :inputBorder="true" :radius="16">
                            <template #right>
                                <tui-countdown-verify :successVal="successVal" @send="getVerify" color="#EF530E"
                                    borderColor="transparent" :size="28" :seconds="60"
                                    :resetVal="resetVal"></tui-countdown-verify>
                            </template>
                        </tui-input>
                    </view>
                </view>
            </view>
            <view class="login-protocol">
                <view class="protocal-conter">
                    <view v-show="protocolTrue" @click="radioClick(false)">
                        <tui-icon name="circle-selected" :size="32" unit="rpx" color="#EF530E"></tui-icon>
                    </view>
                    <view v-show="!protocolTrue" @click="radioClick(true)">
                        <tui-icon name="circle" :size="32" unit="rpx"></tui-icon>
                    </view>
                    <view class="protocol-txt">
                        <text :style="{ color: protocolTrue ? '#000' : '#CCCCCC' }">我已经阅读并同意</text>
                        <text :style="{ color: protocolTrue ? '#EF530E' : '#FFD2BE' }">《用户协议及隐私政策》</text>
                    </view>
                </view>
            </view>
            <view class="btn-list">
                <view class="login-btn" @click="landing">登陆</view>
                <view class="register-btn">注册开店</view>
            </view>
        </view>
        <modal :showModal="modal" :promptList="promptList" @closeModal="closeModal" :showBtn="showBtn"></modal>
    </view>
</template>

<script>
import { login, getCode } from '@/config/index.js'
import JM from '@/utils/rsaEncrypt.js'
export default {
    data() {
        return {
            idx: 0,
            loginList: [
                {
                    id: 0,
                    title: '密码登录'
                },
                {
                    id: 1,
                    title: '验证码登录'
                }
            ],
            loginAccount: {
                username: '',
                rememberMe: false,
                //  验证码
                code: '',
                //  密码
                password: '',
            },
            //  弹框显示
            modal: false,
            //  弹框显示的内容
            promptList: [],
            //  控制按钮显示
            showBtn: false,
            showIcon: true,
            //  控制是否同意协议
            protocolTrue: false,
            //  控制获取验证码成功
            successVal: 0,
            //  控制获取验证码失败
            resetVal: 0,
        }
    },
    methods: {
        //  关闭弹框
        closeModal() {
            this.modal = false
        },
        changeIdx(index) {
            this.idx = index
        },
        //  控制眼睛切换
        changeIcon(flag) {
            this.showIcon = flag
        },
        // 单选框修改
        radioClick(flag) {
            this.protocolTrue = flag
        },
        async getVerify() {
            const phoneCodeVerification = /^[1][3-9][0-9]{9}$/
            if (!phoneCodeVerification.test(this.loginAccount.username)) {
                this.$showToast('请输入正确的账号！')
                this.resetVal++
                return
            }
            let res = await getCode({ phone: this.loginAccount.username });
            if (res.message == "") {
                this.successVal++
            } else {
                this.resetVal++
            }
        },
        //  登录
        landing() {
            const phoneCodeVerification = /^[1][3-9][0-9]{9}$/
            if (!phoneCodeVerification.test(this.loginAccount.username)) {
                this.$showToast('请输入正确的账号！')
                this.resetVal++
                return
            }
            if (!this.protocolTrue) {
                this.$showToast('请勾选同意用户协议。')
                this.resetVal++
                return
            }
            if (this.idx == 0) {
                this.passwordLogin()
            }
            if (this.idx == 1) {
                this.codeLogin()
            }
        },
        //  密码登录的处理逻辑
        async passwordLogin() {
            let obj = {
                username: JM.encrypt(this.loginAccount.username),
                password: JM.encrypt(this.loginAccount.password),
                rememberMe: false
            }
            this.getLogin(obj)
        },
        //  验证码登录的处理逻辑
        async codeLogin() {
            if (this.loginAccount.code == '') {
                this.$showToast('请输入验证码')
                return
            }
            let codeObj = {
                username: JM.encrypt(this.loginAccount.username),
                code: JM.encrypt(this.loginAccount.code),
                rememberMe: false
            }
            this.getLogin(codeObj)
        },
        //  具体登陆接口调用
        async getLogin(data) {
            //  全局的加载状态显示
            this.$loading.show("登录中");
            try {
                let res = await login(data);

                if (res.code != '' && res.message == '用户未注册') {
                    this.modal = true
                    this.promptList = ['您的账户未注册店铺', '请重新输入']
                    this.showBtn = true
                    return
                } else if (res.code != '') {
                    this.modal = true
                    this.promptList = [res.message, '请重新输入']
                    this.showBtn = false
                    return
                }
                //  将数据存储到本地
                uni.setStorageSync("storage_info", res.data);
                uni.setStorageSync("storage_key", res.data.token);
                // 跳转到首页
                uni.switchTab({
                    url: "/pages/tabbar/index/index",
                });

            } catch (error) {
                uni.showToast({
                    title: error,
                    duration: 1000000
                });
            } finally {
                this.$loading.hide();
            }
        }
    },
}
</script>

<style lang="scss" scoped>
.login {
    width: 100vw;
    height: 100vh;

    .login-container {
        width: 100%;
        height: 100rpx;
        margin-top: 172rpx;
        padding: 0 68rpx;
        box-sizing: border-box;

        .login-tab {
            justify-content: space-between;
            font-size: 48rpx;
            padding-right: 70rpx;
            color: #999999;
            @include flex(space-between);
            margin-bottom: 60rpx;

            .act {
                color: #000;
            }
        }

        .login-ipt {
            width: 100%;

            .ipt-list {
                @include flex(center, column, 24rpx);

                .password {
                    width: 100%;
                }

                .code {
                    width: 100%;
                }
            }
        }

        .login-protocol {
            @include flex(center);
            margin-top: 34rpx;

            .protocal-conter {
                @include flex(center, null, 10rpx);

                .protocol-txt {
                    font-size: 24rpx;
                }
            }
        }

        .btn-list {
            width: 100%;
            margin-top: 48rpx;
            @include flex(center, column, 32rpx);

            view {
                width: 100%;
                font-size: 36rpx;
                height: 96rpx;
                text-align: center;
                line-height: 96rpx;
                border-radius: 16rpx;
            }

            .login-btn {
                background-color: $primary-color;
                color: #fff;
            }

            .register-btn {
                border: 2rpx solid $primary-color;
                color: $primary-color;
                box-sizing: border-box;
            }
        }
    }
}

/* 弹框样式 */
</style>