117 lines
3.8 KiB
Vue
117 lines
3.8 KiB
Vue
<template>
|
|
<view class="wrap">
|
|
<view v-if="error" class="error">{{ error }}</view>
|
|
<view v-if="records.length === 0 && !loading" class="empty">暂无积分记录</view>
|
|
<view v-for="item in records" :key="item.id || item.time || item.created_at" class="record">
|
|
<view class="record-main">
|
|
<view class="record-title">{{ item.title || item.reason || '变更' }}</view>
|
|
<view class="record-time">{{ formatTime(item.time || item.created_at) }}</view>
|
|
</view>
|
|
<view class="record-amount" :class="{ inc: (item.change || item.amount || 0) > 0, dec: (item.change || item.amount || 0) < 0 }">
|
|
{{ (item.change ?? item.amount ?? 0) > 0 ? '+' : '' }}{{ item.change ?? item.amount ?? 0 }}
|
|
</view>
|
|
</view>
|
|
<view v-if="loadingMore" class="loading">加载中...</view>
|
|
<view v-else-if="!hasMore && records.length > 0" class="end">没有更多了</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
|
|
import { getPointsRecords } from '../../api/appUser'
|
|
|
|
const records = ref([])
|
|
const loading = ref(false)
|
|
const loadingMore = ref(false)
|
|
const error = ref('')
|
|
const page = ref(1)
|
|
const pageSize = ref(20)
|
|
const hasMore = ref(true)
|
|
|
|
function formatTime(t) {
|
|
if (!t) return ''
|
|
const d = typeof t === 'string' ? new Date(t) : new Date(t)
|
|
const y = d.getFullYear()
|
|
const m = String(d.getMonth() + 1).padStart(2, '0')
|
|
const day = String(d.getDate()).padStart(2, '0')
|
|
const hh = String(d.getHours()).padStart(2, '0')
|
|
const mm = String(d.getMinutes()).padStart(2, '0')
|
|
return `${y}-${m}-${day} ${hh}:${mm}`
|
|
}
|
|
|
|
async function fetchRecords(append = false) {
|
|
const user_id = uni.getStorageSync('user_id')
|
|
const token = uni.getStorageSync('token')
|
|
const phoneBound = !!uni.getStorageSync('phone_bound')
|
|
if (!user_id || !token || !phoneBound) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '请先登录并绑定手机号',
|
|
confirmText: '去登录',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.navigateTo({ url: '/pages/login/index' })
|
|
}
|
|
}
|
|
})
|
|
return
|
|
}
|
|
if (append) {
|
|
if (!hasMore.value || loadingMore.value) return
|
|
loadingMore.value = true
|
|
page.value = page.value + 1
|
|
} else {
|
|
loading.value = true
|
|
page.value = 1
|
|
hasMore.value = true
|
|
}
|
|
error.value = ''
|
|
try {
|
|
const list = await getPointsRecords(user_id, page.value, pageSize.value)
|
|
const items = Array.isArray(list) ? list : (list && list.items) || []
|
|
const total = (list && list.total) || 0
|
|
if (append) {
|
|
records.value = records.value.concat(items)
|
|
} else {
|
|
records.value = items
|
|
}
|
|
if (total) {
|
|
hasMore.value = records.value.length < total
|
|
} else {
|
|
hasMore.value = items.length === pageSize.value
|
|
}
|
|
} catch (e) {
|
|
error.value = e && (e.message || e.errMsg) || '获取积分记录失败'
|
|
} finally {
|
|
if (append) {
|
|
loadingMore.value = false
|
|
} else {
|
|
loading.value = false
|
|
}
|
|
}
|
|
}
|
|
|
|
onLoad(() => {
|
|
fetchRecords(false)
|
|
})
|
|
|
|
onReachBottom(() => {
|
|
fetchRecords(true)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.wrap { padding: 24rpx }
|
|
.record { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 12rpx; padding: 20rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04) }
|
|
.record-main { display: flex; flex-direction: column }
|
|
.record-title { font-size: 28rpx; color: #333 }
|
|
.record-time { font-size: 24rpx; color: #999; margin-top: 6rpx }
|
|
.record-amount { font-size: 32rpx }
|
|
.record-amount.inc { color: #18a058 }
|
|
.record-amount.dec { color: #d03050 }
|
|
.empty { text-align: center; color: #999; margin-top: 40rpx }
|
|
.error { color: #e43; margin-bottom: 12rpx }
|
|
.loading { text-align: center; color: #666; margin: 20rpx 0 }
|
|
.end { text-align: center; color: #999; margin: 20rpx 0 }
|
|
</style> |