flower-mp/pages/index/index.wxml
2025-12-02 11:39:24 +08:00

116 lines
5.2 KiB
Plaintext

<!--pages/garden/index.wxml-->
<view>
<!-- top -->
<view class="top primary-bg">
<view style="padding-top: 128rpx; padding-left: 32rpx;" class="white">
<view class="bold font-16">天气晴朗</view>
<view>
<view class="flex flex-center flex-justify-start">
<t-icon name="fog-sunny" size="32"></t-icon>
<view class="bold mt-16 ml-16" style="font-size: 40px;">20 ℃ </view>
</view>
<view wx:if="{{leftList.length > 0}}">
<view> 今日需养护 2 株植物</view>
<view class="mt-16 font-12" style="color: #E2B43F;">龟背竹长期未更新照片</view>
</view>
</view>
</view>
</view>
<view style="height: 89vh;" wx:if="{{list.length > 0}}">
<view class="waterfall" scroll-y="{{true}}">
<view class="column">
<block wx:for="{{leftList}}" wx:key="id" >
<view class="card mb-16" data-id="{{item.id}}" bind:tap="goInfo">
<view class="img-wrapper" >
<image src="{{item.pic}}" mode="widthFix" class="img"></image>
<view class="overlay" style="margin-bottom: 26rpx;">
<view class="font-14 bold">{{item.name}}</view>
<view class="flex flex-center flex-justify-start mt-5">
<t-icon name="heart" size="12"></t-icon>
<text class="small ml-5">陪伴 · {{item.plantDays}} 天</text>
</view>
</view>
</view>
<view class="info font-12">
<view wx:if="{{item.needCare}}" class="flex flex-center flex-justify-start">
<t-icon name="saturation" style="color: #4B84EE;"></t-icon>
<view class="ml-5 small">
今日需养护
</view>
</view>
<view wx:else class="flex flex-center flex-justify-start">
<t-icon name="saturation" style="color: #4FAB5F;"></t-icon>
<view class="small ml-5">
今日无需养护
</view>
</view>
<view class="mt-5 grey small">上次养护:{{item.lastPeriod ? item.lastPeriod:'-' }} </view>
</view>
</view>
</block>
</view>
<view class="column">
<block wx:for="{{rightList}}" wx:key="id" >
<view class="card mb-16" data-id="{{item.id}}" bind:tap="goInfo">
<view class="img-wrapper" >
<image src="{{item.pic}}" mode="widthFix" class="img"></image>
<view class="overlay" style="margin-bottom: 26rpx;">
<view class="font-14 bold">{{item.name}}</view>
<view class="flex flex-center flex-justify-start mt-5">
<t-icon name="heart" size="12"></t-icon>
<text class="small ml-5">陪伴 · {{item.plantDays}} 天</text>
</view>
</view>
</view>
<view class="info font-12">
<view wx:if="{{item.needCare === 1}}" class="flex flex-center flex-justify-start">
<t-icon name="saturation" style="color: #4B84EE;"></t-icon>
<view class="ml-5 small">
今日需养护
</view>
</view>
<view wx:else class="flex flex-center flex-justify-start">
<t-icon name="saturation" style="color: #4FAB5F;"></t-icon>
<view class="ml-5 small">
今日无需养护
</view>
</view>
<view class="mt-5 grey small">上次养护:{{item.lastPeriod ? item.lastPeriod:'-' }}</view>
</view>
</view>
</block>
</view>
</view>
</view>
<view wx:else>
<view class="flex flex-center flex-col " style="margin-top: 60rpx;">
<view class="empty flex flex-center flex-col">
</view>
<view class="mt-16 flex flex-center flex-col">
<view class="font-14 bold">欢迎来到你的秘密花园 🌿~</view>
<view class="font-12 grey mt-16">从添加第一盆植物开始你的养花之旅吧</view>
</view>
<view style="width: 100vw; margin-top: 32rpx; " class="flex flex-center flex-col">
<t-button theme="primary" style="width: 60%;" size="small" shape="round" bind:tap="goAdd">添加我的第一盆植物</t-button>
</view>
<view class="mt-32 white-bg padding row">
<view class="flex flex-center font-12 grey">您还可以从以下热门植物中,免费领取</view>
<view class="grid mt-32">
<view wx:for="{{hotList}}">
<image src="{{item.pic}}" style="width:40vw;height: 40vw; border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;" mode="widthFix"></image>
<view>
<view class="flex flex-center flex-justify-start">
<view class="font-16 bold">{{item.name}}</view>
<t-tag theme="primary" class="ml-16" size="small">{{item.genus}}</t-tag>
</view>
<view class="font-12 grey">{{item.lifeCycle}} {{item.lightIntensity}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<t-fab icon="add" bind:click="goAdd" aria-label="增加"></t-fab>
</view>