Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
67f863fd 1 parent 16fa654c

feat(JoinOrganization): 新增助力码输入页面及功能 

添加助力码输入页面，包含4位码输入框和幼儿园信息展示功能
实现输入验证、自动聚焦和幼儿园匹配逻辑
添加确认加入功能和状态提示
Inline Side-by-side
Showing 4 changed files with 406 additions and 1 deletions
/*
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-17 19:58:26
* @LastEditTime: 2025-09-18 15:23:48
* @FilePath: /lls_program/src/app.config.js
* @Description: 文件描述
*/
......@@ -35,6 +35,7 @@ export default {
'pages/FamilyRank/index',
'pages/PosterCheckin/index',
'pages/CheckinList/index',
'pages/JoinOrganization/index',
],
window: {
backgroundTextStyle: 'light',
......
/*
* @Date: 2025-08-27 18:25:24
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-18 15:23:26
* @FilePath: /lls_program/src/pages/JoinOrganization/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '助力码'
}
/* JoinFamily/index.less */
.motto-input-container {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.motto-input-box {
width: 5rem;
height: 5rem;
text-align: center;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s;
}
.motto-input {
width: 100%;
height: 100%;
text-align: center;
font-size: 1.5rem;
background-color: transparent;
border: none;
outline: none;
padding: 0;
margin: 0;
box-sizing: border-box;
color: inherit;
}
.identity-title {
font-size: 32rpx;
font-weight: 600;
color: #374151;
margin-bottom: 24rpx;
}
// 家庭选择弹窗样式
.family-selector-container {
display: flex;
flex-direction: column;
height: 100%;
background: white;
}
.family-item {
cursor: pointer;
transition: all 0.2s ease;
&:hover {
transform: translateY(-2rpx);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}
&:active {
transform: translateY(0);
}
}
// 文本截断样式
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
// 间距样式
.space-y-3 > * + * {
margin-top: 24rpx;
}
.space-x-3 > * + * {
margin-left: 24rpx;
}
<template>
<view class="min-h-screen flex flex-col bg-white">
<view class="flex-1 px-4 pt-3 pb-6 flex flex-col">
<!-- Title -->
<h2 class="text-xl font-bold text-center mb-2">
输入助力码
</h2>
<!-- Description -->
<view class="text-gray-600 text-center text-sm mb-6">
请输入家人提供的助力码，参与助力榜排行
</view>
<!-- Input boxes -->
<view class="motto-input-container">
<view
v-for="(char, index) in mottoChars"
:key="index"
class="motto-input-box"
:style="{
borderColor: focusedIndex === index ? THEME_COLORS.PRIMARY : '#d1d5db'
}"
>
<input
:ref="(el) => (inputRefs[index] = el)"
type="text"
v-model="mottoChars[index]"
@input="(e) => handleInputChange(index, e.target.value)"
@keydown="(e) => handleKeyDown(index, e)"
@focus="focusedIndex = index"
@blur="handleBlur(index)"
class="motto-input"
:cursorSpacing="100"
/>
</view>
</view>
<!-- Help text -->
<view class="text-gray-500 text-center text-sm mb-4">
没有口令？请联系家里小辈，咨询单位学校是否参与了助力榜排行哦
</view>
<!-- 幼儿园信息显示 -->
<view v-if="matchedKindergarten" class="mb-6">
<view class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
<view class="flex items-center space-x-3">
<!-- 幼儿园Logo -->
<view class="w-12 h-12 rounded-full bg-white flex items-center justify-center overflow-hidden border-gray-200 border">
<image
:src="matchedKindergarten.logo || defaultKindergartenLogo"
class="w-full h-full object-cover"
/>
</view>
<!-- 幼儿园信息 -->
<view class="flex-1">
<view class="font-medium text-gray-900 mb-1">{{ matchedKindergarten.name }}</view>
<view class="text-sm text-gray-600">{{ matchedKindergarten.address }}</view>
</view>
</view>
</view>
<!-- 确认提示 -->
<view v-if="!isAlreadyJoined" class="text-center mb-4">
<view class="text-gray-700 text-sm mb-2">这是您家小辈所在的单位/学校吗？</view>
<view class="text-gray-600 text-xs">
<view>确认后您的家庭步数将计入其中，参与助力榜的排行哦</view>
<view>（不会影响家庭参与市、区榜）</view>
</view>
</view>
<!-- 已参与提示 -->
<view v-if="isAlreadyJoined" class="text-center mb-4">
<view class="text-green-600 text-sm font-medium">您的家庭已经参与助力榜</view>
</view>
</view>
<!-- Submit Button -->
<view
@tap="handleConfirmJoin"
:disabled="!isComplete"
:class="[
'w-full py-3 text-white text-lg font-medium rounded-lg mt-auto text-center',
isComplete ? 'bg-blue-500' : 'bg-gray-300'
]"
>
确认加入
</view>
</view>
</view>
</template>
<script setup>
import { ref, computed, nextTick, onMounted, watch } from 'vue';
import Taro from '@tarojs/taro';
import { My, Check, IconFont } from '@nutui/icons-vue-taro';
// 获取接口信息
import { searchFamilyByPassphraseAPI, joinFamilyAPI } from '@/api/family';
// 导入主题颜色
import { THEME_COLORS } from '@/utils/config';
// 默认幼儿园Logo
const defaultKindergartenLogo = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
const mottoChars = ref(['', '', '', '']);
const inputRefs = ref([]);
const focusedIndex = ref(-1);
// 幼儿园相关数据
const matchedKindergarten = ref(null);
const isAlreadyJoined = ref(false);
// Mock 幼儿园数据
const mockKindergartenData = {
'1234': {
id: 1,
name: '阳光幼儿园',
address: '北京市朝阳区阳光街123号',
logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
},
'5678': {
id: 2,
name: '彩虹幼儿园',
address: '北京市海淀区彩虹路456号',
logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
}
};
// Mock 已参与助力榜的数据（模拟用户已经参与的幼儿园）
const mockJoinedKindergarten = {
id: 1,
name: '阳光幼儿园',
address: '北京市朝阳区阳光街123号',
logo: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
};
// 页面加载时检查是否已参与助力榜
onMounted(() => {
checkExistingJoinStatus();
});
// 检查现有参与状态
const checkExistingJoinStatus = () => {
// 模拟检查用户是否已经参与助力榜
// 实际应该调用API检查
const hasJoined = true; // 模拟已参与状态
if (hasJoined && mockJoinedKindergarten) {
matchedKindergarten.value = mockJoinedKindergarten;
isAlreadyJoined.value = true;
// 清空输入框，因为已经参与了
mottoChars.value = ['', '', '', ''];
}
};
// 检查并匹配幼儿园
const checkAndMatchKindergarten = () => {
const motto = mottoChars.value.join('');
if (motto.length === 4) {
// 输入完成，查找匹配的幼儿园
const kindergarten = mockKindergartenData[motto];
if (kindergarten) {
// 检查是否要更换幼儿园
if (isAlreadyJoined.value && matchedKindergarten.value && kindergarten.id !== matchedKindergarten.value.id) {
// 用户要更换幼儿园，显示确认提示
showChangeConfirmation(kindergarten);
return;
}
matchedKindergarten.value = kindergarten;
// 如果之前已经参与，保持已参与状态；否则设为未参与
if (!isAlreadyJoined.value) {
isAlreadyJoined.value = false;
}
} else {
matchedKindergarten.value = null;
isAlreadyJoined.value = false;
}
} else {
// 输入未完成，如果之前已参与，保持显示已参与的幼儿园
if (!isAlreadyJoined.value) {
matchedKindergarten.value = null;
}
}
};
// 显示更换幼儿园确认提示
const showChangeConfirmation = (newKindergarten) => {
Taro.showModal({
title: '更换单位/学校',
content: `您要更换新的单位/学校，参与助力榜吗？\n\n新单位：${newKindergarten.name}`,
confirmText: '确认更换',
cancelText: '取消',
success: (res) => {
if (res.confirm) {
// 用户确认更换，使用 nextTick 确保状态更新的顺序
nextTick(() => {
matchedKindergarten.value = newKindergarten;
isAlreadyJoined.value = false; // 重置为未参与状态
});
} else {
// 用户取消，清空输入
nextTick(() => {
mottoChars.value = ['', '', '', ''];
});
}
}
});
};
const handleInputChange = (index, value) => {
// 允许输入多个字符，但只保留第一个有效字符（汉字、数字、大小写字母），兼容输入法
if (value) {
// 提取第一个有效字符（汉字、数字、大小写字母）
const firstChar = value.match(/[\u4e00-\u9fa5a-zA-Z0-9]/)?.[0] || '';
mottoChars.value[index] = firstChar;
// 如果输入了有效字符且不是最后一个输入框，自动聚焦下一个
if (firstChar && index < 3) {
focusedIndex.value = index + 1;
// 使用 nextTick 确保 DOM 更新后再聚焦
nextTick(() => {
if (inputRefs.value[index + 1]) {
inputRefs.value[index + 1].focus();
}
});
}
} else {
mottoChars.value[index] = '';
}
// 检查是否输入完成，如果完成则匹配幼儿园
checkAndMatchKindergarten();
};
const handleKeyDown = (index, e) => {
if (e.key === 'Backspace' && !mottoChars.value[index] && index > 0) {
// 同样，在Taro中处理光标移动需要不同的方式
}
};
/**
* 处理输入框失焦事件
* @param {number} index - 输入框索引
*/
const handleBlur = (index) => {
// 重置焦点状态
focusedIndex.value = -1;
// 失焦时再次验证输入值，确保只保留有效字符（汉字、数字、大小写字母）
const currentValue = mottoChars.value[index];
if (currentValue) {
const firstChar = currentValue.match(/[\u4e00-\u9fa5a-zA-Z0-9]/)?.[0] || '';
mottoChars.value[index] = firstChar;
}
};
const isComplete = computed(() => {
return mottoChars.value.every((char) => char) && matchedKindergarten.value;
});
const handleConfirmJoin = async () => {
if (!isComplete.value) return;
// 如果已经参与助力榜，检查是否是更换操作
if (isAlreadyJoined.value) {
// 检查当前匹配的幼儿园是否与之前参与的不同
const currentMotto = mottoChars.value.join('');
const currentKindergarten = mockKindergartenData[currentMotto];
if (currentKindergarten && mockJoinedKindergarten && currentKindergarten.id === mockJoinedKindergarten.id) {
// 相同的幼儿园，提示已参与
Taro.showToast({
title: '您已经参与该助力榜',
icon: 'none'
});
return;
}
}
try {
// 这里应该调用加入助力榜的API
// 暂时使用模拟逻辑
console.log('加入助力榜:', {
kindergarten: matchedKindergarten.value,
motto: mottoChars.value.join('')
});
// 模拟API调用成功
isAlreadyJoined.value = true;
// 更新已参与的幼儿园信息
mockJoinedKindergarten.id = matchedKindergarten.value.id;
mockJoinedKindergarten.name = matchedKindergarten.value.name;
mockJoinedKindergarten.address = matchedKindergarten.value.address;
mockJoinedKindergarten.logo = matchedKindergarten.value.logo;
Taro.showToast({
title: '加入成功',
icon: 'success'
});
setTimeout(() => {
// 返回上一页
Taro.navigateBack({
delta: 1
});
}, 1500);
} catch (error) {
console.error('加入助力榜失败:', error);
Taro.showToast({
title: '加入失败，请重试',
icon: 'none'
});
}
};
</script>
<style lang="less">
@import './index.less';
</style>