ZhaoYang
1 month ago
19 changed files with 2435 additions and 8 deletions
-
4app.json
-
7pages/home/home.js
-
2pages/home/home.wxml
-
BINpagesA/images/5.png
-
BINpagesA/images/6.jpg
-
BINpagesA/images/amxl.png
-
BINpagesA/images/blf.png
-
BINpagesA/images/lh.png
-
BINpagesA/images/wc.png
-
7pagesA/pages/expert/expert.wxml
-
4pagesA/pages/expert/expert.wxss
-
616pagesA/pages/medicine/medicine.js
-
4pagesA/pages/medicine/medicine.json
-
155pagesA/pages/medicine/medicine.wxml
-
410pagesA/pages/medicine/medicine.wxss
-
605pagesA/pages/medicineDetails/medicineDetails.js
-
4pagesA/pages/medicineDetails/medicineDetails.json
-
175pagesA/pages/medicineDetails/medicineDetails.wxml
-
450pagesA/pages/medicineDetails/medicineDetails.wxss
|
After Width: 300 | Height: 200 | Size: 21 KiB |
|
After Width: 600 | Height: 394 | Size: 37 KiB |
|
After Width: 305 | Height: 271 | Size: 107 KiB |
|
After Width: 605 | Height: 513 | Size: 271 KiB |
|
After Width: 366 | Height: 337 | Size: 123 KiB |
|
After Width: 605 | Height: 528 | Size: 340 KiB |
@ -0,0 +1,616 @@ |
|||
Page({ |
|||
data: { |
|||
// 原始药品列表数据
|
|||
medicineList: [], |
|||
// 筛选后的列表
|
|||
filteredList: [], |
|||
|
|||
// 搜索相关
|
|||
searchKeyword: '', |
|||
|
|||
// 筛选相关
|
|||
currentCategory: 'all', |
|||
|
|||
// 分页相关
|
|||
page: 1, |
|||
pageSize: 12, |
|||
hasMore: true, |
|||
loading: false, |
|||
|
|||
// 弹窗控制
|
|||
showDetailModal: false, |
|||
currentMedicine: null, |
|||
|
|||
// 滚动相关
|
|||
showBackToTop: false, |
|||
scrollTop: 0 |
|||
}, |
|||
|
|||
onLoad: function() { |
|||
this.initData(); |
|||
}, |
|||
|
|||
onShow: function() { |
|||
// 页面显示时刷新数据
|
|||
this.refreshList(); |
|||
}, |
|||
|
|||
onPullDownRefresh: function() { |
|||
// 下拉刷新
|
|||
this.refreshList(); |
|||
}, |
|||
|
|||
onReachBottom: function() { |
|||
// 上拉加载更多
|
|||
if (this.data.hasMore && !this.data.loading) { |
|||
this.loadMore(); |
|||
} |
|||
}, |
|||
|
|||
onPageScroll: function(e) { |
|||
// 显示/隐藏返回顶部按钮
|
|||
if (e.scrollTop > 300 && !this.data.showBackToTop) { |
|||
this.setData({ showBackToTop: true }); |
|||
} else if (e.scrollTop <= 300 && this.data.showBackToTop) { |
|||
this.setData({ showBackToTop: false }); |
|||
} |
|||
|
|||
this.setData({ scrollTop: e.scrollTop }); |
|||
}, |
|||
|
|||
// 初始化数据
|
|||
initData: function() { |
|||
const mockData = this.getMockData(); |
|||
this.setData({ |
|||
medicineList: mockData, |
|||
filteredList: mockData |
|||
}); |
|||
}, |
|||
|
|||
// 获取模拟数据
|
|||
getMockData: function() { |
|||
return [ |
|||
{ |
|||
id: 1, |
|||
name: "阿莫西林胶囊", |
|||
manufacturer: "华北制药股份有限公司", |
|||
specification: "0.25g*24粒/盒", |
|||
category: "prescription", |
|||
categoryText: "处方药", |
|||
indication: "用于敏感菌所致的呼吸道感染、泌尿系统感染等", |
|||
price: 25.8, |
|||
originalPrice: 32.0, |
|||
isHot: true, |
|||
salesCount: 1280, |
|||
stock: 150, |
|||
image: "https://via.placeholder.com/300x300/3a7ff3/ffffff?text=阿莫西林", |
|||
|
|||
expert: { |
|||
name: "张明华", |
|||
title: "主任医师", |
|||
hospital: "北京协和医院", |
|||
avatar: "https://via.placeholder.com/100x100/3a7ff3/ffffff?text=张", |
|||
reason: "本品为广谱抗生素，对多数革兰氏阳性菌和革兰氏阴性菌均有良好的抗菌作用，是临床常用的一线抗生素。", |
|||
expertise: "呼吸内科", |
|||
years: 15, |
|||
recommendTime: "2024-01-15" |
|||
}, |
|||
|
|||
store: { |
|||
name: "仁和堂大药房", |
|||
address: "北京市朝阳区建国路88号", |
|||
phone: "010-88888888", |
|||
businessHours: "8:00-22:00", |
|||
features: "24小时营业，专业药师咨询，医保定点药店", |
|||
distance: "1.2", |
|||
latitude: 39.9042, |
|||
longitude: 116.4074, |
|||
rating: 4.8, |
|||
images: [ |
|||
"https://via.placeholder.com/400x300/4CAF50/ffffff?text=药店外观", |
|||
"https://via.placeholder.com/400x300/2196F3/ffffff?text=店内环境" |
|||
] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "口服。成人一次0.5g，每6～8小时1次，一日剂量不超过4g。", |
|||
precautions: "青霉素过敏者禁用，用药期间可能出现腹泻、恶心等胃肠道反应。", |
|||
storage: "密封，在干燥处保存。", |
|||
validity: "24个月" |
|||
} |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: "连花清瘟胶囊", |
|||
manufacturer: "石家庄以岭药业股份有限公司", |
|||
specification: "0.35g*24粒/盒", |
|||
category: "chinese", |
|||
categoryText: "中成药", |
|||
indication: "用于治疗流行性感冒属热毒袭肺证", |
|||
price: 28.5, |
|||
originalPrice: 35.0, |
|||
isHot: true, |
|||
salesCount: 2560, |
|||
stock: 89, |
|||
image: "https://via.placeholder.com/300x300/4CAF50/ffffff?text=连花清瘟", |
|||
|
|||
expert: { |
|||
name: "李芳", |
|||
title: "副主任医师", |
|||
hospital: "上海瑞金医院", |
|||
avatar: "https://via.placeholder.com/100x100/4CAF50/ffffff?text=李", |
|||
reason: "在新冠肺炎疫情防控中显示出良好效果，具有清瘟解毒、宣肺泄热的功效，适用于流感治疗。", |
|||
expertise: "中医科", |
|||
years: 12, |
|||
recommendTime: "2024-01-14" |
|||
}, |
|||
|
|||
store: { |
|||
name: "同济堂药店", |
|||
address: "上海市黄浦区南京东路100号", |
|||
phone: "021-66666666", |
|||
businessHours: "9:00-21:00", |
|||
features: "中药配方齐全，提供代煎服务，老字号药店", |
|||
distance: "2.5", |
|||
latitude: 31.2304, |
|||
longitude: 121.4737, |
|||
rating: 4.7, |
|||
images: [ |
|||
"https://via.placeholder.com/400x300/FF9800/ffffff?text=中药柜台" |
|||
] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "口服。一次4粒，一日3次。", |
|||
precautions: "风寒感冒者不适用，高血压、心脏病患者慎用。", |
|||
storage: "密封，置阴凉干燥处。", |
|||
validity: "36个月" |
|||
} |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: "维生素C片", |
|||
manufacturer: "养生堂药业有限公司", |
|||
specification: "100mg*60片/瓶", |
|||
category: "health", |
|||
categoryText: "保健品", |
|||
indication: "用于预防和治疗维生素C缺乏症", |
|||
price: 18.9, |
|||
originalPrice: 24.0, |
|||
isHot: false, |
|||
salesCount: 890, |
|||
stock: 320, |
|||
image: "https://via.placeholder.com/300x300/FF9800/ffffff?text=维生素C", |
|||
|
|||
expert: { |
|||
name: "王建国", |
|||
title: "执业药师", |
|||
hospital: "广州中医药大学附属医院", |
|||
avatar: "https://via.placeholder.com/100x100/FF9800/ffffff?text=王", |
|||
reason: "增强免疫力，促进铁吸收，抗氧化作用明显，适合日常保健和预防感冒。", |
|||
expertise: "临床药学", |
|||
years: 8, |
|||
recommendTime: "2024-01-13" |
|||
}, |
|||
|
|||
store: { |
|||
name: "老百姓大药房", |
|||
address: "广州市天河区体育西路189号", |
|||
phone: "020-77777777", |
|||
businessHours: "7:30-23:00", |
|||
features: "连锁品牌，价格实惠，会员优惠，支持医保", |
|||
distance: "0.8", |
|||
latitude: 23.1358, |
|||
longitude: 113.3269, |
|||
rating: 4.6, |
|||
images: [] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "口服。成人一次1片，一日1次。", |
|||
precautions: "不宜长期过量服用，肾功能不全者慎用。", |
|||
storage: "避光，密封保存。", |
|||
validity: "24个月" |
|||
} |
|||
}, |
|||
{ |
|||
id: 4, |
|||
name: "布洛芬缓释胶囊", |
|||
manufacturer: "中美天津史克制药有限公司", |
|||
specification: "0.3g*20粒/盒", |
|||
category: "otc", |
|||
categoryText: "非处方药", |
|||
indication: "用于缓解轻至中度疼痛如头痛、关节痛、偏头痛等", |
|||
price: 22.5, |
|||
originalPrice: 28.0, |
|||
isHot: true, |
|||
salesCount: 1870, |
|||
stock: 120, |
|||
image: "https://via.placeholder.com/300x300/9C27B0/ffffff?text=布洛芬", |
|||
|
|||
expert: { |
|||
name: "陈晓东", |
|||
title: "主任医师", |
|||
hospital: "武汉同济医院", |
|||
avatar: "https://via.placeholder.com/100x100/9C27B0/ffffff?text=陈", |
|||
reason: "解热镇痛效果确切，缓释剂型作用持久，胃肠道刺激小，适合各种疼痛的缓解。", |
|||
expertise: "疼痛科", |
|||
years: 20, |
|||
recommendTime: "2024-01-12" |
|||
}, |
|||
|
|||
store: { |
|||
name: "九州通大药房", |
|||
address: "武汉市江汉区解放大道688号", |
|||
phone: "027-55555555", |
|||
businessHours: "8:30-21:30", |
|||
features: "药品齐全，支持线上订购，送货上门", |
|||
distance: "3.2", |
|||
latitude: 30.5928, |
|||
longitude: 114.3052, |
|||
rating: 4.9, |
|||
images: [ |
|||
"https://via.placeholder.com/400x300/3F51B5/ffffff?text=现代药店", |
|||
"https://via.placeholder.com/400x300/E91E63/ffffff?text=专业服务" |
|||
] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "口服。成人一次1粒，一日2次。", |
|||
precautions: "胃肠道溃疡患者禁用，不宜长期服用。", |
|||
storage: "密封，在阴凉干燥处保存。", |
|||
validity: "36个月" |
|||
} |
|||
}, |
|||
{ |
|||
id: 5, |
|||
name: "盐酸左氧氟沙星片", |
|||
manufacturer: "浙江医药股份有限公司", |
|||
specification: "0.5g*6片/盒", |
|||
category: "prescription", |
|||
categoryText: "处方药", |
|||
indication: "用于敏感细菌引起的呼吸系统、泌尿系统感染", |
|||
price: 42.8, |
|||
originalPrice: 56.0, |
|||
isHot: false, |
|||
salesCount: 560, |
|||
stock: 75, |
|||
image: "https://via.placeholder.com/300x300/2196F3/ffffff?text=左氧氟沙星", |
|||
|
|||
expert: { |
|||
name: "刘涛", |
|||
title: "副主任医师", |
|||
hospital: "南京鼓楼医院", |
|||
avatar: "https://via.placeholder.com/100x100/2196F3/ffffff?text=刘", |
|||
reason: "抗菌谱广，对多种革兰氏阴性菌和阳性菌有效，特别适用于泌尿系统感染的治疗。", |
|||
expertise: "泌尿外科", |
|||
years: 10, |
|||
recommendTime: "2024-01-11" |
|||
}, |
|||
|
|||
store: { |
|||
name: "金陵大药房", |
|||
address: "南京市鼓楼区中山路321号", |
|||
phone: "025-44444444", |
|||
businessHours: "8:00-21:00", |
|||
features: "专业处方药房，药师驻店咨询", |
|||
distance: "1.8", |
|||
latitude: 32.0603, |
|||
longitude: 118.7969, |
|||
rating: 4.5, |
|||
images: [] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "口服。一次1片，一日1次。", |
|||
precautions: "18岁以下患者禁用，孕妇及哺乳期妇女禁用。", |
|||
storage: "遮光，密封保存。", |
|||
validity: "24个月" |
|||
} |
|||
}, |
|||
{ |
|||
id: 6, |
|||
name: "板蓝根颗粒", |
|||
manufacturer: "广州白云山和记黄埔中药有限公司", |
|||
specification: "10g*20袋/盒", |
|||
category: "chinese", |
|||
categoryText: "中成药", |
|||
indication: "清热解毒，凉血利咽，用于肺胃热盛所致的咽喉肿痛", |
|||
price: 15.9, |
|||
originalPrice: 19.9, |
|||
isHot: true, |
|||
salesCount: 3200, |
|||
stock: 450, |
|||
image: "https://via.placeholder.com/300x300/FF5722/ffffff?text=板蓝根", |
|||
|
|||
expert: { |
|||
name: "孙丽", |
|||
title: "主治医师", |
|||
hospital: "成都中医药大学附属医院", |
|||
avatar: "https://via.placeholder.com/100x100/FF5722/ffffff?text=孙", |
|||
reason: "传统经典方剂，清热解毒效果显著，特别适合预防和治疗感冒初期症状。", |
|||
expertise: "中医内科", |
|||
years: 6, |
|||
recommendTime: "2024-01-10" |
|||
}, |
|||
|
|||
store: { |
|||
name: "康恩贝大药房", |
|||
address: "成都市锦江区春熙路58号", |
|||
phone: "028-33333333", |
|||
businessHours: "9:00-22:00", |
|||
features: "连锁品牌，中药西药齐全", |
|||
distance: "0.5", |
|||
latitude: 30.6578, |
|||
longitude: 104.0657, |
|||
rating: 4.4, |
|||
images: [] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "开水冲服。一次1袋，一日3次。", |
|||
precautions: "风寒感冒者不适用，糖尿病患者慎用。", |
|||
storage: "密封，防潮。", |
|||
validity: "36个月" |
|||
} |
|||
}, |
|||
{ |
|||
id: 7, |
|||
name: "复方甘草片", |
|||
manufacturer: "北京双鹤药业股份有限公司", |
|||
specification: "100片/瓶", |
|||
category: "prescription", |
|||
categoryText: "处方药", |
|||
indication: "用于镇咳祛痰，适用于感冒咳嗽", |
|||
price: 12.5, |
|||
originalPrice: 16.0, |
|||
isHot: false, |
|||
salesCount: 780, |
|||
stock: 200, |
|||
image: "https://via.placeholder.com/300x300/673AB7/ffffff?text=甘草片", |
|||
|
|||
expert: { |
|||
name: "赵国强", |
|||
title: "主任医师", |
|||
hospital: "天津医科大学总医院", |
|||
avatar: "https://via.placeholder.com/100x100/673AB7/ffffff?text=赵", |
|||
reason: "传统止咳良药，镇咳祛痰效果确切，价格实惠，适合普通感冒咳嗽。", |
|||
expertise: "呼吸内科", |
|||
years: 18, |
|||
recommendTime: "2024-01-09" |
|||
}, |
|||
|
|||
store: { |
|||
name: "天津医药大药房", |
|||
address: "天津市和平区南京路128号", |
|||
phone: "022-22222222", |
|||
businessHours: "8:00-21:30", |
|||
features: "国营药店，药品质量有保障", |
|||
distance: "2.0", |
|||
latitude: 39.1172, |
|||
longitude: 117.2056, |
|||
rating: 4.3, |
|||
images: [] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "口服。一次3-4片，一日3次。", |
|||
precautions: "不宜长期服用，孕妇及哺乳期妇女慎用。", |
|||
storage: "密封，在干燥处保存。", |
|||
validity: "36个月" |
|||
} |
|||
}, |
|||
{ |
|||
id: 8, |
|||
name: "葡萄糖酸钙口服液", |
|||
manufacturer: "哈药集团制药六厂", |
|||
specification: "10ml*12支/盒", |
|||
category: "otc", |
|||
categoryText: "非处方药", |
|||
indication: "用于预防和治疗钙缺乏症", |
|||
price: 35.0, |
|||
originalPrice: 42.0, |
|||
isHot: true, |
|||
salesCount: 1560, |
|||
stock: 180, |
|||
image: "https://via.placeholder.com/300x300/00BCD4/ffffff?text=葡萄糖酸钙", |
|||
|
|||
expert: { |
|||
name: "周敏", |
|||
title: "副主任医师", |
|||
hospital: "西安交通大学第一附属医院", |
|||
avatar: "https://via.placeholder.com/100x100/00BCD4/ffffff?text=周", |
|||
reason: "钙吸收好，口感适宜，特别适合儿童、孕妇和老年人补钙。", |
|||
expertise: "儿科", |
|||
years: 14, |
|||
recommendTime: "2024-01-08" |
|||
}, |
|||
|
|||
store: { |
|||
name: "西安医药大药房", |
|||
address: "西安市碑林区南大街58号", |
|||
phone: "029-11111111", |
|||
businessHours: "8:30-21:00", |
|||
features: "专业儿科用药，儿童健康咨询", |
|||
distance: "1.5", |
|||
latitude: 34.2583, |
|||
longitude: 108.9426, |
|||
rating: 4.7, |
|||
images: [] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "口服。一次1-2支，一日3次。", |
|||
precautions: "肾功能不全者慎用，不宜与洋地黄类药物同时使用。", |
|||
storage: "密封，置阴凉处。", |
|||
validity: "24个月" |
|||
} |
|||
} |
|||
]; |
|||
}, |
|||
|
|||
// 获取简短文本（修复undefined问题）
|
|||
getShortText: function(text, maxLength) { |
|||
if (!text || typeof text !== 'string') { |
|||
return ''; |
|||
} |
|||
if (text.length <= maxLength) { |
|||
return text; |
|||
} |
|||
return text.substring(0, maxLength) + '...'; |
|||
}, |
|||
|
|||
// 搜索输入处理（输入时自动搜索）
|
|||
onSearchInput: function(e) { |
|||
const keyword = e.detail.value; |
|||
this.setData({ |
|||
searchKeyword: keyword |
|||
}, () => { |
|||
// 输入后立即执行筛选
|
|||
this.filterList(); |
|||
}); |
|||
}, |
|||
|
|||
// 清除搜索
|
|||
clearSearch: function() { |
|||
this.setData({ |
|||
searchKeyword: '' |
|||
}, () => { |
|||
this.filterList(); |
|||
}); |
|||
}, |
|||
|
|||
// 分类筛选切换
|
|||
onCategoryChange: function(e) { |
|||
const category = e.currentTarget.dataset.category; |
|||
this.setData({ |
|||
currentCategory: category |
|||
}, () => { |
|||
this.filterList(); |
|||
}); |
|||
}, |
|||
|
|||
// 筛选列表
|
|||
filterList: function() { |
|||
const { searchKeyword, currentCategory, medicineList } = this.data; |
|||
let filteredList = [...medicineList]; |
|||
|
|||
// 搜索筛选
|
|||
if (searchKeyword && searchKeyword.trim()) { |
|||
const keyword = searchKeyword.trim().toLowerCase(); |
|||
filteredList = filteredList.filter(item => { |
|||
// 搜索药品名称
|
|||
if (item.name && item.name.toLowerCase().includes(keyword)) { |
|||
return true; |
|||
} |
|||
// 搜索专家姓名
|
|||
if (item.expert && item.expert.name && item.expert.name.toLowerCase().includes(keyword)) { |
|||
return true; |
|||
} |
|||
// 搜索适用症状
|
|||
if (item.indication && item.indication.toLowerCase().includes(keyword)) { |
|||
return true; |
|||
} |
|||
// 搜索生产厂家
|
|||
if (item.manufacturer && item.manufacturer.toLowerCase().includes(keyword)) { |
|||
return true; |
|||
} |
|||
return false; |
|||
}); |
|||
} |
|||
|
|||
// 分类筛选
|
|||
if (currentCategory !== 'all') { |
|||
filteredList = filteredList.filter(item => item.category === currentCategory); |
|||
} |
|||
|
|||
this.setData({ |
|||
filteredList: filteredList, |
|||
page: 1, |
|||
hasMore: filteredList.length > this.data.pageSize |
|||
}); |
|||
}, |
|||
|
|||
// 刷新列表
|
|||
refreshList: function() { |
|||
wx.showLoading({ |
|||
title: '刷新中...', |
|||
}); |
|||
|
|||
// 模拟网络请求
|
|||
setTimeout(() => { |
|||
const mockData = this.getMockData(); |
|||
this.setData({ |
|||
medicineList: mockData |
|||
}, () => { |
|||
// 刷新后重新筛选
|
|||
this.filterList(); |
|||
}); |
|||
|
|||
wx.hideLoading(); |
|||
wx.stopPullDownRefresh(); |
|||
}, 800); |
|||
}, |
|||
|
|||
// 加载更多
|
|||
loadMore: function() { |
|||
if (!this.data.hasMore) return; |
|||
|
|||
this.setData({ loading: true }); |
|||
|
|||
// 模拟网络请求
|
|||
setTimeout(() => { |
|||
const currentList = this.data.filteredList; |
|||
|
|||
// 这里简化为直接追加数据（实际项目中应该从服务器获取新数据）
|
|||
if (currentList.length < this.data.medicineList.length) { |
|||
const allData = this.data.medicineList; |
|||
const startIndex = currentList.length; |
|||
const endIndex = Math.min(startIndex + 4, allData.length); |
|||
const newData = allData.slice(startIndex, endIndex); |
|||
|
|||
const updatedList = [...currentList, ...newData]; |
|||
|
|||
this.setData({ |
|||
filteredList: updatedList, |
|||
hasMore: updatedList.length < allData.length, |
|||
loading: false |
|||
}); |
|||
} else { |
|||
this.setData({ |
|||
hasMore: false, |
|||
loading: false |
|||
}); |
|||
} |
|||
}, 1000); |
|||
}, |
|||
|
|||
// 显示药品详情
|
|||
showMedicineDetail: function(e) { |
|||
const medId = e.currentTarget.dataset.id; |
|||
// const medicine = this.data.filteredList[index];
|
|||
// this.setData({
|
|||
// showDetailModal: true,
|
|||
// currentMedicine: medicine
|
|||
// });
|
|||
|
|||
wx.navigateTo({ |
|||
url: `/pagesA/pages/medicineDetails/medicineDetails?id=${medId}`, |
|||
}) |
|||
}, |
|||
|
|||
// 详情弹窗关闭
|
|||
onDetailModalClose: function() { |
|||
this.setData({ |
|||
showDetailModal: false |
|||
}); |
|||
}, |
|||
|
|||
// 返回顶部
|
|||
scrollToTop: function() { |
|||
wx.pageScrollTo({ |
|||
scrollTop: 0, |
|||
duration: 300 |
|||
}); |
|||
} |
|||
}); |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"navigationBarTitleText": "药品推荐", |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,155 @@ |
|||
<!-- 药品推荐主页面 --> |
|||
<view class="page-container"> |
|||
<!-- 顶部搜索和筛选栏 --> |
|||
<view class="top-bar"> |
|||
<!-- 搜索框 --> |
|||
<view class="search-container"> |
|||
<view class="search-box"> |
|||
<view class="search-icon">🔍</view> |
|||
<input |
|||
class="search-input" |
|||
placeholder="搜索药品名称、专家或症状" |
|||
bindinput="onSearchInput" |
|||
value="{{searchKeyword}}" |
|||
/> |
|||
<view class="search-clear" wx:if="{{searchKeyword}}" bindtap="clearSearch"> |
|||
✕ |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 快捷分类筛选 --> |
|||
<view class="category-filters"> |
|||
<scroll-view class="filters-scroll" scroll-x="true"> |
|||
<view class="filter-tag {{currentCategory === 'all' ? 'active' : ''}}" |
|||
data-category="all" bindtap="onCategoryChange"> |
|||
全部推荐 |
|||
</view> |
|||
<view class="filter-tag {{currentCategory === 'prescription' ? 'active' : ''}}" |
|||
data-category="prescription" bindtap="onCategoryChange"> |
|||
处方药 |
|||
</view> |
|||
<view class="filter-tag {{currentCategory === 'otc' ? 'active' : ''}}" |
|||
data-category="otc" bindtap="onCategoryChange"> |
|||
非处方药 |
|||
</view> |
|||
<view class="filter-tag {{currentCategory === 'chinese' ? 'active' : ''}}" |
|||
data-category="chinese" bindtap="onCategoryChange"> |
|||
中成药 |
|||
</view> |
|||
<view class="filter-tag {{currentCategory === 'health' ? 'active' : ''}}" |
|||
data-category="health" bindtap="onCategoryChange"> |
|||
保健品 |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 药品列表 - 网格布局 --> |
|||
<view class="medicine-grid"> |
|||
<!-- 空状态 --> |
|||
<view class="empty-state" wx:if="{{filteredList.length === 0 && !loading}}"> |
|||
<image class="empty-image" src="/images/empty-medicine.png" mode="aspectFit" /> |
|||
<view class="empty-text" wx:if="{{searchKeyword}}"> |
|||
未找到"{{searchKeyword}}"相关的药品 |
|||
</view> |
|||
<view class="empty-text" wx:else> |
|||
暂无药品推荐 |
|||
</view> |
|||
<button class="empty-btn" bindtap="refreshList">刷新推荐</button> |
|||
</view> |
|||
|
|||
<!-- 药品卡片 --> |
|||
<block wx:for="{{filteredList}}" wx:key="id"> |
|||
<view class="medicine-card" bindtap="showMedicineDetail" data-id="{{item.id}}"> |
|||
<!-- 药品图片 --> |
|||
<view class="card-image"> |
|||
<image |
|||
src="{{item.image || '/images/default-medicine.png'}}" |
|||
mode="aspectFill" |
|||
class="medicine-img" |
|||
/> |
|||
<!-- 药品标签 --> |
|||
<view class="card-tag {{item.category}}"> |
|||
{{item.categoryText}} |
|||
</view> |
|||
<!-- 热销标签 --> |
|||
<view class="hot-tag" wx:if="{{item.isHot}}"> |
|||
热销 |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 药品基本信息 --> |
|||
<view class="card-content"> |
|||
<!-- 药品名称 --> |
|||
<view class="medicine-name">{{item.name}}</view> |
|||
|
|||
<!-- 适用症状（简短） --> |
|||
<view class="medicine-indication" wx:if="{{item.indication}}"> |
|||
{{getShortText(item.indication, 12)}} |
|||
</view> |
|||
|
|||
<!-- 生产厂家 --> |
|||
<view class="manufacturer" wx:if="{{item.manufacturer}}"> |
|||
{{getShortText(item.manufacturer, 14)}} |
|||
</view> |
|||
|
|||
<!-- 价格和推荐信息 --> |
|||
<view class="card-footer"> |
|||
<!-- 价格 --> |
|||
<view class="price-section"> |
|||
<view class="current-price"> |
|||
<text class="price-symbol">¥</text> |
|||
<text class="price-value">{{item.price}}</text> |
|||
</view> |
|||
<view class="original-price" wx:if="{{item.originalPrice}}"> |
|||
¥{{item.originalPrice}} |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 推荐专家 --> |
|||
<view class="expert-brief"> |
|||
<image |
|||
src="{{item.expert.avatar || '/images/default-avatar.png'}}" |
|||
class="expert-avatar" |
|||
mode="aspectFill" |
|||
/> |
|||
<text class="expert-name">{{item.expert.name}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 店铺信息 --> |
|||
<view class="store-brief"> |
|||
<view class="store-icon">🏪</view> |
|||
<text class="store-name">{{item.store.name}}</text> |
|||
<view class="distance" wx:if="{{item.store.distance}}"> |
|||
{{item.store.distance}}km |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
|
|||
<!-- 加载更多 --> |
|||
<view class="load-more" wx:if="{{hasMore && !loading}}"> |
|||
<view class="load-text">上拉加载更多</view> |
|||
</view> |
|||
|
|||
<!-- 加载中 --> |
|||
<view class="loading-container" wx:if="{{loading}}"> |
|||
<view class="loading-spinner"></view> |
|||
<text>加载中...</text> |
|||
</view> |
|||
|
|||
<!-- 没有更多 --> |
|||
<view class="no-more" wx:if="{{!hasMore && filteredList.length > 0}}"> |
|||
<text>没有更多药品了</text> |
|||
</view> |
|||
|
|||
|
|||
<!-- 返回顶部按钮 --> |
|||
<view class="back-to-top {{showBackToTop ? 'show' : ''}}" bindtap="scrollToTop"> |
|||
↑ |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,410 @@ |
|||
/* 页面容器 */ |
|||
.page-container { |
|||
background-color: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding-bottom: 40rpx; |
|||
} |
|||
|
|||
/* 顶部栏 */ |
|||
.top-bar { |
|||
background-color: white; |
|||
position: sticky; |
|||
top: 0; |
|||
z-index: 100; |
|||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
/* 搜索容器 */ |
|||
.search-container { |
|||
padding: 20rpx 30rpx; |
|||
} |
|||
|
|||
.search-box { |
|||
display: flex; |
|||
align-items: center; |
|||
background-color: #f8f9fa; |
|||
border-radius: 50rpx; |
|||
padding: 18rpx 30rpx; |
|||
} |
|||
|
|||
.search-icon { |
|||
font-size: 32rpx; |
|||
color: #999; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.search-input { |
|||
flex: 1; |
|||
font-size: 28rpx; |
|||
color: #333; |
|||
height: 40rpx; |
|||
} |
|||
|
|||
.search-clear { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
border-radius: 50%; |
|||
background-color: #e0e0e0; |
|||
color: #666; |
|||
font-size: 24rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
/* 分类筛选 */ |
|||
.category-filters { |
|||
padding: 0 20rpx 20rpx; |
|||
} |
|||
|
|||
.filters-scroll { |
|||
white-space: nowrap; |
|||
height: 70rpx; |
|||
} |
|||
|
|||
.filter-tag { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
padding: 0 30rpx; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
border-radius: 30rpx; |
|||
background-color: #f8f9fa; |
|||
color: #666; |
|||
font-size: 26rpx; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.filter-tag.active { |
|||
background-color: #3a7ff3; |
|||
color: white; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.filter-icon { |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
/* 药品网格布局 */ |
|||
.medicine-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(2, 1fr); |
|||
gap: 20rpx; |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
/* 药品卡片 */ |
|||
.medicine-card { |
|||
background-color: white; |
|||
border-radius: 20rpx; |
|||
overflow: hidden; |
|||
box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05); |
|||
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|||
} |
|||
|
|||
.medicine-card:active { |
|||
transform: translateY(-4rpx); |
|||
box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* 卡片图片区域 */ |
|||
.card-image { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 320rpx; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.medicine-img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.card-tag { |
|||
position: absolute; |
|||
top: 20rpx; |
|||
left: 20rpx; |
|||
padding: 6rpx 16rpx; |
|||
border-radius: 20rpx; |
|||
font-size: 22rpx; |
|||
color: white; |
|||
background-color: #3a7ff3; |
|||
} |
|||
|
|||
.card-tag.prescription { |
|||
background-color: #f44336; |
|||
} |
|||
|
|||
.card-tag.otc { |
|||
background-color: #4CAF50; |
|||
} |
|||
|
|||
.card-tag.chinese { |
|||
background-color: #FF9800; |
|||
} |
|||
|
|||
.card-tag.health { |
|||
background-color: #9C27B0; |
|||
} |
|||
|
|||
.card-tag.other { |
|||
background-color: #607D8B; |
|||
} |
|||
|
|||
.hot-tag { |
|||
position: absolute; |
|||
top: 20rpx; |
|||
right: 20rpx; |
|||
padding: 6rpx 16rpx; |
|||
border-radius: 20rpx; |
|||
font-size: 22rpx; |
|||
color: white; |
|||
background-color: #ff4444; |
|||
} |
|||
|
|||
/* 卡片内容区域 */ |
|||
.card-content { |
|||
padding: 25rpx; |
|||
} |
|||
|
|||
.medicine-name { |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
margin-bottom: 10rpx; |
|||
line-height: 1.4; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
overflow: hidden; |
|||
min-height: 84rpx; |
|||
} |
|||
|
|||
.medicine-indication { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
margin-bottom: 15rpx; |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
.manufacturer { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
/* 卡片底部 */ |
|||
.card-footer { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 15rpx; |
|||
} |
|||
|
|||
.price-section { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.current-price { |
|||
color: #ff4444; |
|||
font-weight: bold; |
|||
display: flex; |
|||
align-items: baseline; |
|||
} |
|||
|
|||
.price-symbol { |
|||
font-size: 24rpx; |
|||
margin-right: 2rpx; |
|||
} |
|||
|
|||
.price-value { |
|||
font-size: 36rpx; |
|||
} |
|||
|
|||
.original-price { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
text-decoration: line-through; |
|||
margin-left: 10rpx; |
|||
} |
|||
|
|||
.expert-brief { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.expert-avatar { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
border-radius: 50%; |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
.expert-name { |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
/* 店铺信息 */ |
|||
.store-brief { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 24rpx; |
|||
color: #666; |
|||
padding-top: 15rpx; |
|||
border-top: 1rpx solid #f0f0f0; |
|||
} |
|||
|
|||
.store-icon { |
|||
margin-right: 8rpx; |
|||
} |
|||
|
|||
.store-name { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.distance { |
|||
color: #3a7ff3; |
|||
font-size: 22rpx; |
|||
} |
|||
|
|||
/* 空状态 */ |
|||
.empty-state { |
|||
grid-column: 1 / -1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 100rpx 0; |
|||
} |
|||
|
|||
.empty-image { |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
margin-bottom: 30rpx; |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
.empty-text { |
|||
font-size: 32rpx; |
|||
color: #999; |
|||
margin-bottom: 15rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.empty-subtext { |
|||
font-size: 28rpx; |
|||
color: #ccc; |
|||
margin-bottom: 40rpx; |
|||
} |
|||
|
|||
.empty-btn { |
|||
width: 300rpx; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
background-color: #3a7ff3; |
|||
color: white; |
|||
border-radius: 12rpx; |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
/* 加载更多 */ |
|||
.load-more, |
|||
.no-more { |
|||
grid-column: 1 / -1; |
|||
text-align: center; |
|||
padding: 40rpx 0; |
|||
color: #999; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.load-text { |
|||
position: relative; |
|||
display: inline-block; |
|||
padding: 0 40rpx; |
|||
} |
|||
|
|||
.load-text::before, |
|||
.load-text::after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 50%; |
|||
width: 30rpx; |
|||
height: 1rpx; |
|||
background-color: #ddd; |
|||
} |
|||
|
|||
.load-text::before { |
|||
left: 0; |
|||
} |
|||
|
|||
.load-text::after { |
|||
right: 0; |
|||
} |
|||
|
|||
/* 加载中 */ |
|||
.loading-container { |
|||
grid-column: 1 / -1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 40rpx 0; |
|||
} |
|||
|
|||
.loading-spinner { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
border: 6rpx solid #f3f3f3; |
|||
border-top: 6rpx solid #3a7ff3; |
|||
border-radius: 50%; |
|||
animation: spin 1s linear infinite; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
@keyframes spin { |
|||
0% { transform: rotate(0deg); } |
|||
100% { transform: rotate(360deg); } |
|||
} |
|||
|
|||
/* 返回顶部按钮 */ |
|||
.back-to-top { |
|||
position: fixed; |
|||
bottom: 120rpx; |
|||
right: 30rpx; |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border-radius: 50%; |
|||
background-color: #3a7ff3; |
|||
color: white; |
|||
font-size: 36rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-shadow: 0 4rpx 15rpx rgba(58, 127, 243, 0.3); |
|||
opacity: 0; |
|||
transform: translateY(20rpx); |
|||
transition: all 0.3s ease; |
|||
z-index: 99; |
|||
} |
|||
|
|||
.back-to-top.show { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
/* 响应式调整 */ |
|||
@media (max-width: 700rpx) { |
|||
.medicine-grid { |
|||
grid-template-columns: 1fr; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.card-image { |
|||
height: 400rpx; |
|||
} |
|||
} |
|||
@ -0,0 +1,605 @@ |
|||
Page({ |
|||
data: { |
|||
// 药品数据
|
|||
medicineData: null, |
|||
// 是否收藏
|
|||
isFavorite: false, |
|||
// 加载状态
|
|||
loading: true, |
|||
// 分享配置
|
|||
shareTitle: '', |
|||
sharePath: '', |
|||
shareImageUrl: '' |
|||
}, |
|||
|
|||
onLoad: function(options) { |
|||
// 获取传递过来的药品ID
|
|||
const medicineId = options.id; |
|||
|
|||
if (medicineId) { |
|||
// 根据ID加载药品数据
|
|||
this.loadMedicineData(medicineId); |
|||
} else { |
|||
wx.showToast({ |
|||
title: '药品信息不存在', |
|||
icon: 'error', |
|||
duration: 2000, |
|||
complete: () => { |
|||
setTimeout(() => { |
|||
wx.navigateBack(); |
|||
}, 1500); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
onShow: function() { |
|||
// 检查收藏状态
|
|||
this.checkFavoriteStatus(); |
|||
}, |
|||
|
|||
onShareAppMessage: function() { |
|||
// 分享配置
|
|||
return { |
|||
title: this.data.shareTitle || '专家推荐药品', |
|||
path: this.data.sharePath || '/pages/index/index', |
|||
imageUrl: this.data.shareImageUrl || '/images/share-default.jpg' |
|||
}; |
|||
}, |
|||
|
|||
// 根据ID加载药品数据
|
|||
loadMedicineData: function(id) { |
|||
this.setData({ loading: true }); |
|||
|
|||
// 模拟网络请求，实际项目中应该从服务器获取
|
|||
setTimeout(() => { |
|||
const mockData = this.getMockData(); |
|||
const medicine = mockData.find(item => item.id == id); |
|||
|
|||
if (medicine) { |
|||
this.setData({ |
|||
medicineData: medicine, |
|||
loading: false, |
|||
shareTitle: `${medicine.name} - ${medicine.expert.name}专家推荐`, |
|||
sharePath: `/pages/detail/detail?id=${medicine.id}`, |
|||
shareImageUrl: medicine.image |
|||
}); |
|||
|
|||
// 更新页面标题
|
|||
wx.setNavigationBarTitle({ |
|||
title: medicine.name |
|||
}); |
|||
} else { |
|||
this.setData({ loading: false }); |
|||
wx.showToast({ |
|||
title: '药品信息加载失败', |
|||
icon: 'error', |
|||
duration: 2000, |
|||
complete: () => { |
|||
setTimeout(() => { |
|||
wx.navigateBack(); |
|||
}, 1500); |
|||
} |
|||
}); |
|||
} |
|||
}, 500); |
|||
}, |
|||
|
|||
// 获取模拟数据（应与列表页保持一致）
|
|||
getMockData: function() { |
|||
return [ |
|||
{ |
|||
id: 1, |
|||
name: "阿莫西林胶囊", |
|||
manufacturer: "华北制药股份有限公司", |
|||
specification: "0.25g*24粒/盒", |
|||
category: "prescription", |
|||
categoryText: "处方药", |
|||
indication: "用于敏感菌所致的呼吸道感染、泌尿系统感染等", |
|||
price: 25.8, |
|||
originalPrice: 32.0, |
|||
isHot: true, |
|||
salesCount: 1280, |
|||
stock: 150, |
|||
image: "https://via.placeholder.com/300x300/3a7ff3/ffffff?text=阿莫西林", |
|||
|
|||
expert: { |
|||
name: "张明华", |
|||
title: "主任医师", |
|||
hospital: "北京协和医院", |
|||
avatar: "https://via.placeholder.com/100x100/3a7ff3/ffffff?text=张", |
|||
reason: "本品为广谱抗生素，对多数革兰氏阳性菌和革兰氏阴性菌均有良好的抗菌作用，是临床常用的一线抗生素。", |
|||
expertise: "呼吸内科", |
|||
years: 15, |
|||
recommendTime: "2024-01-15" |
|||
}, |
|||
|
|||
store: { |
|||
name: "仁和堂大药房", |
|||
address: "北京市朝阳区建国路88号", |
|||
phone: "010-88888888", |
|||
businessHours: "8:00-22:00", |
|||
features: "24小时营业，专业药师咨询，医保定点药店", |
|||
distance: "1.2", |
|||
latitude: 39.9042, |
|||
longitude: 116.4074, |
|||
rating: 4.8, |
|||
images: [ |
|||
"/pagesA/images/5.png", |
|||
"/pagesA/images/6.jpg", |
|||
"/pagesA/images/6.jpg" |
|||
] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "口服。成人一次0.5g，每6～8小时1次，一日剂量不超过4g。", |
|||
precautions: "青霉素过敏者禁用，用药期间可能出现腹泻、恶心等胃肠道反应。", |
|||
storage: "密封，在干燥处保存。", |
|||
validity: "24个月" |
|||
} |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: "连花清瘟胶囊", |
|||
manufacturer: "石家庄以岭药业股份有限公司", |
|||
specification: "0.35g*24粒/盒", |
|||
category: "chinese", |
|||
categoryText: "中成药", |
|||
indication: "用于治疗流行性感冒属热毒袭肺证", |
|||
price: 28.5, |
|||
originalPrice: 35.0, |
|||
isHot: true, |
|||
salesCount: 2560, |
|||
stock: 89, |
|||
image: "https://via.placeholder.com/300x300/4CAF50/ffffff?text=连花清瘟", |
|||
|
|||
expert: { |
|||
name: "李芳", |
|||
title: "副主任医师", |
|||
hospital: "上海瑞金医院", |
|||
avatar: "https://via.placeholder.com/100x100/4CAF50/ffffff?text=李", |
|||
reason: "在新冠肺炎疫情防控中显示出良好效果，具有清瘟解毒、宣肺泄热的功效，适用于流感治疗。", |
|||
expertise: "中医科", |
|||
years: 12, |
|||
recommendTime: "2024-01-14" |
|||
}, |
|||
|
|||
store: { |
|||
name: "同济堂药店", |
|||
address: "上海市黄浦区南京东路100号", |
|||
phone: "021-66666666", |
|||
businessHours: "9:00-21:00", |
|||
features: "中药配方齐全，提供代煎服务，老字号药店", |
|||
distance: "2.5", |
|||
latitude: 31.2304, |
|||
longitude: 121.4737, |
|||
rating: 4.7, |
|||
images: [ |
|||
"https://via.placeholder.com/400x300/FF9800/ffffff?text=中药柜台" |
|||
] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "口服。一次4粒，一日3次。", |
|||
precautions: "风寒感冒者不适用，高血压、心脏病患者慎用。", |
|||
storage: "密封，置阴凉干燥处。", |
|||
validity: "36个月" |
|||
} |
|||
}, |
|||
{ |
|||
id: 3, |
|||
name: "维生素C片", |
|||
manufacturer: "养生堂药业有限公司", |
|||
specification: "100mg*60片/瓶", |
|||
category: "health", |
|||
categoryText: "保健品", |
|||
indication: "用于预防和治疗维生素C缺乏症", |
|||
price: 18.9, |
|||
originalPrice: 24.0, |
|||
isHot: false, |
|||
salesCount: 890, |
|||
stock: 320, |
|||
image: "https://via.placeholder.com/300x300/FF9800/ffffff?text=维生素C", |
|||
|
|||
expert: { |
|||
name: "王建国", |
|||
title: "执业药师", |
|||
hospital: "广州中医药大学附属医院", |
|||
avatar: "https://via.placeholder.com/100x100/FF9800/ffffff?text=王", |
|||
reason: "增强免疫力，促进铁吸收，抗氧化作用明显，适合日常保健和预防感冒。", |
|||
expertise: "临床药学", |
|||
years: 8, |
|||
recommendTime: "2024-01-13" |
|||
}, |
|||
|
|||
store: { |
|||
name: "老百姓大药房", |
|||
address: "广州市天河区体育西路189号", |
|||
phone: "020-77777777", |
|||
businessHours: "7:30-23:00", |
|||
features: "连锁品牌，价格实惠，会员优惠，支持医保", |
|||
distance: "0.8", |
|||
latitude: 23.1358, |
|||
longitude: 113.3269, |
|||
rating: 4.6, |
|||
images: [] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "口服。成人一次1片，一日1次。", |
|||
precautions: "不宜长期过量服用，肾功能不全者慎用。", |
|||
storage: "避光，密封保存。", |
|||
validity: "24个月" |
|||
} |
|||
}, |
|||
{ |
|||
id: 4, |
|||
name: "布洛芬缓释胶囊", |
|||
manufacturer: "中美天津史克制药有限公司", |
|||
specification: "0.3g*20粒/盒", |
|||
category: "otc", |
|||
categoryText: "非处方药", |
|||
indication: "用于缓解轻至中度疼痛如头痛、关节痛、偏头痛等", |
|||
price: 22.5, |
|||
originalPrice: 28.0, |
|||
isHot: true, |
|||
salesCount: 1870, |
|||
stock: 120, |
|||
image: "https://via.placeholder.com/300x300/9C27B0/ffffff?text=布洛芬", |
|||
|
|||
expert: { |
|||
name: "陈晓东", |
|||
title: "主任医师", |
|||
hospital: "武汉同济医院", |
|||
avatar: "https://via.placeholder.com/100x100/9C27B0/ffffff?text=陈", |
|||
reason: "解热镇痛效果确切，缓释剂型作用持久，胃肠道刺激小，适合各种疼痛的缓解。", |
|||
expertise: "疼痛科", |
|||
years: 20, |
|||
recommendTime: "2024-01-12" |
|||
}, |
|||
|
|||
store: { |
|||
name: "九州通大药房", |
|||
address: "武汉市江汉区解放大道688号", |
|||
phone: "027-55555555", |
|||
businessHours: "8:30-21:30", |
|||
features: "药品齐全，支持线上订购，送货上门", |
|||
distance: "3.2", |
|||
latitude: 30.5928, |
|||
longitude: 114.3052, |
|||
rating: 4.9, |
|||
images: [ |
|||
"https://via.placeholder.com/400x300/3F51B5/ffffff?text=现代药店", |
|||
"https://via.placeholder.com/400x300/E91E63/ffffff?text=专业服务" |
|||
] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "口服。成人一次1粒，一日2次。", |
|||
precautions: "胃肠道溃疡患者禁用，不宜长期服用。", |
|||
storage: "密封，在阴凉干燥处保存。", |
|||
validity: "36个月" |
|||
} |
|||
}, |
|||
{ |
|||
id: 5, |
|||
name: "盐酸左氧氟沙星片", |
|||
manufacturer: "浙江医药股份有限公司", |
|||
specification: "0.5g*6片/盒", |
|||
category: "prescription", |
|||
categoryText: "处方药", |
|||
indication: "用于敏感细菌引起的呼吸系统、泌尿系统感染", |
|||
price: 42.8, |
|||
originalPrice: 56.0, |
|||
isHot: false, |
|||
salesCount: 560, |
|||
stock: 75, |
|||
image: "https://via.placeholder.com/300x300/2196F3/ffffff?text=左氧氟沙星", |
|||
|
|||
expert: { |
|||
name: "刘涛", |
|||
title: "副主任医师", |
|||
hospital: "南京鼓楼医院", |
|||
avatar: "https://via.placeholder.com/100x100/2196F3/ffffff?text=刘", |
|||
reason: "抗菌谱广，对多种革兰氏阴性菌和阳性菌有效，特别适用于泌尿系统感染的治疗。", |
|||
expertise: "泌尿外科", |
|||
years: 10, |
|||
recommendTime: "2024-01-11" |
|||
}, |
|||
|
|||
store: { |
|||
name: "金陵大药房", |
|||
address: "南京市鼓楼区中山路321号", |
|||
phone: "025-44444444", |
|||
businessHours: "8:00-21:00", |
|||
features: "专业处方药房，药师驻店咨询", |
|||
distance: "1.8", |
|||
latitude: 32.0603, |
|||
longitude: 118.7969, |
|||
rating: 4.5, |
|||
images: [] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "口服。一次1片，一日1次。", |
|||
precautions: "18岁以下患者禁用，孕妇及哺乳期妇女禁用。", |
|||
storage: "遮光，密封保存。", |
|||
validity: "24个月" |
|||
} |
|||
}, |
|||
{ |
|||
id: 6, |
|||
name: "板蓝根颗粒", |
|||
manufacturer: "广州白云山和记黄埔中药有限公司", |
|||
specification: "10g*20袋/盒", |
|||
category: "chinese", |
|||
categoryText: "中成药", |
|||
indication: "清热解毒，凉血利咽，用于肺胃热盛所致的咽喉肿痛", |
|||
price: 15.9, |
|||
originalPrice: 19.9, |
|||
isHot: true, |
|||
salesCount: 3200, |
|||
stock: 450, |
|||
image: "https://via.placeholder.com/300x300/FF5722/ffffff?text=板蓝根", |
|||
|
|||
expert: { |
|||
name: "孙丽", |
|||
title: "主治医师", |
|||
hospital: "成都中医药大学附属医院", |
|||
avatar: "https://via.placeholder.com/100x100/FF5722/ffffff?text=孙", |
|||
reason: "传统经典方剂，清热解毒效果显著，特别适合预防和治疗感冒初期症状。", |
|||
expertise: "中医内科", |
|||
years: 6, |
|||
recommendTime: "2024-01-10" |
|||
}, |
|||
|
|||
store: { |
|||
name: "康恩贝大药房", |
|||
address: "成都市锦江区春熙路58号", |
|||
phone: "028-33333333", |
|||
businessHours: "9:00-22:00", |
|||
features: "连锁品牌，中药西药齐全", |
|||
distance: "0.5", |
|||
latitude: 30.6578, |
|||
longitude: 104.0657, |
|||
rating: 4.4, |
|||
images: [] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "开水冲服。一次1袋，一日3次。", |
|||
precautions: "风寒感冒者不适用，糖尿病患者慎用。", |
|||
storage: "密封，防潮。", |
|||
validity: "36个月" |
|||
} |
|||
}, |
|||
{ |
|||
id: 7, |
|||
name: "复方甘草片", |
|||
manufacturer: "北京双鹤药业股份有限公司", |
|||
specification: "100片/瓶", |
|||
category: "prescription", |
|||
categoryText: "处方药", |
|||
indication: "用于镇咳祛痰，适用于感冒咳嗽", |
|||
price: 12.5, |
|||
originalPrice: 16.0, |
|||
isHot: false, |
|||
salesCount: 780, |
|||
stock: 200, |
|||
image: "https://via.placeholder.com/300x300/673AB7/ffffff?text=甘草片", |
|||
|
|||
expert: { |
|||
name: "赵国强", |
|||
title: "主任医师", |
|||
hospital: "天津医科大学总医院", |
|||
avatar: "https://via.placeholder.com/100x100/673AB7/ffffff?text=赵", |
|||
reason: "传统止咳良药，镇咳祛痰效果确切，价格实惠，适合普通感冒咳嗽。", |
|||
expertise: "呼吸内科", |
|||
years: 18, |
|||
recommendTime: "2024-01-09" |
|||
}, |
|||
|
|||
store: { |
|||
name: "天津医药大药房", |
|||
address: "天津市和平区南京路128号", |
|||
phone: "022-22222222", |
|||
businessHours: "8:00-21:30", |
|||
features: "国营药店，药品质量有保障", |
|||
distance: "2.0", |
|||
latitude: 39.1172, |
|||
longitude: 117.2056, |
|||
rating: 4.3, |
|||
images: [] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "口服。一次3-4片，一日3次。", |
|||
precautions: "不宜长期服用，孕妇及哺乳期妇女慎用。", |
|||
storage: "密封，在干燥处保存。", |
|||
validity: "36个月" |
|||
} |
|||
}, |
|||
{ |
|||
id: 8, |
|||
name: "葡萄糖酸钙口服液", |
|||
manufacturer: "哈药集团制药六厂", |
|||
specification: "10ml*12支/盒", |
|||
category: "otc", |
|||
categoryText: "非处方药", |
|||
indication: "用于预防和治疗钙缺乏症", |
|||
price: 35.0, |
|||
originalPrice: 42.0, |
|||
isHot: true, |
|||
salesCount: 1560, |
|||
stock: 180, |
|||
image: "https://via.placeholder.com/300x300/00BCD4/ffffff?text=葡萄糖酸钙", |
|||
|
|||
expert: { |
|||
name: "周敏", |
|||
title: "副主任医师", |
|||
hospital: "西安交通大学第一附属医院", |
|||
avatar: "https://via.placeholder.com/100x100/00BCD4/ffffff?text=周", |
|||
reason: "钙吸收好，口感适宜，特别适合儿童、孕妇和老年人补钙。", |
|||
expertise: "儿科", |
|||
years: 14, |
|||
recommendTime: "2024-01-08" |
|||
}, |
|||
|
|||
store: { |
|||
name: "西安医药大药房", |
|||
address: "西安市碑林区南大街58号", |
|||
phone: "029-11111111", |
|||
businessHours: "8:30-21:00", |
|||
features: "专业儿科用药，儿童健康咨询", |
|||
distance: "1.5", |
|||
latitude: 34.2583, |
|||
longitude: 108.9426, |
|||
rating: 4.7, |
|||
images: [] |
|||
}, |
|||
|
|||
details: { |
|||
usage: "口服。一次1-2支，一日3次。", |
|||
precautions: "肾功能不全者慎用，不宜与洋地黄类药物同时使用。", |
|||
storage: "密封，置阴凉处。", |
|||
validity: "24个月" |
|||
} |
|||
} |
|||
]; |
|||
}, |
|||
|
|||
// 检查收藏状态
|
|||
checkFavoriteStatus: function() { |
|||
const medicineData = this.data.medicineData; |
|||
if (!medicineData) return; |
|||
|
|||
try { |
|||
const favorites = wx.getStorageSync('medicineFavorites') || []; |
|||
const isFavorite = favorites.some(item => item.id === medicineData.id); |
|||
this.setData({ isFavorite }); |
|||
} catch (e) { |
|||
console.error('读取收藏失败', e); |
|||
} |
|||
}, |
|||
|
|||
// 切换收藏状态
|
|||
toggleFavorite: function() { |
|||
const medicineData = this.data.medicineData; |
|||
if (!medicineData) return; |
|||
|
|||
const newFavorite = !this.data.isFavorite; |
|||
this.setData({ isFavorite: newFavorite }); |
|||
|
|||
// 保存到本地缓存
|
|||
this.saveFavorite(newFavorite); |
|||
|
|||
wx.showToast({ |
|||
title: newFavorite ? '已收藏' : '已取消收藏', |
|||
icon: 'success', |
|||
duration: 1500 |
|||
}); |
|||
}, |
|||
|
|||
// 保存收藏状态到本地缓存
|
|||
saveFavorite: function(isFavorite) { |
|||
const medicineData = this.data.medicineData; |
|||
if (!medicineData) return; |
|||
|
|||
try { |
|||
let favorites = wx.getStorageSync('medicineFavorites') || []; |
|||
|
|||
if (isFavorite) { |
|||
// 添加收藏
|
|||
if (!favorites.some(item => item.id === medicineData.id)) { |
|||
favorites.push({ |
|||
id: medicineData.id, |
|||
name: medicineData.name, |
|||
price: medicineData.price, |
|||
image: medicineData.image, |
|||
expert: medicineData.expert.name, |
|||
store: medicineData.store.name, |
|||
time: new Date().getTime() |
|||
}); |
|||
} |
|||
} else { |
|||
// 取消收藏
|
|||
favorites = favorites.filter(item => item.id !== medicineData.id); |
|||
} |
|||
|
|||
wx.setStorageSync('medicineFavorites', favorites); |
|||
} catch (e) { |
|||
console.error('保存收藏失败', e); |
|||
} |
|||
}, |
|||
|
|||
// 打开位置地图
|
|||
openLocation: function() { |
|||
const { store } = this.data.medicineData; |
|||
if (store.latitude && store.longitude) { |
|||
wx.openLocation({ |
|||
latitude: parseFloat(store.latitude), |
|||
longitude: parseFloat(store.longitude), |
|||
name: store.name, |
|||
address: store.address, |
|||
scale: 18 |
|||
}); |
|||
} else { |
|||
wx.showToast({ |
|||
title: '位置信息不可用', |
|||
icon: 'none' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 拨打电话
|
|||
makePhoneCall: function() { |
|||
const phone = this.data.medicineData.store.phone; |
|||
if (phone) { |
|||
wx.makePhoneCall({ |
|||
phoneNumber: phone |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
// 预览主图片
|
|||
previewMainImage: function() { |
|||
const url = this.data.medicineData.image; |
|||
if (url) { |
|||
wx.previewImage({ |
|||
current: url, |
|||
urls: [url] |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// 预览轮播图片
|
|||
previewImage: function(e) { |
|||
const index = parseInt(e.currentTarget.dataset.index); |
|||
const images = this.data.medicineData.store.images || []; |
|||
const urls = [this.data.medicineData.image, ...images]; |
|||
|
|||
wx.previewImage({ |
|||
current: urls[index + 1], // +1 因为第一个是主图
|
|||
urls: urls |
|||
}); |
|||
}, |
|||
|
|||
// 预览店铺图片
|
|||
previewStoreImage: function(e) { |
|||
const index = parseInt(e.currentTarget.dataset.index); |
|||
const images = this.data.medicineData.store.images || []; |
|||
|
|||
wx.previewImage({ |
|||
current: images[index], |
|||
urls: images |
|||
}); |
|||
}, |
|||
|
|||
// 分享给朋友
|
|||
onShareToFriend: function() { |
|||
wx.showShareMenu({ |
|||
withShareTicket: true, |
|||
menus: ['shareAppMessage', 'shareTimeline'] |
|||
}); |
|||
} |
|||
}); |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"navigationBarTitleText": "药品详情", |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,175 @@ |
|||
<!-- 药品详情页 --> |
|||
<view class="detail-page"> |
|||
<!-- 药品图片轮播 --> |
|||
<view class="medicine-images"> |
|||
<swiper |
|||
class="detail-swiper" |
|||
indicator-dots="{{medicineData.store.images && medicineData.store.images.length > 0}}" |
|||
indicator-color="rgba(255, 255, 255, 0.5)" |
|||
indicator-active-color="#3a7ff3" |
|||
autoplay="true" |
|||
interval="3000" |
|||
duration="500" |
|||
> |
|||
<block wx:for="{{medicineData.store.images}}" wx:key="index"> |
|||
<swiper-item> |
|||
<image |
|||
src="{{item}}" |
|||
class="detail-image" |
|||
mode="aspectFill" |
|||
bindtap="previewImage" |
|||
data-index="{{index}}" |
|||
/> |
|||
</swiper-item> |
|||
</block> |
|||
</swiper> |
|||
|
|||
<!-- 药品标签 --> |
|||
<view class="detail-tag {{medicineData.category}}"> |
|||
{{medicineData.categoryText}} |
|||
<view class="hot-badge" wx:if="{{medicineData.isHot}}">热销</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 药品基本信息 --> |
|||
<view class="basic-info-section"> |
|||
<view class="medicine-name">{{medicineData.name}}</view> |
|||
<view class="medicine-spec">{{medicineData.specification}}</view> |
|||
<view class="manufacturer">{{medicineData.manufacturer}}</view> |
|||
|
|||
<!-- 价格信息 --> |
|||
<view class="price-info"> |
|||
<view class="current-price"> |
|||
<text class="price-symbol">¥</text> |
|||
<text class="price-value">{{medicineData.price}}</text> |
|||
</view> |
|||
<view class="original-price" wx:if="{{medicineData.originalPrice}}"> |
|||
原价：¥{{medicineData.originalPrice}} |
|||
</view> |
|||
<view class="sales-count"> |
|||
已售：{{medicineData.salesCount}}件 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 适用症状 --> |
|||
<view class="info-section"> |
|||
<view class="section-title">适用症状</view> |
|||
<view class="section-content">{{medicineData.indication}}</view> |
|||
</view> |
|||
|
|||
<!-- 专家推荐信息 --> |
|||
<view class="expert-section"> |
|||
<view class="section-title">专家推荐</view> |
|||
<view class="expert-card"> |
|||
<view class="expert-header"> |
|||
<image |
|||
src="{{medicineData.expert.avatar || '/images/default-avatar.png'}}" |
|||
class="expert-avatar" |
|||
mode="aspectFill" |
|||
/> |
|||
<view class="expert-info"> |
|||
<view class="expert-name">{{medicineData.expert.name}}<text class="expert-title"> | {{medicineData.expert.title}}</text></view> |
|||
<view class="expert-hospital">{{medicineData.expert.hospital}}</view> |
|||
<view class="expert-experience"> |
|||
<text class="experience-label">专业：</text>{{medicineData.expert.expertise}} |
|||
<text class="experience-label">从业：</text>{{medicineData.expert.years}}年 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="expert-reason"> |
|||
<view class="reason-title">推荐理由</view> |
|||
<view class="reason-content">{{medicineData.expert.reason}}</view> |
|||
</view> |
|||
<view class="recommend-time">推荐时间：{{medicineData.expert.recommendTime}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 店铺信息 --> |
|||
<view class="store-section"> |
|||
<view class="section-title">推荐店铺</view> |
|||
<view class="store-card"> |
|||
<view class="store-header"> |
|||
<view class="store-name">{{medicineData.store.name}}</view> |
|||
<view class="store-rating" wx:if="{{medicineData.store.rating}}"> |
|||
<text class="rating-value">{{medicineData.store.rating}}</text> |
|||
<text class="rating-star">★</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="store-info"> |
|||
<view class="info-item"> |
|||
<text class="info-icon">📍</text> |
|||
<text class="info-text">{{medicineData.store.address}}</text> |
|||
<view class="store-distance" wx:if="{{medicineData.store.distance}}"> |
|||
距离：{{medicineData.store.distance}}km |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="info-item"> |
|||
<text class="info-icon">📞</text> |
|||
<text class="info-text">{{medicineData.store.phone}}</text> |
|||
</view> |
|||
|
|||
<view class="info-item"> |
|||
<text class="info-icon">🕒</text> |
|||
<text class="info-text">{{medicineData.store.businessHours}}</text> |
|||
</view> |
|||
|
|||
<view class="info-item" wx:if="{{medicineData.store.features}}"> |
|||
<text class="info-icon">⭐</text> |
|||
<text class="info-text">{{medicineData.store.features}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 店铺图片 --> |
|||
<view class="store-images" wx:if="{{medicineData.store.images && medicineData.store.images.length > 0}}"> |
|||
<scroll-view class="store-images-scroll" scroll-x="true"> |
|||
<block wx:for="{{medicineData.store.images}}" wx:key="index"> |
|||
<view class="store-image-item" bindtap="previewStoreImage" data-index="{{index}}"> |
|||
<image src="{{item}}" class="store-image" mode="aspectFill" /> |
|||
</view> |
|||
</block> |
|||
</scroll-view> |
|||
</view> |
|||
|
|||
<!-- 店铺操作按钮 --> |
|||
<view class="store-actions"> |
|||
<button class="action-btn map-btn" bindtap="openLocation"> |
|||
<text class="btn-icon">🗺️</text> |
|||
<text class="btn-text">查看位置</text> |
|||
</button> |
|||
<button class="action-btn call-btn" bindtap="makePhoneCall"> |
|||
<text class="btn-icon">📱</text> |
|||
<text class="btn-text">联系店铺</text> |
|||
</button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 药品详细信息 --> |
|||
<view class="details-section"> |
|||
<view class="section-title">药品详情</view> |
|||
<view class="details-grid"> |
|||
<view class="detail-item"> |
|||
<view class="item-label">用法用量</view> |
|||
<view class="item-value">{{medicineData.details.usage}}</view> |
|||
</view> |
|||
|
|||
<view class="detail-item"> |
|||
<view class="item-label">注意事项</view> |
|||
<view class="item-value">{{medicineData.details.precautions}}</view> |
|||
</view> |
|||
|
|||
<view class="detail-item"> |
|||
<view class="item-label">贮藏方式</view> |
|||
<view class="item-value">{{medicineData.details.storage}}</view> |
|||
</view> |
|||
|
|||
<view class="detail-item"> |
|||
<view class="item-label">有效期</view> |
|||
<view class="item-value">{{medicineData.details.validity}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
@ -0,0 +1,450 @@ |
|||
/* 详情页样式 */ |
|||
.detail-page { |
|||
background-color: #f8f9fa; |
|||
min-height: 100vh; |
|||
padding-bottom: 120rpx; |
|||
} |
|||
|
|||
/* 药品图片轮播 */ |
|||
.medicine-images { |
|||
position: relative; |
|||
height: 500rpx; |
|||
} |
|||
|
|||
.detail-swiper { |
|||
height: 100%; |
|||
} |
|||
|
|||
.detail-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
|
|||
/* 药品标签 */ |
|||
.detail-tag { |
|||
position: absolute; |
|||
top: 30rpx; |
|||
right: 30rpx; |
|||
padding: 10rpx 20rpx; |
|||
border-radius: 25rpx; |
|||
font-size: 24rpx; |
|||
color: white; |
|||
background-color: #3a7ff3; |
|||
display: flex; |
|||
align-items: center; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.detail-tag.prescription { |
|||
background-color: #f44336; |
|||
} |
|||
|
|||
.detail-tag.otc { |
|||
background-color: #4CAF50; |
|||
} |
|||
|
|||
.detail-tag.chinese { |
|||
background-color: #FF9800; |
|||
} |
|||
|
|||
.detail-tag.health { |
|||
background-color: #9C27B0; |
|||
} |
|||
|
|||
.hot-badge { |
|||
margin-left: 10rpx; |
|||
padding: 4rpx 10rpx; |
|||
background-color: #ff4444; |
|||
border-radius: 15rpx; |
|||
font-size: 20rpx; |
|||
} |
|||
|
|||
/* 基本信息区域 */ |
|||
.basic-info-section { |
|||
background-color: white; |
|||
padding: 30rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.medicine-name { |
|||
font-size: 38rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
margin-bottom: 15rpx; |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
.medicine-spec { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.manufacturer { |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
margin-bottom: 25rpx; |
|||
} |
|||
|
|||
/* 价格信息 */ |
|||
.price-info { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding-top: 20rpx; |
|||
border-top: 2rpx solid #f8f9fa; |
|||
} |
|||
|
|||
.current-price { |
|||
color: #ff4444; |
|||
font-weight: bold; |
|||
display: flex; |
|||
align-items: baseline; |
|||
} |
|||
|
|||
.price-symbol { |
|||
font-size: 28rpx; |
|||
margin-right: 4rpx; |
|||
} |
|||
|
|||
.price-value { |
|||
font-size: 48rpx; |
|||
} |
|||
|
|||
.original-price { |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
text-decoration: line-through; |
|||
} |
|||
|
|||
.sales-count { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
} |
|||
|
|||
/* 信息区块通用样式 */ |
|||
.info-section, |
|||
.expert-section, |
|||
.store-section, |
|||
.details-section, |
|||
.safety-tips { |
|||
background-color: white; |
|||
margin-bottom: 20rpx; |
|||
padding: 30rpx; |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 34rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
margin-bottom: 20rpx; |
|||
padding-bottom: 15rpx; |
|||
border-bottom: 2rpx solid #f8f9fa; |
|||
} |
|||
|
|||
.section-content { |
|||
font-size: 28rpx; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
} |
|||
|
|||
/* 专家卡片 */ |
|||
.expert-card { |
|||
background-color: #f8f9fa; |
|||
border-radius: 15rpx; |
|||
padding: 25rpx; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.expert-header { |
|||
display: flex; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.expert-avatar { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
border-radius: 50%; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.expert-info { |
|||
flex: 1; |
|||
} |
|||
|
|||
.expert-name { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
margin-bottom: 8rpx; |
|||
} |
|||
|
|||
.expert-title { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.expert-hospital { |
|||
font-size: 26rpx; |
|||
color: #3a7ff3; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.expert-experience { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.experience-label { |
|||
|
|||
} |
|||
|
|||
.expert-reason { |
|||
background-color: white; |
|||
border-radius: 10rpx; |
|||
padding: 20rpx; |
|||
margin-bottom: 15rpx; |
|||
} |
|||
|
|||
.reason-title { |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.reason-content { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
line-height: 1.6; |
|||
} |
|||
|
|||
.recommend-time { |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
text-align: right; |
|||
} |
|||
|
|||
/* 店铺卡片 */ |
|||
.store-card { |
|||
background-color: #f8f9fa; |
|||
border-radius: 15rpx; |
|||
padding: 25rpx; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.store-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.store-name { |
|||
font-size: 32rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
flex: 1; |
|||
} |
|||
|
|||
.store-rating { |
|||
display: flex; |
|||
align-items: center; |
|||
color: #ff9900; |
|||
} |
|||
|
|||
.rating-value { |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
margin-right: 5rpx; |
|||
} |
|||
|
|||
.rating-star { |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.store-info { |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.info-item { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
margin-bottom: 15rpx; |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
.info-icon { |
|||
margin-right: 15rpx; |
|||
flex-shrink: 0; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.info-text { |
|||
flex: 1; |
|||
} |
|||
|
|||
.store-distance { |
|||
color: #3a7ff3; |
|||
font-size: 24rpx; |
|||
margin-left: 20rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
/* 店铺图片 */ |
|||
.store-images { |
|||
margin-bottom: 20rpx; |
|||
} |
|||
|
|||
.store-images-scroll { |
|||
white-space: nowrap; |
|||
height: 200rpx; |
|||
} |
|||
|
|||
.store-image-item { |
|||
display: inline-block; |
|||
width: 300rpx; |
|||
height: 200rpx; |
|||
border-radius: 10rpx; |
|||
overflow: hidden; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.store-image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
/* 店铺操作按钮 */ |
|||
.store-actions { |
|||
display: flex; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.action-btn { |
|||
flex: 1; |
|||
height: 80rpx; |
|||
border-radius: 10rpx; |
|||
font-size: 26rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.map-btn { |
|||
background-color: #3a7ff3; |
|||
color: white; |
|||
} |
|||
|
|||
.call-btn { |
|||
background-color: #4CAF50; |
|||
color: white; |
|||
} |
|||
|
|||
.btn-icon { |
|||
margin-right: 10rpx; |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
/* 药品详细信息网格 */ |
|||
.details-grid { |
|||
display: grid; |
|||
grid-template-columns: repeat(2, 1fr); |
|||
gap: 20rpx; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.detail-item { |
|||
background-color: #f8f9fa; |
|||
border-radius: 10rpx; |
|||
padding: 20rpx; |
|||
} |
|||
|
|||
.item-label { |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
|
|||
.item-value { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
/* 加载状态 */ |
|||
.loading-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 60vh; |
|||
} |
|||
|
|||
.loading-spinner { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
border: 8rpx solid #f3f3f3; |
|||
border-top: 8rpx solid #3a7ff3; |
|||
border-radius: 50%; |
|||
animation: spin 1s linear infinite; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
@keyframes spin { |
|||
0% { transform: rotate(0deg); } |
|||
100% { transform: rotate(360deg); } |
|||
} |
|||
|
|||
/* 错误状态 */ |
|||
.error-container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
height: 60vh; |
|||
padding: 0 50rpx; |
|||
} |
|||
|
|||
.error-icon { |
|||
font-size: 120rpx; |
|||
color: #ff4444; |
|||
margin-bottom: 30rpx; |
|||
} |
|||
|
|||
.error-text { |
|||
font-size: 32rpx; |
|||
color: #666; |
|||
margin-bottom: 40rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.error-btn { |
|||
width: 300rpx; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
background-color: #3a7ff3; |
|||
color: white; |
|||
border-radius: 12rpx; |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
/* 响应式调整 */ |
|||
@media (max-width: 700rpx) { |
|||
.details-grid { |
|||
grid-template-columns: 1fr; |
|||
} |
|||
|
|||
.bottom-action-bar { |
|||
padding: 15rpx 20rpx; |
|||
} |
|||
|
|||
.action-bar-btn { |
|||
font-size: 26rpx; |
|||
height: 80rpx; |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue