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