161 lines
4.4 KiB
Vue
161 lines
4.4 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- <uni-nav-bar left-icon="left" title="我的兑换" fixed color="#8B2316" height="180rpx" :border="false" backgroundColor="#ffffff" @clickLeft="goBack" /> -->
|
||
<!-- <navBar :title="'我的兑换'" /> -->
|
||
<view class="navbox">
|
||
<view class="status_bar"></view>
|
||
<uni-nav-bar
|
||
left-icon="left"
|
||
title="我的兑换"
|
||
@clickLeft="goBack"
|
||
color="#8B2316"
|
||
:border="false"
|
||
backgroundColor="#eeeeee"
|
||
>
|
||
|
||
</uni-nav-bar>
|
||
</view>
|
||
<scroll-view
|
||
scroll-y
|
||
class="content"
|
||
refresher-enabled
|
||
:refresher-triggered="refresherTriggered"
|
||
@refresherrefresh="onRefresh"
|
||
@scrolltolower="onReachBottom"
|
||
:lower-threshold="80"
|
||
>
|
||
<empty v-if="!orderList.length" />
|
||
<!-- <view v-if="!orderList.length" class="empty">暂无兑换记录</view> -->
|
||
<view v-for="item in orderList" :key="item.uuid" class="card" @click="goDetail(item)">
|
||
<view class="row" style="align-items: flex-start;">
|
||
<text class="label">兑换物品：</text>
|
||
<text class="value oneline">{{ 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" >{{ 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'
|
||
import navBar from '@/components/navBar/navBar.vue'
|
||
import empty from '@/components/empty/empty.vue'
|
||
import navTo from '@/utils/navTo.js'
|
||
import { onLoad,onBackPress} from '@dcloudio/uni-app'
|
||
const orderList = ref([])
|
||
const page = ref(1)
|
||
const pageSize = ref(10)
|
||
const isLoading = ref(false)
|
||
const noMore = ref(false)
|
||
const refresherTriggered = ref(false);
|
||
const from = ref('')
|
||
|
||
onLoad((options) => {
|
||
if(options.from){
|
||
from.value = options.from
|
||
}
|
||
})
|
||
const goBack = () => {
|
||
if(from.value){
|
||
plus.runtime.quit();
|
||
}else{
|
||
uni.navigateBack();
|
||
}
|
||
}
|
||
onBackPress(() => {
|
||
if(from.value){
|
||
plus.runtime.quit();
|
||
return true;
|
||
}
|
||
});
|
||
const goDetail=(item)=>{
|
||
navTo({
|
||
url: `/pages_goods/exchange/exchangeDetail?id=${item.uuid}`
|
||
})
|
||
}
|
||
|
||
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 ) return '待支付'
|
||
if (s === 2 ) return '已支付'
|
||
if (s === 3) return '已取消'
|
||
if (s === 4) return '已发货'
|
||
if (s === 5) return '已收货'
|
||
if(s === 6) return '订单异常'
|
||
|
||
}
|
||
|
||
const statusClass = (s) => {
|
||
return (s === 1 || s === 2) ? 'paid' : 'unpaid'
|
||
}
|
||
|
||
onMounted(() => {
|
||
page.value = 1
|
||
noMore.value = false
|
||
orderList.value = []
|
||
fetchList()
|
||
})
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page { min-height: 100vh; background: #fff; }
|
||
.content { position: absolute; top: calc(var(--status-bar-height) + 44px); bottom: 0; left: 0; right: 0; background: #fff; }
|
||
.card { background: #fff; padding: 24rpx; border-bottom: 2rpx solid #eee; }
|
||
.row { display: flex; align-items: center; padding: 10rpx 0; }
|
||
.label { color: #333; white-space: nowrap;font-size: 30rpx; width: 157rpx; }
|
||
.value { color: #666; font-size: 30rpx; }
|
||
.status { font-size: 30rpx; color: #666;}
|
||
.status.paid { color: #666; }
|
||
.status.unpaid { color: #666; }
|
||
.list-footer { text-align: center; color: #999; padding: 24rpx 0; }
|
||
.empty { text-align: center; color: #999; padding: 40rpx 0; }
|
||
</style>
|
||
|