|
|
|
@ -4,10 +4,10 @@ |
|
|
|
<view class="nav"> |
|
|
|
<view class="back" @tap="back">‹</view> |
|
|
|
<view class="title">{{ isEdit ? '编辑 i/e 资料' : '先认识一下你' }}</view> |
|
|
|
<view class="step">{{ step }}/4</view> |
|
|
|
<view class="step">{{ step }}/5</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="progress"><view :style="{ width: step * 25 + '%' }"></view></view> |
|
|
|
<view class="progress"><view :style="{ width: step * 20 + '%' }"></view></view> |
|
|
|
|
|
|
|
<view class="card" v-if="step === 1"> |
|
|
|
<view class="eyebrow">Your Energy</view> |
|
|
|
@ -52,6 +52,22 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="card" v-if="step === 4"> |
|
|
|
<view class="eyebrow">Persona Cards</view> |
|
|
|
<view class="headline">上传你的人格卡片</view> |
|
|
|
<view class="card-desc">像 QQ 个人主页的形象展示。最多 5 张，别人点头像时可以看到。</view> |
|
|
|
<view class="persona-grid"> |
|
|
|
<view class="persona-item" v-for="(img, index) in form.personaImages" :key="img"> |
|
|
|
<image :src="img" mode="aspectFill" @tap="previewPersona(index)"></image> |
|
|
|
<view class="persona-delete" @tap.stop="removePersonaImage(index)">×</view> |
|
|
|
</view> |
|
|
|
<view class="persona-add" v-if="form.personaImages.length < 5" @tap="choosePersonaImages"> |
|
|
|
<view class="plus">＋</view> |
|
|
|
<view>添加图片</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="card" v-if="step === 5"> |
|
|
|
<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"> |
|
|
|
@ -68,7 +84,7 @@ |
|
|
|
|
|
|
|
<view class="actions"> |
|
|
|
<view class="ghost" @tap="prev" v-if="step > 1">上一步</view> |
|
|
|
<view class="solid" @tap="next">{{ step === 4 ? '进入 i/e 此刻' : '继续' }}</view> |
|
|
|
<view class="solid" @tap="next">{{ step === 5 ? '进入 i/e 此刻' : '继续' }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
@ -94,7 +110,8 @@ |
|
|
|
avatarUrl: '', |
|
|
|
gender: 'unknown', |
|
|
|
intro: '', |
|
|
|
interestTags: [] |
|
|
|
interestTags: [], |
|
|
|
personaImages: [] |
|
|
|
}, |
|
|
|
tagOptions: ['慢热', '爱听歌', '夜跑', '自习', '想聊天', '想安静', '情绪低电量', '散步', '电影', '游戏', '摄影', '干饭'], |
|
|
|
targetOptions: [ |
|
|
|
@ -142,6 +159,7 @@ |
|
|
|
this.form.gender = profile.gender || 'unknown' |
|
|
|
this.form.intro = profile.intro || '' |
|
|
|
this.form.interestTags = profile.interestTags || [] |
|
|
|
this.form.personaImages = profile.personaImages || [] |
|
|
|
}, |
|
|
|
toggleTag(tag) { |
|
|
|
const index = this.form.interestTags.indexOf(tag) |
|
|
|
@ -172,6 +190,33 @@ |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
choosePersonaImages() { |
|
|
|
const remain = 5 - this.form.personaImages.length |
|
|
|
if (remain <= 0) { |
|
|
|
uni.showToast({ title: '最多上传 5 张', icon: 'none' }) |
|
|
|
return |
|
|
|
} |
|
|
|
uni.chooseImage({ |
|
|
|
count: remain, |
|
|
|
sizeType: ['compressed'], |
|
|
|
sourceType: ['album', 'camera'], |
|
|
|
success: async (res) => { |
|
|
|
const files = res.tempFilePaths || [] |
|
|
|
for (const filePath of files) { |
|
|
|
if (this.form.personaImages.length >= 5) break |
|
|
|
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.personaImages.push(url) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
removePersonaImage(index) { |
|
|
|
this.form.personaImages.splice(index, 1) |
|
|
|
}, |
|
|
|
previewPersona(index) { |
|
|
|
uni.previewImage({ urls: this.form.personaImages, current: this.form.personaImages[index] }) |
|
|
|
}, |
|
|
|
validateStep() { |
|
|
|
if (this.step === 2 && !this.form.anonymousName.trim()) { |
|
|
|
uni.showToast({ title: '先起一个昵称吧', icon: 'none' }) |
|
|
|
@ -187,7 +232,7 @@ |
|
|
|
async next() { |
|
|
|
if (this.submitting) return |
|
|
|
if (!this.validateStep()) return |
|
|
|
if (this.step < 4) { |
|
|
|
if (this.step < 5) { |
|
|
|
this.step += 1 |
|
|
|
return |
|
|
|
} |
|
|
|
@ -228,6 +273,7 @@ |
|
|
|
.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; } |
|
|
|
.card-desc { margin: -10rpx 0 24rpx; color: rgba(21,26,45,.52); font-size: 24rpx; line-height: 38rpx; } |
|
|
|
.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; } |
|
|
|
@ -252,6 +298,12 @@ |
|
|
|
.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; } |
|
|
|
.persona-grid { display: flex; flex-wrap: wrap; gap: 18rpx; } |
|
|
|
.persona-item, .persona-add { position: relative; width: 184rpx; height: 224rpx; border-radius: 30rpx; overflow: hidden; background: rgba(238,244,255,.82); } |
|
|
|
.persona-item image { width: 100%; height: 100%; display: block; } |
|
|
|
.persona-delete { position: absolute; right: 12rpx; top: 12rpx; width: 42rpx; height: 42rpx; border-radius: 50%; text-align: center; line-height: 38rpx; color: #fff; background: rgba(21,26,45,.56); font-size: 34rpx; } |
|
|
|
.persona-add { display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(21,26,45,.46); border: 2rpx dashed rgba(108,105,216,.22); box-sizing: border-box; font-size: 23rpx; } |
|
|
|
.persona-add .plus { margin-bottom: 10rpx; color: #6c69d8; font-size: 44rpx; 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); } |
|
|
|
|
wangfukang
2 weeks ago