feat: 电子药箱小程序 - 4Tab药品管理
- 电子药箱: 药品库存管理 + 手动录入 + 今日用药打卡 - 药品百科: 搜索 + 分类筛选 + 20种药品静态数据 - 惠教中心: 4条药品使用指南课程 - 我的: 家庭成员信息管理 - 自定义TabBar + navigation-bar组件 - SVG药品分类插图
This commit is contained in:
陈誉午
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 120rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex; align-items: center;
|
||||
background: #ffffff; border-radius: 40rpx;
|
||||
padding: 20rpx 28rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.search-icon { font-size: 30rpx; margin-right: 14rpx; }
|
||||
|
||||
.search-input { flex: 1; font-size: 28rpx; color: #333; height: 50rpx; }
|
||||
|
||||
.search-clear {
|
||||
width: 44rpx; height: 44rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: #e0e0e0; border-radius: 50%;
|
||||
font-size: 22rpx; color: #ffffff; margin-left: 14rpx;
|
||||
}
|
||||
|
||||
.category-scroll { white-space: nowrap; padding: 10rpx 30rpx 20rpx; }
|
||||
|
||||
.cat-chip {
|
||||
display: inline-block; padding: 14rpx 28rpx; margin-right: 16rpx;
|
||||
background: #ffffff; border-radius: 28rpx; font-size: 26rpx;
|
||||
color: #666; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.cat-chip.active {
|
||||
background: #4A90D9; color: #ffffff; font-weight: 600;
|
||||
box-shadow: 0 4rpx 16rpx rgba(74, 144, 217, 0.3);
|
||||
}
|
||||
|
||||
.top-search { padding: 0 30rpx 10rpx; }
|
||||
.top-label { font-size: 24rpx; color: #999; margin-bottom: 16rpx; }
|
||||
.top-tags { display: flex; flex-wrap: wrap; gap: 14rpx; }
|
||||
|
||||
.top-tag {
|
||||
padding: 12rpx 24rpx; background: #ffffff;
|
||||
border: 1rpx solid #e8e8e8; border-radius: 24rpx;
|
||||
font-size: 24rpx; color: #555;
|
||||
}
|
||||
|
||||
.top-tag:active { background: #e8f0fa; border-color: #4A90D9; color: #4A90D9; }
|
||||
|
||||
.result-bar { padding: 10rpx 30rpx; }
|
||||
.result-text { font-size: 24rpx; color: #999; }
|
||||
|
||||
.drug-list { padding: 10rpx 30rpx; }
|
||||
|
||||
.drug-card {
|
||||
display: flex; align-items: center;
|
||||
background: #ffffff; border-radius: 20rpx; padding: 28rpx;
|
||||
margin-bottom: 18rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.drug-card:active { transform: scale(0.985); }
|
||||
|
||||
.card-icon {
|
||||
width: 90rpx; height: 90rpx;
|
||||
border-radius: 18rpx;
|
||||
margin-right: 20rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-body { flex: 1; overflow: hidden; }
|
||||
.card-name { font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 6rpx; }
|
||||
.card-generic { font-size: 22rpx; color: #aaa; margin-bottom: 10rpx; }
|
||||
|
||||
.card-footer { display: flex; align-items: center; gap: 12rpx; }
|
||||
.card-category { font-size: 20rpx; color: #4A90D9; background: #e8f0fa; padding: 4rpx 14rpx; border-radius: 8rpx; }
|
||||
|
||||
.card-otc { font-size: 20rpx; padding: 4rpx 14rpx; border-radius: 8rpx; font-weight: 600; }
|
||||
.card-otc.otc { color: #07C160; background: #e8f8ee; }
|
||||
.card-otc.rx { color: #FF3B30; background: #ffebea; }
|
||||
|
||||
.card-right { text-align: right; margin-left: 14rpx; }
|
||||
.card-price { font-size: 26rpx; color: #FF6B35; font-weight: 600; margin-bottom: 6rpx; }
|
||||
.card-arrow { font-size: 32rpx; color: #ccc; }
|
||||
|
||||
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 100rpx 0; }
|
||||
.empty-icon { font-size: 80rpx; margin-bottom: 20rpx; }
|
||||
.empty-text { font-size: 30rpx; color: #999; margin-bottom: 10rpx; }
|
||||
.empty-desc { font-size: 24rpx; color: #ccc; }
|
||||
@@ -0,0 +1,70 @@
|
||||
import { wikiDrugs, categories } from '../../../utils/drug-data';
|
||||
import type { WikiDrug } from '../../../utils/drug-data';
|
||||
import { getDrugImage } from '../../../utils/drug-images';
|
||||
|
||||
interface DrugItem extends WikiDrug {
|
||||
image: string;
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
categories,
|
||||
activeCategory: '全部',
|
||||
searchText: '',
|
||||
drugList: [] as DrugItem[],
|
||||
allDrugs: [] as DrugItem[],
|
||||
topSearches: ['阿莫西林', '布洛芬', '头孢', '二甲双胍', '奥美拉唑', '氯雷他定'],
|
||||
},
|
||||
onLoad() {
|
||||
const list: DrugItem[] = Object.values(wikiDrugs)
|
||||
.filter((d) => d.id < 100)
|
||||
.map((d) => ({ ...d, image: getDrugImage(d.category) }));
|
||||
this.setData({ allDrugs: list, drugList: list });
|
||||
},
|
||||
onShow() {
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({ selected: 1 });
|
||||
}
|
||||
},
|
||||
onSearchInput(e: WechatMiniprogram.Input) {
|
||||
const searchText = e.detail.value.trim();
|
||||
this.setData({ searchText });
|
||||
this.filterDrugs();
|
||||
},
|
||||
onClearSearch() {
|
||||
this.setData({ searchText: '' });
|
||||
this.filterDrugs();
|
||||
},
|
||||
onCategoryTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const { cat } = e.currentTarget.dataset;
|
||||
this.setData({ activeCategory: cat });
|
||||
this.filterDrugs();
|
||||
},
|
||||
onTopSearchTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const { kw } = e.currentTarget.dataset;
|
||||
this.setData({ searchText: kw });
|
||||
this.filterDrugs();
|
||||
},
|
||||
filterDrugs() {
|
||||
const { searchText, activeCategory, allDrugs } = this.data;
|
||||
let list = allDrugs;
|
||||
if (activeCategory !== '全部') {
|
||||
list = list.filter((d) => d.category === activeCategory);
|
||||
}
|
||||
if (searchText) {
|
||||
const kw = searchText.toLowerCase();
|
||||
list = list.filter(
|
||||
(d) =>
|
||||
d.name.includes(kw) ||
|
||||
d.genericName.toLowerCase().includes(kw) ||
|
||||
d.category.includes(kw) ||
|
||||
d.tag.includes(kw),
|
||||
);
|
||||
}
|
||||
this.setData({ drugList: list });
|
||||
},
|
||||
goDetail(e: WechatMiniprogram.TouchEvent) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
wx.navigateTo({ url: `/pages/drug-guide/index?id=${id}` });
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,52 @@
|
||||
<view class="page">
|
||||
<navigation-bar title="药品百科" back="{{false}}" color="white" background="#4A90D9" />
|
||||
|
||||
<view class="search-section">
|
||||
<view class="search-box">
|
||||
<view class="search-icon">🔍</view>
|
||||
<input class="search-input" placeholder="搜索药品名称、功效、分类…" value="{{searchText}}" bindinput="onSearchInput" confirm-type="search" />
|
||||
<view class="search-clear" wx:if="{{searchText}}" bindtap="onClearSearch">✕</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-x class="category-scroll" wx:if="{{!searchText}}">
|
||||
<view wx:for="{{categories}}" wx:key="*this" class="cat-chip {{activeCategory === item ? 'active' : ''}}" data-cat="{{item}}" bindtap="onCategoryTap">{{item}}</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="top-search" wx:if="{{!searchText && activeCategory === '全部'}}">
|
||||
<view class="top-label">🔥 热门搜索</view>
|
||||
<view class="top-tags">
|
||||
<view wx:for="{{topSearches}}" wx:key="*this" class="top-tag" data-kw="{{item}}" bindtap="onTopSearchTap">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="result-bar" wx:if="{{searchText || activeCategory !== '全部'}}">
|
||||
<view class="result-text">{{activeCategory !== '全部' ? activeCategory + ' · ' : ''}}共 {{drugList.length}} 个药品</view>
|
||||
</view>
|
||||
|
||||
<view class="drug-list">
|
||||
<view wx:for="{{drugList}}" wx:key="id" class="drug-card" data-id="{{item.id}}" bindtap="goDetail">
|
||||
<view class="card-icon">
|
||||
<image class="card-img" src="{{item.image}}" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="card-body">
|
||||
<view class="card-name">{{item.name}}</view>
|
||||
<view class="card-generic">{{item.genericName}} · {{item.form}}</view>
|
||||
<view class="card-footer">
|
||||
<view class="card-category">{{item.category}}</view>
|
||||
<view class="card-otc {{item.isOTC ? 'otc' : 'rx'}}">{{item.isOTC ? 'OTC' : 'Rx'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-right">
|
||||
<view class="card-price">{{item.price}}</view>
|
||||
<view class="card-arrow">›</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="empty-state" wx:if="{{drugList.length === 0}}">
|
||||
<view class="empty-icon">🔍</view>
|
||||
<view class="empty-text">没有找到相关药品</view>
|
||||
<view class="empty-desc">试试其他关键词或分类</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 120rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 40rpx 40rpx 30rpx;
|
||||
background: linear-gradient(135deg, #FF8C42, #FF6B35);
|
||||
}
|
||||
|
||||
.banner-icon { font-size: 56rpx; margin-bottom: 12rpx; }
|
||||
.banner-text { font-size: 26rpx; color: rgba(255, 255, 255, 0.85); }
|
||||
|
||||
.content { padding: 30rpx; }
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.drug-card {
|
||||
display: flex; align-items: center;
|
||||
background: #ffffff; border-radius: 20rpx; padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.drug-card:active { transform: scale(0.98); }
|
||||
|
||||
.card-icon {
|
||||
width: 90rpx; height: 90rpx;
|
||||
margin-right: 24rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-info { flex: 1; overflow: hidden; }
|
||||
|
||||
.card-title {
|
||||
font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 8rpx;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 24rpx; color: #888; margin-bottom: 12rpx;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-meta { display: flex; align-items: center; gap: 16rpx; }
|
||||
|
||||
.card-tag {
|
||||
font-size: 20rpx; color: #FF6B35;
|
||||
background: rgba(255, 107, 53, 0.1);
|
||||
padding: 4rpx 14rpx; border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.card-read { font-size: 20rpx; color: #bbb; }
|
||||
|
||||
.card-arrow { font-size: 40rpx; color: #ccc; margin-left: 12rpx; font-weight: 300; }
|
||||
@@ -0,0 +1,50 @@
|
||||
import { pillImg, syringeImg, heartImg, educationImg } from '../../../utils/drug-images';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
drugList: [
|
||||
{
|
||||
id: 101,
|
||||
image: educationImg,
|
||||
title: '阿莫西林使用指南',
|
||||
desc: '了解抗生素的正确使用方法与注意事项',
|
||||
tag: '抗生素',
|
||||
readCount: '12,580',
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
image: pillImg,
|
||||
title: '布洛芬用药须知',
|
||||
desc: '解热镇痛安全用药，避免过量与禁忌',
|
||||
tag: '解热镇痛',
|
||||
readCount: '9,346',
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
image: syringeImg,
|
||||
title: '胰岛素注射教程',
|
||||
desc: '糖尿病患者必看：正确注射方法与部位轮换',
|
||||
tag: '降糖药',
|
||||
readCount: '7,892',
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
image: heartImg,
|
||||
title: '高血压用药管理',
|
||||
desc: '长期服药患者的日常管理与生活方式调整',
|
||||
tag: '心血管',
|
||||
readCount: '15,230',
|
||||
},
|
||||
],
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({ selected: 2 });
|
||||
}
|
||||
},
|
||||
goDetail(e: WechatMiniprogram.TouchEvent) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
wx.navigateTo({ url: `/pages/drug-guide/index?id=${id}` });
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,26 @@
|
||||
<view class="page">
|
||||
<navigation-bar title="惠教中心" back="{{false}}" color="white" background="#FF6B35" />
|
||||
|
||||
<view class="banner">
|
||||
<view class="banner-icon">🎓</view>
|
||||
<view class="banner-text">用药知识，一看就懂</view>
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<view class="section-title">推荐课程</view>
|
||||
<view wx:for="{{drugList}}" wx:key="id" class="drug-card" data-id="{{item.id}}" bindtap="goDetail">
|
||||
<view class="card-icon">
|
||||
<image class="card-img" src="{{item.image}}" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<view class="card-title">{{item.title}}</view>
|
||||
<view class="card-desc">{{item.desc}}</view>
|
||||
<view class="card-meta">
|
||||
<view class="card-tag">{{item.tag}}</view>
|
||||
<view class="card-read">{{item.readCount}} 人已阅读</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-arrow">›</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.placeholder-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.placeholder-text {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
Page({
|
||||
data: {},
|
||||
onLoad() {},
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
<view class="placeholder-page">
|
||||
<text class="placeholder-text">直播小程序</text>
|
||||
</view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx 30rpx 60rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background: #ffffff; border-radius: 24rpx; padding: 30rpx;
|
||||
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.form-group { margin-bottom: 30rpx; }
|
||||
.form-label { font-size: 28rpx; font-weight: 600; color: #333; margin-bottom: 14rpx; }
|
||||
.required { color: #FF3B30; }
|
||||
|
||||
.form-input {
|
||||
width: 100%; height: 80rpx; background: #f7f8fa;
|
||||
border-radius: 14rpx; padding: 0 24rpx; font-size: 28rpx; box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-picker {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
width: 100%; height: 80rpx; background: #f7f8fa;
|
||||
border-radius: 14rpx; padding: 0 24rpx; font-size: 28rpx;
|
||||
box-sizing: border-box; color: #333;
|
||||
}
|
||||
|
||||
.form-picker.placeholder { color: #bbb; }
|
||||
.picker-arrow { font-size: 22rpx; color: #999; }
|
||||
|
||||
.form-textarea {
|
||||
width: 100%; height: 140rpx; background: #f7f8fa;
|
||||
border-radius: 14rpx; padding: 20rpx 24rpx; font-size: 28rpx; box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-row { display: flex; gap: 20rpx; }
|
||||
.form-row .half { flex: 1; }
|
||||
|
||||
.slot-group { display: flex; gap: 16rpx; }
|
||||
|
||||
.slot-chip {
|
||||
flex: 1; text-align: center; height: 72rpx; line-height: 72rpx;
|
||||
background: #f7f8fa; border-radius: 14rpx; font-size: 26rpx;
|
||||
color: #666; border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.slot-chip.active {
|
||||
background: #e8f8ee; color: #07C160;
|
||||
border-color: #07C160; font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-area { margin-top: 40rpx; }
|
||||
|
||||
.save-btn {
|
||||
width: 100%; height: 90rpx; line-height: 90rpx;
|
||||
background: linear-gradient(135deg, #07C160, #06AD56);
|
||||
color: #fff; font-size: 32rpx; font-weight: 600;
|
||||
border-radius: 18rpx; border: none; margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 100%; height: 90rpx; line-height: 90rpx;
|
||||
background: #fff; color: #FF3B30; font-size: 32rpx;
|
||||
border-radius: 18rpx; border: 2rpx solid #FF3B30;
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
interface MedicineForm {
|
||||
name: string;
|
||||
category: string;
|
||||
dosage: string;
|
||||
frequency: string;
|
||||
slots: string[];
|
||||
quantity: number;
|
||||
unit: string;
|
||||
expiryDate: string;
|
||||
notes: string;
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'medicine_box_list';
|
||||
const FREQ_SLOTS: Record<string, string[]> = {
|
||||
'每日1次': ['早'],
|
||||
'每日2次': ['早', '晚'],
|
||||
'每日3次': ['早', '中', '晚'],
|
||||
'每日4次': ['早', '中', '晚', '睡前'],
|
||||
'每周1次': ['自定义'],
|
||||
'按需服用': ['按需'],
|
||||
};
|
||||
|
||||
Page({
|
||||
data: {
|
||||
editId: '',
|
||||
categories: ['抗生素', '解热镇痛', '心血管', '降糖药', '消化系统', '抗过敏', '维生素', '中成药', '外用', '其他'],
|
||||
frequencies: ['每日1次', '每日2次', '每日3次', '每日4次', '每周1次', '按需服用'],
|
||||
units: ['盒', '瓶', '片', '粒', '支', '包', '袋'],
|
||||
timeSlots: ['早', '中', '晚', '睡前', '按需'],
|
||||
categoryIndex: -1,
|
||||
freqIndex: -1,
|
||||
unitIndex: -1,
|
||||
today: '',
|
||||
form: {
|
||||
name: '',
|
||||
category: '',
|
||||
dosage: '',
|
||||
frequency: '',
|
||||
slots: [] as string[],
|
||||
quantity: 1,
|
||||
unit: '',
|
||||
expiryDate: '',
|
||||
notes: '',
|
||||
} as MedicineForm,
|
||||
},
|
||||
|
||||
onLoad(options: Record<string, string>) {
|
||||
const today = new Date();
|
||||
this.setData({
|
||||
today: `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`,
|
||||
editId: options.id || '',
|
||||
});
|
||||
|
||||
if (options.id) {
|
||||
const list: any[] = wx.getStorageSync(STORAGE_KEY) || [];
|
||||
const item = list.find((m: any) => m.id === options.id);
|
||||
if (item) {
|
||||
const form = {
|
||||
name: item.name,
|
||||
category: item.category,
|
||||
dosage: item.dosage,
|
||||
frequency: item.frequency,
|
||||
slots: item.slots || [],
|
||||
quantity: item.quantity,
|
||||
unit: item.unit,
|
||||
expiryDate: item.expiryDate,
|
||||
notes: item.notes || '',
|
||||
};
|
||||
this.setData({
|
||||
form,
|
||||
categoryIndex: this.data.categories.indexOf(item.category),
|
||||
freqIndex: this.data.frequencies.indexOf(item.frequency),
|
||||
unitIndex: this.data.units.indexOf(item.unit),
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onFieldChange(e: WechatMiniprogram.Input) {
|
||||
const { field } = e.currentTarget.dataset;
|
||||
this.setData({ [`form.${field}`]: e.detail.value });
|
||||
},
|
||||
|
||||
onCategoryChange(e: WechatMiniprogram.PickerChange) {
|
||||
const idx = Number(e.detail.value);
|
||||
this.setData({ categoryIndex: idx, 'form.category': this.data.categories[idx] });
|
||||
},
|
||||
|
||||
onFreqChange(e: WechatMiniprogram.PickerChange) {
|
||||
const idx = Number(e.detail.value);
|
||||
const freq = this.data.frequencies[idx];
|
||||
const slots = FREQ_SLOTS[freq] || ['早', '中', '晚'];
|
||||
this.setData({ freqIndex: idx, 'form.frequency': freq, 'form.slots': slots });
|
||||
},
|
||||
|
||||
onUnitChange(e: WechatMiniprogram.PickerChange) {
|
||||
const idx = Number(e.detail.value);
|
||||
this.setData({ unitIndex: idx, 'form.unit': this.data.units[idx] });
|
||||
},
|
||||
|
||||
onDateChange(e: WechatMiniprogram.PickerChange) {
|
||||
this.setData({ 'form.expiryDate': e.detail.value });
|
||||
},
|
||||
|
||||
toggleSlot(e: WechatMiniprogram.TouchEvent) {
|
||||
const { slot } = e.currentTarget.dataset;
|
||||
const slots = [...this.data.form.slots];
|
||||
const idx = slots.indexOf(slot);
|
||||
if (idx > -1) {
|
||||
slots.splice(idx, 1);
|
||||
} else {
|
||||
slots.push(slot);
|
||||
}
|
||||
this.setData({ 'form.slots': slots });
|
||||
},
|
||||
|
||||
save() {
|
||||
const { form, editId } = this.data;
|
||||
if (!form.name.trim()) {
|
||||
wx.showToast({ title: '请输入药品名称', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
if (!form.category) {
|
||||
wx.showToast({ title: '请选择药品分类', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
const list: any[] = wx.getStorageSync(STORAGE_KEY) || [];
|
||||
|
||||
if (editId) {
|
||||
const idx = list.findIndex((m: any) => m.id === editId);
|
||||
if (idx > -1) {
|
||||
list[idx] = { ...list[idx], ...form };
|
||||
}
|
||||
} else {
|
||||
list.unshift({
|
||||
id: Date.now().toString(),
|
||||
...form,
|
||||
addedAt: new Date().toISOString().split('T')[0],
|
||||
});
|
||||
}
|
||||
|
||||
wx.setStorageSync(STORAGE_KEY, list);
|
||||
wx.showToast({ title: editId ? '已更新' : '已添加', icon: 'success' });
|
||||
setTimeout(() => wx.navigateBack(), 800);
|
||||
},
|
||||
|
||||
cancel() {
|
||||
const { editId } = this.data;
|
||||
if (!editId) {
|
||||
wx.navigateBack();
|
||||
return;
|
||||
}
|
||||
wx.showModal({
|
||||
title: '确认删除',
|
||||
content: '将删除此药品及打卡记录',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
const list: any[] = wx.getStorageSync(STORAGE_KEY) || [];
|
||||
wx.setStorageSync(STORAGE_KEY, list.filter((m: any) => m.id !== editId));
|
||||
const checkins = wx.getStorageSync('checkin_records') || {};
|
||||
delete checkins[editId];
|
||||
wx.setStorageSync('checkin_records', checkins);
|
||||
wx.showToast({ title: '已删除', icon: 'success' });
|
||||
setTimeout(() => wx.navigateBack(), 800);
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,79 @@
|
||||
<view class="page">
|
||||
<navigation-bar title="{{editId ? '编辑药品' : '添加药品'}}" back="{{true}}" color="black" background="#ffffff" />
|
||||
|
||||
<view class="form-section">
|
||||
<view class="form-group">
|
||||
<view class="form-label">药品名称 <text class="required">*</text></view>
|
||||
<input class="form-input" placeholder="请输入药品名称" value="{{form.name}}" bindinput="onFieldChange" data-field="name" />
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">药品分类</view>
|
||||
<picker mode="selector" range="{{categories}}" value="{{categoryIndex}}" bindchange="onCategoryChange">
|
||||
<view class="form-picker {{form.category ? '' : 'placeholder'}}">
|
||||
{{form.category || '请选择分类'}}
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<view class="form-group half">
|
||||
<view class="form-label">单次用量</view>
|
||||
<input class="form-input" placeholder="如：1片" value="{{form.dosage}}" bindinput="onFieldChange" data-field="dosage" />
|
||||
</view>
|
||||
<view class="form-group half">
|
||||
<view class="form-label">服用频次</view>
|
||||
<picker mode="selector" range="{{frequencies}}" value="{{freqIndex}}" bindchange="onFreqChange">
|
||||
<view class="form-picker {{form.frequency ? '' : 'placeholder'}}">
|
||||
{{form.frequency || '请选择'}}
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">服用时段</view>
|
||||
<view class="slot-group">
|
||||
<view wx:for="{{timeSlots}}" wx:key="*this" class="slot-chip {{form.slots.indexOf(item) > -1 ? 'active' : ''}}" data-slot="{{item}}" bindtap="toggleSlot">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<view class="form-group half">
|
||||
<view class="form-label">库存数量</view>
|
||||
<input class="form-input" type="number" placeholder="数量" value="{{form.quantity}}" bindinput="onFieldChange" data-field="quantity" />
|
||||
</view>
|
||||
<view class="form-group half">
|
||||
<view class="form-label">单位</view>
|
||||
<picker mode="selector" range="{{units}}" value="{{unitIndex}}" bindchange="onUnitChange">
|
||||
<view class="form-picker {{form.unit ? '' : 'placeholder'}}">
|
||||
{{form.unit || '请选择'}}
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">有效期至</view>
|
||||
<picker mode="date" value="{{form.expiryDate}}" start="{{today}}" bindchange="onDateChange">
|
||||
<view class="form-picker {{form.expiryDate ? '' : 'placeholder'}}">
|
||||
{{form.expiryDate || '请选择有效期'}}
|
||||
<text class="picker-arrow">📅</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">备注</view>
|
||||
<textarea class="form-textarea" placeholder="添加备注信息..." value="{{form.notes}}" bindinput="onFieldChange" data-field="notes" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="btn-area">
|
||||
<button class="save-btn" bindtap="save">保存药品</button>
|
||||
<button class="cancel-btn" bindtap="cancel" wx:if="{{editId}}">删除此药品</button>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,250 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 140rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ========== Header / Tab Switch ========== */
|
||||
.header {
|
||||
background: #07C160;
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
|
||||
.tab-switch {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 24rpx;
|
||||
padding: 6rpx;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
border-radius: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab-btn.on {
|
||||
background: #ffffff;
|
||||
color: #07C160;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* ========== 我的药箱 ========== */
|
||||
.content {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
background: #ffffff;
|
||||
border-radius: 18rpx;
|
||||
padding: 26rpx 16rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
color: #07C160;
|
||||
}
|
||||
|
||||
.stat-card.warn .stat-num { color: #FF9500; }
|
||||
.stat-card.alert .stat-num { color: #FF3B30; }
|
||||
|
||||
.stat-label {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.expire-alert {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
background: #fff8e8;
|
||||
border-radius: 14rpx;
|
||||
padding: 18rpx 22rpx;
|
||||
margin-bottom: 18rpx;
|
||||
border: 1rpx solid #ffe0a0;
|
||||
}
|
||||
|
||||
.alert-icon { font-size: 30rpx; }
|
||||
.alert-text { flex: 1; font-size: 24rpx; color: #996600; line-height: 1.4; }
|
||||
|
||||
.med-list { display: flex; flex-direction: column; gap: 16rpx; }
|
||||
|
||||
.med-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 26rpx 22rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.med-card:active { background: #f9f9f9; }
|
||||
|
||||
.med-icon {
|
||||
width: 72rpx; height: 72rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: #f0faf3;
|
||||
border-radius: 16rpx;
|
||||
font-size: 38rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.med-info { flex: 1; overflow: hidden; }
|
||||
|
||||
.med-name {
|
||||
font-size: 30rpx; font-weight: 600; color: #333;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.med-meta { font-size: 24rpx; color: #999; margin: 6rpx 0; }
|
||||
|
||||
.med-tags { display: flex; gap: 10rpx; }
|
||||
|
||||
.med-tag {
|
||||
font-size: 20rpx; padding: 4rpx 12rpx; border-radius: 8rpx;
|
||||
background: #e8f8ee; color: #07C160;
|
||||
}
|
||||
|
||||
.med-tag.slots { background: #e8f0fa; color: #4A90D9; }
|
||||
|
||||
.med-right { text-align: right; margin-left: 14rpx; min-width: 100rpx; }
|
||||
.med-qty { font-size: 26rpx; color: #333; font-weight: 600; }
|
||||
.med-expiry { font-size: 20rpx; color: #aaa; margin-top: 4rpx; }
|
||||
|
||||
.med-del {
|
||||
width: 56rpx; height: 56rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 30rpx; opacity: 0.4; margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.med-del:active { opacity: 1; }
|
||||
|
||||
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 100rpx 40rpx; }
|
||||
.empty-icon { font-size: 120rpx; margin-bottom: 24rpx; }
|
||||
.empty-title { font-size: 32rpx; font-weight: 600; color: #666; margin-bottom: 12rpx; }
|
||||
.empty-desc { font-size: 26rpx; color: #aaa; text-align: center; }
|
||||
|
||||
/* ========== 今日打卡 ========== */
|
||||
.checkin-content { padding: 24rpx; }
|
||||
|
||||
.checkin-header {
|
||||
background: #ffffff; border-radius: 20rpx; padding: 30rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03); margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.date-label {
|
||||
font-size: 34rpx; font-weight: bold; color: #333;
|
||||
text-align: center; margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.progress-section { display: flex; align-items: center; gap: 24rpx; }
|
||||
|
||||
.progress-ring {
|
||||
width: 120rpx; height: 120rpx; border-radius: 50%;
|
||||
border: 8rpx solid #e8e8e8;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0; background: #fafafa; box-sizing: border-box;
|
||||
}
|
||||
|
||||
.progress-ring.half { border-color: #ffc966; }
|
||||
.progress-ring.full { border-color: #07C160; background: #f0faf3; }
|
||||
|
||||
.ring-text { font-size: 28rpx; font-weight: 700; color: #07C160; }
|
||||
.progress-ring.half .ring-text { color: #FF9500; }
|
||||
|
||||
.progress-info { flex: 1; }
|
||||
.progress-detail { font-size: 28rpx; color: #555; margin-bottom: 6rpx; }
|
||||
.progress-hint { font-size: 26rpx; color: #07C160; font-weight: 500; }
|
||||
|
||||
.week-row {
|
||||
display: flex; background: #ffffff; border-radius: 18rpx;
|
||||
padding: 20rpx 10rpx; margin-bottom: 18rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.week-day { flex: 1; text-align: center; padding: 10rpx 0; border-radius: 12rpx; }
|
||||
.week-day.is-today { background: #e8f8ee; }
|
||||
.wd-day { font-size: 22rpx; color: #999; margin-bottom: 8rpx; }
|
||||
.week-day.is-today .wd-day { color: #07C160; font-weight: 600; }
|
||||
|
||||
.wd-dot { padding: 0 6rpx; }
|
||||
.wd-bar-bg { height: 6rpx; background: #f0f0f0; border-radius: 3rpx; overflow: hidden; }
|
||||
.wd-bar-fill { height: 100%; background: #07C160; border-radius: 3rpx; }
|
||||
.wd-none { font-size: 20rpx; color: #ddd; }
|
||||
|
||||
.slot-list { display: flex; flex-direction: column; gap: 18rpx; }
|
||||
|
||||
.slot-group {
|
||||
background: #ffffff; border-radius: 20rpx; padding: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.slot-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16rpx; }
|
||||
.slot-label { font-size: 28rpx; font-weight: 600; color: #333; }
|
||||
.slot-time { font-size: 22rpx; color: #aaa; font-weight: 400; }
|
||||
.slot-badge { font-size: 28rpx; }
|
||||
|
||||
.slot-meds { display: flex; flex-direction: column; gap: 10rpx; }
|
||||
|
||||
.slot-med {
|
||||
display: flex; align-items: center; gap: 16rpx;
|
||||
padding: 18rpx 16rpx; background: #f9fafb; border-radius: 14rpx;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.slot-med.done { background: #f0faf3; border-color: #c8e6d0; }
|
||||
|
||||
.sm-check {
|
||||
width: 44rpx; height: 44rpx; border-radius: 50%;
|
||||
border: 2rpx solid #ddd;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 24rpx; color: transparent; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sm-check.checked { background: #07C160; border-color: #07C160; color: #ffffff; }
|
||||
|
||||
.sm-info { flex: 1; }
|
||||
.sm-name { font-size: 28rpx; color: #333; font-weight: 500; }
|
||||
.sm-dosage { font-size: 22rpx; color: #999; margin-top: 4rpx; }
|
||||
.sm-cat { font-size: 20rpx; color: #aaa; background: #f0f0f0; padding: 6rpx 14rpx; border-radius: 8rpx; }
|
||||
|
||||
.slot-empty { text-align: center; padding: 20rpx 0; }
|
||||
.se-text { font-size: 24rpx; color: #ccc; }
|
||||
|
||||
.checkin-empty { display: flex; flex-direction: column; align-items: center; padding: 80rpx 40rpx; }
|
||||
.go-add-btn {
|
||||
margin-top: 30rpx; padding: 20rpx 50rpx;
|
||||
background: linear-gradient(135deg, #07C160, #06AD56);
|
||||
color: #ffffff; font-size: 28rpx; font-weight: 600; border-radius: 36rpx;
|
||||
}
|
||||
|
||||
/* FAB */
|
||||
.fab {
|
||||
position: fixed; bottom: 200rpx; right: 40rpx;
|
||||
width: 96rpx; height: 96rpx;
|
||||
background: linear-gradient(135deg, #07C160, #06AD56);
|
||||
color: #ffffff; font-size: 48rpx; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.4);
|
||||
z-index: 100; font-weight: 300;
|
||||
}
|
||||
|
||||
.fab:active { transform: scale(0.9); }
|
||||
@@ -0,0 +1,212 @@
|
||||
interface Medicine {
|
||||
id: string;
|
||||
name: string;
|
||||
category: string;
|
||||
dosage: string;
|
||||
frequency: string;
|
||||
slots: string[];
|
||||
quantity: number;
|
||||
unit: string;
|
||||
expiryDate: string;
|
||||
notes: string;
|
||||
addedAt: string;
|
||||
}
|
||||
|
||||
const MED_KEY = 'medicine_box_list';
|
||||
const CHECKIN_KEY = 'checkin_records';
|
||||
|
||||
function getToday(): string {
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function formatDate(d: Date): string {
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function daysUntil(dateStr: string): number {
|
||||
const now = new Date();
|
||||
now.setHours(0, 0, 0, 0);
|
||||
const target = new Date(dateStr);
|
||||
target.setHours(0, 0, 0, 0);
|
||||
return Math.ceil((target.getTime() - now.getTime()) / 86400000);
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
activeTab: 0, // 0=库存 1=打卡
|
||||
medicines: [] as Medicine[],
|
||||
totalCount: 0,
|
||||
expiringCount: 0,
|
||||
lowStockCount: 0,
|
||||
expiringItems: [] as string[],
|
||||
|
||||
// Check-in
|
||||
today: '',
|
||||
todayStr: '',
|
||||
checkSlots: [] as { label: string; time: string; medicines: any[]; allChecked: boolean }[],
|
||||
checkProgress: 0,
|
||||
checkTotal: 0,
|
||||
checkDone: 0,
|
||||
weekDays: [] as { date: string; day: string; isToday: boolean; done: number; total: number }[],
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({ selected: 0 });
|
||||
}
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
loadData() {
|
||||
const medicines: Medicine[] = wx.getStorageSync(MED_KEY) || [];
|
||||
const totalCount = medicines.length;
|
||||
const expiringItems = medicines.filter((m) => {
|
||||
const d = daysUntil(m.expiryDate);
|
||||
return d >= 0 && d <= 90;
|
||||
});
|
||||
const lowStockCount = medicines.filter((m) => m.quantity <= 5).length;
|
||||
|
||||
// Week calendar
|
||||
const today = new Date();
|
||||
const weekDays: any[] = [];
|
||||
for (let i = 3; i >= 0; i--) {
|
||||
const d = new Date(today);
|
||||
d.setDate(d.getDate() - i);
|
||||
const ds = formatDate(d);
|
||||
const dayNames = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
weekDays.push({ date: ds, day: dayNames[d.getDay()], isToday: i === 0, done: 0, total: 0 });
|
||||
}
|
||||
|
||||
// Check-in data
|
||||
const todayStr = getToday();
|
||||
const checkinData: Record<string, Record<string, string[]>> = wx.getStorageSync(CHECKIN_KEY) || {};
|
||||
const todayCheckin = checkinData[todayStr] || {};
|
||||
|
||||
// Build check-in slots
|
||||
const slotDefs = [
|
||||
{ label: '早', time: '早晨 (6:00-9:00)' },
|
||||
{ label: '中', time: '中午 (11:00-14:00)' },
|
||||
{ label: '晚', time: '晚上 (17:00-21:00)' },
|
||||
{ label: '睡前', time: '睡前 (21:00-23:00)' },
|
||||
];
|
||||
|
||||
let checkTotal = 0;
|
||||
let checkDone = 0;
|
||||
|
||||
const checkSlots = slotDefs.map((sd) => {
|
||||
const slotMeds = medicines
|
||||
.filter((m) => m.slots && m.slots.includes(sd.label))
|
||||
.map((m) => {
|
||||
const checked = (todayCheckin[m.id] || []).includes(sd.label);
|
||||
return {
|
||||
id: m.id,
|
||||
name: m.name,
|
||||
dosage: m.dosage,
|
||||
category: m.category,
|
||||
checked,
|
||||
};
|
||||
});
|
||||
checkTotal += slotMeds.length;
|
||||
const slotDone = slotMeds.filter((m) => m.checked).length;
|
||||
checkDone += slotDone;
|
||||
return { label: sd.label, time: sd.time, medicines: slotMeds, allChecked: slotMeds.length > 0 && slotDone === slotMeds.length };
|
||||
});
|
||||
|
||||
// Populate week day stats
|
||||
const updatedWeekDays = weekDays.map((wd) => {
|
||||
const dayCheckin = checkinData[wd.date] || {};
|
||||
let total = 0;
|
||||
let done = 0;
|
||||
medicines.forEach((m) => {
|
||||
const slots = m.slots || [];
|
||||
total += slots.length;
|
||||
const checkedSlots = dayCheckin[m.id] || [];
|
||||
done += slots.filter((s: string) => checkedSlots.includes(s)).length;
|
||||
});
|
||||
return { ...wd, total, done };
|
||||
});
|
||||
|
||||
this.setData({
|
||||
medicines,
|
||||
totalCount,
|
||||
expiringCount: expiringItems.length,
|
||||
expiringItems: expiringItems.map((m) => m.name),
|
||||
lowStockCount,
|
||||
today: todayStr,
|
||||
todayStr: `${today.getFullYear()}年${today.getMonth() + 1}月${today.getDate()}日`,
|
||||
checkSlots,
|
||||
checkTotal,
|
||||
checkDone,
|
||||
checkProgress: checkTotal > 0 ? Math.round((checkDone / checkTotal) * 100) : 0,
|
||||
weekDays: updatedWeekDays,
|
||||
});
|
||||
},
|
||||
|
||||
switchTab(e: WechatMiniprogram.TouchEvent) {
|
||||
const { tab } = e.currentTarget.dataset;
|
||||
this.setData({ activeTab: Number(tab) });
|
||||
},
|
||||
|
||||
goAdd() {
|
||||
wx.navigateTo({ url: '/pages/tab-bar/medicine-box/add/index' });
|
||||
},
|
||||
|
||||
goEdit(e: WechatMiniprogram.TouchEvent) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
wx.navigateTo({ url: `/pages/tab-bar/medicine-box/add/index?id=${id}` });
|
||||
},
|
||||
|
||||
deleteMedicine(e: WechatMiniprogram.TouchEvent) {
|
||||
const { id, name } = e.currentTarget.dataset;
|
||||
wx.showModal({
|
||||
title: '确认删除',
|
||||
content: `确定要删除「${name}」吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
const list: Medicine[] = wx.getStorageSync(MED_KEY) || [];
|
||||
wx.setStorageSync(MED_KEY, list.filter((m) => m.id !== id));
|
||||
// cleanup checkin records
|
||||
const checkinData = wx.getStorageSync(CHECKIN_KEY) || {};
|
||||
Object.keys(checkinData).forEach((date) => {
|
||||
delete checkinData[date][id];
|
||||
});
|
||||
wx.setStorageSync(CHECKIN_KEY, checkinData);
|
||||
wx.showToast({ title: '已删除', icon: 'success' });
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
toggleCheck(e: WechatMiniprogram.TouchEvent) {
|
||||
const { mid, slot } = e.currentTarget.dataset;
|
||||
const todayStr = this.data.today;
|
||||
const checkinData: Record<string, Record<string, string[]>> = wx.getStorageSync(CHECKIN_KEY) || {};
|
||||
|
||||
if (!checkinData[todayStr]) checkinData[todayStr] = {};
|
||||
if (!checkinData[todayStr][mid]) checkinData[todayStr][mid] = [];
|
||||
|
||||
const idx = checkinData[todayStr][mid].indexOf(slot);
|
||||
if (idx > -1) {
|
||||
checkinData[todayStr][mid].splice(idx, 1);
|
||||
} else {
|
||||
checkinData[todayStr][mid].push(slot);
|
||||
}
|
||||
|
||||
wx.setStorageSync(CHECKIN_KEY, checkinData);
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
onPrevDay() {
|
||||
// For future: navigate to past dates
|
||||
},
|
||||
|
||||
onNextDay() {
|
||||
// For future: navigate to future dates
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,118 @@
|
||||
<view class="page">
|
||||
<navigation-bar title="电子药箱" back="{{false}}" color="white" background="#07C160" />
|
||||
|
||||
<!-- Tab switch -->
|
||||
<view class="header">
|
||||
<view class="tab-switch">
|
||||
<view class="tab-btn {{activeTab === 0 ? 'on' : ''}}" data-tab="0" bindtap="switchTab">我的药箱</view>
|
||||
<view class="tab-btn {{activeTab === 1 ? 'on' : ''}}" data-tab="1" bindtap="switchTab">今日打卡</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ==================== 我的药箱 ==================== -->
|
||||
<view class="content" wx:if="{{activeTab === 0}}">
|
||||
<view class="stats-row">
|
||||
<view class="stat-card">
|
||||
<view class="stat-num">{{totalCount}}</view>
|
||||
<view class="stat-label">药品总数</view>
|
||||
</view>
|
||||
<view class="stat-card warn">
|
||||
<view class="stat-num">{{expiringCount}}</view>
|
||||
<view class="stat-label">即将过期</view>
|
||||
</view>
|
||||
<view class="stat-card alert">
|
||||
<view class="stat-num">{{lowStockCount}}</view>
|
||||
<view class="stat-label">库存不足</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="expire-alert" wx:if="{{expiringCount > 0}}">
|
||||
<view class="alert-icon">⚠️</view>
|
||||
<view class="alert-text">即将过期：{{expiringItems.join('、')}}</view>
|
||||
</view>
|
||||
|
||||
<view class="med-list" wx:if="{{medicines.length > 0}}">
|
||||
<view wx:for="{{medicines}}" wx:key="id" class="med-card" data-id="{{item.id}}" bindtap="goEdit">
|
||||
<view class="med-icon">{{item.category === '抗生素' ? '💊' : item.category === '心血管' ? '❤️' : item.category === '降糖药' ? '💉' : item.category === '维生素' ? '🍊' : item.category === '中成药' ? '🌿' : '💊'}}</view>
|
||||
<view class="med-info">
|
||||
<view class="med-name">{{item.name}}</view>
|
||||
<view class="med-meta">{{item.dosage}} · {{item.frequency}}</view>
|
||||
<view class="med-tags">
|
||||
<view class="med-tag">{{item.category}}</view>
|
||||
<view class="med-tag slots">{{item.slots.join('·')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="med-right">
|
||||
<view class="med-qty">×{{item.quantity}}{{item.unit}}</view>
|
||||
<view class="med-expiry">{{item.expiryDate ? '至 ' + item.expiryDate : ''}}</view>
|
||||
</view>
|
||||
<view class="med-del" data-id="{{item.id}}" data-name="{{item.name}}" catchtap="deleteMedicine">🗑</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="empty-state" wx:else>
|
||||
<view class="empty-icon">📦</view>
|
||||
<view class="empty-title">药箱是空的</view>
|
||||
<view class="empty-desc">点击右下角按钮添加您的第一个药品</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ==================== 今日打卡 ==================== -->
|
||||
<view class="checkin-content" wx:else>
|
||||
<view class="checkin-header">
|
||||
<view class="date-label">{{todayStr}}</view>
|
||||
<view class="progress-section">
|
||||
<view class="progress-ring {{checkProgress === 100 ? 'full' : checkProgress >= 50 ? 'half' : ''}}">
|
||||
<view class="ring-text">{{checkProgress}}%</view>
|
||||
</view>
|
||||
<view class="progress-info">
|
||||
<view class="progress-detail">已完成 {{checkDone}}/{{checkTotal}}</view>
|
||||
<view class="progress-hint" wx:if="{{checkProgress === 100}}">🎉 今日全部完成！</view>
|
||||
<view class="progress-hint" wx:else>继续加油～</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="week-row">
|
||||
<view wx:for="{{weekDays}}" wx:key="date" class="week-day {{item.isToday ? 'is-today' : ''}}">
|
||||
<view class="wd-day">{{item.day}}</view>
|
||||
<view class="wd-dot" wx:if="{{item.total > 0}}">
|
||||
<view class="wd-bar-bg"><view class="wd-bar-fill" style="width: {{item.total > 0 ? item.done / item.total * 100 : 0}}%"></view></view>
|
||||
</view>
|
||||
<view class="wd-none" wx:else>-</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="slot-list" wx:if="{{checkTotal > 0}}">
|
||||
<view wx:for="{{checkSlots}}" wx:key="label" class="slot-group">
|
||||
<view class="slot-header">
|
||||
<view class="slot-label">{{item.label === '早' ? '☀️' : item.label === '中' ? '🌤️' : item.label === '晚' ? '🌙' : '💤'}} {{item.label}} · <text class="slot-time">{{item.time}}</text></view>
|
||||
<view class="slot-badge" wx:if="{{item.allChecked}}">✅</view>
|
||||
</view>
|
||||
<view class="slot-meds" wx:if="{{item.medicines.length > 0}}">
|
||||
<view wx:for="{{item.medicines}}" wx:key="id" wx:for-item="med" class="slot-med {{med.checked ? 'done' : ''}}" data-mid="{{med.id}}" data-slot="{{item.label}}" bindtap="toggleCheck">
|
||||
<view class="sm-check {{med.checked ? 'checked' : ''}}">{{med.checked ? '✓' : ''}}</view>
|
||||
<view class="sm-info">
|
||||
<view class="sm-name">{{med.name}}</view>
|
||||
<view class="sm-dosage">{{med.dosage}}</view>
|
||||
</view>
|
||||
<view class="sm-cat">{{med.category}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="slot-empty" wx:else>
|
||||
<view class="se-text">该时段无需服药</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="checkin-empty" wx:if="{{checkTotal === 0}}">
|
||||
<view class="empty-icon">📋</view>
|
||||
<view class="empty-title">暂无用药计划</view>
|
||||
<view class="empty-desc">先在「我的药箱」中添加药品并设置服用时段</view>
|
||||
<view class="go-add-btn" bindtap="goAdd">+ 添加药品</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- FAB -->
|
||||
<view class="fab" bindtap="goAdd" wx:if="{{activeTab === 0}}">+</view>
|
||||
</view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx 30rpx 60rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background: #ffffff; border-radius: 24rpx;
|
||||
padding: 30rpx; box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.avatar-row {
|
||||
display: flex; align-items: flex-start; margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.avatar-label {
|
||||
font-size: 28rpx; font-weight: 600; color: #333;
|
||||
width: 100rpx; padding-top: 10rpx; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-options {
|
||||
flex: 1; display: flex; flex-wrap: wrap; gap: 14rpx;
|
||||
}
|
||||
|
||||
.avatar-opt {
|
||||
width: 68rpx; height: 68rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: #f7f8fa; border-radius: 50%; font-size: 34rpx;
|
||||
border: 3rpx solid transparent;
|
||||
}
|
||||
|
||||
.avatar-opt.selected {
|
||||
border-color: #4A90D9; background: #e8f0fa; transform: scale(1.1);
|
||||
}
|
||||
|
||||
.form-group { margin-bottom: 28rpx; }
|
||||
.form-label { font-size: 28rpx; font-weight: 600; color: #333; margin-bottom: 14rpx; }
|
||||
|
||||
.form-input {
|
||||
width: 100%; height: 80rpx; background: #f7f8fa;
|
||||
border-radius: 14rpx; padding: 0 24rpx; font-size: 28rpx; box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-picker {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
width: 100%; height: 80rpx; background: #f7f8fa;
|
||||
border-radius: 14rpx; padding: 0 24rpx; font-size: 28rpx;
|
||||
box-sizing: border-box; color: #333;
|
||||
}
|
||||
|
||||
.form-picker.placeholder { color: #bbb; }
|
||||
.arrow { font-size: 22rpx; color: #999; }
|
||||
|
||||
.form-row { display: flex; gap: 20rpx; }
|
||||
.form-row .half { flex: 1; }
|
||||
|
||||
.gender-row { display: flex; gap: 14rpx; }
|
||||
|
||||
.gender-btn {
|
||||
flex: 1; text-align: center; height: 80rpx; line-height: 80rpx;
|
||||
background: #f7f8fa; border-radius: 14rpx; font-size: 26rpx;
|
||||
color: #666; border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.gender-btn.active.male {
|
||||
background: #e8f0fa; color: #4A90D9; border-color: #4A90D9; font-weight: 600;
|
||||
}
|
||||
|
||||
.gender-btn.active.female {
|
||||
background: #fce8ec; color: #E85D75; border-color: #E85D75; font-weight: 600;
|
||||
}
|
||||
|
||||
.blood-row { display: flex; gap: 14rpx; }
|
||||
|
||||
.blood-chip {
|
||||
flex: 1; text-align: center; height: 72rpx; line-height: 72rpx;
|
||||
background: #f7f8fa; border-radius: 14rpx; font-size: 26rpx;
|
||||
color: #666; border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.blood-chip.active {
|
||||
background: #fff0e8; color: #FF6B35; border-color: #FF6B35; font-weight: 600;
|
||||
}
|
||||
|
||||
.divider {
|
||||
text-align: center; font-size: 26rpx; color: #999;
|
||||
padding: 10rpx 0 24rpx; margin-bottom: 24rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
width: 100%; height: 140rpx; background: #f7f8fa;
|
||||
border-radius: 14rpx; padding: 20rpx 24rpx; font-size: 28rpx; box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-area { margin-top: 40rpx; }
|
||||
|
||||
.save-btn {
|
||||
width: 100%; height: 90rpx; line-height: 90rpx;
|
||||
background: linear-gradient(135deg, #4A90D9, #357ABD);
|
||||
color: #fff; font-size: 32rpx; font-weight: 600;
|
||||
border-radius: 18rpx; border: none;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
const MEMBER_KEY = 'family_member';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
avatars: ['👤', '👨', '👩', '👴', '👵', '👶', '🧒', '👦', '👧'],
|
||||
relations: ['本人', '配偶', '父亲', '母亲', '儿子', '女儿', '爷爷', '奶奶', '外公', '外婆', '其他'],
|
||||
bloodTypes: ['A', 'B', 'AB', 'O', '未知'],
|
||||
relationIdx: -1,
|
||||
today: '',
|
||||
form: {
|
||||
avatar: '👤',
|
||||
name: '',
|
||||
gender: '',
|
||||
birthday: '',
|
||||
relation: '',
|
||||
bloodType: '',
|
||||
allergies: '',
|
||||
chronicDiseases: '',
|
||||
longTermMeds: '',
|
||||
notes: '',
|
||||
},
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const today = new Date();
|
||||
this.setData({
|
||||
today: `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`,
|
||||
});
|
||||
|
||||
const member = wx.getStorageSync(MEMBER_KEY);
|
||||
if (member && member.name) {
|
||||
this.setData({
|
||||
form: { ...this.data.form, ...member },
|
||||
relationIdx: this.data.relations.indexOf(member.relation),
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
pickAvatar(e: WechatMiniprogram.TouchEvent) {
|
||||
this.setData({ 'form.avatar': e.currentTarget.dataset.avatar });
|
||||
},
|
||||
|
||||
onField(e: WechatMiniprogram.Input) {
|
||||
this.setData({ [`form.${e.currentTarget.dataset.field}`]: e.detail.value });
|
||||
},
|
||||
|
||||
onRelationChange(e: WechatMiniprogram.PickerChange) {
|
||||
const idx = Number(e.detail.value);
|
||||
this.setData({ relationIdx: idx, 'form.relation': this.data.relations[idx] });
|
||||
},
|
||||
|
||||
onBirthdayChange(e: WechatMiniprogram.PickerChange) {
|
||||
this.setData({ 'form.birthday': e.detail.value });
|
||||
},
|
||||
|
||||
pickGender(e: WechatMiniprogram.TouchEvent) {
|
||||
this.setData({ 'form.gender': e.currentTarget.dataset.gender });
|
||||
},
|
||||
|
||||
pickBlood(e: WechatMiniprogram.TouchEvent) {
|
||||
this.setData({ 'form.bloodType': e.currentTarget.dataset.bt });
|
||||
},
|
||||
|
||||
save() {
|
||||
if (!this.data.form.name.trim()) {
|
||||
wx.showToast({ title: '请输入姓名', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
wx.setStorageSync(MEMBER_KEY, this.data.form);
|
||||
wx.showToast({ title: '已保存', icon: 'success' });
|
||||
setTimeout(() => wx.navigateBack(), 800);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
<view class="page">
|
||||
<navigation-bar title="编辑家庭成员" back="{{true}}" color="black" background="#ffffff" />
|
||||
|
||||
<view class="form-section">
|
||||
<!-- 头像选择 -->
|
||||
<view class="avatar-row">
|
||||
<view class="avatar-label">头像</view>
|
||||
<view class="avatar-options">
|
||||
<view wx:for="{{avatars}}" wx:key="*this" class="avatar-opt {{form.avatar === item ? 'selected' : ''}}" data-avatar="{{item}}" bindtap="pickAvatar">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<view class="form-group half">
|
||||
<view class="form-label">姓名</view>
|
||||
<input class="form-input" placeholder="请输入姓名" value="{{form.name}}" bindinput="onField" data-field="name" />
|
||||
</view>
|
||||
<view class="form-group half">
|
||||
<view class="form-label">关系</view>
|
||||
<picker mode="selector" range="{{relations}}" value="{{relationIdx}}" bindchange="onRelationChange">
|
||||
<view class="form-picker {{form.relation ? '' : 'placeholder'}}">{{form.relation || '请选择'}}<text class="arrow">▼</text></view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<view class="form-group half">
|
||||
<view class="form-label">性别</view>
|
||||
<view class="gender-row">
|
||||
<view class="gender-btn {{form.gender === '男' ? 'active male' : ''}}" data-gender="男" bindtap="pickGender">♂ 男</view>
|
||||
<view class="gender-btn {{form.gender === '女' ? 'active female' : ''}}" data-gender="女" bindtap="pickGender">♀ 女</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-group half">
|
||||
<view class="form-label">出生日期</view>
|
||||
<picker mode="date" value="{{form.birthday}}" end="{{today}}" bindchange="onBirthdayChange">
|
||||
<view class="form-picker {{form.birthday ? '' : 'placeholder'}}">{{form.birthday || '请选择'}}<text class="arrow">📅</text></view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">血型</view>
|
||||
<view class="blood-row">
|
||||
<view wx:for="{{bloodTypes}}" wx:key="*this" class="blood-chip {{form.bloodType === item ? 'active' : ''}}" data-bt="{{item}}" bindtap="pickBlood">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="divider">📋 健康信息</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">过敏史</view>
|
||||
<input class="form-input" placeholder="如：青霉素过敏、花粉过敏" value="{{form.allergies}}" bindinput="onField" data-field="allergies" />
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">慢性病史</view>
|
||||
<input class="form-input" placeholder="如：高血压、糖尿病" value="{{form.chronicDiseases}}" bindinput="onField" data-field="chronicDiseases" />
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">长期用药</view>
|
||||
<input class="form-input" placeholder="如：氨氯地平5mg/日" value="{{form.longTermMeds}}" bindinput="onField" data-field="longTermMeds" />
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">备注</view>
|
||||
<textarea class="form-textarea" placeholder="其他需要记录的信息…" value="{{form.notes}}" bindinput="onField" data-field="notes" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="btn-area">
|
||||
<button class="save-btn" bindtap="save">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 120rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 50rpx 40rpx 40rpx;
|
||||
background: linear-gradient(135deg, #4A90D9, #357ABD);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 140rpx; height: 140rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.2); border-radius: 50%;
|
||||
font-size: 70rpx; margin-bottom: 20rpx;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.name { font-size: 38rpx; font-weight: bold; color: #fff; margin-bottom: 8rpx; }
|
||||
|
||||
.relation {
|
||||
font-size: 24rpx; color: rgba(255, 255, 255, 0.75);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 6rpx 22rpx; border-radius: 20rpx; margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
padding: 14rpx 50rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff; font-size: 26rpx; border-radius: 30rpx;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.edit-btn:active { background: rgba(255, 255, 255, 0.35); }
|
||||
|
||||
/* Info cards */
|
||||
.content { padding: 30rpx; }
|
||||
|
||||
.info-card {
|
||||
background: #ffffff; border-radius: 20rpx; padding: 24rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 28rpx; font-weight: 600; color: #333;
|
||||
padding-bottom: 20rpx; border-bottom: 1rpx solid #f0f0f0; margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex; align-items: center;
|
||||
padding: 18rpx 0;
|
||||
border-bottom: 1rpx solid #f8f8f8;
|
||||
}
|
||||
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
|
||||
.info-label {
|
||||
font-size: 26rpx; color: #999; width: 140rpx; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1; font-size: 28rpx; color: #333;
|
||||
}
|
||||
|
||||
.info-value.empty { color: #ccc; }
|
||||
|
||||
/* Empty */
|
||||
.empty-state {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 100rpx 40rpx;
|
||||
}
|
||||
|
||||
.empty-icon { font-size: 120rpx; margin-bottom: 24rpx; }
|
||||
.empty-title { font-size: 32rpx; font-weight: 600; color: #666; margin-bottom: 12rpx; }
|
||||
.empty-desc { font-size: 26rpx; color: #aaa; text-align: center; margin-bottom: 30rpx; }
|
||||
|
||||
.go-add-btn {
|
||||
padding: 22rpx 60rpx;
|
||||
background: linear-gradient(135deg, #4A90D9, #357ABD);
|
||||
color: #fff; font-size: 28rpx; font-weight: 600; border-radius: 36rpx;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
interface FamilyMember {
|
||||
avatar: string;
|
||||
name: string;
|
||||
gender: string;
|
||||
birthday: string;
|
||||
relation: string;
|
||||
bloodType: string;
|
||||
allergies: string;
|
||||
chronicDiseases: string;
|
||||
longTermMeds: string;
|
||||
notes: string;
|
||||
}
|
||||
|
||||
const MEMBER_KEY = 'family_member';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
member: {} as FamilyMember,
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({ selected: 3 });
|
||||
}
|
||||
this.loadMember();
|
||||
},
|
||||
loadMember() {
|
||||
const member = wx.getStorageSync(MEMBER_KEY) || {};
|
||||
this.setData({ member });
|
||||
},
|
||||
goEdit() {
|
||||
wx.navigateTo({ url: '/pages/tab-bar/profile/edit/index' });
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,65 @@
|
||||
<view class="page">
|
||||
<navigation-bar title="我的" back="{{false}}" color="white" background="#357ABD" />
|
||||
|
||||
<!-- 家庭成员卡片 -->
|
||||
<view class="header">
|
||||
<view class="avatar">{{member.avatar || '👤'}}</view>
|
||||
<view class="name">{{member.name || '点击添加家庭成员'}}</view>
|
||||
<view class="relation" wx:if="{{member.relation}}">{{member.relation}}</view>
|
||||
<view class="edit-btn" bindtap="goEdit">{{member.name ? '编辑信息' : '添加信息'}}</view>
|
||||
</view>
|
||||
|
||||
<!-- 成员详细信息 -->
|
||||
<view class="content" wx:if="{{member.name}}">
|
||||
<view class="info-card">
|
||||
<view class="info-row">
|
||||
<view class="info-label">姓名</view>
|
||||
<view class="info-value">{{member.name}}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">性别</view>
|
||||
<view class="info-value">{{member.gender || '未填写'}}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">出生日期</view>
|
||||
<view class="info-value">{{member.birthday || '未填写'}}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">关系</view>
|
||||
<view class="info-value">{{member.relation || '未填写'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-card">
|
||||
<view class="card-title">📋 健康信息</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">血型</view>
|
||||
<view class="info-value">{{member.bloodType || '未填写'}}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">过敏史</view>
|
||||
<view class="info-value {{member.allergies ? '' : 'empty'}}">{{member.allergies || '无'}}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">慢性病史</view>
|
||||
<view class="info-value {{member.chronicDiseases ? '' : 'empty'}}">{{member.chronicDiseases || '无'}}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">长期用药</view>
|
||||
<view class="info-value {{member.longTermMeds ? '' : 'empty'}}">{{member.longTermMeds || '无'}}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">备注</view>
|
||||
<view class="info-value {{member.notes ? '' : 'empty'}}">{{member.notes || '无'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" wx:else>
|
||||
<view class="empty-icon">👨👩👧👦</view>
|
||||
<view class="empty-title">还未添加家庭成员</view>
|
||||
<view class="empty-desc">添加家庭成员信息，方便管理全家用药</view>
|
||||
<view class="go-add-btn" bindtap="goEdit">添加家庭成员</view>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user