79 lines
2.4 KiB
Plaintext
79 lines
2.4 KiB
Plaintext
<!--pages/countdown/countdown.wxml-->
|
||
<view class="container">
|
||
<!-- 添加倒计时 -->
|
||
<view class="add-section">
|
||
<view class="add-title">添加新倒计时</view>
|
||
<view class="add-form">
|
||
<input
|
||
class="form-input"
|
||
placeholder="事件名称"
|
||
value="{{newEventName}}"
|
||
bindinput="onNameInput"
|
||
/>
|
||
<picker
|
||
mode="date"
|
||
value="{{newEventDate}}"
|
||
bindchange="onDateChange"
|
||
>
|
||
<view class="date-picker">
|
||
{{newEventDate || '选择日期'}}
|
||
</view>
|
||
</picker>
|
||
<button class="add-btn" bindtap="onAddCountdown">添加</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 倒计时列表 -->
|
||
<view class="countdown-list">
|
||
<view
|
||
class="countdown-card"
|
||
wx:for="{{countdowns}}"
|
||
wx:key="id"
|
||
style="border-left-color: {{item.color}};"
|
||
>
|
||
<view class="card-header">
|
||
<view class="event-name">{{item.name}}</view>
|
||
<view
|
||
class="delete-btn"
|
||
data-id="{{item.id}}"
|
||
bindtap="onDelete"
|
||
>
|
||
×
|
||
</view>
|
||
</view>
|
||
|
||
<view class="event-date">📅 {{item.date}}</view>
|
||
|
||
<view class="countdown-display" wx:if="{{!item.isExpired}}">
|
||
<view class="time-block">
|
||
<view class="time-value" style="background-color: {{item.color}};">{{item.days}}</view>
|
||
<view class="time-label">天</view>
|
||
</view>
|
||
<view class="time-block">
|
||
<view class="time-value" style="background-color: {{item.color}};">{{item.hours}}</view>
|
||
<view class="time-label">时</view>
|
||
</view>
|
||
<view class="time-block">
|
||
<view class="time-value" style="background-color: {{item.color}};">{{item.minutes}}</view>
|
||
<view class="time-label">分</view>
|
||
</view>
|
||
<view class="time-block">
|
||
<view class="time-value" style="background-color: {{item.color}};">{{item.seconds}}</view>
|
||
<view class="time-label">秒</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="expired-tip" wx:if="{{item.isExpired}}">
|
||
<text class="expired-icon">⏰</text>
|
||
<text class="expired-text">已到期</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty-state" wx:if="{{countdowns.length === 0}}">
|
||
<text class="empty-icon">⏰</text>
|
||
<text class="empty-text">暂无倒计时，快来添加一个吧</text>
|
||
</view>
|
||
</view>
|
||
</view>
|