school_uni/package1/ieBrowser/match.vue

<template>
	<view class="match-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="focus">
			<view class="halo"></view>
			<view class="dot">{{ mode }}</view>
		</view>

		<view class="copy">
			<view class="title">使用一次今日陪伴机会</view>
			<view class="desc">系统会根据你的此刻状态，随机靠近一个也想被轻轻陪伴的人。</view>
		</view>

		<view class="meta-card">
			<view>
				<text class="label">当前模式</text>
				<text class="value">{{ modeText }}</text>
			</view>
			<view>
				<text class="label">剩余机会</text>
				<text class="value">{{ chancesLeft }}/{{ dailyQuota }}</text>
			</view>
		</view>

		<view class="start" @tap="start">开始调频</view>
		<view class="tips">不展示真实头像、距离和学校。匹配成功后会保留聊天入口。</view>
	</view>
</template>

<script>
	import { ieHome, startIeMatch } from '@/common/ieApi.js'

	export default {
		data() {
			return {
				mode: 'i',
				mood: 'quiet',
				targetMode: 'any',
				targetGender: 'any',
				dailyQuota: 3,
				chancesLeft: 3,
				menuButtonInfo: { top: 44 }
			}
		},
		computed: {
			modeText() {
				return this.mode === 'e' ? '轻轻热闹' : '安静陪伴'
			}
		},
		onLoad(options) {
			if (uni.getMenuButtonBoundingClientRect) {
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			}
			this.mode = options.mode || 'i'
			this.mood = options.mood || 'quiet'
			this.targetMode = options.targetMode || 'any'
			this.targetGender = options.targetGender || 'any'
			this.loadQuota()
		},
		methods: {
			async loadQuota() {
				const home = await ieHome()
				if (!home) return
				this.dailyQuota = home.dailyQuota || 3
				this.chancesLeft = Math.max(this.dailyQuota - (home.usedQuota || 0), 0)
			},
			async start() {
				if (this.chancesLeft <= 0) {
					uni.showToast({ title: '今天先到这里', icon: 'none' })
					return
				}
				const match = await startIeMatch({ mode: this.mode, mood: this.mood, targetMode: this.targetMode, targetGender: this.targetGender })
				if (!match || !match.roomId) {
					uni.showToast({ title: (match && match.failReason) || '暂时没有同频的人', icon: 'none' })
					return
				}
				uni.navigateTo({
					url: '/package1/ieBrowser/matching?mode=' + this.mode + '&mood=' + this.mood +
						'&roomId=' + match.roomId + '&targetUserId=' + match.targetUserId +
						'&name=' + encodeURIComponent(match.anonymousName || '半匿名漂流者') +
						'&avatar=' + encodeURIComponent(match.avatarText || '◌') +
						'&avatarUrl=' + encodeURIComponent(match.avatarUrl || '') +
						'&state=' + encodeURIComponent(match.stateText || '') +
						'&quote=' + encodeURIComponent(match.quoteText || '')
				})
			},
			back() {
				uni.redirectTo({ url: '/package1/ieBrowser/index' })
			}
		}
	}
</script>

<style lang="scss" scoped>
	page { background: #f7f9ff; }
	.match-page {
		min-height: 100vh;
		padding: 0 32rpx 60rpx;
		box-sizing: border-box;
		color: #161b2e;
		background:
			radial-gradient(circle at 50% 34%, rgba(169, 255, 231, .48), transparent 360rpx),
			radial-gradient(circle at 80% 8%, rgba(139, 124, 255, .24), transparent 320rpx),
			radial-gradient(circle at 18% 76%, rgba(255, 214, 165, .34), transparent 340rpx),
			linear-gradient(180deg, #fbfdff, #eef4ff 62%, #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; }
	.focus { position: relative; height: 430rpx; display: flex; align-items: center; justify-content: center; }
	.halo { position: absolute; width: 300rpx; height: 300rpx; border-radius: 50%; border: 1rpx solid rgba(139,124,255,.22); background: rgba(255,255,255,.32); backdrop-filter: blur(18rpx); animation: pulse 2.8s ease-in-out infinite; }
	.dot { width: 154rpx; height: 154rpx; border-radius: 50%; text-align: center; line-height: 154rpx; color: #11162a; background: linear-gradient(145deg, #ffffff, #a9ffe7); font-size: 70rpx; font-weight: 800; box-shadow: 0 24rpx 68rpx rgba(169,255,231,.36); }
	.copy { text-align: center; }
	.title { font-size: 44rpx; font-weight: 800; }
	.desc { width: 560rpx; margin: 18rpx auto 0; color: rgba(22,27,46,.56); font-size: 25rpx; line-height: 42rpx; }
	.meta-card { display: flex; margin-top: 46rpx; padding: 30rpx; border-radius: 36rpx; background: rgba(255,255,255,.62); border: 1rpx solid rgba(255,255,255,.8); backdrop-filter: blur(24rpx); box-shadow: 0 22rpx 64rpx rgba(96,112,160,.13); }
	.meta-card view { flex: 1; }
	.label, .value { display: block; text-align: center; }
	.label { color: rgba(22,27,46,.42); font-size: 22rpx; }
	.value { margin-top: 12rpx; font-size: 32rpx; font-weight: 800; }
	.start { margin-top: 42rpx; height: 104rpx; border-radius: 999rpx; text-align: center; line-height: 104rpx; color: #11162a; background: linear-gradient(135deg, #ffffff, #a9ffe7 60%, #ffd6a5); font-size: 30rpx; font-weight: 800; box-shadow: 0 24rpx 58rpx rgba(169,255,231,.3); animation: pulseButton 2.8s ease-in-out infinite; }
	.start:active { transform: scale(.97); }
	.tips { width: 560rpx; margin: 26rpx auto 0; text-align: center; color: rgba(22,27,46,.38); font-size: 22rpx; line-height: 36rpx; }
	@keyframes pulse {
		0%, 100% { transform: scale(.86); opacity: .45; }
		50% { transform: scale(1.12); opacity: 1; }
	}
	@keyframes pulseButton {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.018); }
	}
</style>