chore: 重写初始提交(清空历史,整理后全量提交)
This commit is contained in:
ywxapp
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<scroll-view direction="vertical" :show-scrollbar="false" style="flex:1;"
|
||||
:refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
|
||||
<!-- 汇总卡片 -->
|
||||
<view class="summary-card">
|
||||
<view class="summary-item">
|
||||
<text class="summary-num">{{ totalCount }}</text>
|
||||
<text class="summary-label">收到礼物</text>
|
||||
</view>
|
||||
<view class="summary-divider"></view>
|
||||
<view class="summary-item">
|
||||
<text class="summary-num">{{ totalValue }}</text>
|
||||
<text class="summary-label">礼物价值(金币)</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 礼物记录 -->
|
||||
<view class="list">
|
||||
<view v-for="(item, index) in records" :key="index" class="gift-item">
|
||||
<view class="gift-icon">
|
||||
<uni-icons type="gift-filled" size="30" color="#FF6B6B"></uni-icons>
|
||||
</view>
|
||||
<view class="gift-info">
|
||||
<text class="gift-name">{{ item.gift_name }} x{{ item.count }}</text>
|
||||
<text v-if="item.message.length > 0" class="gift-msg">{{ item.message }}</text>
|
||||
<text class="gift-time">{{ formatTime(item.create_at) }}</text>
|
||||
</view>
|
||||
<view class="gift-value">
|
||||
<text class="value-num">+{{ item.total_price }}</text>
|
||||
<text class="value-label">金币</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="records.length === 0 && !loading" class="empty-state">
|
||||
<uni-icons type="gift" size="60" color="#ddd"></uni-icons>
|
||||
<text class="empty-text">还没有收到礼物哦</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import Api from '@/common/api-service.uts'
|
||||
|
||||
type IGiftRecord = {
|
||||
id : number
|
||||
sender_uid : number
|
||||
receiver_uid : number
|
||||
gift_id : number
|
||||
gift_name : string
|
||||
price : number
|
||||
count : number
|
||||
total_price : number
|
||||
message : string
|
||||
create_at : number
|
||||
}
|
||||
|
||||
const records = reactive<IGiftRecord[]>([])
|
||||
const loading = ref<boolean>(false)
|
||||
const refreshing = ref<boolean>(false)
|
||||
|
||||
const totalCount = computed<number>(() => {
|
||||
let c = 0
|
||||
records.forEach((r : IGiftRecord) => { c += r.count })
|
||||
return c
|
||||
})
|
||||
const totalValue = computed<number>(() => {
|
||||
let v = 0
|
||||
records.forEach((r : IGiftRecord) => { v += r.total_price })
|
||||
return v
|
||||
})
|
||||
|
||||
function loadData() {
|
||||
if (loading.value) return
|
||||
loading.value = true
|
||||
Api.gift.received({})
|
||||
.then((res : UTSJSONObject) => {
|
||||
const list = (res as Array<IGiftRecord>) ?? []
|
||||
records.splice(0, records.length)
|
||||
list.forEach((r : IGiftRecord) => records.push(r))
|
||||
})
|
||||
.catch(() => {
|
||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
refreshing.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function onRefresh() {
|
||||
refreshing.value = true
|
||||
loadData()
|
||||
}
|
||||
|
||||
function formatTime(ts : number) : string {
|
||||
if (ts <= 0) return ''
|
||||
const d = new Date(ts * 1000)
|
||||
const m = d.getMonth() + 1
|
||||
const day = d.getDate()
|
||||
const h = d.getHours()
|
||||
const min = d.getMinutes()
|
||||
const pad = (n : number) : string => n < 10 ? '0' + n : '' + n
|
||||
return `${m}-${pad(day)} ${pad(h)}:${pad(min)}`
|
||||
}
|
||||
|
||||
onMounted(() => { loadData() })
|
||||
onShow(() => { loadData() })
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
flex: 1;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
margin: 24rpx 30rpx;
|
||||
padding: 40rpx 0;
|
||||
background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.summary-num {
|
||||
font-size: 44rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
font-size: 24rpx;
|
||||
color: #ffe;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.summary-divider {
|
||||
width: 2rpx;
|
||||
height: 60rpx;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.gift-item {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
padding: 24rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.gift-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
background-color: #fff0ec;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.gift-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gift-name {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gift-msg {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.gift-time {
|
||||
font-size: 22rpx;
|
||||
color: #bbb;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.gift-value {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.value-num {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #FF6B6B;
|
||||
}
|
||||
|
||||
.value-label {
|
||||
font-size: 22rpx;
|
||||
color: #FF6B6B;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #bbb;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user