hookehuyr

feat(积分页面): 添加日期和搜索框的清除功能并优化时间显示

添加清除按钮到日期选择器和搜索框,方便用户重置输入
优化时间显示格式为 YYYY-MM-DD HH:mm:ss
调整分页参数从每页10条改为5条
......@@ -39,29 +39,35 @@
<div class="p-3 bg-white space-y-3">
<!-- 日期选择 -->
<div class="flex items-center justify-between space-x-2">
<div class="flex-1 bg-white border border-gray-200 rounded-lg h-9 flex items-center px-3 cursor-pointer"
<div class="flex-1 bg-white border border-gray-200 rounded-lg h-9 flex items-center px-3 cursor-pointer relative"
@click="showStartDatePicker = true">
<van-icon name="calendar-o" class="text-gray-400 mr-2" />
<span :class="startDate ? 'text-gray-800' : 'text-gray-400'" class="text-sm truncate">
<span :class="startDate ? 'text-gray-800' : 'text-gray-400'" class="text-sm truncate pr-4">
{{ startDate || '开始日期' }}
</span>
<van-icon v-if="startDate" name="clear" class="text-gray-300 absolute right-2 z-10"
@click.stop="clearStartDate" />
</div>
<span class="text-gray-400 text-sm">至</span>
<div class="flex-1 bg-white border border-gray-200 rounded-lg h-9 flex items-center px-3 cursor-pointer"
<div class="flex-1 bg-white border border-gray-200 rounded-lg h-9 flex items-center px-3 cursor-pointer relative"
@click="showEndDatePicker = true">
<van-icon name="calendar-o" class="text-gray-400 mr-2" />
<span :class="endDate ? 'text-gray-800' : 'text-gray-400'" class="text-sm truncate">
<span :class="endDate ? 'text-gray-800' : 'text-gray-400'" class="text-sm truncate pr-4">
{{ endDate || '结束日期' }}
</span>
<van-icon v-if="endDate" name="clear" class="text-gray-300 absolute right-2 z-10"
@click.stop="clearEndDate" />
</div>
</div>
<!-- 搜索框 -->
<div class="bg-white border border-gray-200 rounded-lg h-9 flex items-center px-3">
<div class="bg-white border border-gray-200 rounded-lg h-9 flex items-center px-3 relative">
<van-icon name="search" class="text-gray-400 mr-2" size="16" />
<input v-model="searchKeyword" type="text" placeholder="搜索活动或课程名称"
class="flex-1 bg-transparent text-sm text-gray-800 placeholder-gray-400 outline-none"
@keyup.enter="onRefresh" />
class="flex-1 bg-transparent text-sm text-gray-800 placeholder-gray-400 outline-none pr-6"
@keyup.enter="onRefresh" @blur="onRefresh" />
<van-icon v-if="searchKeyword" name="clear" class="text-gray-300 absolute right-2 z-10"
@click="clearSearch" />
</div>
</div>
</div>
......@@ -76,7 +82,7 @@
</div>
<div class="flex justify-between items-center">
<div class="flex flex-col">
<span class="text-gray-400 text-xs mb-1">{{ item.event_time }}</span>
<span class="text-gray-400 text-xs mb-1">{{ formatTime(item.event_time) }}</span>
<span class="text-gray-400 text-xs">{{ item.event_type_desc }}</span>
</div>
<div class="text-lg font-bold"
......@@ -117,6 +123,11 @@ const headerBg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/962@2x.png'
const bottleImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/pz02@2x.png'
const indicatorImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/xian@2x.png'
const formatTime = (time) => {
if (!time) return ''
return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}
useTitle('我的积分')
const route = useRoute()
const router = useRouter()
......@@ -141,8 +152,8 @@ const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const page = ref(0)
const limit = ref(10)
const page = ref(-1)
const limit = ref(5)
const balance = ref('0')
// 切换Tab
......@@ -174,6 +185,23 @@ const onConfirmEndDate = ({ selectedValues }) => {
onRefresh()
}
// 清除日期
const clearStartDate = () => {
startDate.value = ''
onRefresh()
}
const clearEndDate = () => {
endDate.value = ''
onRefresh()
}
// 清除搜索
const clearSearch = () => {
searchKeyword.value = ''
onRefresh()
}
// 加载列表
const onLoad = async () => {
const nextPage = page.value + 1
......@@ -227,7 +255,7 @@ const onLoad = async () => {
const onRefresh = () => {
finished.value = false
loading.value = true
page.value = 0
page.value = -1
refreshing.value = true
onLoad()
}
......