school_uni/package1/ieBrowser/companion.vue

<template>
	<view class="card-page">
		<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view>
		<view class="nav">
			<view class="back" @tap="back">‹</view>
			<view class="nav-title">人格卡</view>
			<view class="ghost"></view>
		</view>
		<view class="label">半匿名陪伴对象</view>
		<view class="companion-card">
			<image class="orb-img" v-if="companion.avatarUrl" :src="companion.avatarUrl" mode="aspectFill"></image>
			<view class="orb" v-else :class="mode">{{ companion.avatar }}</view>
			<view class="name">{{ companion.name }}</view>
			<view class="state">{{ companion.state }}</view>
			<view class="quote">{{ companion.quote }}</view>
			<view class="tags">
				<text>{{ modeText }}</text>
				<text>可继续聊天</text>
				<text>保留聊天记录</text>
			</view>
		</view>
		<view class="actions">
			<view class="ghost" @tap="skip">轻轻划过</view>
			<view class="solid" @tap="enter">进入陪伴房间</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mode: 'i',
				roomId: '',
				targetUserId: '',
				menuButtonInfo: { top: 44 },
				pool: {
					i: { name: '月台旁的影子', avatar: '月', state: '在图书馆发呆', quote: '可以安静待 15 分钟，不用急着找话题。' },
					e: { name: '便利店灯光', avatar: '光', state: '想聊点不重要的', quote: '要不要交换一句今天最荒唐的小事？' }
				}
			}
		},
		computed: {
			companion() { return this.pool[this.mode] || this.pool.i },
			modeText() { return this.mode === 'e' ? '轻轻热闹' : '安静陪伴' }
		},
		onLoad(options) {
			if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.mode = options.mode || 'i'
			this.roomId = options.roomId || ''
			this.targetUserId = options.targetUserId || ''
			if (options.name) {
				this.pool[this.mode] = {
					name: decodeURIComponent(options.name),
					avatar: decodeURIComponent(options.avatar || '◌'),
					avatarUrl: decodeURIComponent(options.avatarUrl || ''),
					state: decodeURIComponent(options.state || ''),
					quote: decodeURIComponent(options.quote || '可以先安静待一会，不用急着找话题。')
				}
			}
		},
		methods: {
			enter() {
				const companion = this.companion
				uni.redirectTo({
					url: '/package1/ieBrowser/chat?mode=' + this.mode + '&roomId=' + this.roomId + '&targetUserId=' + this.targetUserId +
						'&name=' + encodeURIComponent(companion.name || '') +
						'&avatar=' + encodeURIComponent(companion.avatar || '') +
						'&avatarUrl=' + encodeURIComponent(companion.avatarUrl || '') +
						'&quote=' + encodeURIComponent(companion.quote || '')
				})
			},
			skip() { uni.redirectTo({ url: '/package1/ieBrowser/index' }) },
			back() { uni.redirectTo({ url: '/package1/ieBrowser/index' }) }
		}
	}
</script>

<style lang="scss" scoped>
	page { background: #f7f9ff; }
	.card-page { min-height: 100vh; padding: 0 32rpx 70rpx; box-sizing: border-box; color: #161b2e; background: radial-gradient(circle at 50% 30%, rgba(169,255,231,.45), transparent 360rpx), radial-gradient(circle at 85% 12%, rgba(255,184,209,.28), transparent 320rpx), linear-gradient(180deg, #fbfdff, #eef4ff 60%, #fff4e8); }
	.nav { height: 90rpx; display: flex; align-items: center; }
	.back, .ghost { width: 70rpx; font-size: 56rpx; color: rgba(22,27,46,.55); }
	.nav-title { flex: 1; text-align: center; font-size: 30rpx; font-weight: 800; }
	.label { margin-top: 20rpx; color: rgba(22,27,46,.42); font-size: 23rpx; letter-spacing: 4rpx; text-transform: uppercase; }
	.companion-card { margin-top: 54rpx; padding: 48rpx 36rpx; border-radius: 56rpx; border: 1rpx solid rgba(255,255,255,.82); background: rgba(255,255,255,.64); backdrop-filter: blur(28rpx); box-shadow: 0 30rpx 90rpx rgba(96,112,160,.16); text-align: center; animation: cardIn .58s ease both; }
	.orb, .orb-img { width: 168rpx; height: 168rpx; margin: 0 auto; border-radius: 50%; }
	.orb { text-align: center; line-height: 168rpx; font-size: 58rpx; font-weight: 800; }
	.orb.i { color: #f7f4ff; background: linear-gradient(145deg, #8b7cff, #dde7ff); box-shadow: 0 22rpx 68rpx rgba(139,124,255,.25); }
	.orb.e { color: #11162a; background: linear-gradient(145deg, #a9ffe7, #fff0b8); }
	.name { margin-top: 30rpx; font-size: 42rpx; font-weight: 800; }
	.state { margin-top: 12rpx; color: rgba(22,27,46,.48); font-size: 24rpx; }
	.quote { margin-top: 34rpx; padding: 30rpx; border-radius: 32rpx; background: rgba(255,255,255,.58); color: rgba(22,27,46,.72); font-size: 28rpx; line-height: 44rpx; text-align: left; }
	.tags { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 28rpx; }
	.tags text { margin: 0 8rpx 12rpx; padding: 8rpx 16rpx; border-radius: 999rpx; color: #6c69d8; background: rgba(139,124,255,.1); font-size: 21rpx; }
	.actions { position: fixed; left: 32rpx; right: 32rpx; bottom: 42rpx; display: flex; gap: 18rpx; }
	.ghost, .solid { flex: 1; height: 94rpx; border-radius: 999rpx; text-align: center; line-height: 94rpx; font-size: 26rpx; font-weight: 800; }
	.ghost { color: rgba(22,27,46,.56); background: rgba(255,255,255,.58); box-shadow: 0 18rpx 48rpx rgba(96,112,160,.1); }
	.solid { color: #11162a; background: linear-gradient(135deg, #ffffff, #a9ffe7); box-shadow: 0 24rpx 58rpx rgba(169,255,231,.3); animation: breath 2.8s ease-in-out infinite; }
	.ghost:active, .solid:active { transform: scale(.97); }
	@keyframes cardIn { from { opacity: 0; transform: translateY(28rpx) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
	@keyframes breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } }
</style>