You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
5.2 KiB
122 lines
5.2 KiB
<template>
|
|
<view class="fate-page">
|
|
<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view>
|
|
<view class="nav">
|
|
<view class="back" @tap="back">‹</view>
|
|
<view class="title">今日缘分</view>
|
|
<view class="ghost"></view>
|
|
</view>
|
|
<view class="hero">
|
|
<view class="hero-title">今天的 {{ todayCount }} 次轻连接</view>
|
|
<view class="hero-sub">它们不会变成关系压力，只留下一点情绪轨迹。</view>
|
|
</view>
|
|
<view class="timeline">
|
|
<view class="line"></view>
|
|
<view class="fate-card" v-for="item in fates" :key="item.id">
|
|
<view class="node" :class="item.type">{{ item.type }}</view>
|
|
<view class="card-main">
|
|
<view class="card-top">
|
|
<text class="name">{{ item.name }}</text>
|
|
<text class="time">{{ item.time }}</text>
|
|
</view>
|
|
<view class="feeling">{{ item.feeling }}</view>
|
|
<view class="remeet" v-if="item.remeet">24 小时内可再遇见一次</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="empty">{{ loading ? '正在加载...' : (hasMore ? '上滑加载更多缘分' : (fates.length ? '今天先到这里' : '今天还没有轻连接')) }}</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { pageIeRecords } from '@/common/ieApi.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
menuButtonInfo: { top: 44 },
|
|
fates: [],
|
|
pageNumber: 1,
|
|
pageSize: 10,
|
|
hasMore: true,
|
|
loading: false
|
|
}
|
|
},
|
|
computed: {
|
|
todayCount() {
|
|
const today = new Date().toDateString()
|
|
return this.fates.filter(item => item.rawDate && item.rawDate.toDateString() === today).length
|
|
}
|
|
},
|
|
onLoad() {
|
|
if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
this.loadFates()
|
|
},
|
|
onReachBottom() {
|
|
this.loadFates()
|
|
},
|
|
methods: {
|
|
formatTime(value) {
|
|
if (!value) return ''
|
|
const date = new Date(value)
|
|
if (Number.isNaN(date.getTime())) return ''
|
|
const now = new Date()
|
|
if (date.toDateString() === now.toDateString()) {
|
|
return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
|
}
|
|
return `${date.getMonth() + 1}/${date.getDate()}`
|
|
},
|
|
normalizeRecord(item) {
|
|
const date = new Date(item.createTime)
|
|
return {
|
|
id: item.id,
|
|
type: item.mode || 'i',
|
|
name: item.anonymousName || '半匿名漂流者',
|
|
time: this.formatTime(item.createTime),
|
|
rawDate: Number.isNaN(date.getTime()) ? null : date,
|
|
feeling: item.feeling || item.summary || '这次连接只留下了一点情绪轨迹。',
|
|
remeet: item.remeetAvailable === 1
|
|
}
|
|
},
|
|
async loadFates() {
|
|
if (this.loading || !this.hasMore) return
|
|
this.loading = true
|
|
try {
|
|
const page = await pageIeRecords(this.pageNumber, this.pageSize)
|
|
const list = page && page.records ? page.records.map(this.normalizeRecord) : []
|
|
const exists = new Set(this.fates.map(item => item.id))
|
|
this.fates = this.fates.concat(list.filter(item => !exists.has(item.id)))
|
|
this.hasMore = page ? (page.current || this.pageNumber) < (page.pages || this.pageNumber) : false
|
|
this.pageNumber += 1
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
back() { uni.redirectTo({ url: '/package1/ieBrowser/index' }) }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page { background: #f7f9ff; }
|
|
.fate-page { min-height: 100vh; padding: 0 30rpx 60rpx; box-sizing: border-box; color: #151a2d; background: radial-gradient(circle at 84% 12%, rgba(139,124,255,.22), transparent 300rpx), linear-gradient(180deg, #fbfdff, #eef4ff); }
|
|
.nav { height: 90rpx; display: flex; align-items: center; }
|
|
.back, .ghost { width: 70rpx; font-size: 56rpx; color: rgba(21,26,45,.64); }
|
|
.title { flex: 1; text-align: center; font-size: 31rpx; font-weight: 800; }
|
|
.hero { margin-top: 22rpx; padding: 36rpx; border-radius: 44rpx; background: rgba(255,255,255,.58); border: 1rpx solid rgba(255,255,255,.86); backdrop-filter: blur(24rpx); }
|
|
.hero-title { font-size: 44rpx; font-weight: 800; }
|
|
.hero-sub { margin-top: 14rpx; color: rgba(21,26,45,.52); font-size: 25rpx; line-height: 40rpx; }
|
|
.timeline { position: relative; margin-top: 36rpx; }
|
|
.line { position: absolute; left: 37rpx; top: 30rpx; bottom: 30rpx; width: 2rpx; background: rgba(139,124,255,.2); }
|
|
.fate-card { position: relative; display: flex; margin-bottom: 24rpx; }
|
|
.node { z-index: 1; width: 76rpx; height: 76rpx; border-radius: 50%; text-align: center; line-height: 76rpx; font-size: 30rpx; font-weight: 800; }
|
|
.node.i { color: #fff; background: #7771d8; }
|
|
.node.e { color: #11162a; background: #a9ffe7; }
|
|
.card-main { flex: 1; margin-left: 20rpx; padding: 28rpx; border-radius: 34rpx; background: rgba(255,255,255,.64); box-shadow: 0 22rpx 54rpx rgba(96,112,160,.12); }
|
|
.card-top { display: flex; }
|
|
.name { flex: 1; font-size: 28rpx; font-weight: 800; }
|
|
.time { color: rgba(21,26,45,.4); font-size: 22rpx; }
|
|
.feeling { margin-top: 14rpx; color: rgba(21,26,45,.62); font-size: 25rpx; line-height: 40rpx; }
|
|
.remeet { display: inline-block; margin-top: 18rpx; padding: 8rpx 18rpx; border-radius: 999rpx; color: #11162a; background: #dffef4; font-size: 21rpx; }
|
|
.empty { margin-top: 32rpx; text-align: center; color: rgba(21,26,45,.36); font-size: 23rpx; }
|
|
</style>
|
|
|