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.account" :inputBorder="true"
                        :radius="16"></tui-input>
                    <view class="password" v-show="idx == 0">
                        <tui-input :type="!showIcon ? 'text' : 'password'" placeholder="请输入您的密码"
                            v-model="loginAccount.password" :inputBorder="true" :radius="16">
                            <template #right>
                                <view v-if="showIcon">
                                    <tui-icon name="unseen" :size="26" @click="changeIcon(false)"></tui-icon>
                                </view>
                                <view v-else>
                                    <tui-icon name="seen" :size="26" @click="changeIcon(true)"></tui-icon>
                                </view>
                            </template>
                        </tui-input>
                    </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">登陆</view>
                <view class="register-btn">注册开店</view>
            </view>
        </view>

    </view>
</template>

<script>
export default {
    data() {
        return {
            idx: 0,
            loginList: [
                {
                    id: 0,
                    title: '密码登录'
                },
                {
                    id: 1,
                    title: '验证码登录'
                }
            ],
            loginAccount: {
                account: '',
                password: '',
                code: ''
            },
            showIcon: true,
            protocolTrue: false,
            //  控制获取验证码成功
            successVal: 0,
            //  控制获取验证码失败
            resetVal: 0
        }
    },
    methods: {
        changeIdx(index) {
            this.idx = index
        },
        //  控制眼睛切换
        changeIcon(flag) {
            this.showIcon = flag
        },
        // 单选框修改
        radioClick(flag) {
            this.protocolTrue = flag
        },
        getVerify() {
            console.log("获取验证码");
            this.successVal++
        }
    },
}
</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>