flower-mp/pages/garden/info.wxml
2025-12-09 16:19:58 +08:00

109 lines
5.2 KiB
Plaintext

<!--pages/index/info.wxml-->
<view>
<!-- top -->
<view class="top" style="position: relative; z-index: 2;">
<t-swiper style="width: 100vw;" height="640rpx" wx:if="{{info.pic}}" list="{{info.picList}}">
</t-swiper>
<image wx:else="" 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: 999;position: fixed; top: 110rpx; left: 32rpx; background-color: #34343482 ; width: 60rpx ; height: 60rpx; border-radius: 30rpx; " bind:tap="goBack">
<view class="flex flex-center" style="width: 100%;height: 100%;">
<t-icon name="chevron-left" size="48rpx" style="color: white;"></t-icon>
</view>
</view>
<!-- info -->
<view style="background-color:white;margin-top: -140rpx;z-index: 99;position: absolute; width: 100vw; border-top-right-radius: 50rpx; border-top-left-radius: 50rpx;">
<view class="flex flex-center flex-justify-between" style="padding: 52rpx 32rpx 32rpx 32rpx">
<view>
<view class="font-16 bold ">{{info.name}}</view>
<view class="font-12 grey mt-16">陪伴你第 {{info.plantDays}} 天 · 种植于 {{info.plantTimeStr}}</view>
</view>
<view style="width: 100rpx;" class="flex flex-center flex-justify-end" bind:tap="goEdit">
<t-icon name="setting"></t-icon>
</view>
</view>
</view>
<view style="padding-bottom: 240rpx;">
<view class="white-bg padding flex flex-center flex-justify-between">
<view class="font-12">
<view>
🌡 温度适宜:{{weather.temperature}} °C
</view>
<view>
💧 湿度 {{weather.humidity}} %
</view>
</view>
<view>
<t-tag theme="primary" shape="round" variant="outline">记录此刻</t-tag>
</view>
</view>
<view class="padding">
<view>
<view class="row padding">
<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.growthHabit}}</view>
</view>
</view>
<view>
<view class="grid">
<view wx:for="{{info.todayCares}}" class="full-width" data-item="{{item}}" bind:tap="make">
<view style="background-color: #FAFAFA; border-radius: 16rpx; width: 100%; border: {{item.color}}3C 1px solid;">
<view class="flex flex-center flex-col padding">
<view class="camera flex flex-center" style="background-color:{{item.color ? item.color+'3C':'red'}};">
<t-icon name="{{item.icon}}" class="primary" style="color:{{item.color ? item.color:'red'}};" size="24"></t-icon>
</view>
<view class="mt-16">{{item.name}}</view>
<view class="mt-16 font-12 grey">每{{item.period}}天一次</view>
<view wx:if="{{item.status === 2}}">
<view class="mt-16 font-12 primary">已完成</view>
</view>
<view wx:else>
<view class="primary mt-16 font-12 " style="color: #DD524C;" wx:if="{{item.status === 4}}">已逾期{{item.expireDays}}天</view>
<view class="primary mt-16 font-12 " wx:if="{{item.expireDays === 0}}">今天</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="row padding mt-32">
<view>养护记录</view>
<view class="flex flex-center flex-justify-between mt-16">
<view wx:if="{{info.careRecords.length > 0}}" class="full-width">
<view wx:for="{{info.careRecords}}" class="full-width">
<view class="flex full-width">
<view style="width: 50rpx; " class="flex flex-center flex-col ">
<view class="dot flex flex-center" style="background-color: {{item.color}}3c;">
<t-icon name="{{item.icon}}" style="color: {{item.color}};" size="18"></t-icon>
</view>
<view style="width: 1px; background-color: #F6F6F6; height: 45%; margin-top: 10rpx;margin-bottom: 10rpx;"></view>
</view>
<view class="ml-32 mt-16 full-width padding" style="background-color: #F9FAFB; border-radius: 16rpx;margin-left:50rpx;">
<view>
<view class="flex flex-center flex-justify-between">
<view>{{item.name}}</view>
<view class="font-12 grey ml-16">{{item.careTimeStr}}</view>
</view>
<view wx:if="{{item.lastPeriod === 0}}" style="background-color: {{item.color}}3c; color: {{item.color}}; padding: 8rpx; border-radius: 30rpx;margin-top: 8rpx;font-size: 12px;">今天</view>
<view class="mt-16 font-12">{{item.remark}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>