flower-mp/pages/index/info.wxml
sdaduanbilei ca702e0c4b change ui
2025-11-14 14:12:57 +08:00

92 lines
4.6 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: -100rpx;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 class="flex flex-center flex-justify-start">
<view class="font-16 bold ">{{info.name}}</view>
<view class="font-12 grey ml-16">种植于 {{info.plantTimeStr}} 已种植 {{info.plantDays}} 天</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 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">
<view class="font-14 bold ml-16">{{info.growthHabit}}</view>
</view>
</view>
<view class="mt-16">
<view class="grid">
<view wx:for="{{info.todayCares}}" class="full-width" data-item="{{item}}" bind:tap="make">
<view style="background-color: {{item.color}}3C; border-radius: 16rpx; width: 100%;">
<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: 10rpx;" 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="20"></t-icon>
</view>
<view style="width: 1px; background-color: #F6F6F6; height: 65%; 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>{{item.name}}</view>
<view class="font-12 grey mt-16 mb-16">{{item.careTimeStr}}</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>