feat: 百科页面
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
// pages/garden/add/index.js
|
// pages/garden/add/index.js
|
||||||
import { MOCK_PLANTS, CARE_TASK_ICONS } from '../../../utils/mockData';
|
import { MOCK_PLANTS, CARE_TASK_ICONS } from '../../../utils/mockData';
|
||||||
import request from '../../../utils/request';
|
import request from '../../../utils/request';
|
||||||
|
import { requestSubscription, checkSubscriptionSettings } from '../../../utils/subscribe';
|
||||||
|
|
||||||
Page({
|
Page({
|
||||||
data: {
|
data: {
|
||||||
@@ -236,7 +237,6 @@ Page({
|
|||||||
placement: newPlantLocation || '',
|
placement: newPlantLocation || '',
|
||||||
ossIds: [uploadedImageId],
|
ossIds: [uploadedImageId],
|
||||||
carePlans: carePlans,
|
carePlans: carePlans,
|
||||||
// Default fields as not in UI yet
|
|
||||||
potMaterial: '',
|
potMaterial: '',
|
||||||
potSize: '',
|
potSize: '',
|
||||||
sunlight: '',
|
sunlight: '',
|
||||||
@@ -245,18 +245,40 @@ Page({
|
|||||||
|
|
||||||
// Submit
|
// Submit
|
||||||
wx.showLoading({ title: 'Creating...' });
|
wx.showLoading({ title: 'Creating...' });
|
||||||
request.post('/plant/add', payload).then(res => {
|
request.post('/plant/add', payload).then(async () => {
|
||||||
wx.hideLoading();
|
wx.hideLoading();
|
||||||
wx.showToast({ title: '添加成功', icon: 'success' });
|
wx.showToast({ title: '添加成功', icon: 'success' });
|
||||||
|
|
||||||
// Refresh previous page (e.g. garden list) if needed
|
// Smart Subscription Check
|
||||||
// const pages = getCurrentPages();
|
const subStatus = await checkSubscriptionSettings();
|
||||||
// const prevPage = pages[pages.length - 2];
|
|
||||||
// if (prevPage && prevPage.onRefresh) prevPage.onRefresh();
|
if (subStatus === 'accept') {
|
||||||
|
// Already authorized 'Always', just call API to consume quota
|
||||||
|
requestSubscription().finally(() => {
|
||||||
|
wx.navigateBack();
|
||||||
|
});
|
||||||
|
} else if (subStatus === 'reject' || subStatus === 'ban') {
|
||||||
|
// User rejected 'Always', do not disturb
|
||||||
|
setTimeout(() => wx.navigateBack(), 500);
|
||||||
|
} else {
|
||||||
|
// Not set, ask user
|
||||||
|
wx.showModal({
|
||||||
|
title: '添加成功',
|
||||||
|
content: '是否订阅植物养护提醒?',
|
||||||
|
confirmText: '订阅',
|
||||||
|
cancelText: '暂不',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
requestSubscription().finally(() => {
|
||||||
|
wx.navigateBack();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
wx.navigateBack();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
wx.navigateBack();
|
|
||||||
}, 1000);
|
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
wx.hideLoading();
|
wx.hideLoading();
|
||||||
console.error('Add plant failed', err);
|
console.error('Add plant failed', err);
|
||||||
|
|||||||
@@ -203,6 +203,7 @@ Page({
|
|||||||
|
|
||||||
// Sync with backend
|
// Sync with backend
|
||||||
this.fetchTodayTasks();
|
this.fetchTodayTasks();
|
||||||
|
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
wx.hideLoading();
|
wx.hideLoading();
|
||||||
console.error('Complete task failed', err);
|
console.error('Complete task failed', err);
|
||||||
|
|||||||
+92
-25
@@ -1,5 +1,5 @@
|
|||||||
// pages/wiki/detail/index.js
|
// pages/wiki/detail/index.js
|
||||||
import { MOCK_WIKI } from '../../../utils/mockData';
|
import request from '../../../utils/request';
|
||||||
|
|
||||||
Page({
|
Page({
|
||||||
data: {
|
data: {
|
||||||
@@ -15,38 +15,105 @@ Page({
|
|||||||
},
|
},
|
||||||
|
|
||||||
loadPlantDetail(id) {
|
loadPlantDetail(id) {
|
||||||
// Find plant in MOCK_WIKI
|
// Fetch detail via wiki/page with specific ID
|
||||||
const plant = MOCK_WIKI.find(p => p.id === id);
|
// Since there's no /wiki/detail endpoint, we use /wiki/page to get it
|
||||||
if (plant) {
|
request.post('/wiki/page', {
|
||||||
|
current: 1,
|
||||||
|
pageSize: 1,
|
||||||
|
id: id
|
||||||
|
}).then(res => {
|
||||||
|
const data = res || {};
|
||||||
|
const list = data.list || [];
|
||||||
|
const item = list.length > 0 ? list[0] : null;
|
||||||
|
|
||||||
|
if (!item) {
|
||||||
|
wx.showToast({ title: '未找到该植物', icon: 'none' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Set Page Title
|
// Set Page Title
|
||||||
wx.setNavigationBarTitle({
|
wx.setNavigationBarTitle({ title: item.name });
|
||||||
title: plant.name
|
|
||||||
});
|
|
||||||
|
|
||||||
// Prepare swiper list
|
// Prepare swiper list from imgList
|
||||||
const swiperList = (plant.images || []).map(img => {
|
const swiperList = (item.imgList || []).map(img => img.url);
|
||||||
return (img.indexOf('http') === 0 || img.indexOf('wxfile') === 0) ? img : `/assets/${img}`;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Ensure some default values if missing
|
// Parse pest/disease list
|
||||||
const enrichedPlant = {
|
const commonPests = item.pestsDiseases
|
||||||
...plant,
|
? item.pestsDiseases.split(',').map(s => s.trim()).filter(Boolean)
|
||||||
light: plant.light || { level: '中等', description: '适合明亮的散射光' },
|
: [];
|
||||||
water: plant.water || { frequency: '每周1-2次', description: '保持土壤微润' },
|
|
||||||
temperature: plant.temperature || '15-28℃',
|
// Parse aliases
|
||||||
humidity: plant.humidity || '50%-70%',
|
const aliasesList = item.aliases
|
||||||
soil: plant.soil || '疏松透气的营养土',
|
? item.aliases.split(/[,,、]/).map(s => s.trim()).filter(Boolean)
|
||||||
fertilizer: plant.fertilizer || '生长季每月施一次薄肥',
|
: [];
|
||||||
toxicity: plant.toxicity || '无毒',
|
|
||||||
commonPests: plant.commonPests || ['红蜘蛛'],
|
// Parse reproduction methods
|
||||||
careTips: plant.careTips || ['注意通风', '定期清洁叶面']
|
const reproductionList = item.reproductionMethod
|
||||||
|
? item.reproductionMethod.split(/[,,、]/).map(s => s.trim()).filter(Boolean)
|
||||||
|
: [];
|
||||||
|
|
||||||
|
// Difficulty label
|
||||||
|
const diffLabels = { 1: '简单', 2: '中等', 3: '较难', 4: '困难', 5: '专家' };
|
||||||
|
|
||||||
|
// Map API data to display model
|
||||||
|
const plant = {
|
||||||
|
id: item.id,
|
||||||
|
name: item.name,
|
||||||
|
latinName: item.latinName || '',
|
||||||
|
aliases: item.aliases || '',
|
||||||
|
aliasesList: aliasesList,
|
||||||
|
genus: item.genus || '',
|
||||||
|
distributionArea: item.distributionArea || '',
|
||||||
|
difficulty: item.difficulty || 0,
|
||||||
|
difficultyLabel: diffLabels[item.difficulty] || '未知',
|
||||||
|
isHot: item.isHot === 1,
|
||||||
|
lifeCycle: item.lifeCycle || '',
|
||||||
|
growthHabit: item.growthHabit || '',
|
||||||
|
reproductionMethod: item.reproductionMethod || '',
|
||||||
|
reproductionList: reproductionList,
|
||||||
|
|
||||||
|
// Light
|
||||||
|
lightIntensity: item.lightIntensity || '',
|
||||||
|
lightType: item.lightType || '',
|
||||||
|
|
||||||
|
// Temperature
|
||||||
|
optimalTempPeriod: item.optimalTempPeriod || '',
|
||||||
|
|
||||||
|
// Morphology
|
||||||
|
stem: item.stem || '',
|
||||||
|
foliageType: item.foliageType || '',
|
||||||
|
foliageColor: item.foliageColor || '',
|
||||||
|
foliageShape: item.foliageShape || '',
|
||||||
|
height: item.height || 0,
|
||||||
|
|
||||||
|
// Flowering
|
||||||
|
floweringPeriod: item.floweringPeriod || '',
|
||||||
|
floweringColor: item.floweringColor || '',
|
||||||
|
floweringShape: item.floweringShape || '',
|
||||||
|
flowerDiameter: item.flowerDiameter || 0,
|
||||||
|
|
||||||
|
// Fruit
|
||||||
|
fruit: item.fruit || '',
|
||||||
|
|
||||||
|
// Pests
|
||||||
|
pestsDiseases: item.pestsDiseases || '',
|
||||||
|
commonPests: commonPests,
|
||||||
|
|
||||||
|
// Classes
|
||||||
|
classes: (item.classes || []).map(c => c.name),
|
||||||
|
|
||||||
|
// Images
|
||||||
|
imgList: item.imgList || []
|
||||||
};
|
};
|
||||||
|
|
||||||
this.setData({
|
this.setData({
|
||||||
plant: enrichedPlant,
|
plant: plant,
|
||||||
swiperList: swiperList
|
swiperList: swiperList
|
||||||
});
|
});
|
||||||
}
|
}).catch(err => {
|
||||||
|
console.error('Load plant detail failed', err);
|
||||||
|
wx.showToast({ title: '加载失败', icon: 'none' });
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
onSwiperChange(e) {
|
onSwiperChange(e) {
|
||||||
|
|||||||
+112
-57
@@ -1,5 +1,5 @@
|
|||||||
<!--pages/wiki/detail/index.wxml-->
|
<!--pages/wiki/detail/index.wxml-->
|
||||||
<view class="wiki-detail">
|
<view class="wiki-detail" wx:if="{{plant}}">
|
||||||
<!-- Header Area -->
|
<!-- Header Area -->
|
||||||
<view class="wd-header">
|
<view class="wd-header">
|
||||||
<view class="wd-gallery-container">
|
<view class="wd-gallery-container">
|
||||||
@@ -11,7 +11,6 @@
|
|||||||
list="{{swiperList}}"
|
list="{{swiperList}}"
|
||||||
navigation="{{ { type: '' } }}"
|
navigation="{{ { type: '' } }}"
|
||||||
/>
|
/>
|
||||||
<!-- Gradient applied externally to match plant-detail if needed or just rely on image -->
|
|
||||||
<view class="wd-gradient-overlay"></view>
|
<view class="wd-gradient-overlay"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -28,12 +27,12 @@
|
|||||||
<view class="wd-overlay">
|
<view class="wd-overlay">
|
||||||
<view class="wd-title">
|
<view class="wd-title">
|
||||||
<text class="wd-name">{{plant.name}}</text>
|
<text class="wd-name">{{plant.name}}</text>
|
||||||
<text class="wd-scientific">{{plant.scientificName}}</text>
|
<text class="wd-scientific">{{plant.latinName}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="wd-badges">
|
<view class="wd-badges">
|
||||||
<text class="wd-badge">{{plant.family}}</text>
|
<text class="wd-badge" wx:if="{{plant.genus}}">{{plant.genus}}</text>
|
||||||
<text class="wd-badge">{{plant.category}}</text>
|
<text class="wd-badge" wx:for="{{plant.classes}}" wx:key="*this">{{item}}</text>
|
||||||
<text class="wd-badge">难度: {{plant.difficulty || 'Easy'}}</text>
|
<text class="wd-badge">难度: {{plant.difficultyLabel}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -41,10 +40,11 @@
|
|||||||
<!-- Content Area -->
|
<!-- Content Area -->
|
||||||
<view class="wd-content-wrapper">
|
<view class="wd-content-wrapper">
|
||||||
<scroll-view class="wd-content" scroll-y enhanced show-scrollbar="{{false}}">
|
<scroll-view class="wd-content" scroll-y enhanced show-scrollbar="{{false}}">
|
||||||
<!-- Description Section -->
|
|
||||||
<section class="wd-section">
|
<!-- Growth Habit Section -->
|
||||||
|
<section class="wd-section" wx:if="{{plant.growthHabit}}">
|
||||||
<view class="wd-card">
|
<view class="wd-card">
|
||||||
<text class="wd-text">{{plant.description}}</text>
|
<text class="wd-text">{{plant.growthHabit}}</text>
|
||||||
</view>
|
</view>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -56,13 +56,21 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="wd-card">
|
<view class="wd-card">
|
||||||
<view class="wd-grid">
|
<view class="wd-grid">
|
||||||
<view class="wd-stat-item">
|
<view class="wd-stat-item" wx:if="{{plant.distributionArea}}">
|
||||||
<text class="wd-label">原产地</text>
|
<text class="wd-label">分布区域</text>
|
||||||
<text class="wd-value">{{plant.origin}}</text>
|
<text class="wd-value">{{plant.distributionArea}}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="wd-stat-item">
|
<view class="wd-stat-item" wx:if="{{plant.aliases}}">
|
||||||
<text class="wd-label">毒性</text>
|
<text class="wd-label">别名</text>
|
||||||
<text class="wd-value">{{plant.toxicity}}</text>
|
<text class="wd-value">{{plant.aliases}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="wd-stat-item" wx:if="{{plant.lifeCycle}}">
|
||||||
|
<text class="wd-label">生命周期</text>
|
||||||
|
<text class="wd-value">{{plant.lifeCycle === 'perennial' ? '多年生' : (plant.lifeCycle === 'annual' ? '一年生' : plant.lifeCycle)}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="wd-stat-item" wx:if="{{plant.height}}">
|
||||||
|
<text class="wd-label">株高</text>
|
||||||
|
<text class="wd-value">约 {{plant.height}} cm</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -71,79 +79,121 @@
|
|||||||
<!-- Care Guide Section -->
|
<!-- Care Guide Section -->
|
||||||
<section class="wd-section">
|
<section class="wd-section">
|
||||||
<view class="section-title">
|
<view class="section-title">
|
||||||
<t-icon name="sprout" size="40rpx" color="#558B2F" />
|
<t-icon name="sunny" size="40rpx" color="#558B2F" />
|
||||||
<text>养护指南</text>
|
<text>养护指南</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="wd-card">
|
<view class="wd-card">
|
||||||
<!-- Light -->
|
<!-- Light -->
|
||||||
<view class="requirement-item">
|
<view class="requirement-item" wx:if="{{plant.lightIntensity}}">
|
||||||
<view class="req-icon">
|
<view class="req-icon">
|
||||||
<t-icon name="sunny" size="40rpx" color="#558B2F" />
|
<t-icon name="sunny" size="40rpx" color="#558B2F" />
|
||||||
</view>
|
</view>
|
||||||
<view class="req-content">
|
<view class="req-content">
|
||||||
<text class="req-title">光照 ({{plant.light.level}})</text>
|
<text class="req-title">光照</text>
|
||||||
<text class="req-desc">{{plant.light.description}}</text>
|
<text class="req-desc">{{plant.lightIntensity}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- Water -->
|
<!-- Temperature -->
|
||||||
<view class="requirement-item">
|
<view class="requirement-item" wx:if="{{plant.optimalTempPeriod}}">
|
||||||
<view class="req-icon">
|
<view class="req-icon">
|
||||||
<t-icon name="water" size="40rpx" color="#558B2F" />
|
<t-icon name="pin" size="40rpx" color="#558B2F" />
|
||||||
</view>
|
</view>
|
||||||
<view class="req-content">
|
<view class="req-content">
|
||||||
<text class="req-title">水分 ({{plant.water.frequency}})</text>
|
<text class="req-title">适宜温度</text>
|
||||||
<text class="req-desc">{{plant.water.description}}</text>
|
<text class="req-desc">{{plant.optimalTempPeriod}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- Environment -->
|
<!-- Reproduction -->
|
||||||
<view class="requirement-item">
|
<view class="requirement-item" wx:if="{{plant.reproductionMethod}}">
|
||||||
<view class="req-icon">
|
<view class="req-icon">
|
||||||
<t-icon name="temperate" size="40rpx" color="#558B2F" />
|
<t-icon name="fork-node" size="40rpx" color="#558B2F" />
|
||||||
</view>
|
</view>
|
||||||
<view class="req-content">
|
<view class="req-content">
|
||||||
<text class="req-title">环境</text>
|
<text class="req-title">繁殖方式</text>
|
||||||
<text class="req-desc">温度: {{plant.temperature}}</text>
|
<text class="req-desc">{{plant.reproductionMethod}}</text>
|
||||||
<text class="req-desc" style="display: block; margin-top: 4rpx;">湿度: {{plant.humidity}}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- Soil & Fertilizer -->
|
|
||||||
<view class="requirement-item">
|
|
||||||
<view class="req-icon">
|
|
||||||
<t-icon name="layers" size="40rpx" color="#558B2F" />
|
|
||||||
</view>
|
|
||||||
<view class="req-content">
|
|
||||||
<text class="req-title">土壤与肥料</text>
|
|
||||||
<text class="req-desc">土: {{plant.soil}}</text>
|
|
||||||
<text class="req-desc" style="display: block; margin-top: 4rpx;">肥: {{plant.fertilizer}}</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- FAQ Section -->
|
<!-- Morphology Section -->
|
||||||
<section class="wd-section">
|
<section class="wd-section" wx:if="{{plant.stem || plant.foliageShape || plant.foliageColor}}">
|
||||||
<view class="section-title">
|
<view class="section-title">
|
||||||
<t-icon name="error-circle" size="40rpx" color="#558B2F" />
|
<t-icon name="tree-round-dot" size="40rpx" color="#558B2F" />
|
||||||
<text>常见问题</text>
|
<text>形态特征</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="wd-card">
|
<view class="wd-card">
|
||||||
<view class="pest-section">
|
<view class="wd-grid">
|
||||||
<text class="wd-label" style="display: block; margin-bottom: 16rpx;">易发病虫害</text>
|
<view class="wd-stat-item" wx:if="{{plant.stem}}">
|
||||||
<view class="pest-tags">
|
<text class="wd-label">茎</text>
|
||||||
<text wx:for="{{plant.commonPests}}" wx:key="*this" class="pest-tag">{{item}}</text>
|
<text class="wd-value">{{plant.stem}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="wd-stat-item" wx:if="{{plant.foliageShape}}">
|
||||||
|
<text class="wd-label">叶形</text>
|
||||||
|
<text class="wd-value">{{plant.foliageShape}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="wd-stat-item" wx:if="{{plant.foliageColor}}">
|
||||||
|
<text class="wd-label">叶色</text>
|
||||||
|
<text class="wd-value">{{plant.foliageColor}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="wd-stat-item" wx:if="{{plant.foliageType}}">
|
||||||
|
<text class="wd-label">叶质</text>
|
||||||
|
<text class="wd-value">{{plant.foliageType}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tips-section">
|
</view>
|
||||||
<text class="wd-label" style="display: block; margin-bottom: 16rpx; margin-top: 32rpx;">专家提示</text>
|
</section>
|
||||||
<view class="care-tips-list">
|
|
||||||
<view wx:for="{{plant.careTips}}" wx:key="*this" class="tip-item">
|
<!-- Flowering Section -->
|
||||||
<view class="tip-dot"></view>
|
<section class="wd-section" wx:if="{{plant.floweringPeriod || plant.floweringColor}}">
|
||||||
<text class="tip-text">{{item}}</text>
|
<view class="section-title">
|
||||||
</view>
|
<t-icon name="flower" size="40rpx" color="#558B2F" />
|
||||||
|
<text>开花信息</text>
|
||||||
|
</view>
|
||||||
|
<view class="wd-card">
|
||||||
|
<view class="wd-grid">
|
||||||
|
<view class="wd-stat-item" wx:if="{{plant.floweringPeriod}}">
|
||||||
|
<text class="wd-label">花期</text>
|
||||||
|
<text class="wd-value">{{plant.floweringPeriod}}</text>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="wd-stat-item" wx:if="{{plant.floweringColor}}">
|
||||||
|
<text class="wd-label">花色</text>
|
||||||
|
<text class="wd-value">{{plant.floweringColor}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="wd-stat-item" wx:if="{{plant.floweringShape}}">
|
||||||
|
<text class="wd-label">花型</text>
|
||||||
|
<text class="wd-value">{{plant.floweringShape}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="wd-stat-item" wx:if="{{plant.flowerDiameter}}">
|
||||||
|
<text class="wd-label">花径</text>
|
||||||
|
<text class="wd-value">约 {{plant.flowerDiameter}} mm</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Fruit Section -->
|
||||||
|
<section class="wd-section" wx:if="{{plant.fruit}}">
|
||||||
|
<view class="section-title">
|
||||||
|
<t-icon name="apple" size="40rpx" color="#558B2F" />
|
||||||
|
<text>果实</text>
|
||||||
|
</view>
|
||||||
|
<view class="wd-card">
|
||||||
|
<text class="wd-text">{{plant.fruit}}</text>
|
||||||
|
</view>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pests & Diseases Section -->
|
||||||
|
<section class="wd-section" wx:if="{{plant.commonPests.length > 0}}">
|
||||||
|
<view class="section-title">
|
||||||
|
<t-icon name="error-circle" size="40rpx" color="#558B2F" />
|
||||||
|
<text>常见病虫害</text>
|
||||||
|
</view>
|
||||||
|
<view class="wd-card">
|
||||||
|
<view class="pest-tags">
|
||||||
|
<text wx:for="{{plant.commonPests}}" wx:key="*this" class="pest-tag">{{item}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</section>
|
</section>
|
||||||
@@ -153,3 +203,8 @@
|
|||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- Loading State -->
|
||||||
|
<view wx:if="{{!plant}}" class="wiki-detail-loading">
|
||||||
|
<t-loading theme="circular" size="64rpx" text="加载中..." />
|
||||||
|
</view>
|
||||||
|
|||||||
@@ -313,3 +313,11 @@ t-swiper {
|
|||||||
color: #4B5563;
|
color: #4B5563;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wiki-detail-loading {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #F9FAFB;
|
||||||
|
}
|
||||||
|
|||||||
+115
-91
@@ -1,21 +1,21 @@
|
|||||||
// pages/wiki/index.js
|
// pages/wiki/index.js
|
||||||
import { MOCK_WIKI } from '../../utils/mockData';
|
import request from '../../utils/request';
|
||||||
|
|
||||||
Page({
|
Page({
|
||||||
data: {
|
data: {
|
||||||
// Data Source (effectively the backend result)
|
// Categories
|
||||||
filteredSourceList: [],
|
categories: [],
|
||||||
|
activeCategory: 'all', // 'all' or category id
|
||||||
|
|
||||||
// Display Data (rendered list)
|
// Display Data
|
||||||
displayedList: [],
|
displayedList: [],
|
||||||
|
|
||||||
// Filter State
|
// Filter State
|
||||||
searchQuery: '',
|
searchQuery: '',
|
||||||
activeCategory: '全部',
|
|
||||||
|
|
||||||
// Pagination State
|
// Pagination State
|
||||||
page: 1,
|
current: 1,
|
||||||
pageSize: 5,
|
pageSize: 10,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
hasMore: true,
|
hasMore: true,
|
||||||
|
|
||||||
@@ -24,8 +24,8 @@ Page({
|
|||||||
},
|
},
|
||||||
|
|
||||||
onLoad() {
|
onLoad() {
|
||||||
// Initial Load
|
this.fetchCategories();
|
||||||
this.filterList();
|
this.fetchWikiList(true);
|
||||||
},
|
},
|
||||||
|
|
||||||
onShow() {
|
onShow() {
|
||||||
@@ -35,98 +35,116 @@ Page({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// Search Input Handler
|
// Fetch categories from API
|
||||||
onSearchInput(e) {
|
fetchCategories() {
|
||||||
this.setData({ searchQuery: e.detail.value }, () => {
|
request.get('/wiki-class/list').then(res => {
|
||||||
this.filterList();
|
const list = (res && res.list) || (Array.isArray(res) ? res : []);
|
||||||
|
this.setData({ categories: list });
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('Fetch categories failed', err);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Fetch wiki list from API
|
||||||
|
fetchWikiList(reset = false) {
|
||||||
|
if (this.data.isLoading) return;
|
||||||
|
if (!reset && !this.data.hasMore) return;
|
||||||
|
|
||||||
|
const current = reset ? 1 : this.data.current;
|
||||||
|
|
||||||
|
this.setData({ isLoading: true });
|
||||||
|
|
||||||
|
// Build params
|
||||||
|
const params = {
|
||||||
|
current: current,
|
||||||
|
pageSize: this.data.pageSize
|
||||||
|
};
|
||||||
|
|
||||||
|
// Search query
|
||||||
|
if (this.data.searchQuery) {
|
||||||
|
params.name = this.data.searchQuery;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Category filter
|
||||||
|
if (this.data.activeCategory !== 'all') {
|
||||||
|
params.classId = [this.data.activeCategory];
|
||||||
|
}
|
||||||
|
|
||||||
|
request.post('/wiki/page', params).then(res => {
|
||||||
|
const data = res || {};
|
||||||
|
const list = data.list || [];
|
||||||
|
const total = data.total || 0;
|
||||||
|
|
||||||
|
// Map API data to display model
|
||||||
|
const mappedList = list.map(item => ({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name,
|
||||||
|
latinName: item.latinName || '',
|
||||||
|
aliases: item.aliases || '',
|
||||||
|
genus: item.genus || '',
|
||||||
|
difficulty: item.difficulty || 0,
|
||||||
|
isHot: item.isHot === 1,
|
||||||
|
image: (item.imgList && item.imgList.length > 0) ? item.imgList[0].url : '',
|
||||||
|
classes: (item.classes || []).map(c => c.name),
|
||||||
|
// Pass the full item for detail navigation
|
||||||
|
raw: item
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (reset) {
|
||||||
|
this.setData({
|
||||||
|
displayedList: mappedList,
|
||||||
|
current: 2,
|
||||||
|
hasMore: mappedList.length < total,
|
||||||
|
isLoading: false
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Append using data path for performance
|
||||||
|
const updateData = {};
|
||||||
|
const currentLen = this.data.displayedList.length;
|
||||||
|
mappedList.forEach((item, index) => {
|
||||||
|
updateData[`displayedList[${currentLen + index}]`] = item;
|
||||||
|
});
|
||||||
|
updateData['current'] = current + 1;
|
||||||
|
updateData['hasMore'] = (currentLen + mappedList.length) < total;
|
||||||
|
updateData['isLoading'] = false;
|
||||||
|
this.setData(updateData);
|
||||||
|
}
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('Fetch wiki list failed', err);
|
||||||
|
this.setData({ isLoading: false });
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// Search Input Handler (debounced)
|
||||||
|
onSearchInput(e) {
|
||||||
|
const value = e.detail.value;
|
||||||
|
this.setData({ searchQuery: value });
|
||||||
|
|
||||||
|
// Debounce search
|
||||||
|
if (this._searchTimer) clearTimeout(this._searchTimer);
|
||||||
|
this._searchTimer = setTimeout(() => {
|
||||||
|
this.fetchWikiList(true);
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
|
||||||
// Category Filter Handler
|
// Category Filter Handler
|
||||||
setCategory(e) {
|
setCategory(e) {
|
||||||
this.setData({ activeCategory: e.currentTarget.dataset.cat }, () => {
|
const catId = e.currentTarget.dataset.cat;
|
||||||
this.filterList();
|
this.setData({ activeCategory: catId }, () => {
|
||||||
|
this.fetchWikiList(true);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
|
||||||
* Simulates "Backend" Search & Filtering
|
|
||||||
* Resets pagination and prepares the filtered data source.
|
|
||||||
*/
|
|
||||||
filterList() {
|
|
||||||
const { searchQuery, activeCategory } = this.data;
|
|
||||||
let result = MOCK_WIKI;
|
|
||||||
|
|
||||||
// Filter by Search Query
|
|
||||||
if (searchQuery) {
|
|
||||||
const q = searchQuery.toLowerCase();
|
|
||||||
result = result.filter(item =>
|
|
||||||
item.name.toLowerCase().includes(q) ||
|
|
||||||
item.scientificName.toLowerCase().includes(q)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Filter by Category
|
|
||||||
if (activeCategory !== '全部') {
|
|
||||||
result = result.filter(item => item.category.includes(activeCategory));
|
|
||||||
}
|
|
||||||
|
|
||||||
this.setData({
|
|
||||||
filteredSourceList: result,
|
|
||||||
displayedList: [],
|
|
||||||
page: 1,
|
|
||||||
hasMore: true
|
|
||||||
}, () => {
|
|
||||||
this.loadMoreData();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Simulates "Backend" Pagination
|
|
||||||
* Appends the next page of data from filteredSourceList to displayedList.
|
|
||||||
* key-value data path update is used for performance optimization.
|
|
||||||
*/
|
|
||||||
loadMoreData() {
|
|
||||||
const { isLoading, hasMore, page, pageSize, filteredSourceList, displayedList } = this.data;
|
|
||||||
|
|
||||||
if (isLoading || !hasMore) return;
|
|
||||||
|
|
||||||
this.setData({ isLoading: true });
|
|
||||||
|
|
||||||
// Simulate Network Delay
|
|
||||||
setTimeout(() => {
|
|
||||||
const startIndex = (page - 1) * pageSize;
|
|
||||||
const endIndex = startIndex + pageSize;
|
|
||||||
const newItems = filteredSourceList.slice(startIndex, endIndex);
|
|
||||||
|
|
||||||
const isLastPage = endIndex >= filteredSourceList.length;
|
|
||||||
|
|
||||||
if (newItems.length > 0) {
|
|
||||||
// Performance Optimization: Use data path to append items
|
|
||||||
// Instead of setData({ displayedList: [...old, ...new] })
|
|
||||||
const updateData = {};
|
|
||||||
const currentLen = displayedList.length;
|
|
||||||
newItems.forEach((item, index) => {
|
|
||||||
updateData[`displayedList[${currentLen + index}]`] = item;
|
|
||||||
});
|
|
||||||
|
|
||||||
updateData['page'] = page + 1;
|
|
||||||
updateData['hasMore'] = !isLastPage;
|
|
||||||
updateData['isLoading'] = false;
|
|
||||||
|
|
||||||
this.setData(updateData);
|
|
||||||
} else {
|
|
||||||
this.setData({
|
|
||||||
hasMore: false,
|
|
||||||
isLoading: false
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, 500);
|
|
||||||
},
|
|
||||||
|
|
||||||
// Infinite Scroll Handler
|
// Infinite Scroll Handler
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
this.loadMoreData();
|
this.fetchWikiList(false);
|
||||||
|
},
|
||||||
|
|
||||||
|
// Pull down refresh
|
||||||
|
onPullDownRefresh() {
|
||||||
|
this.fetchCategories();
|
||||||
|
this.fetchWikiList(true);
|
||||||
|
wx.stopPullDownRefresh();
|
||||||
},
|
},
|
||||||
|
|
||||||
goToDetail(e) {
|
goToDetail(e) {
|
||||||
@@ -136,6 +154,12 @@ Page({
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Difficulty label helper
|
||||||
|
getDifficultyLabel(level) {
|
||||||
|
const labels = { 1: '简单', 2: '中等', 3: '较难', 4: '困难', 5: '专家' };
|
||||||
|
return labels[level] || '未知';
|
||||||
|
},
|
||||||
|
|
||||||
openIdentifyModal() { this.setData({ showIdentifyModal: true }); },
|
openIdentifyModal() { this.setData({ showIdentifyModal: true }); },
|
||||||
|
|
||||||
onPopupVisibleChange(e) {
|
onPopupVisibleChange(e) {
|
||||||
|
|||||||
+53
-11
@@ -1,4 +1,13 @@
|
|||||||
<!--pages/wiki/index.wxml-->
|
<!--pages/wiki/index.wxml-->
|
||||||
|
<wxs module="tools">
|
||||||
|
var diffLabels = { '1': '简单', '2': '中等', '3': '较难', '4': '困难', '5': '专家' };
|
||||||
|
module.exports = {
|
||||||
|
getDifficulty: function(level) {
|
||||||
|
return diffLabels['' + level] || '未知';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</wxs>
|
||||||
|
|
||||||
<view class="wiki-page">
|
<view class="wiki-page">
|
||||||
|
|
||||||
<scroll-view
|
<scroll-view
|
||||||
@@ -12,45 +21,78 @@
|
|||||||
<t-search placeholder="搜索植物名称,如:龟背竹" value="{{searchQuery}}" bind:change="onSearchInput" shape="round" />
|
<t-search placeholder="搜索植物名称,如:龟背竹" value="{{searchQuery}}" bind:change="onSearchInput" shape="round" />
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- Dynamic Categories from API -->
|
||||||
<view class="category-scroll">
|
<view class="category-scroll">
|
||||||
<t-tag
|
<t-tag
|
||||||
wx:for="{{['全部', '观叶', '观花', '多肉']}}"
|
variant="{{activeCategory === 'all' ? 'dark' : 'outline'}}"
|
||||||
wx:key="*this"
|
theme="{{activeCategory === 'all' ? 'primary' : 'default'}}"
|
||||||
variant="{{activeCategory === item ? 'dark' : 'outline'}}"
|
|
||||||
theme="{{activeCategory === item ? 'primary' : 'default'}}"
|
|
||||||
shape="mark"
|
shape="mark"
|
||||||
size="medium"
|
size="medium"
|
||||||
style="margin-right: 16rpx;"
|
style="margin-right: 16rpx;"
|
||||||
bind:tap="setCategory"
|
bind:tap="setCategory"
|
||||||
data-cat="{{item}}"
|
data-cat="all"
|
||||||
>
|
>
|
||||||
{{item}}
|
全部
|
||||||
|
</t-tag>
|
||||||
|
<t-tag
|
||||||
|
wx:for="{{categories}}"
|
||||||
|
wx:key="id"
|
||||||
|
variant="{{activeCategory === item.id ? 'dark' : 'outline'}}"
|
||||||
|
theme="{{activeCategory === item.id ? 'primary' : 'default'}}"
|
||||||
|
shape="mark"
|
||||||
|
size="medium"
|
||||||
|
style="margin-right: 16rpx;"
|
||||||
|
bind:tap="setCategory"
|
||||||
|
data-cat="{{item.id}}"
|
||||||
|
>
|
||||||
|
{{item.name}}
|
||||||
</t-tag>
|
</t-tag>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="wiki-list">
|
<view class="wiki-list">
|
||||||
<view wx:for="{{displayedList}}" wx:key="id" class="wiki-card" bindtap="goToDetail" data-item="{{item}}">
|
<view wx:for="{{displayedList}}" wx:key="id" class="wiki-card" bindtap="goToDetail" data-item="{{item}}">
|
||||||
<view class="wiki-image">
|
<view class="wiki-image">
|
||||||
<t-image src="/assets/{{item.images[0]}}" mode="aspectFill" width="100%" height="100%" lazy />
|
<image wx:if="{{item.image}}" src="{{item.image}}" mode="aspectFill" style="width: 100%; height: 100%; display: block;" lazy-load />
|
||||||
|
<view wx:else class="wiki-image-placeholder">
|
||||||
|
<t-icon name="image" size="48rpx" color="#ccc" />
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="wiki-info">
|
<view class="wiki-info">
|
||||||
<view class="wiki-top">
|
<view class="wiki-top">
|
||||||
<text class="wiki-name">{{item.name}}</text>
|
<text class="wiki-name">{{item.name}}</text>
|
||||||
<text class="scientific-name">{{item.scientificName}}</text>
|
<text class="scientific-name">{{item.latinName}}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- Tags Row -->
|
<!-- Tags Row -->
|
||||||
<view class="tags-row">
|
<view class="tags-row">
|
||||||
<t-tag
|
<t-tag
|
||||||
wx:for="{{item.tags}}"
|
wx:for="{{item.classes}}"
|
||||||
wx:key="*this"
|
wx:key="*this"
|
||||||
wx:for-item="tag"
|
wx:for-item="cls"
|
||||||
size="small"
|
size="small"
|
||||||
variant="light"
|
variant="light"
|
||||||
theme="primary"
|
theme="primary"
|
||||||
style="margin-right: 8rpx; margin-bottom: 8rpx;"
|
style="margin-right: 8rpx; margin-bottom: 8rpx;"
|
||||||
>
|
>
|
||||||
{{tag}}
|
{{cls}}
|
||||||
|
</t-tag>
|
||||||
|
<t-tag
|
||||||
|
wx:if="{{item.difficulty}}"
|
||||||
|
size="small"
|
||||||
|
variant="light"
|
||||||
|
theme="{{item.difficulty <= 2 ? 'success' : (item.difficulty <= 3 ? 'warning' : 'danger')}}"
|
||||||
|
style="margin-right: 8rpx; margin-bottom: 8rpx;"
|
||||||
|
>
|
||||||
|
{{tools.getDifficulty(item.difficulty)}}
|
||||||
|
</t-tag>
|
||||||
|
<t-tag
|
||||||
|
wx:if="{{item.isHot}}"
|
||||||
|
size="small"
|
||||||
|
variant="light"
|
||||||
|
theme="danger"
|
||||||
|
style="margin-right: 8rpx; margin-bottom: 8rpx;"
|
||||||
|
>
|
||||||
|
热门
|
||||||
</t-tag>
|
</t-tag>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -60,7 +60,14 @@
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
background: #f0f0f0;
|
background: #f0f0f0;
|
||||||
}
|
}
|
||||||
.wiki-image t-image { width: 100%; height: 100%; display: block; }
|
.wiki-image image { width: 100%; height: 100%; display: block; }
|
||||||
|
.wiki-image-placeholder {
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
.wiki-info { flex: 1; min-width: 0; }
|
.wiki-info { flex: 1; min-width: 0; }
|
||||||
|
|
||||||
|
|||||||
+1
-1
@@ -53,7 +53,7 @@
|
|||||||
},
|
},
|
||||||
"compileType": "miniprogram",
|
"compileType": "miniprogram",
|
||||||
"libVersion": "3.7.1",
|
"libVersion": "3.7.1",
|
||||||
"appid": "wxb463820bf36dd5d6",
|
"appid": "wx52dfc635739a9c19",
|
||||||
"projectname": "plant-mp",
|
"projectname": "plant-mp",
|
||||||
"isGameTourist": false,
|
"isGameTourist": false,
|
||||||
"condition": {
|
"condition": {
|
||||||
|
|||||||
+2
-1
@@ -177,7 +177,8 @@ class WxRequest {
|
|||||||
|
|
||||||
// Initialize with default instance
|
// Initialize with default instance
|
||||||
const request = new WxRequest({
|
const request = new WxRequest({
|
||||||
baseUrl: 'http://192.168.0.184:8888',
|
baseUrl: 'http://192.168.0.184:8889',
|
||||||
|
//baseUrl: 'https://prod.sundynix.cn/plant',
|
||||||
header: {
|
header: {
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,53 @@
|
|||||||
|
/**
|
||||||
|
* Request WeChat Mini Program Subscription Message
|
||||||
|
* Template ID: R7fh3NDpuV8DYqI83HpEQvC8mLJy5xMWFl1qeGN9JIo
|
||||||
|
*/
|
||||||
|
const TEMPLATE_ID = 'R7fh3NDpuV8DYqI83HpEQvC8mLJy5xMWFl1qeGN9JIo';
|
||||||
|
|
||||||
|
export const requestSubscription = () => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
// Check if subscription capability is available (basic check)
|
||||||
|
if (!wx.requestSubscribeMessage) {
|
||||||
|
console.warn('Current version does not support subscribe message');
|
||||||
|
resolve({ success: false, errMsg: 'Not supported' });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
wx.requestSubscribeMessage({
|
||||||
|
tmplIds: [TEMPLATE_ID],
|
||||||
|
success(res) {
|
||||||
|
if (res[TEMPLATE_ID] === 'accept') {
|
||||||
|
console.log('Subscription accepted');
|
||||||
|
resolve({ success: true, status: 'accept' });
|
||||||
|
} else {
|
||||||
|
console.log('Subscription rejected or other status', res[TEMPLATE_ID]);
|
||||||
|
resolve({ success: false, status: res[TEMPLATE_ID] });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail(err) {
|
||||||
|
console.error('Subscription failed', err);
|
||||||
|
resolve({ success: false, errMsg: err.errMsg });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const checkSubscriptionSettings = () => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
if (!wx.getSetting) {
|
||||||
|
resolve(undefined);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
wx.getSetting({
|
||||||
|
withSubscriptions: true,
|
||||||
|
success(res) {
|
||||||
|
const itemSettings = (res.subscriptionsSetting && res.subscriptionsSetting.itemSettings) || {};
|
||||||
|
resolve(itemSettings[TEMPLATE_ID]);
|
||||||
|
},
|
||||||
|
fail() {
|
||||||
|
resolve(undefined);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user