第26集使用uni-app开发APP并上架iOS全过程图文教程

<!-- pages/index/index.vue -->
<template>
    <view class="container">
        <view class="header">
            <text class="title">欢迎使用我的APP</text>
        </view>
        
        <view class="content">
            <view class="card" v-for="(item, index) in list" :key="index">
                <image :src="item.image" class="card-image"></image>
                <view class="card-content">
                    <text class="card-title">{{ item.title }}</text>
                    <text class="card-desc">{{ item.description }}</text>
                </view>
            </view>
        </view>
        
        <view class="footer">
            <button @click="goToLogin" class="login-btn">立即登录</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    title: '功能一',
                    description: '这是功能一的描述',
                    image: '/static/images/feature1.png'
                },
                {
                    title: '功能二',
                    description: '这是功能二的描述',
                    image: '/static/images/feature2.png'
                },
                {
                    title: '功能三',
                    description: '这是功能三的描述',
                    image: '/static/images/feature3.png'
                }
            ]
        }
    },
    methods: {
        goToLogin() {
            uni.navigateTo({
                url: '/pages/login/login'
            })
        }
    }
}
</script>

<style>
.container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.header {
    text-align: center;
    padding: 40rpx 0;
}

.title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.content {
    margin: 20rpx 0;
}

.card {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
}

.card-image {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
}

.card-content {
    flex: 1;
}

.card-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10rpx;
}

.card-desc {
    font-size: 28rpx;
    color: #666;
    display: block;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx;
    background-color: #fff;
    border-top: 1rpx solid #eee;
}

.login-btn {
    width: 100%;
    height: 80rpx;
    background-color: #007aff;
    color: #fff;
    border-radius: 10rpx;
    font-size: 32rpx;
    border: none;
}
</style>

<!-- pages/login/login.vue -->
<template>
    <view class="login-container">
        <view class="login-header">
            <image src="/static/images/logo.png" class="logo"></image>
            <text class="app-name">我的APP</text>
        </view>
        
        <view class="login-form">
            <view class="input-group">
                <input 
                    v-model="username" 
                    placeholder="请输入用户名" 
                    class="input"
                    :class="{ 'error': usernameError }"
                />
                <text v-if="usernameError" class="error-text">{{ usernameError }}</text>
            </view>
            
            <view class="input-group">
                <input 
                    v-model="password" 
                    placeholder="请输入密码" 
                    password 
                    class="input"
                    :class="{ 'error': passwordError }"
                />
                <text v-if="passwordError" class="error-text">{{ passwordError }}</text>
            </view>
            
            <button @click="handleLogin" class="login-btn" :disabled="loading">
                {{ loading ? '登录中...' : '登录' }}
            </button>
        </view>
        
        <view class="login-footer">
            <text class="footer-text">还没有账号？</text>
            <text @click="goToRegister" class="register-link">立即注册</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            password: '',
            usernameError: '',
            passwordError: '',
            loading: false
        }
    },
    methods: {
        validateForm() {
            this.usernameError = ''
            this.passwordError = ''
            
            if (!this.username) {
                this.usernameError = '请输入用户名'
                return false
            }
            
            if (!this.password) {
                this.passwordError = '请输入密码'
                return false
            }
            
            if (this.password.length < 6) {
                this.passwordError = '密码长度不能少于6位'
                return false
            }
            
            return true
        },
        
        async handleLogin() {
            if (!this.validateForm()) {
                return
            }
            
            this.loading = true
            
            try {
                // 模拟登录请求
                const result = await this.loginRequest()
                
                if (result.success) {
                    uni.showToast({
                        title: '登录成功',
                        icon: 'success'
                    })
                    
                    // 保存用户信息
                    uni.setStorageSync('userInfo', result.data)
                    
                    // 跳转到首页
                    setTimeout(() => {
                        uni.switchTab({
                            url: '/pages/index/index'
                        })
                    }, 1500)
                } else {
                    uni.showToast({
                        title: result.message || '登录失败',
                        icon: 'none'
                    })
                }
            } catch (error) {
                uni.showToast({
                    title: '网络错误，请重试',
                    icon: 'none'
                })
            } finally {
                this.loading = false
            }
        },
        
        loginRequest() {
            return new Promise((resolve) => {
                setTimeout(() => {
                    if (this.username === 'admin' && this.password === '123456') {
                        resolve({
                            success: true,
                            data: {
                                id: 1,
                                username: this.username,
                                nickname: '管理员'
                            }
                        })
                    } else {
                        resolve({
                            success: false,
                            message: '用户名或密码错误'
                        })
                    }
                }, 1000)
            })
        },
        
        goToRegister() {
            uni.navigateTo({
                url: '/pages/register/register'
            })
        }
    }
}
</script>

<style>
.login-container {
    padding: 40rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.login-header {
    text-align: center;
    padding: 80rpx 0 60rpx;
}

.logo {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 20rpx;
}

.app-name {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
}

.login-form {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    margin-bottom: 40rpx;
}

.input-group {
    margin-bottom: 30rpx;
}

.input {
    width: 100%;
    height: 80rpx;
    border: 2rpx solid #eee;
    border-radius: 10rpx;
    padding: 0 20rpx;
    font-size: 32rpx;
    box-sizing: border-box;
}

.input.error {
    border-color: #ff4757;
}

.error-text {
    color: #ff4757;
    font-size: 24rpx;
    margin-top: 10rpx;
    display: block;
}

.login-btn {
    width: 100%;
    height: 80rpx;
    background-color: #007aff;
    color: #fff;
    border-radius: 10rpx;
    font-size: 32rpx;
    border: none;
    margin-top: 20rpx;
}

.login-btn:disabled {
    background-color: #ccc;
}

.login-footer {
    text-align: center;
}

.footer-text {
    font-size: 28rpx;
    color: #666;
}

.register-link {
    font-size: 28rpx;
    color: #007aff;
    margin-left: 10rpx;
}
</style>