yuzhiran
199 lines
7.7 KiB
Vue
199 lines
7.7 KiB
Vue
<template>
|
||
<view class="page fade-in">
|
||
<view class="hero">
|
||
<text class="hero-title">贡献面经</text>
|
||
<text class="hero-sub">分享你的面试经验，帮助更多同学</text>
|
||
</view>
|
||
|
||
<view class="form card">
|
||
<view class="form-group">
|
||
<text class="form-label">公司名称 <text class="required">*</text></text>
|
||
<input class="form-input" v-model="form.company" placeholder="如：腾讯、字节跳动、阿里巴巴" />
|
||
</view>
|
||
|
||
<view class="form-group">
|
||
<text class="form-label">面试岗位 <text class="required">*</text></text>
|
||
<input class="form-input" v-model="form.position" placeholder="如：前端工程师、产品经理" />
|
||
</view>
|
||
|
||
<view class="form-group">
|
||
<text class="form-label">面试轮次</text>
|
||
<input class="form-input" v-model="form.rounds" placeholder="如：一面（技术面）" />
|
||
</view>
|
||
|
||
<view class="form-group">
|
||
<text class="form-label">遇到的面试题（每行一题）</text>
|
||
<textarea
|
||
class="form-textarea"
|
||
v-model="questionsText"
|
||
placeholder="把你记得的面试题写下来，帮大家提前准备： 1. 请介绍一下你最熟悉的项目 2. 解释一下闭包的原理 ..."
|
||
:maxlength="2000"
|
||
></textarea>
|
||
<text class="form-hint">{{ questionsText.length }}/2000</text>
|
||
</view>
|
||
|
||
<view class="form-group">
|
||
<text class="form-label">面试感受/经验</text>
|
||
<textarea
|
||
class="form-textarea"
|
||
v-model="form.experience"
|
||
placeholder="分享一下整体感受、面试官风格、需要特别注意的地方..."
|
||
:maxlength="1000"
|
||
></textarea>
|
||
<text class="form-hint">{{ form.experience.length }}/1000</text>
|
||
</view>
|
||
|
||
<view class="form-group">
|
||
<text class="form-label">标签（可选）</text>
|
||
<view class="tag-input-area">
|
||
<view class="tag-list">
|
||
<view
|
||
v-for="tag in presetTags"
|
||
:key="tag"
|
||
class="tag-item"
|
||
:class="{ selected: form.tags.includes(tag) }"
|
||
@click="toggleTag(tag)"
|
||
>{{ tag }}</view>
|
||
</view>
|
||
<input class="form-input" v-model="customTag" placeholder="自定义标签，回车添加" @confirm="addCustomTag" />
|
||
</view>
|
||
</view>
|
||
|
||
<button class="btn-submit" @click="submit" :disabled="submitting">
|
||
{{ submitting ? '提交中...' : '提交面经' }}
|
||
</button>
|
||
|
||
<view class="success-box" v-if="submitted">
|
||
<text class="success-icon">🎉</text>
|
||
<text class="success-text">感谢你的分享！你的面经将帮助更多同学准备面试</text>
|
||
<text class="success-action" @click="goBack">返回</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="bottom-spacer"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { api } from '../../config'
|
||
|
||
const interviewId = ref('')
|
||
const urlPosition = ref('')
|
||
const form = ref({ company: '', position: '', rounds: '', experience: '', tags: [] })
|
||
const questionsText = ref('')
|
||
const customTag = ref('')
|
||
const submitting = ref(false)
|
||
const submitted = ref(false)
|
||
|
||
const presetTags = ['算法题多', '重视项目经历', '面试官nice', '压力面', '手撕代码', '系统设计', '行为面试', '八股文']
|
||
|
||
const token = () => uni.getStorageSync('token') || ''
|
||
|
||
onLoad((options) => {
|
||
if (options?.position) {
|
||
urlPosition.value = decodeURIComponent(options.position)
|
||
form.value.position = urlPosition.value
|
||
}
|
||
if (options?.interviewId) {
|
||
interviewId.value = options.interviewId
|
||
}
|
||
})
|
||
|
||
const toggleTag = (tag) => {
|
||
const idx = form.value.tags.indexOf(tag)
|
||
if (idx > -1) form.value.tags.splice(idx, 1)
|
||
else form.value.tags.push(tag)
|
||
}
|
||
|
||
const addCustomTag = () => {
|
||
const t = customTag.value.trim()
|
||
if (t && !form.value.tags.includes(t) && form.value.tags.length < 10) {
|
||
form.value.tags.push(t)
|
||
customTag.value = ''
|
||
}
|
||
}
|
||
|
||
const submit = async () => {
|
||
if (!form.value.company.trim()) { uni.showToast({ title: '请填写公司名称', icon: 'none' }); return }
|
||
if (!form.value.position.trim()) { uni.showToast({ title: '请填写面试岗位', icon: 'none' }); return }
|
||
|
||
submitting.value = true
|
||
try {
|
||
const questions = questionsText.value
|
||
.split('\n')
|
||
.map(q => q.replace(/^\d+[\.\、\s]+/, '').trim())
|
||
.filter(q => q.length > 0)
|
||
|
||
const res = await uni.request({
|
||
url: api('/contribution'), method: 'POST',
|
||
header: { 'Authorization': `Bearer ${token()}`, 'Content-Type': 'application/json' },
|
||
data: {
|
||
interviewId: interviewId.value || '',
|
||
company: form.value.company.trim(),
|
||
position: form.value.position.trim(),
|
||
rounds: form.value.rounds.trim(),
|
||
questions,
|
||
experience: form.value.experience.trim(),
|
||
tags: form.value.tags,
|
||
},
|
||
})
|
||
if (res.statusCode >= 200 && res.statusCode < 300) {
|
||
submitted.value = true
|
||
uni.showToast({ title: '提交成功！', icon: 'success' })
|
||
} else {
|
||
uni.showToast({ title: '提交失败，请重试', icon: 'none' })
|
||
}
|
||
} catch (e) {
|
||
uni.showToast({ title: '网络错误', icon: 'none' })
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
|
||
const goBack = () => uni.navigateBack()
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page { min-height: 100vh; background: var(--color-bg); }
|
||
.hero { background: linear-gradient(135deg, #10B981, #34D399, #6EE7B7); padding: 48rpx 32rpx 72rpx; border-radius: 0 0 48rpx 48rpx; }
|
||
.hero-title { font-size: 40rpx; font-weight: 700; color: #FFF; display: block; }
|
||
.hero-sub { font-size: 22rpx; color: rgba(255,255,255,0.8); margin-top: 8rpx; display: block; }
|
||
|
||
.form { margin: -40rpx 32rpx 0; border-radius: var(--radius-xl); padding: 32rpx; }
|
||
.form-group { margin-bottom: 28rpx; }
|
||
.form-label { font-size: 26rpx; font-weight: 600; color: var(--color-text); display: block; margin-bottom: 10rpx; }
|
||
.required { color: #EF4444; }
|
||
.form-input {
|
||
width: 100%; height: 72rpx; background: #F9FAFB; border-radius: var(--radius-md);
|
||
padding: 0 20rpx; font-size: 26rpx; box-sizing: border-box; border: 1rpx solid var(--color-border);
|
||
}
|
||
.form-textarea {
|
||
width: 100%; min-height: 180rpx; background: #F9FAFB; border-radius: var(--radius-md);
|
||
padding: 16rpx 20rpx; font-size: 26rpx; box-sizing: border-box; border: 1rpx solid var(--color-border);
|
||
}
|
||
.form-hint { font-size: 20rpx; color: var(--color-text-tertiary); text-align: right; display: block; margin-top: 6rpx; }
|
||
|
||
.tag-input-area { display: flex; flex-direction: column; gap: 12rpx; }
|
||
.tag-list { display: flex; flex-wrap: wrap; gap: 10rpx; }
|
||
.tag-item {
|
||
padding: 6rpx 18rpx; border-radius: var(--radius-round); font-size: 22rpx;
|
||
background: #F3F4F6; color: var(--color-text-secondary); border: 1rpx solid #E5E7EB;
|
||
transition: all 0.2s;
|
||
}
|
||
.tag-item.selected { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); color: #065F46; border-color: #10B981; }
|
||
|
||
.btn-submit {
|
||
width: 100%; height: 88rpx; border-radius: var(--radius-lg);
|
||
background: linear-gradient(135deg, #10B981, #34D399); color: #FFF;
|
||
font-size: 30rpx; font-weight: 700; border: none; margin-top: 8rpx;
|
||
}
|
||
.btn-submit[disabled] { opacity: 0.6; }
|
||
|
||
.success-box { display: flex; flex-direction: column; align-items: center; padding: 40rpx 0; gap: 12rpx; background: #ECFDF5; border-radius: var(--radius-lg); margin-top: 24rpx; }
|
||
.success-icon { font-size: 56rpx; }
|
||
.success-text { font-size: 26rpx; color: #065F46; font-weight: 600; text-align: center; line-height: 1.5; }
|
||
.success-action { font-size: 28rpx; color: var(--color-primary); font-weight: 600; padding: 10rpx 40rpx; }
|
||
.bottom-spacer { height: 40rpx; }
|
||
</style> |