限时抢购

app.json

@@ -4,7 +4,8 @@
     "pages/add/index",
     "pages/add/edit",
     "pages/login/index",
-    "pages/add/info"
+    "pages/add/info",
+    "pages/index/info"
   ],
   "window": {
     "navigationBarTextStyle": "black",

pages/add/index.js

@@ -1,12 +1,14 @@
 // pages/add/index.js
-
+const { api } = require("../../utils/api")
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-    list:[
+    timer:null,
+    list:[],
+    hotList:[
       {url:'https://res.catter.cn/pub/2025/09/30/20250930143920286.png',name:'金鱼吊兰'},
       {url:'https://res.catter.cn/pub/2025/09/30/20250930145312611.png',name:'月季'},
       {url:'https://res.catter.cn/pub/2025/09/30/20250930150006852.png',name:'多肉'}
@@ -20,11 +22,38 @@ Page({
 
   },
 
+  search(e){
+    if (this.data.timer) {
+      clearTimeout(this.data.timer)
+      this.data.timer = null;
+    }
+    const key = e.detail.value
+    this.data.timer = setTimeout(() => {
+      if (key.length === 0){
+        this.setData({list:[]})
+        return
+      }
+      this.fetchList(key)
+
+    }, 1000)
+  },
+
+  fetchList(key){
+    console.log(key);
+    const data ={ current:1,pageSize:20,name:key}
+    api('/library/list','POST',data,'json').then(res => {
+      if (res.code === 200){
+        const list = res.data.list
+        this.setData({list:list})
+      }
+    })
+  },
 
 
-  goInfo(){
+  goInfo(e){
+    const id = e.currentTarget.dataset.id
     wx.navigateTo({
-      url: '../add/info',
+      url: '../add/info?id=' + id,
     })
   }
 })

pages/add/index.wxml

@@ -1,20 +1,33 @@
 <!--pages/add/index.wxml-->
 <view>
   <view class="padding">
-    <t-search placeholder="请输入植物名称..." shape="round" />
+    <t-search placeholder="请输入植物名称..." shape="round" bind:change="search" />
   </view>
-  <view class="font-14 bold padding">热门植物</view>
+  <view wx:if="{{list.length === 0}}">
-  <view>
+    <view class="font-14 bold padding">热门植物</view>
-
+    <view>
-    <view class="grid">
+      <view class="grid">
-      <view wx:for="{{list}}" wx:key="url" style="background-color: #F6F8FE; border-radius: 16rpx;">
+        <view wx:for="{{hotList}}" wx:key="url" style="background-color: #F6F8FE; border-radius: 16rpx;">
-        <view class="item" bind:tap="goInfo">
+          <view class="item" bind:tap="goInfo">
-          <image class="pic" src="{{item.url}}" mode="aspectFill"></image>
+            <image class="pic" src="{{item.url}}" mode="aspectFill"></image>
+          </view>
+          <view style="padding: 16rpx 16rpx 16rpx 10rpx;" class="font-12 bold">{{item.name}}</view>
         </view>
-        <view style="padding: 16rpx 16rpx 16rpx 10rpx;" class="font-12 bold">{{item.name}}</view>
       </view>
-
     </view>
-
+  </view>
+  <!-- 搜索列表 -->
+  <view>
+    <scroll-view scroll-y="{{true}}">
+      <view wx:for="{{list}}">
+        <view class=" flex flex-center flex-justify-start" style="padding: 16rpx 32rpx;"  data-id="{{item.id}}" bind:tap="goInfo">
+          <image class="pic1" src="https://res.catter.cn/pub/2025/09/30/20250930143920286.png"></image>
+          <view style="padding-left: 16rpx;">
+            <view class="font-14 bold">{{item.name}}</view>
+            <view class="font-14 grey">{{item.aliases}}</view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
   </view>
 </view>

pages/add/index.wxss

@@ -1,10 +1,8 @@
 /* pages/add/index.wxss */
-.card {
 
+.card {
   margin: 16rpx;
   border-radius: 16rpx;
-  background-color: #F6F8FE;
-
 }
 
 .bg {
@@ -40,4 +38,10 @@
   object-fit: cover; /* 小程序等效是 mode="aspectFill" */
   border-top-left-radius: 16rpx;
   border-top-right-radius: 16rpx;
+}
+
+.pic1{
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 16rpx;
 }

pages/add/info.js

@@ -1,3 +1,5 @@
+const { api } = require("../../utils/api")
+
 // pages/add/info.js
 Page({
 
@@ -5,7 +7,8 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+     id:'',
+     info:null
   },
 
   goBack(){
@@ -16,7 +19,35 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
+    this.setData({id:options.id})
+    this.fetchInfo()
+  },
 
+  fetchInfo(){
+    const data ={id:this.data.id}
+    api('/library/detail','GET',data,'json').then(res => {
+      if (res.code === 200) {
+        const data = res.data
+        data.pestsList = data.pestsDiseases.split(',')
+        this.setData({info:data})
+      }
+    })
+  },
+  add(){
+    const user = wx.getStorageSync('user')
+    console.log(user);
+    wx.showLoading({
+      title: '请稍后',
+    })
+    const data ={libraryId: this.data.info.id,userId:user.id}
+    api('/plant/plantByLibrary','POST',data,'json').then(res => {
+      if (res.code === 200){
+        wx.showToast({
+          title: res.msg,
+          icon:'success'
+        })
+      }
+    })
   },
 
   /**

pages/add/info.wxml

@@ -1,7 +1,6 @@
 <!--pages/add/info.wxml-->
 <view>
-
+  <view wx:if="{{info}}">
-  <view>
     <!-- top -->
     <view class="top" style="position: relative; z-index: 2;">
       <image src="https://res.catter.cn/pub/2025/09/30/20250930150006852.png" style="width: 100vw; height: 680rpx;" mode="aspectFill"></image>
@@ -10,22 +9,25 @@
 
     <!-- back -->
     <view style="z-index: 99;position: absolute; top: 110rpx; left: -20rpx; padding: 0 32rpx; " bind:tap="goBack">
-
       <t-icon name="chevron-left" size="58rpx" style="color: white;"></t-icon>
-
     </view>
 
     <!-- info -->
-    <view style="background-color:white;margin-top: -100rpx;z-index: 99;position: absolute; width: 100vw; border-top-right-radius: 50rpx; border-top-left-radius: 50rpx;">
+    <view style="background-color:white;margin-top: -130rpx;z-index: 99;position: absolute; width: 100vw; border-top-right-radius: 50rpx; border-top-left-radius: 50rpx;">
       <view class="flex flex-center flex-justify-start" style="padding: 52rpx 0 10rpx 32rpx">
-        <view class="font-16 bold ">多肉</view>
+        <view class="font-16 bold ">{{info.name}}</view>
-        <view class="font-12 grey ml-16">石榴属</view>
+        <view class="font-12 grey ml-16">{{info.genus}}</view>
       </view>
+      <view style="padding: 0rpx 0 10rpx 32rpx">{{info.latinName}}</view>
     </view>
   </view>
 
-  <view class="padding white-bg grey">
+  <view class="padding white-bg ">
-    <view>多肉植物也叫多水植物、肉质植物，是指植物器官的茎或叶或根具有发达的薄壁组织用以贮藏水分，在外形上显得肥厚多汁的一类植物</view>
+    <view class="flex flex-center flex-justify-start">
+      <view>常用名：</view>
+      <view class="bold">{{info.aliases}}</view>
+    </view>
+    <view class="grey" style="margin-top: 10rpx;">{{info.growthHabit}}</view>
   </view>
 
   <view class="padding" style="padding-bottom: 240rpx;">
@@ -76,15 +78,22 @@
       <view>光照</view>
       <view class="flex flex-justify-start flex-justify-start mt-16">
         <t-avatar shape="round" icon="sunny" />
-        <view class="font-14 bold ml-16">喜阳、全日照</view>
+        <view class="font-14 bold ml-16">{{info.lightIntensity}}、{{info.lightType}}</view>
+      </view>
+
+    </view>
+
+    <view class="row padding mt-32">
+      <view>病害</view>
+      <view style="margin-top: 16rpx;">
+        <t-tag class="margin-16" wx:for="{{info.pestsList}}" theme="danger" style="margin-right: 10rpx;" variant="light" >{{item}}</t-tag>
       </view>
-      <view class="mt-16 grey">多肉 喜阳，最好每天晒够6小时</view>
     </view>
   </view>
 
   <view class="bottom">
     <view class="flex flex-center flex-col">
-      <t-button shape="round" theme="primary" style="width: 80%;">获取养护日程</t-button>
+      <t-button shape="round" theme="primary" style="width: 80%;" bind:tap="add">获取养护日程</t-button>
       <t-button shape="round" theme="text" style="width: 80%; margin-top: 16rpx;">立即拥有</t-button>
     </view>
   </view>

pages/index/index.js

@@ -1,8 +1,32 @@
+const { api } = require("../../utils/api")
+
 // index.js
 Page({
   data: {
     list:[]    
   },
+  onLoad(options) {
+
+  },
+  onShow(){
+    this.fetchList()
+  },
+  goInfo(e){
+    const id  = e.currentTarget.dataset.id
+    wx.navigateTo({
+      url: '../index/info?id=' + id,
+    })
+  },
+  fetchList(){
+    const user = wx.getStorageSync('user')
+    const data = {userId: user.id,current:1,pageSize:20}
+    api('/plant/getList','POST',data,'json').then(res => {
+      if (res.code === 200){
+        const tmps = res.data.list
+        this.setData({list:tmps})
+      }
+    })
+  },
   goAdd(){
     wx.navigateTo({
       url: '../add/index',

pages/index/index.wxml

@@ -1,8 +1,7 @@
 <!--index.wxml-->
 <view class="flex flex-center flex-col">
-    <view wx-if="{{list.length === 0}}" class="flex flex-center flex-col " style="margin-top: 268rpx;" >
+    <view wx:if="{{list.length === 0}}" class="flex flex-center flex-col " style="margin-top: 268rpx;" >
       <view class="empty flex flex-center flex-col">
-
       </view>
       <view class="mt-16 flex flex-center flex-col">
         <view class="font-16 bold" >暂无植物</view>
@@ -13,7 +12,29 @@
       </view>
     </view>
 
-    <view class="bottom">
+    <!-- list 数据 -->
+    <scroll-view scroll-y="{{true}}"  wx:else>
+      <view class="padding">
+        <view wx:for="{{list}}" class="row padding mb-32" data-id="{{item.id}}" bind:tap="goInfo">
+        <view class="flex flex-center flex-justify-start">
+          <image class="pic" src="https://res.catter.cn/pub/2025/09/30/20250930143920286.png"></image>
+          <view style="margin-left:16rpx">
+            <view class="font-16 bold">{{item.name}}</view>
+            <view class="font-14 grey">{{item.latinName}}</view>
+            <view class="flex flex-center flex-justify-start mt-16 ">
+              <t-avatar size="56rpx" icon="color-invert" />
+              <view class="ml-32">
+                <t-avatar size="56rpx"  icon="color-invert" />
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      </view>
+    </scroll-view>
+    <view class="bottom" wx:if="{{list.length === 0}}">
       <view class="font-12 grey mt-16">您添加的植物将全部显示在这里</view>
     </view>
+
+    <t-fab wx:if="{{list.length > 0}}" icon="add" bind:click="goAdd"></t-fab>
 </view>

pages/index/index.wxss

@@ -12,4 +12,14 @@
 .bottom{
   position: fixed;
   bottom: 68rpx;
+}
+
+.pic{
+  width: 150rpx;
+  height: 150rpx;
+  border-radius: 16rpx;
+}
+
+.row {
+  background-color: #F6F8FE;
 }

pages/index/info.js

@@ -0,0 +1,83 @@
+const { api } = require("../../utils/api")
+
+// pages/index/info.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    id:''
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.setData({id:options.id})
+    this.fetchInfo()
+  },
+
+  fetchInfo(){
+    api('/plant/detail','GET',{id: this.data.id}).then(res => {
+      if (res.code === 200){
+        const tmp = res.data
+        tmp.farms.suitableFertilizer = tmp.farms.suitableFertilizer.split(',')
+        this.setData({info:res.data})
+        console.log(tmp);
+      }
+    })
+  },
+
+  goBack(){
+    wx.navigateBack()
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/index/info.json

@@ -0,0 +1,4 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {}
+}

pages/index/info.wxml

@@ -0,0 +1,60 @@
+<!--pages/index/info.wxml-->
+<view>
+  <!-- top -->
+  <view class="top" style="position: relative; z-index: 2;">
+    <image src="https://res.catter.cn/pub/2025/09/30/20250930150006852.png" style="width: 100vw; height: 680rpx;" mode="aspectFill"></image>
+  </view>
+
+
+  <!-- back -->
+  <view style="z-index: 99;position: absolute; top: 110rpx; left: -20rpx; padding: 0 32rpx; " bind:tap="goBack">
+    <t-icon name="chevron-left" size="58rpx" style="color: white;"></t-icon>
+  </view>
+
+  <!-- info -->
+  <view style="background-color:white;margin-top: -130rpx;z-index: 99;position: absolute; width: 100vw; border-top-right-radius: 50rpx; border-top-left-radius: 50rpx;">
+    <view class="flex flex-center flex-justify-start" style="padding: 52rpx 0 10rpx 32rpx">
+      <view class="font-16 bold ">{{info.name}}</view>
+      <view class="font-12 grey ml-16">{{info.genus}}</view>
+    </view>
+    <view style="padding: 0rpx 0 10rpx 32rpx">{{info.latinName}}</view>
+  </view>
+
+  <view class="padding" style="padding-bottom: 240rpx;">
+    <view>
+      <view class="row padding mt-32">
+        <view>今日任务</view>
+        <view class="flex flex-center flex-justify-between mt-16">
+          <view class="flex flex-justify-start flex-aligin-center mt-16">
+            <t-avatar icon="color-invert" />
+            <view class="font-14 bold ml-16">浇水</view>
+          </view>
+          <view>
+            <t-button theme="primary" shape="round" size="small">完成</t-button>
+          </view>
+        </view>
+        <view class="flex flex-center flex-justify-between mt-16">
+          <view class="flex flex-justify-start flex-aligin-center mt-16">
+            <t-avatar icon="color-invert" />
+            <view class="font-14 bold ml-16">施肥</view>
+          </view>
+          <view>
+            <t-button shape="round" size="small">未完成</t-button>
+          </view>
+        </view>
+      </view>
+
+      <view class="row padding mt-32">
+        <view>养护计划信息</view>
+        <view class="flex flex-center flex-justify-between mt-16">
+          <view class="flex flex-justify-start flex-aligin-center mt-16">
+            <view class="font-14 bold ml-16">{{info.farms.desc}}</view>
+          </view>
+        </view>
+        <view class="mt-16">
+          <t-tag class="margin-16" wx:for="{{info.farms.suitableFertilizer}}" theme="danger" style="margin-right: 10rpx;" variant="light">{{item}}</t-tag>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

pages/index/info.wxss

@@ -0,0 +1,4 @@
+/* pages/index/info.wxss */
+page {
+  background-color: #F6F6F6;
+}

project.private.config.json

@@ -23,12 +23,26 @@
   "condition": {
     "miniprogram": {
       "list": [
+        {
+          "name": "pages/index/info",
+          "pathName": "pages/index/info",
+          "query": "id=a42344e7-a370-11f0-a562-bc2411e64a23",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "pages/add/info",
+          "pathName": "pages/add/info",
+          "query": "id=d98921aa-a358-11f0-bb61-bc2411e64a23",
+          "launchMode": "default",
+          "scene": null
+        },
         {
           "name": "pages/add/edit",
           "pathName": "pages/add/edit",
           "query": "",
-          "scene": null,
+          "launchMode": "default",
-          "launchMode": "default"
+          "scene": null
         }
       ]
     }