chenyuwu/ruo-shan-cloud-pharmacy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 电子药箱小程序 - 4Tab药品管理

Browse Source 
- 电子药箱: 药品库存管理 + 手动录入 + 今日用药打卡
- 药品百科: 搜索 + 分类筛选 + 20种药品静态数据
- 惠教中心: 4条药品使用指南课程
- 我的: 家庭成员信息管理
- 自定义TabBar + navigation-bar组件
- SVG药品分类插图
This commit is contained in:
陈誉午
2026-07-29 11:20:52 +08:00
commit 994b267f5c
683 changed files with 43849 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/pages/tab-bar/medicine-box/add/index.json
+5
View File
@@ -0,0 +1,5 @@
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}
miniprogram/pages/tab-bar/medicine-box/add/index.scss
+67
View File
@@ -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;
}
miniprogram/pages/tab-bar/medicine-box/add/index.ts
+170
View File
@@ -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);
}
},
});
},
});
miniprogram/pages/tab-bar/medicine-box/add/index.wxml
+79
View File
@@ -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>
miniprogram/pages/tab-bar/medicine-box/index.json
+5
View File
@@ -0,0 +1,5 @@
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}
miniprogram/pages/tab-bar/medicine-box/index.scss
+250
View File
@@ -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); }
miniprogram/pages/tab-bar/medicine-box/index.ts
+212
View File
@@ -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
},
});
miniprogram/pages/tab-bar/medicine-box/index.wxml
+118
View File
@@ -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>