|
|
|
@ -5,7 +5,12 @@ |
|
|
|
<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view> |
|
|
|
|
|
|
|
<view class="status-head"> |
|
|
|
<view class="time-row"> |
|
|
|
<view class="time-line">{{ timeLabel }}</view> |
|
|
|
<view class="perf-toggle" :class="{ active: lowPowerMode }" @tap="toggleLowPowerMode"> |
|
|
|
{{ lowPowerMode ? '流畅' : '性能' }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="profile-line" @tap="goUniverse"> |
|
|
|
<image class="profile-avatar-img" v-if="profile.avatarUrl" :src="profile.avatarUrl" mode="aspectFill"></image> |
|
|
|
<view class="profile-avatar" v-else>{{ profile.avatarText || '我' }}</view> |
|
|
|
@ -16,13 +21,10 @@ |
|
|
|
</view> |
|
|
|
<view class="live-line">此刻有 <text class="count-num">{{ displayAwakeCount }}</text> 个灵魂在线漂流。</view> |
|
|
|
<view class="sub-line">{{ waitingCount }} 个人正在等一句话。</view> |
|
|
|
<view class="archive-entry planet-entry" @tap="openProfile"> |
|
|
|
<view class="archive-entry planet-entry" @tap="openTargetPanel"> |
|
|
|
<view class="planet-ring"></view> |
|
|
|
<view class="planet-icon">◌</view> |
|
|
|
</view> |
|
|
|
<view class="perf-toggle" :class="{ active: lowPowerMode }" @tap="toggleLowPowerMode"> |
|
|
|
{{ lowPowerMode ? '流畅' : '性能' }} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="drift-field"> |
|
|
|
@ -32,10 +34,10 @@ |
|
|
|
:class="['fragment-' + index, item.type, item.mood]" @tap="selectDrift(item)"> |
|
|
|
<view class="fragment-dot"></view> |
|
|
|
<view class="fragment-text">{{ item.text }}</view> |
|
|
|
<view class="bubble-actions" v-if="activeDriftText === item.text" @tap.stop> |
|
|
|
<!-- <view class="bubble-actions" v-if="activeDriftText === item.text" @tap.stop> |
|
|
|
<view @tap="replyDrift">回复</view> |
|
|
|
<view @tap="likeDrift">轻轻赞</view> |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
</view> |
|
|
|
<view class="signal-planet" :style="galaxyStyle" @touchstart.stop="startGalaxyDrag" @touchmove.stop="moveGalaxyDrag" |
|
|
|
@touchend="endGalaxyDrag" @touchcancel="endGalaxyDrag"> |
|
|
|
@ -52,7 +54,7 @@ |
|
|
|
<view class="soul-particle soul-b"></view> |
|
|
|
<view class="soul-particle soul-c"></view> |
|
|
|
<view class="planet-core"> |
|
|
|
<view class="planet-text">有人也在等你</view> |
|
|
|
<view class="planet-text">有人在等你</view> |
|
|
|
<view class="planet-sub">{{ currentMode === 'i' ? '安静靠近' : '轻轻热闹' }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -70,12 +72,19 @@ |
|
|
|
:class="{ active: currentMood === item.key }" @tap="changeMood(item.key)"> |
|
|
|
<text class="mood-icon">{{ item.icon }}</text>{{ item.label }} |
|
|
|
</view> |
|
|
|
<view class="mode-switch" @tap="toggleMode">{{ currentMode }} · {{ currentMode === 'i' ? '慢一点' : '亮一点' }}</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="target-dock"> |
|
|
|
<view class="target-mask" v-if="showTargetPanel" @tap="closeTargetPanel"> |
|
|
|
<view class="target-dock target-popup" @tap.stop> |
|
|
|
<view class="target-popup-head"> |
|
|
|
<view> |
|
|
|
<view class="target-popup-title">随机陪伴设置</view> |
|
|
|
<view class="target-popup-sub">选择此刻想遇见的人，再开始漂流。</view> |
|
|
|
</view> |
|
|
|
<view class="target-close" @tap="closeTargetPanel">×</view> |
|
|
|
</view> |
|
|
|
<view class="target-title">今天想遇见谁</view> |
|
|
|
<view class="target-row"> |
|
|
|
<view class="target-chip" v-for="item in targetModes" :key="item.key" |
|
|
|
@ -92,6 +101,7 @@ |
|
|
|
</view> |
|
|
|
<view class="start-match-btn" @tap="openMatch">开始随机陪伴</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="bottom-actions"> |
|
|
|
<view class="tab-glow"></view> |
|
|
|
@ -148,6 +158,7 @@ |
|
|
|
liveTimer: null, |
|
|
|
countTimer: null, |
|
|
|
showProfile: false, |
|
|
|
showTargetPanel: false, |
|
|
|
profileReady: false, |
|
|
|
profile: {}, |
|
|
|
lowPowerMode: false, |
|
|
|
@ -174,7 +185,7 @@ |
|
|
|
{ name: 'snow', angle: 332, radiusX: 166, radiusY: 48, size: 10, speed: 1.38, color: 'rgba(255,255,255,.95)' } |
|
|
|
], |
|
|
|
matchText: "随机遇见一个人", |
|
|
|
doneText: "今天先到这里", |
|
|
|
doneText: "今天先到这里，平台下单可增加匹配次数", |
|
|
|
moods: [{"key":"quiet","label":"想安静","icon":"◐","copy":"对方没有催我讲话，沉默变得没那么尴尬。"},{"key":"talk","label":"想说话","icon":"◒","copy":"聊了一个很小的日常话题，心情被拉亮了一点。"},{"key":"listen","label":"听着呢","icon":"◌","copy":"像有人坐在旁边，不需要解释为什么低落。"},{"key":"drift","label":"轻了一点","icon":"✦","copy":"只是给今天留一点柔软的痕迹。"}], |
|
|
|
targetModes: [{ key: 'i', label: '匹配 i 人' }, { key: 'e', label: '匹配 e 人' }, { key: 'any', label: '都可以' }], |
|
|
|
targetGenders: [{ key: 'male', label: '男生' }, { key: 'female', label: '女生' }, { key: 'any', label: '不限' }], |
|
|
|
@ -375,6 +386,7 @@ |
|
|
|
}) |
|
|
|
}, |
|
|
|
async openMatch() { |
|
|
|
this.showTargetPanel = false |
|
|
|
if (this.chancesLeft === 0) { |
|
|
|
uni.showToast({ title: this.doneText, icon: 'none' }) |
|
|
|
return |
|
|
|
@ -443,6 +455,12 @@ |
|
|
|
openProfile() { |
|
|
|
this.goUniverse() |
|
|
|
}, |
|
|
|
openTargetPanel() { |
|
|
|
this.showTargetPanel = true |
|
|
|
}, |
|
|
|
closeTargetPanel() { |
|
|
|
this.showTargetPanel = false |
|
|
|
}, |
|
|
|
closeProfile() { |
|
|
|
this.showProfile = false |
|
|
|
}, |
|
|
|
@ -492,7 +510,6 @@ |
|
|
|
uni.showToast({ title: "这次轻轻划过了", icon: 'none' }) |
|
|
|
}, |
|
|
|
goChat() { |
|
|
|
this.chancesLeft = Math.max(this.chancesLeft - 1, 0) |
|
|
|
this.showMatch = false |
|
|
|
const room = this.currentMatch ? '&roomId=' + this.currentMatch.roomId + '&targetUserId=' + this.currentMatch.targetUserId + |
|
|
|
'&name=' + encodeURIComponent(this.matchedPerson.name || '') + |
|
|
|
@ -1091,6 +1108,12 @@ |
|
|
|
padding-top: 74rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.time-row { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 18rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.time-line { |
|
|
|
font-size: 46rpx; |
|
|
|
line-height: 58rpx; |
|
|
|
@ -1169,10 +1192,6 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.perf-toggle { |
|
|
|
position: absolute; |
|
|
|
right: 0; |
|
|
|
top: 148rpx; |
|
|
|
z-index: 4; |
|
|
|
height: 48rpx; |
|
|
|
line-height: 48rpx; |
|
|
|
padding: 0 18rpx; |
|
|
|
@ -1370,7 +1389,6 @@ |
|
|
|
.target-dock { |
|
|
|
position: relative; |
|
|
|
z-index: 3; |
|
|
|
margin-top: 22rpx; |
|
|
|
padding: 24rpx 28rpx; |
|
|
|
border-radius: 36rpx; |
|
|
|
background: rgba(255,255,255,.66); |
|
|
|
@ -1379,6 +1397,62 @@ |
|
|
|
backdrop-filter: blur(12rpx); |
|
|
|
} |
|
|
|
|
|
|
|
.target-mask { |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
top: 0; |
|
|
|
bottom: 0; |
|
|
|
z-index: 30; |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
padding: 32rpx 30rpx 136rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background: rgba(22,27,46,.18); |
|
|
|
backdrop-filter: blur(16rpx); |
|
|
|
} |
|
|
|
|
|
|
|
.target-popup { |
|
|
|
width: 100%; |
|
|
|
margin-top: 0; |
|
|
|
padding: 34rpx 30rpx 30rpx; |
|
|
|
border-radius: 42rpx; |
|
|
|
background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.76)), radial-gradient(circle at 82% 0%, rgba(169,255,231,.28), transparent 220rpx); |
|
|
|
box-shadow: 0 34rpx 100rpx rgba(96,112,160,.22); |
|
|
|
animation: targetUp .18s ease-out both; |
|
|
|
} |
|
|
|
|
|
|
|
.target-popup-head { |
|
|
|
display: flex; |
|
|
|
align-items: flex-start; |
|
|
|
justify-content: space-between; |
|
|
|
margin-bottom: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.target-popup-title { |
|
|
|
color: #161b2e; |
|
|
|
font-size: 34rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.target-popup-sub { |
|
|
|
margin-top: 8rpx; |
|
|
|
color: rgba(22,27,46,.46); |
|
|
|
font-size: 23rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.target-close { |
|
|
|
width: 58rpx; |
|
|
|
height: 58rpx; |
|
|
|
border-radius: 50%; |
|
|
|
text-align: center; |
|
|
|
line-height: 54rpx; |
|
|
|
color: rgba(22,27,46,.5); |
|
|
|
background: rgba(238,244,255,.78); |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
.target-title { |
|
|
|
color: rgba(22,27,46,.54); |
|
|
|
font-size: 23rpx; |
|
|
|
@ -1420,6 +1494,15 @@ |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.gender-title { |
|
|
|
margin-top: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes targetUp { |
|
|
|
from { transform: translateY(42rpx); opacity: 0; } |
|
|
|
to { transform: translateY(0); opacity: 1; } |
|
|
|
} |
|
|
|
|
|
|
|
.dock-scroll { |
|
|
|
width: 100%; |
|
|
|
margin-top: 20rpx; |
|
|
|
|
wangfukang
3 weeks ago