```
<template>
<view class="container">
<!
-- 日期筛选
-->
<view class="filter
-box">
<picker mode="date" @change="startDateChange">
<view class="date
-picker">开始日期：{{ startDate || '请选择' }}</view>
</picker>
<picker mode="date" @change="endDateChange">
<view class="date
-picker">结束日期：{{ endDate || '请选择' }}</view>
</picker>
<button @tap="filterData" class="filter
-btn">筛选</button>
</view>
<!
-- 考核进度
-->
<view class="progress
-card">
<text class="title">个人考核进度</text>
<progress :percent="progress" stroke
-width="6" activeColor="#4cd964"/>
<text class="progress
-text">{{ progress }}%（当前阶段：{{ currentStage }}）</text>
</view>
<!
-- 选项卡切换
-->
<view class="
tabs">
<text
:class="['
tab-item', active
Tab === 0 ? 'active' : '']"
@tap="switch
Tab(0)">订单记录</text>
<text
:class="['
tab-item', active
Tab === 1 ? 'active' : '']"
@tap="switch
Tab(1)">消费记录</text>
</view>
<!
-- 记录列表
-->
<scroll
-view
scroll
-y
class="list
-container"
@scrolltolower="loadMore">
<view v
-if="active
Tab === 0" class="list">
<view v
-for="(item, index) in filteredOrders" :key="index" class="list
-item">
<text class="order
-no">订单号：{{ item.orderNo }}</text>
<text class="order
-date">{{ item.date }}</text>
<text class="order
-amount">金额：¥{{ item.amount }}</text>
</view>
<view v
-if="!filteredOrders.length" class="empty
-tip">暂无订单记录</view>
</view>
<view v
-if="active
Tab === 1" class="list">
<view v
-for="(item, index) in filteredConsumptions" :key="index" class="list
-item">
<text class="consume
-type">{{ item.type }}</text>
<text class="consume
-date">{{ item.date }}</text>
<text class="consume
-amount">¥{{ item.amount }}</text>
</view>
<view v
-if="!filteredConsumptions.length" class="empty
-tip">暂无消费记录</view>
</view>
<view v
-if="loading" class="loading">加载中...</view>
</scroll
-view>
</view>
</template>
<style lang="scss">
.container {
padding: 20rpx;
}
.filter
-box {
display: flex;
align
-items: center;
margin
-bottom: 20rpx;
.date
-picker {
flex: 1;
padding: 15rpx;
border: 1rpx solid #eee;
margin
-right: 10rpx;
border
-radius: 8rpx;
}
.filter
-btn {
width: 150rpx;
height: 70rpx;
line
-height: 70rpx;
}
}
.progress
-card {
background: #fff;
padding: 30rpx;
border
-radius: 16rpx;
margin
-bottom: 30rpx;
box
-shadow: 0 2rpx 12rpx rgba(0,0,0,0.1);
.title {
display: block;
font
-size: 34rpx;
margin
-bottom: 20rpx;
}
.progress
-text {
display: block;
margin
-top: 15rpx;
color: #666;
}
}
.
tabs {
display: flex;
border
-bottom: 1rpx solid #eee;
.
tab-item {
flex: 1;
text
-align: center;
padding: 25rpx;
color: #666;
&.active {
color: #007AFF;
border
-bottom: 4rpx solid #007AFF;
}
}
}
.list
-container {
height: calc(100vh
- 400rpx);
.list
-item {
padding: 30rpx;
background: #fff;
margin
-bottom: 20rpx;
border
-radius: 12rpx;
display: flex;
justify
-content:
space-between;
box
-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
.order
-amount, .consume
-amount {
color: #e64340;
font
-weight: bold;
}
}
.empty
-tip {
text
-align: center;
color: #999;
padding: 50rpx;
}
.loading {
text
-align: center;
padding: 30rpx;
color: #999;
}
}
</style>```我需要消费记录样式和订单记录样式帮我在我这个代码写一下
本文介绍了如何在SourceInsight中设置TAB显示、将输入的TAB转换为空格以及将已存在的TAB符转换为空格的方法。
扫一扫
427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
