play-video-app/pages/login/index.vue

<template>
    <view class="login">
        <view class="form">
            <view class="input-wrapper">
                <view class="label">账号</view>
                <view class="input-box flex aic"><u-input v-model="username" fontSize="32rpx"
                    border="none" type="text" placeholder="请输入账号" clearable></u-input></view>
            </view>
            <view class="input-wrapper">
                <view class="label">密码</view>
                <view class="input-box flex aic jcsb">
                    <u-input :type="passwordType" v-model="password" fontSize="32rpx" border="none" placeholder="请输入密码"></u-input>
                    <view v-if="password" class="eye-icon" @click="togglePassword">
                        <pv-icon :name="icon" color="#bfbfbf" :customStyle="{ fontSize: '46rpx'}"></pv-icon>
                    </view>
                </view>
            </view>
            <view class="btn">
                <u-button @click="toLogin()">登录</u-button>
            </view>
        </view>
    </view>
</template>

<script>
import { login } from '@/apis/login.js'
export default {
    data(){
        return{
            username:'',
            password:'',
            passwordType:'password',
            icon:'icon-eye-off'
        }
    },
    methods:{

        togglePassword() {  
            this.passwordType = this.passwordType === 'password' ? 'text' : 'password';  
            this.icon = this.passwordType === 'password' ? 'icon-eye-off' : 'icon-eye-fill';  
        },

        // 登录
        async toLogin () {
            let params = {
                username: this.username,
                password: this.password
            }
            const res = await login(params)
            const { token } = res
            uni.setStorageSync('Authorization',token)
            uni.setStorageSync('username',this.username)
            uni.showToast({
                title: '登录成功',
                icon:'none'
            });
            uni.reLaunch({
                url:'/pages/index/index'
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.login{
    .form{
        height: 100%;
        background: #fff;
        padding: 40rpx 32rpx;
        border-radius: 24rpx;
        .input-wrapper {
            background:#fff;
            padding-bottom: 22rpx;
            font-size: 36rpx;
            margin-bottom: 50rpx;
            .label{
                font-weight: 500;
                font-size: 32rpx;
                color: #171717;
                margin-bottom: 20rpx;
            }
            .input-box{
                color: #171717;
                height: 84rpx;
                background: #F3F7FF;
                border-radius: 42rpx;
                padding: 0 32rpx;
                font-size: 28rpx
            }
            .icon-pad {
                padding: 10rpx;
            }
            
        }
        .btn{
            margin-top: 127rpx;
            button{
                color: #fff;
                background: linear-gradient( 172deg, #216CFF 30%, #C7F0FF 100%);
                border-radius: 48rpx;
            }
        }
    }
}
    
</style>