114 lines
3.3 KiB
Vue
114 lines
3.3 KiB
Vue
<template>
|
||
<view class="page">
|
||
<uni-nav-bar left-icon="left" title="我的兑换" fixed color="#8B2316" height="180rpx" :border="false" backgroundColor="#ffffff" @clickLeft="goBack" />
|
||
|
||
<scroll-view
|
||
scroll-y
|
||
class="content"
|
||
refresher-enabled
|
||
:refresher-triggered="refresherTriggered"
|
||
@refresherrefresh="onRefresh"
|
||
@scrolltolower="onReachBottom"
|
||
:lower-threshold="80"
|
||
>
|
||
<view v-if="!orderList.length" class="empty">暂无兑换记录</view>
|
||
<view v-for="item in orderList" :key="item.uuid" class="card">
|
||
<view class="row">
|
||
<text class="label">兑换物品：</text>
|
||
<text class="value">{{ item.goods_name }}</text>
|
||
</view>
|
||
<view class="row">
|
||
<text class="label">兑换时间：</text>
|
||
<text class="value">{{ formatDate(item.create_date) }}</text>
|
||
</view>
|
||
<view class="row">
|
||
<text class="label">状态：</text>
|
||
<text class="status" :class="statusClass(item.status)">{{ statusText(item.status) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="list-footer" v-if="isLoading">加载中...</view>
|
||
<view class="list-footer" v-else-if="noMore && orderList.length">没有更多了</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import goods_api from '@/api/goods_api'
|
||
import { ref, onMounted } from 'vue'
|
||
const orderList = ref([])
|
||
const page = ref(1)
|
||
const pageSize = ref(10)
|
||
const isLoading = ref(false)
|
||
const noMore = ref(false)
|
||
const refresherTriggered = ref(false)
|
||
|
||
const fetchList = () => {
|
||
if (isLoading.value || noMore.value) return
|
||
isLoading.value = true
|
||
goods_api.getGoodsOrderList({ page: page.value, pageSize: pageSize.value }).then(res => {
|
||
if (res.code == 200 && res.data) {
|
||
const list = Array.isArray(res.data.list) ? res.data.list : []
|
||
orderList.value = page.value === 1 ? list : orderList.value.concat(list)
|
||
noMore.value = !!res.data.isLastPage
|
||
page.value = (res.data.pageNum || page.value) + 1
|
||
}
|
||
}).finally(() => {
|
||
isLoading.value = false
|
||
refresherTriggered.value = false
|
||
})
|
||
}
|
||
|
||
const onRefresh = () => {
|
||
refresherTriggered.value = true
|
||
noMore.value = false
|
||
page.value = 1
|
||
fetchList()
|
||
}
|
||
|
||
const onReachBottom = () => {
|
||
fetchList()
|
||
}
|
||
|
||
const formatDate = (sec) => {
|
||
if (!sec) return ''
|
||
const d = new Date(Number(sec) * 1000)
|
||
const y = d.getFullYear()
|
||
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||
const day = String(d.getDate()).padStart(2, '0')
|
||
return `${y}-${m}-${day}`
|
||
}
|
||
|
||
const statusText = (s) => {
|
||
if (s === 1 || s === 2) return '已支付'
|
||
if (s === 3) return '待支付'
|
||
return ''
|
||
}
|
||
|
||
const statusClass = (s) => {
|
||
return (s === 1 || s === 2) ? 'paid' : 'unpaid'
|
||
}
|
||
|
||
onMounted(() => {
|
||
page.value = 1
|
||
noMore.value = false
|
||
orderList.value = []
|
||
fetchList()
|
||
})
|
||
const goBack = () => uni.navigateBack()
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page { min-height: 100vh; background: #fff; }
|
||
.content { position: absolute; top: 180rpx; bottom: 0; left: 0; right: 0; background: #fff; }
|
||
.card { background: #fff; padding: 24rpx; border-bottom: 16rpx solid #f5f5f5; }
|
||
.row { display: flex; align-items: center; padding: 10rpx 0; }
|
||
.label { color: #333; font-size: 30rpx; width: 180rpx; }
|
||
.value { color: #333; font-size: 30rpx; }
|
||
.status { font-size: 30rpx; }
|
||
.status.paid { color: #333; }
|
||
.status.unpaid { color: #333; }
|
||
.list-footer { text-align: center; color: #999; padding: 24rpx 0; }
|
||
.empty { text-align: center; color: #999; padding: 40rpx 0; }
|
||
</style>
|
||
|