移动端注册页面设计：橘红主色调与实时邀请码验证

```json{
"summary": "设计了一个移动端注册页面，采用橘红色和橙色为主色调，蓝色和绿色为辅色，色彩鲜艳高亮。页面包含标题欢迎语、手机号、密码、邀请码表单，实时验证邀请码并显示邀请人信息，集成隐私政策勾选框。使用uni-app Vue2组件，SCSS嵌套样式，兼容微信小程序。",
"widget": {"type":"full-html","html":"<template>\n <view class=\"register-container\">\n <!-- 顶部标题区域 -->\n <view class=\"header\">\n <text class=\"title\">注册账号</text>\n <text class=\"welcome\">欢迎加入我们，开启全新体验</text>\n </view>\n\n <!-- 表单区域 -->\n <view class=\"form-wrapper\">\n <!-- 手机号码输入 -->\n <view class=\"form-item\">\n <view class=\"item-label\">\n <image class=\"icon\" src=\"/static/icons/phone.svg\" mode=\"aspectFit\"></image>\n <text>手机号码</text>\n </view>\n <input \n class=\"input\" \n type=\"number\" \n placeholder=\"请输入11位手机号码\" \n maxlength=\"11\"\n v-model=\"formData.phone\"\n placeholder-class=\"placeholder\"\n />\n <text class=\"error-text\" v-if=\"errors.phone\">{{ errors.phone }}</text>\n </view>\n\n <!-- 登录密码输入 -->\n <view class=\"form-item\">\n <view class=\"item-label\">\n <image class=\"icon\" src=\"/static/icons/lock.svg\" mode=\"aspectFit\"></image>\n <text>登录密码</text>\n </view>\n <input \n class=\"input\" \n :type=\"showPassword ? 'text' : 'password'\" \n placeholder=\"至少6位数字或字母\" \n maxlength=\"20\"\n v-model=\"formData.password\"\n placeholder-class=\"placeholder\"\n />\n <image \n class=\"password-toggle\" \n :src=\"showPassword ? '/static/icons/eye-slash.svg' : '/static/icons/eye.svg'\" \n mode=\"aspectFit\"\n @tap=\"togglePasswordVisibility\"\n ></image>\n <text class=\"error-text\" v-if=\"errors.password\">{{ errors.password }}</text>\n </view>\n\n <!-- 邀请码输入 -->\n <view class=\"form-item\">\n <view class=\"item-label\">\n <image class=\"icon\" src=\"/static/icons/user-tag.svg\" mode=\"aspectFit\"></image>\n <text>邀请码</text>\n </view>\n <input \n class=\"input\" \n type=\"text\" \n placeholder=\"请输入邀请码\" \n maxlength=\"10\"\n v-model=\"formData.inviteCode\"\n @blur=\"validateInviteCode\"\n placeholder-class=\"placeholder\"\n />\n <text class=\"error-text\" v-if=\"errors.inviteCode\">{{ errors.inviteCode }}</text>\n \n <!-- 邀请人信息展示 -->\n <view class=\"inviter-info\" v-if=\"inviterInfo.name\">\n <image class=\"icon\" src=\"/static/icons/user-check.svg\" mode=\"aspectFit\"></image>\n <view class=\"inviter-details\">\n <text class=\"inviter-name\">{{ inviterInfo.name }}</text>\n <text class=\"inviter-phone\">{{ inviterInfo.phone }}</text>\n </view>\n </view>\n <view class=\"inviter-error\" v-else-if=\"inviteCodeError\">\n <image class=\"icon\" src=\"/static/icons/times-circle.svg\" mode=\"aspectFit\"></image>\n <text>邀请码不可用，请检查后重新输入</text>\n </view>\n </view>\n\n <!-- 协议勾选 -->\n <view class=\"agreement\">\n <checkbox-group @change=\"toggleAgreement\">\n <label class=\"checkbox-label\">\n <checkbox :checked=\"formData.agreed\" color=\"#FF6B35\" />\n <text class=\"agreement-text\">\n 我已阅读并同意\n <text class=\"link\" @tap=\"navigateToAgreement('privacy')\">《隐私政策》</text>\n 和\n <text class=\"link\" @tap=\"navigateToAgreement('user')\">《用户协议》</text>\n </text>\n </label>\n </checkbox-group>\n <text class=\"error-text\" v-if=\"errors.agreed\">{{ errors.agreed }}</text>\n </view>\n\n <!-- 注册按钮 -->\n <button \n class=\"register-btn\" \n :disabled=\"!formData.agreed\" \n :class=\"{ 'disabled': !formData.agreed }\"\n @tap=\"handleRegister\"\n >\n 立即注册\n </button>\n\n <!-- 底部链接 -->\n <view class=\"footer\">\n <text>已有账号？</text>\n <text class=\"link\" @tap=\"navigateToLogin\">立即登录</text>\n </view>\n </view>\n </view>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n formData: {\n phone: '',\n password: '',\n inviteCode: '',\n agreed: false\n },\n errors: {\n phone: '',\n password: '',\n inviteCode: '',\n agreed: ''\n },\n showPassword: false,\n inviterInfo: {\n name: '',\n phone: ''\n },\n inviteCodeError: false,\n validating: false\n };\n },\n methods: {\n togglePasswordVisibility() {\n this.showPassword = !this.showPassword;\n },\n \n toggleAgreement(e) {\n this.formData.agreed = e.detail.value.length > 0;\n this.errors.agreed = '';\n },\n \n validatePhone() {\n if (!this.formData.phone) {\n this.errors.phone = '手机号码不能为空';\n return false;\n }\n if (!/^1[3-9]\\d{9}$/.test(this.formData.phone)) {\n this.errors.phone = '请输入正确的手机号码';\n return false;\n }\n this.errors.phone = '';\n return true;\n },\n \n validatePassword() {\n if (!this.formData.password) {\n this.errors.password = '密码不能为空';\n return false;\n }\n if (this.formData.password.length < 6) {\n this.errors.password = '密码至少6位';\n return false;\n }\n this.errors.password = '';\n return true;\n },\n \n async validateInviteCode() {\n if (!this.formData.inviteCode) {\n this.errors.inviteCode = '邀请码不能为空';\n this.inviterInfo = { name: '', phone: '' };\n this.inviteCodeError = false;\n return false;\n }\n \n this.validating = true;\n this.errors.inviteCode = '';\n \n // 模拟API请求，实际项目中替换为真实接口\n setTimeout(() => {\n this.validating = false;\n \n // 模拟验证逻辑：假设邀请码为 \"INVITE123\" 有效\n if (this.formData.inviteCode.toUpperCase() === 'INVITE123') {\n this.inviterInfo = {\n name: '张先生',\n phone: '138****5678'\n };\n this.inviteCodeError = false;\n } else {\n this.inviterInfo = { name: '', phone: '' };\n this.inviteCodeError = true;\n this.errors.inviteCode = '邀请码无效';\n }\n }, 500);\n },\n \n handleRegister() {\n const isPhoneValid = this.validatePhone();\n const isPasswordValid = this.validatePassword();\n \n if (!this.formData.agreed) {\n this.errors.agreed = '请同意隐私政策和用户协议';\n return;\n }\n \n if (isPhoneValid && isPasswordValid && this.formData.agreed && this.inviterInfo.name) {\n // 实际注册逻辑\n uni.showToast({\n title: '注册成功',\n icon: 'success'\n });\n \n // 模拟注册成功后跳转\n setTimeout(() => {\n uni.navigateTo({\n url: '/pages/login/login'\n });\n }, 1500);\n } else {\n if (!this.inviterInfo.name) {\n uni.showToast({\n title: '请输入有效邀请码',\n icon: 'none'\n });\n } else {\n uni.showToast({\n title: '请填写完整信息',\n icon: 'none'\n });\n }\n }\n },\n \n navigateToLogin() {\n uni.navigateTo({\n url: '/pages/login/login'\n });\n },\n \n navigateToAgreement(type) {\n uni.navigateTo({\n url: `/pages/agreement/agreement?type=${type}`\n });\n }\n },\n watch: {\n 'formData.phone'() {\n if (this.formData.phone) this.validatePhone();\n },\n 'formData.password'() {\n if (this.formData.password) this.validatePassword();\n }\n }\n};\n</script>\n\n<style lang=\"scss\">\n.register-container {\n min-height: 100vh;\n background: linear-gradient(135deg, #FFF5F0 0%, #FFF 100%);\n padding: 40rpx 32rpx 80rpx;\n \n .header {\n text-align: center;\n margin-bottom: 60rpx;\n \n .title {\n display: block;\n font-size: 48rpx;\n font-weight: 800;\n color: #FF6B35;\n margin-bottom: 16rpx;\n text-shadow: 0 4rpx 8rpx rgba(255, 107, 53, 0.2);\n }\n \n .welcome {\n display: block;\n font-size: 28rpx;\n color: #666;\n }\n }\n \n .form-wrapper {\n background: #FFFFFF;\n border-radius: 24rpx;\n padding: 40rpx 32rpx;\n box-shadow: 0 10rpx 30rpx rgba(255, 107, 53, 0.1);\n \n .form-item {\n margin-bottom: 40rpx;\n position: relative;\n \n .item-label {\n display: flex;\n align-items: center;\n margin-bottom: 16rpx;\n \n .icon {\n width: 36rpx;\n height: 36rpx;\n margin-right: 12rpx;\n }\n \n text {\n font-size: 30rpx;\n font-weight: 600;\n color: #333;\n }\n }\n \n .input {\n height: 88rpx;\n border: 2rpx solid #E5E7EB;\n border-radius: 16rpx;\n padding: 0 24rpx;\n font-size: 30rpx;\n color: #333;\n background: #F9FAFB;\n transition: all 0.3s ease;\n \n &:focus {\n border-color: #FF6B35;\n box-shadow: 0 0 0 3rpx rgba(255, 107, 53, 0.1);\n background: #FFFFFF;\n }\n }\n \n .password-toggle {\n position: absolute;\n right: 24rpx;\n top: 70rpx;\n width: 40rpx;\n height: 40rpx;\n z-index: 2;\n }\n \n .error-text {\n display: block;\n font-size: 24rpx;\n color: #FF4757;\n margin-top: 8rpx;\n padding-left: 12rpx;\n }\n \n .inviter-info {\n display: flex;\n align-items: center;\n background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%);\n border: 1rpx solid #66BB6A;\n border-radius: 12rpx;\n padding: 20rpx 24rpx;\n margin-top: 16rpx;\n \n .icon {\n width: 32rpx;\n height: 32rpx;\n margin-right: 16rpx;\n }\n \n .inviter-details {\n display: flex;\n flex-direction: column;\n \n .inviter-name {\n font-size: 28rpx;\n font-weight: 600;\n color: #2E7D32;\n margin-bottom: 4rpx;\n }\n \n .inviter-phone {\n font-size: 24rpx;\n color: #66BB6A;\n }\n }\n }\n \n .inviter-error {\n display: flex;\n align-items: center;\n background: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);\n border: 1rpx solid #FF4757;\n border-radius: 12rpx;\n padding: 20rpx 24rpx;\n margin-top: 16rpx;\n \n .icon {\n width: 32rpx;\n height: 32rpx;\n margin-right: 16rpx;\n }\n \n text {\n font-size: 26rpx;\n color: #FF4757;\n }\n }\n }\n \n .agreement {\n margin: 40rpx 0 48rpx;\n \n .checkbox-label {\n display: flex;\n align-items: flex-start;\n \n .agreement-text {\n font-size: 26rpx;\n color: #666;\n margin-left: 16rpx;\n line-height: 1.5;\n \n .link {\n color: #42A5F5;\n text-decoration: underline;\n }\n }\n }\n }\n \n .register-btn {\n height: 96rpx;\n background: linear-gradient(135deg, #FF6B35 0%, #FFA726 100%);\n border-radius: 20rpx;\n color: #FFFFFF;\n font-size: 34rpx;\n font-weight: 700;\n border: none;\n box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.3);\n transition: all 0.3s ease;\n \n &:active {\n transform: translateY(2rpx);\n box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);\n }\n \n &.disabled {\n background: linear-gradient(135deg, #FFB74D 0%, #FFCC80 100%);\n opacity: 0.6;\n box-shadow: none;\n }\n }\n \n .footer {\n text-align: center;\n margin-top: 40rpx;\n font-size: 26rpx;\n color: #666;\n \n .link {\n color: #42A5F5;\n font-weight: 600;\n margin-left: 8rpx;\n }\n }\n }\n}\n\n.placeholder {\n color: #9CA3AF;\n font-size: 28rpx;\n}\n</style>\n"},
"next": ["添加图形验证码","短信验证码登录","第三方账号登录","忘记密码功能","注册进度引导"],
"breakpoint": "xs"
}
```