|
|
|
|
<template>
|
|
|
|
|
<view class="universe-page">
|
|
|
|
|
<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view>
|
|
|
|
|
<view class="float-bar">
|
|
|
|
|
<view class="home-back" @tap="backHome">
|
|
|
|
|
<text class="home-back-icon">‹</text>
|
|
|
|
|
<text>返回首页</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="profile">
|
|
|
|
|
<image class="orb-img" v-if="profile.avatarUrl" :src="profile.avatarUrl" mode="aspectFill"></image>
|
|
|
|
|
<view class="orb" v-else>{{ profile.avatarText || '我' }}</view>
|
|
|
|
|
<view class="name">{{ profile.anonymousName || '半匿名漂流者' }}</view>
|
|
|
|
|
<view class="desc">{{ profile.intro || '不经营人设，不展示粉丝。这里只记录你更喜欢怎样被陪伴。' }}</view>
|
|
|
|
|
<view class="edit-profile" @tap="editProfile">编辑资料</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="stats">
|
|
|
|
|
<view><text>{{ profile.dailyQuota || 3 }}</text><text>今日机会</text></view>
|
|
|
|
|
<view><text>{{ profile.currentMode || 'i' }}</text><text>当前状态</text></view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="tag-panel" v-if="profile.interestTags && profile.interestTags.length">
|
|
|
|
|
<view class="tag" v-for="item in profile.interestTags" :key="item">{{ item }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="persona-panel" v-if="profile.personaImages && profile.personaImages.length">
|
|
|
|
|
<view class="panel-title">人格卡片</view>
|
|
|
|
|
<scroll-view scroll-x class="persona-scroll">
|
|
|
|
|
<image class="persona-image" v-for="(img, index) in profile.personaImages" :key="img" :src="img" mode="aspectFill" @tap="previewPersona(index)"></image>
|
|
|
|
|
</scroll-view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="panel">
|
|
|
|
|
<view class="panel-title">情绪轨道</view>
|
|
|
|
|
<view class="orbit-row" v-for="item in orbit" :key="item.day">
|
|
|
|
|
<view class="day">{{ item.day }}</view>
|
|
|
|
|
<view class="bar"><view :style="{ width: item.value + '%' }"></view></view>
|
|
|
|
|
<view class="mood">{{ item.mood }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="panel">
|
|
|
|
|
<view class="setting" @tap="goSettings">
|
|
|
|
|
<view>
|
|
|
|
|
<view class="setting-title">隐私与安全</view>
|
|
|
|
|
<view class="setting-desc">黑名单、举报记录、半匿名规则</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="arrow">›</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<ie-bottom-tab active="universe" :unread-count="unreadCount"></ie-bottom-tab>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getIeProfile, getIeUnreadCount } from '@/common/ieApi.js'
|
|
|
|
|
import IeBottomTab from '@/components/ie-bottom-tab/ie-bottom-tab.vue'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
components: { IeBottomTab },
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
menuButtonInfo: { top: 44 },
|
|
|
|
|
unreadCount: 0,
|
|
|
|
|
unreadTimer: null,
|
|
|
|
|
profile: {},
|
|
|
|
|
orbit: [
|
|
|
|
|
{ day: '今天', value: 72, mood: '轻了一点' },
|
|
|
|
|
{ day: '昨天', value: 48, mood: '安静' },
|
|
|
|
|
{ day: '周六', value: 86, mood: '被听见' }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onLoad(options = {}) {
|
|
|
|
|
if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
|
|
|
|
this.unreadCount = Number(options.unreadCount) || 0
|
|
|
|
|
this.loadProfile()
|
|
|
|
|
},
|
|
|
|
|
onShow() {
|
|
|
|
|
this.startUnreadTimer()
|
|
|
|
|
},
|
|
|
|
|
onHide() {
|
|
|
|
|
this.stopUnreadTimer()
|
|
|
|
|
},
|
|
|
|
|
onUnload() {
|
|
|
|
|
this.stopUnreadTimer()
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
startUnreadTimer() {
|
|
|
|
|
if (this.unreadTimer) return
|
|
|
|
|
this.unreadTimer = setInterval(() => {
|
|
|
|
|
this.refreshUnreadCount()
|
|
|
|
|
}, 15000)
|
|
|
|
|
},
|
|
|
|
|
stopUnreadTimer() {
|
|
|
|
|
if (!this.unreadTimer) return
|
|
|
|
|
clearInterval(this.unreadTimer)
|
|
|
|
|
this.unreadTimer = null
|
|
|
|
|
},
|
|
|
|
|
async refreshUnreadCount() {
|
|
|
|
|
const count = await getIeUnreadCount()
|
|
|
|
|
if (count === null || count === undefined) return
|
|
|
|
|
this.unreadCount = Number(count) || 0
|
|
|
|
|
},
|
|
|
|
|
async loadProfile() {
|
|
|
|
|
const profile = await getIeProfile()
|
|
|
|
|
if (profile) this.profile = profile
|
|
|
|
|
},
|
|
|
|
|
backHome() { uni.redirectTo({ url: '/pages/index/index' }) },
|
|
|
|
|
editProfile() { uni.navigateTo({ url: '/package1/ieBrowser/profileSetup?edit=1' }) },
|
|
|
|
|
previewPersona(index) {
|
|
|
|
|
uni.previewImage({ urls: this.profile.personaImages || [], current: this.profile.personaImages[index] })
|
|
|
|
|
},
|
|
|
|
|
goSettings() { uni.navigateTo({ url: '/package1/ieBrowser/settings' }) }
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
page { background: #f7f9ff; }
|
|
|
|
|
.universe-page { min-height: 100vh; padding: 0 32rpx 230rpx; box-sizing: border-box; color: #161b2e; background: radial-gradient(circle at 50% 12%, rgba(169,255,231,.42), transparent 330rpx), radial-gradient(circle at 86% 28%, rgba(255,184,209,.24), transparent 320rpx), linear-gradient(180deg, #fbfdff, #eef4ff 62%, #fff4e8); }
|
|
|
|
|
.float-bar { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; margin-top: 14rpx; }
|
|
|
|
|
.home-back { display: flex; align-items: center; height: 58rpx; padding: 0 22rpx 0 12rpx; border: 1rpx solid rgba(255,255,255,.88); border-radius: 999rpx; color: rgba(22,27,46,.66); background: rgba(255,255,255,.66); backdrop-filter: blur(20rpx); box-shadow: 0 14rpx 36rpx rgba(96,112,160,.12), inset 0 1rpx 0 rgba(255,255,255,.95); font-size: 23rpx; font-weight: 800; }
|
|
|
|
|
.home-back:active { transform: scale(.95); background: rgba(169,255,231,.7); }
|
|
|
|
|
.home-back-icon { margin-right: 6rpx; font-size: 40rpx; line-height: 50rpx; font-weight: 400; }
|
|
|
|
|
.profile { padding-top: 18rpx; text-align: center; }
|
|
|
|
|
.orb,
|
|
|
|
|
.orb-img { width: 148rpx; height: 148rpx; margin: 0 auto; border-radius: 50%; box-shadow: 0 0 80rpx rgba(169,255,231,.18); }
|
|
|
|
|
.orb { text-align: center; line-height: 148rpx; color: #11162a; background: linear-gradient(145deg, #effffb, #a9ffe7); font-size: 48rpx; font-weight: 800; }
|
|
|
|
|
.name { margin-top: 26rpx; font-size: 42rpx; font-weight: 800; }
|
|
|
|
|
.desc { width: 560rpx; margin: 14rpx auto 0; color: rgba(22,27,46,.52); font-size: 24rpx; line-height: 38rpx; }
|
|
|
|
|
.edit-profile { display: inline-block; margin-top: 22rpx; padding: 12rpx 28rpx; border-radius: 999rpx; color: #11162a; background: #a9ffe7; font-size: 23rpx; font-weight: 800; }
|
|
|
|
|
.stats { display: flex; margin-top: 36rpx; padding: 28rpx; border-radius: 36rpx; background: rgba(255,255,255,.62); border: 1rpx solid rgba(255,255,255,.78); box-shadow: 0 20rpx 64rpx rgba(96,112,160,.12); }
|
|
|
|
|
.stats view { flex: 1; text-align: center; }
|
|
|
|
|
.stats text { display: block; }
|
|
|
|
|
.stats text:first-child { font-size: 34rpx; font-weight: 800; }
|
|
|
|
|
.stats text:last-child { margin-top: 8rpx; color: rgba(22,27,46,.42); font-size: 21rpx; }
|
|
|
|
|
.tag-panel { display: flex; flex-wrap: wrap; margin-top: 24rpx; padding: 24rpx; border-radius: 32rpx; background: rgba(255,255,255,.58); border: 1rpx solid rgba(255,255,255,.78); }
|
|
|
|
|
.tag { margin: 0 12rpx 12rpx 0; padding: 10rpx 18rpx; border-radius: 999rpx; color: #6c69d8; background: rgba(139,124,255,.1); font-size: 22rpx; }
|
|
|
|
|
.persona-panel { margin-top: 26rpx; padding: 30rpx; border-radius: 36rpx; background: rgba(255,255,255,.62); border: 1rpx solid rgba(255,255,255,.78); backdrop-filter: blur(24rpx); box-shadow: 0 20rpx 64rpx rgba(96,112,160,.12); }
|
|
|
|
|
.persona-scroll { white-space: nowrap; }
|
|
|
|
|
.persona-image { display: inline-block; width: 214rpx; height: 260rpx; margin-right: 18rpx; border-radius: 28rpx; background: rgba(22,27,46,.06); box-shadow: 0 16rpx 42rpx rgba(96,112,160,.12); }
|
|
|
|
|
.panel { margin-top: 26rpx; padding: 30rpx; border-radius: 36rpx; background: rgba(255,255,255,.62); border: 1rpx solid rgba(255,255,255,.78); backdrop-filter: blur(24rpx); box-shadow: 0 20rpx 64rpx rgba(96,112,160,.12); }
|
|
|
|
|
.panel-title { margin-bottom: 24rpx; font-size: 30rpx; font-weight: 800; }
|
|
|
|
|
.orbit-row { display: flex; align-items: center; margin-top: 22rpx; }
|
|
|
|
|
.day { width: 86rpx; color: rgba(22,27,46,.52); font-size: 22rpx; }
|
|
|
|
|
.bar { flex: 1; height: 12rpx; border-radius: 999rpx; background: rgba(22,27,46,.06); overflow: hidden; }
|
|
|
|
|
.bar view { height: 100%; border-radius: 999rpx; background: #a9ffe7; }
|
|
|
|
|
.mood { width: 120rpx; text-align: right; color: #6c69d8; font-size: 22rpx; }
|
|
|
|
|
.setting { display: flex; align-items: center; }
|
|
|
|
|
.setting-title { font-size: 28rpx; font-weight: 800; }
|
|
|
|
|
.setting-desc { margin-top: 8rpx; color: rgba(22,27,46,.48); font-size: 22rpx; }
|
|
|
|
|
.arrow { flex: 1; text-align: right; color: rgba(22,27,46,.4); font-size: 46rpx; }
|
|
|
|
|
</style>
|
