add banbanmini
This commit is contained in:
HycJack
3
banban-mini/src/pages/sleep/index.config.ts
Normal file
3
banban-mini/src/pages/sleep/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default definePageConfig({
|
||||
navigationStyle: 'custom'
|
||||
})
|
||||
162
banban-mini/src/pages/sleep/index.scss
Normal file
162
banban-mini/src/pages/sleep/index.scss
Normal file
@@ -0,0 +1,162 @@
|
||||
.manage-page {
|
||||
min-height: 100%;
|
||||
background: #F5F7FA;
|
||||
padding-bottom: 120px;
|
||||
padding-bottom: calc(120px + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(120px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 80px 32px 24px;
|
||||
|
||||
.page-title {
|
||||
font-size: 44px;
|
||||
font-weight: 700;
|
||||
color: #1A1A1A;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.user-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 20px;
|
||||
margin: 0 24px 24px;
|
||||
padding: 28px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
|
||||
.user-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #FEF3E8;
|
||||
border-radius: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 22px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.avatar-img {
|
||||
font-size: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
|
||||
.user-name {
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
color: #1A1A1A;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: 26px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.verified-badge {
|
||||
background: #E8F8F0;
|
||||
border-radius: 14px;
|
||||
padding: 10px 16px;
|
||||
|
||||
text {
|
||||
font-size: 24px;
|
||||
color: #4CD964;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 20px;
|
||||
margin: 0 24px 24px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 26px 24px;
|
||||
|
||||
&:active {
|
||||
background: #F8F9FA;
|
||||
}
|
||||
|
||||
.menu-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-bg {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 18px;
|
||||
|
||||
&.orange {
|
||||
background: #FFF0E6;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background: #E8F8F0;
|
||||
}
|
||||
|
||||
&.red {
|
||||
background: #FFE8E8;
|
||||
}
|
||||
|
||||
.control-icon-img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-name {
|
||||
font-size: 30px;
|
||||
color: #1A1A1A;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.menu-value {
|
||||
font-size: 28px;
|
||||
color: #999999;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 30px;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #F0F0F0;
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
.version-info {
|
||||
text-align: center;
|
||||
padding: 48px 0;
|
||||
|
||||
.version-text {
|
||||
font-size: 26px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
142
banban-mini/src/pages/sleep/index.tsx
Normal file
142
banban-mini/src/pages/sleep/index.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import { View, Text, Image } from '@tarojs/components'
|
||||
import { useState } from 'react'
|
||||
import Taro from '@tarojs/taro'
|
||||
import './index.scss'
|
||||
|
||||
interface UserInfo {
|
||||
name: string
|
||||
role: string
|
||||
isVerified: boolean
|
||||
avatar: string
|
||||
}
|
||||
|
||||
interface MenuItem {
|
||||
icon: string
|
||||
name: string
|
||||
value: string
|
||||
arrow?: boolean
|
||||
}
|
||||
|
||||
export default function Sleep() {
|
||||
const [user] = useState<UserInfo>({
|
||||
name: '微信家长',
|
||||
role: '管理员身份',
|
||||
isVerified: true,
|
||||
avatar: '👤'
|
||||
})
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
icon: require('../../assets/tab-icons/orange-robot.png'),
|
||||
iconBgClass: 'orange',
|
||||
name: '儿童资料 (用于称呼)',
|
||||
value: '小夏 (6岁)',
|
||||
arrow: true
|
||||
},
|
||||
{
|
||||
icon: require('../../assets/tab-icons/rings.png'),
|
||||
iconBgClass: 'green',
|
||||
name: '绑定新设备',
|
||||
value: '',
|
||||
arrow: true
|
||||
},
|
||||
{
|
||||
icon: require('../../assets/tab-icons/broken-rings.png'),
|
||||
iconBgClass: 'red',
|
||||
name: '解除设备绑定',
|
||||
value: '',
|
||||
arrow: true
|
||||
}
|
||||
]
|
||||
|
||||
const handleMenuClick = (item: MenuItem) => {
|
||||
if (item.name === '绑定新设备') {
|
||||
// 跳转到绑定设备页面
|
||||
Taro.navigateTo({ url: '/pages/bind/index' })
|
||||
} else if (item.name === '解除设备绑定') {
|
||||
Taro.showModal({
|
||||
title: '解除设备绑定',
|
||||
content: '确定要解除当前设备的绑定吗？解除后需要重新扫码绑定。',
|
||||
confirmColor: '#FF8C42',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
// 清除设备信息
|
||||
Taro.removeStorageSync('hasDevice')
|
||||
Taro.removeStorageSync('deviceInfo')
|
||||
|
||||
Taro.showToast({
|
||||
title: '已解除绑定',
|
||||
icon: 'success',
|
||||
duration: 1500,
|
||||
complete: () => {
|
||||
setTimeout(() => {
|
||||
Taro.redirectTo({ url: '/pages/bind/index' })
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
Taro.showToast({
|
||||
title: `点击了 ${item.name}`,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='manage-page'>
|
||||
<View className='page-header'>
|
||||
<Text className='page-title'>设置与管理</Text>
|
||||
</View>
|
||||
|
||||
<View className='user-card'>
|
||||
<View className='user-avatar'>
|
||||
<Text className='avatar-img'>{user.avatar}</Text>
|
||||
</View>
|
||||
<View className='user-info'>
|
||||
<Text className='user-name'>{user.name}</Text>
|
||||
<Text className='user-role'>{user.role}</Text>
|
||||
</View>
|
||||
{user.isVerified && (
|
||||
<View className='verified-badge'>
|
||||
<Text>已实名</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className='menu-card'>
|
||||
{menuItems.map((item, index) => (
|
||||
<View key={index}>
|
||||
<View className='menu-item' onClick={() => handleMenuClick(item)}>
|
||||
<View className='menu-left'>
|
||||
<View className={`icon-bg ${item.iconBgClass}`}>
|
||||
<Image
|
||||
className='control-icon-img'
|
||||
src={item.icon}
|
||||
mode='aspectFit'
|
||||
/>
|
||||
</View>
|
||||
<Text className='menu-name'>{item.name}</Text>
|
||||
</View>
|
||||
<View className='menu-right'>
|
||||
{item.value && (
|
||||
<Text className='menu-value'>{item.value}</Text>
|
||||
)}
|
||||
{item.arrow && <Text className='arrow'>›</Text>}
|
||||
</View>
|
||||
</View>
|
||||
{index < menuItems.length - 1 && (
|
||||
<View className='divider'></View>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View className='version-info'>
|
||||
<Text className='version-text'>伴伴 Companion V1.1.0</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user