wangfukang
4 weeks ago
12 changed files with 1585 additions and 160 deletions
@ -0,0 +1,248 @@ |
|||
<template> |
|||
<view class="setup-page"> |
|||
<view class="top-safe" :style="{ height: menuButtonInfo.top + 'px' }"></view> |
|||
<view class="nav"> |
|||
<view class="back" @tap="back">‹</view> |
|||
<view class="title">{{ isEdit ? '编辑 i/e 资料' : '先认识一下你' }}</view> |
|||
<view class="step">{{ step }}/4</view> |
|||
</view> |
|||
|
|||
<view class="progress"><view :style="{ width: step * 25 + '%' }"></view></view> |
|||
|
|||
<view class="card" v-if="step === 1"> |
|||
<view class="eyebrow">Your Energy</view> |
|||
<view class="headline">今天更像 i 还是 e？</view> |
|||
<view class="mode-card i" :class="{ active: form.currentMode === 'i' }" @tap="form.currentMode = 'i'"> |
|||
<view class="mark">i</view> |
|||
<view><view class="mode-title">安静陪伴</view><view class="mode-desc">慢回复、允许沉默、低压力靠近。</view></view> |
|||
</view> |
|||
<view class="mode-card e" :class="{ active: form.currentMode === 'e' }" @tap="form.currentMode = 'e'"> |
|||
<view class="mark">e</view> |
|||
<view><view class="mode-title">轻轻热闹</view><view class="mode-desc">有人开场，聊点废话，把情绪拉亮。</view></view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card" v-if="step === 2"> |
|||
<view class="eyebrow">Light Profile</view> |
|||
<view class="headline">设置一个轻社交资料</view> |
|||
<view class="avatar-wrap" @tap="chooseAvatar"> |
|||
<image class="avatar-img" v-if="form.avatarUrl" :src="form.avatarUrl" mode="aspectFill"></image> |
|||
<view class="avatar-text" v-else>{{ avatarPreview }}</view> |
|||
<view class="avatar-tip">点一下换头像</view> |
|||
</view> |
|||
<view class="random-name" @tap="randomName">随机一个昵称</view> |
|||
<input class="input" v-model="form.anonymousName" maxlength="16" placeholder="昵称，例如：南门慢跑员" /> |
|||
<view class="mini-title">性别</view> |
|||
<view class="gender-row"> |
|||
<view class="gender-chip" v-for="item in genderOptions" :key="item.key" :class="{ active: form.gender === item.key }" @tap="form.gender = item.key"> |
|||
{{ item.label }} |
|||
</view> |
|||
</view> |
|||
<textarea class="textarea" v-model="form.intro" maxlength="80" placeholder="一句轻介绍：我通常慢热，但会认真听。" /> |
|||
</view> |
|||
|
|||
<view class="card" v-if="step === 3"> |
|||
<view class="eyebrow">Tags</view> |
|||
<view class="headline">选择几个此刻标签</view> |
|||
<view class="tag-grid"> |
|||
<view class="tag" v-for="item in tagOptions" :key="item" :class="{ active: form.interestTags.includes(item) }" @tap="toggleTag(item)"> |
|||
{{ item }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="card" v-if="step === 4"> |
|||
<view class="eyebrow">Match Target</view> |
|||
<view class="headline">你现在想遇见哪类人？</view> |
|||
<view class="target-card" v-for="item in targetOptions" :key="item.key" :class="{ active: form.targetModePreference === item.key }" @tap="form.targetModePreference = item.key"> |
|||
<view class="target-title">{{ item.title }}</view> |
|||
<view class="target-desc">{{ item.desc }}</view> |
|||
</view> |
|||
<view class="mini-title target-gender-title">想匹配的性别</view> |
|||
<view class="gender-row"> |
|||
<view class="gender-chip" v-for="item in targetGenderOptions" :key="item.key" :class="{ active: form.targetGenderPreference === item.key }" @tap="form.targetGenderPreference = item.key"> |
|||
{{ item.label }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="actions"> |
|||
<view class="ghost" @tap="prev" v-if="step > 1">上一步</view> |
|||
<view class="solid" @tap="next">{{ step === 4 ? '进入 i/e 此刻' : '继续' }}</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getIeProfile, saveIeProfile } from '@/common/ieApi.js' |
|||
import tui from '@/common/httpRequest.js' |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
menuButtonInfo: { top: 44 }, |
|||
step: 1, |
|||
isEdit: false, |
|||
submitting: false, |
|||
profileCompleted: 0, |
|||
form: { |
|||
currentMode: 'i', |
|||
targetModePreference: 'any', |
|||
targetGenderPreference: 'any', |
|||
anonymousName: '', |
|||
avatarText: '我', |
|||
avatarUrl: '', |
|||
gender: 'unknown', |
|||
intro: '', |
|||
interestTags: [] |
|||
}, |
|||
tagOptions: ['慢热', '爱听歌', '夜跑', '自习', '想聊天', '想安静', '情绪低电量', '散步', '电影', '游戏', '摄影', '干饭'], |
|||
targetOptions: [ |
|||
{ key: 'i', title: '想遇见 i 人', desc: '安静、慢一点、允许沉默。' }, |
|||
{ key: 'e', title: '想遇见 e 人', desc: '轻松开场，聊一点不重要的小事。' }, |
|||
{ key: 'any', title: '都可以', desc: '交给此刻的随机同频。' } |
|||
], |
|||
genderOptions: [{ key: 'male', label: '男生' }, { key: 'female', label: '女生' }, { key: 'unknown', label: '不想说' }], |
|||
targetGenderOptions: [{ key: 'male', label: '男生' }, { key: 'female', label: '女生' }, { key: 'any', label: '不限' }], |
|||
nameSeeds: ['南门慢跑员', '图书馆三楼', '便利店灯光', '耳机里的云', '操场晚风', '自习逃跑员', '月台旁的影子'] |
|||
} |
|||
}, |
|||
computed: { |
|||
avatarPreview() { |
|||
return (this.form.anonymousName || this.form.avatarText || '我').slice(0, 1) |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
if (uni.getMenuButtonBoundingClientRect) this.menuButtonInfo = uni.getMenuButtonBoundingClientRect() |
|||
this.isEdit = options && options.edit === '1' |
|||
this.loadProfile() |
|||
}, |
|||
methods: { |
|||
async loadProfile() { |
|||
const profile = await getIeProfile() |
|||
if (!profile) return |
|||
this.profileCompleted = profile.profileCompleted || 0 |
|||
this.form.currentMode = profile.currentMode || 'i' |
|||
this.form.targetModePreference = profile.targetModePreference || 'any' |
|||
this.form.targetGenderPreference = profile.targetGenderPreference || 'any' |
|||
this.form.anonymousName = this.isEdit || profile.profileCompleted === 1 ? (profile.anonymousName || '') : '' |
|||
this.form.avatarText = profile.avatarText || '我' |
|||
this.form.avatarUrl = profile.avatarUrl || '' |
|||
this.form.gender = profile.gender || 'unknown' |
|||
this.form.intro = profile.intro || '' |
|||
this.form.interestTags = profile.interestTags || [] |
|||
}, |
|||
toggleTag(tag) { |
|||
const index = this.form.interestTags.indexOf(tag) |
|||
if (index > -1) { |
|||
this.form.interestTags.splice(index, 1) |
|||
return |
|||
} |
|||
if (this.form.interestTags.length >= 6) { |
|||
uni.showToast({ title: '最多选择 6 个标签', icon: 'none' }) |
|||
return |
|||
} |
|||
this.form.interestTags.push(tag) |
|||
}, |
|||
randomName() { |
|||
this.form.anonymousName = this.nameSeeds[Math.floor(Math.random() * this.nameSeeds.length)] |
|||
}, |
|||
chooseAvatar() { |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
sizeType: ['compressed'], |
|||
sourceType: ['album', 'camera'], |
|||
success: async (res) => { |
|||
const filePath = res.tempFilePaths && res.tempFilePaths[0] |
|||
if (!filePath) return |
|||
const result = await tui.uploadFile('/upload/file', filePath) |
|||
const url = typeof result === 'string' ? result : (result.url || result.fileUrl || result.path || result.fullPath || result) |
|||
if (url && typeof url === 'string') this.form.avatarUrl = url |
|||
} |
|||
}) |
|||
}, |
|||
validateStep() { |
|||
if (this.step === 2 && !this.form.anonymousName.trim()) { |
|||
uni.showToast({ title: '先起一个昵称吧', icon: 'none' }) |
|||
return false |
|||
} |
|||
if (this.step === 3 && !this.form.interestTags.length) { |
|||
uni.showToast({ title: '至少选一个标签', icon: 'none' }) |
|||
return false |
|||
} |
|||
return true |
|||
}, |
|||
prev() { this.step = Math.max(1, this.step - 1) }, |
|||
async next() { |
|||
if (this.submitting) return |
|||
if (!this.validateStep()) return |
|||
if (this.step < 4) { |
|||
this.step += 1 |
|||
return |
|||
} |
|||
this.submitting = true |
|||
uni.showLoading({ title: '正在进入 i/e', mask: true }) |
|||
try { |
|||
const profile = await saveIeProfile({ |
|||
...this.form, |
|||
avatarText: this.avatarPreview |
|||
}) |
|||
if (!profile) return |
|||
uni.redirectTo({ url: this.isEdit ? '/package1/ieBrowser/universe' : '/package1/ieBrowser/index' }) |
|||
} finally { |
|||
this.submitting = false |
|||
uni.hideLoading() |
|||
} |
|||
}, |
|||
back() { |
|||
if (this.isEdit) { |
|||
uni.redirectTo({ url: '/package1/ieBrowser/universe' }) |
|||
return |
|||
} |
|||
uni.redirectTo({ url: '/pages/index/index' }) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
page { background: #f7f9ff; } |
|||
.setup-page { min-height: 100vh; padding: 0 32rpx 168rpx; box-sizing: border-box; color: #151a2d; background: radial-gradient(circle at 82% 10%, rgba(169,255,231,.42), transparent 320rpx), radial-gradient(circle at 16% 70%, rgba(255,184,209,.24), transparent 340rpx), linear-gradient(180deg, #fbfdff, #eef4ff 64%, #fff4e8); } |
|||
.nav { height: 92rpx; display: flex; align-items: center; } |
|||
.back { width: 70rpx; color: rgba(21,26,45,.56); font-size: 56rpx; } |
|||
.title { flex: 1; font-size: 32rpx; font-weight: 800; } |
|||
.step { color: #6c69d8; font-size: 24rpx; font-weight: 800; } |
|||
.progress { height: 10rpx; border-radius: 999rpx; background: rgba(21,26,45,.06); overflow: hidden; } |
|||
.progress view { height: 100%; border-radius: 999rpx; background: #a9ffe7; transition: width .25s ease; } |
|||
.card { margin-top: 36rpx; padding: 38rpx 32rpx; border-radius: 46rpx; border: 1rpx solid rgba(255,255,255,.82); background: rgba(255,255,255,.64); box-shadow: 0 26rpx 80rpx rgba(96,112,160,.14); backdrop-filter: blur(26rpx); } |
|||
.eyebrow { color: rgba(21,26,45,.42); font-size: 22rpx; letter-spacing: 5rpx; text-transform: uppercase; } |
|||
.headline { margin-top: 16rpx; margin-bottom: 28rpx; font-size: 46rpx; line-height: 60rpx; font-weight: 800; } |
|||
.mode-card, .target-card { display: flex; align-items: center; margin-top: 22rpx; padding: 28rpx; border-radius: 34rpx; background: rgba(238,244,255,.68); border: 2rpx solid transparent; } |
|||
.mode-card.active, .target-card.active { border-color: #a9ffe7; background: rgba(223,254,244,.7); transform: scale(1.01); } |
|||
.mark { width: 82rpx; height: 82rpx; margin-right: 22rpx; border-radius: 28rpx; text-align: center; line-height: 82rpx; font-size: 46rpx; font-weight: 800; } |
|||
.i .mark { color: #fff; background: #7771d8; } |
|||
.e .mark { color: #11162a; background: #a9ffe7; } |
|||
.mode-title, .target-title { font-size: 30rpx; font-weight: 800; } |
|||
.mode-desc, .target-desc { margin-top: 8rpx; color: rgba(21,26,45,.54); font-size: 23rpx; line-height: 36rpx; } |
|||
.mini-title { margin: 24rpx 0 16rpx; color: rgba(21,26,45,.5); font-size: 23rpx; font-weight: 800; } |
|||
.target-gender-title { margin-top: 30rpx; } |
|||
.gender-row { display: flex; flex-wrap: wrap; } |
|||
.gender-chip { height: 58rpx; line-height: 58rpx; margin: 0 14rpx 14rpx 0; padding: 0 24rpx; border-radius: 999rpx; color: rgba(21,26,45,.58); background: rgba(238,244,255,.82); font-size: 23rpx; } |
|||
.gender-chip.active { color: #11162a; background: #a9ffe7; font-weight: 800; } |
|||
.avatar-wrap { width: 184rpx; margin: 0 auto 30rpx; text-align: center; } |
|||
.avatar-img, .avatar-text { width: 154rpx; height: 154rpx; margin: 0 auto; border-radius: 50%; } |
|||
.avatar-img { display: block; } |
|||
.avatar-text { text-align: center; line-height: 154rpx; color: #11162a; background: linear-gradient(145deg, #effffb, #a9ffe7); font-size: 58rpx; font-weight: 800; } |
|||
.avatar-tip { margin-top: 14rpx; color: rgba(21,26,45,.42); font-size: 22rpx; } |
|||
.random-name { width: 220rpx; height: 58rpx; margin: 0 auto 22rpx; border-radius: 999rpx; text-align: center; line-height: 58rpx; color: #6c69d8; background: rgba(139,124,255,.1); font-size: 23rpx; font-weight: 800; } |
|||
.input, .textarea { width: 100%; box-sizing: border-box; border-radius: 28rpx; background: rgba(238,244,255,.78); color: #151a2d; font-size: 27rpx; } |
|||
.input { height: 88rpx; padding: 0 26rpx; } |
|||
.textarea { height: 180rpx; margin-top: 22rpx; padding: 24rpx 26rpx; line-height: 40rpx; } |
|||
.tag-grid { display: flex; flex-wrap: wrap; } |
|||
.tag { margin: 0 14rpx 18rpx 0; padding: 16rpx 24rpx; border-radius: 999rpx; color: rgba(21,26,45,.62); background: rgba(238,244,255,.82); font-size: 24rpx; } |
|||
.tag.active { color: #11162a; background: #a9ffe7; font-weight: 800; } |
|||
.actions { position: fixed; left: 32rpx; right: 32rpx; bottom: 42rpx; display: flex; gap: 18rpx; } |
|||
.ghost, .solid { flex: 1; height: 96rpx; border-radius: 999rpx; text-align: center; line-height: 96rpx; font-size: 28rpx; font-weight: 800; } |
|||
.ghost { color: rgba(21,26,45,.58); background: rgba(255,255,255,.68); } |
|||
.solid { color: #11162a; background: linear-gradient(135deg, #effffb, #a9ffe7); box-shadow: 0 22rpx 58rpx rgba(169,255,231,.28); } |
|||
</style> |
|||
Loading…
Reference in new issue