🎉 活动码功能实现文档
📝 1. 功能概述
活动码功能允许用户通过输入6位字母数字组合的活动码加入特定活动，具有输入验证、自动格式化和视觉反馈功能。
🎨 2. HTML结构
<!-- 输入活动码 -->
<view class="form-item">
<view class="form-label">
<view class="label-icon-wrapper code-bg">
<uv-icon name="shouji" size="40" color="#FFFFFF"></uv-icon>
</view>
<view class="label-content">
<text class="label-text">活动码</text>
<text class="label-desc">向活动发起人索取6位活动码</text>
</view>
</view>
<view class="code-input-container" @click="focusCodeInput">
<view
class="code-box"
v-for="(item, index) in 6"
:key="index"
:class="{ active: index === activityCode.length && isCodeFocused, filled: index < activityCode.length }"
>
<text class="code-char" v-if="activityCode[index]">{{ activityCode[index] }}</text>
<view class="code-cursor" v-if="index === activityCode.length && isCodeFocused"></view>
</view>
<input
class="hidden-code-input"
:value="activityCode"
:focus="isCodeFocused"
maxlength="6"
type="text"
@input="onCodeInput"
@focus="isCodeFocused = true"
@blur="isCodeFocused = false"
/>
</view>
</view>
🎯 3. CSS样式
.label-content {
display: flex;
flex-direction: column;
gap: 4rpx;
}
.label-text {
font-size: 32rpx;
font-weight: 700;
color: #333;
}
.label-desc {
font-size: 24rpx;
color: #999;
letter-spacing: 0.5rpx;
}
// 活动码输入容器
.code-input-container {
position: relative;
display: flex;
justify-content: space-between;
gap: 16rpx;
}
.hidden-code-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 10;
}
.code-box {
flex: 1;
height: 100rpx;
background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF9 100%);
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 36rpx;
font-weight: 700;
color: #333;
border: 2rpx solid rgba(255, 215, 0, 0.15);
&.active {
border-color: #FFD700;
}
&.filled {
border-color: transparent;
box-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.15);
}
}
.code-cursor {
width: 4rpx;
height: 40rpx;
background-color: #FFA500;
animation: cursor-blink 1.2s infinite;
}
@keyframes cursor-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
💡 4. JavaScript逻辑
export default {
data() {
return {
activityCode: '',
isCodeFocused: false
}
},
computed: {
isCodeValid() {
return this.activityCode.length === 6
}
},
methods: {
// 活动码输入处理
onCodeInput(e) {
// 过滤非英文和数字字符，并转换为大写
let value = e.detail.value
value = value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase()
this.activityCode = value
},
// 聚焦活动码输入框
focusCodeInput() {
this.isCodeFocused = true
// 延迟获取焦点以确保DOM已更新
setTimeout(() => {
const input = this.$el.querySelector('.hidden-code-input')
if (input) input.focus()
}, 100)
},
// 加入活动
joinByCode() {
if (!this.isCodeValid) {
uni.showToast({
title: '请输入6位活动码',
icon: 'none'
})
return
}
uni.showLoading({
title: '正在加入...'
})
// 模拟加入请求
setTimeout(() => {
uni.hideLoading()
uni.showToast({
title: '加入成功',
icon: 'success'
})
// 跳转到活动详情页
setTimeout(() => {
uni.navigateTo({
url: `/pages/activity/detail?code=${this.activityCode}`
})
}, 1500)
}, 1500)
}
}
}
✨ 5. 实现亮点
🎨 5.1 视觉设计
采用金色主题色（#FFD700, #FFA500）与项目整体风格保持一致
使用渐变色背景和阴影效果增强深度感
输入框激活状态和填充状态有明显视觉区分
光标闪烁动画提升输入体验
🎮 5.2 交互体验
点击输入区域自动聚焦并弹出键盘
实时格式化输入内容（自动大写、过滤非法字符）
输入过程中提供即时视觉反馈
完整的输入验证和错误提示
🛠️ 5.3 技术实现
使用隐藏输入框+视觉容器的方式实现自定义验证码效果
通过CSS动画实现光标闪烁效果
利用事件委托和状态管理实现输入逻辑
适配多端平台的响应式设计