148 lines
3.3 KiB
Vue
148 lines
3.3 KiB
Vue
<template>
|
|
<div class="vocab-subscribe-view">
|
|
<section class="vocab-subscribe-hero surface-card">
|
|
<span class="vocab-subscribe-hero__eyebrow">Vokabeltrainer</span>
|
|
<h2>{{ $t('socialnetwork.vocab.subscribeTitle') }}</h2>
|
|
<p>{{ $t('socialnetwork.vocab.subscribeHint') }}</p>
|
|
</section>
|
|
|
|
<section class="box surface-card">
|
|
<label class="label">
|
|
<span>{{ $t('socialnetwork.vocab.shareCode') }}</span>
|
|
<input v-model="shareCode" type="text" />
|
|
</label>
|
|
|
|
<div class="actions">
|
|
<button :disabled="saving || !canSave" @click="subscribe">
|
|
{{ saving ? $t('socialnetwork.vocab.saving') : $t('socialnetwork.vocab.subscribe') }}
|
|
</button>
|
|
<button :disabled="saving" @click="back">{{ $t('general.back') }}</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions } from 'vuex';
|
|
import apiClient from '@/utils/axios.js';
|
|
|
|
export default {
|
|
name: 'VocabSubscribeView',
|
|
data() {
|
|
return {
|
|
shareCode: '',
|
|
saving: false,
|
|
};
|
|
},
|
|
computed: {
|
|
canSave() {
|
|
return this.shareCode.trim().length >= 6;
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions(['loadMenu']),
|
|
back() {
|
|
this.$router.push('/socialnetwork/vocab');
|
|
},
|
|
async subscribe() {
|
|
this.saving = true;
|
|
try {
|
|
const res = await apiClient.post('/api/vocab/subscribe', { shareCode: this.shareCode });
|
|
try { await this.loadMenu(); } catch (_) {}
|
|
const langId = res.data?.languageId;
|
|
this.$root.$refs.messageDialog?.open(
|
|
this.$t('socialnetwork.vocab.subscribeSuccess'),
|
|
this.$t('socialnetwork.vocab.subscribeTitle')
|
|
);
|
|
if (langId) {
|
|
this.$router.push(`/socialnetwork/vocab/${langId}`);
|
|
}
|
|
} catch (e) {
|
|
console.error('Subscribe failed:', e);
|
|
this.$root.$refs.messageDialog?.open(
|
|
this.$t('socialnetwork.vocab.subscribeError'),
|
|
this.$t('error.title')
|
|
);
|
|
} finally {
|
|
this.saving = false;
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
// optional: ?code=... unterstützt
|
|
const code = this.$route?.query?.code;
|
|
if (typeof code === 'string' && code.trim()) {
|
|
this.shareCode = code.trim();
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.vocab-subscribe-view {
|
|
display: grid;
|
|
gap: 18px;
|
|
max-width: 720px;
|
|
}
|
|
|
|
.vocab-subscribe-hero,
|
|
.box {
|
|
background: linear-gradient(180deg, rgba(255, 252, 247, 0.97), rgba(250, 244, 235, 0.95));
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
|
|
.vocab-subscribe-hero,
|
|
.box {
|
|
padding: 22px 24px;
|
|
}
|
|
|
|
.vocab-subscribe-hero__eyebrow {
|
|
display: inline-flex;
|
|
margin-bottom: 8px;
|
|
padding: 4px 10px;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--color-secondary-soft);
|
|
color: var(--color-text-secondary);
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.vocab-subscribe-hero p {
|
|
margin: 0;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.label {
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.label span {
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.vocab-subscribe-hero,
|
|
.box {
|
|
padding: 18px;
|
|
}
|
|
|
|
.actions button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|