|
|
@@ -15,8 +15,7 @@
|
|
|
<div class="pattern-bg"></div>
|
|
|
<div class="header-icon-wrapper">
|
|
|
<div class="header-icon">
|
|
|
- <!-- Replacing shop-o with user-plus or similar for registration -->
|
|
|
- <van-icon name="user-plus" size="40" color="#f2930d" />
|
|
|
+ <van-icon name="user-o" size="40" color="#f2930d" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -45,8 +44,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- Phonetic Name -->
|
|
|
- <div class="form-group mt-4">
|
|
|
+ <!-- Phonetic Name (Japanese only) -->
|
|
|
+ <div v-if="locale === 'ja'" class="form-group mt-4">
|
|
|
<label class="form-label">
|
|
|
{{ $t('register.phoneticName') || 'Phonetic Name' }} <span class="optional">(Optional)</span>
|
|
|
</label>
|
|
|
@@ -78,7 +77,7 @@
|
|
|
<!-- Birthday & Referral Code (2 cols) -->
|
|
|
<div class="form-row mt-4">
|
|
|
<div class="form-group half">
|
|
|
- <label class="form-label">{{ $t('register.birthday') || 'Birthday' }}</label>
|
|
|
+ <label class="form-label">{{ $t('register.birthday') || 'Birthday' }} <span class="required">*</span></label>
|
|
|
<div class="input-pill clickable" @click="showDatePicker = true">
|
|
|
<van-field
|
|
|
v-model="form.birthday"
|
|
|
@@ -109,12 +108,12 @@
|
|
|
<div class="tags-container">
|
|
|
<div
|
|
|
v-for="food in foodOptions"
|
|
|
- :key="food"
|
|
|
+ :key="food.id"
|
|
|
class="food-tag"
|
|
|
- :class="{ active: form.favoriteFoods.includes(food) }"
|
|
|
- @click="toggleFood(food)"
|
|
|
+ :class="{ active: form.favoriteFoods.includes(food.id) }"
|
|
|
+ @click="toggleFood(food.id)"
|
|
|
>
|
|
|
- {{ food }}
|
|
|
+ {{ food.label }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -189,10 +188,11 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive, computed } from 'vue'
|
|
|
+import { ref, reactive, computed, onMounted } from 'vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
import { showToast } from 'vant'
|
|
|
import { useI18n } from 'vue-i18n'
|
|
|
+import { storage } from '@/utils/storage'
|
|
|
|
|
|
const { t, locale } = useI18n()
|
|
|
const router = useRouter()
|
|
|
@@ -220,7 +220,7 @@ const currentLangText = computed(() => {
|
|
|
const onSelectLang = (item: any) => {
|
|
|
locale.value = item.value
|
|
|
showLangAction.value = false
|
|
|
- localStorage.setItem('locale', item.value)
|
|
|
+ storage.set('language', item.value)
|
|
|
}
|
|
|
|
|
|
const form = reactive({
|
|
|
@@ -232,7 +232,47 @@ const form = reactive({
|
|
|
favoriteFoods: [] as string[]
|
|
|
})
|
|
|
|
|
|
-const foodOptions = ['Sushi', 'Ramen', 'Gyoza', 'Tempura', 'Udon', 'Sashimi', 'Yakitori']
|
|
|
+// Food Options - Fetch from API with i18n fallback
|
|
|
+interface FoodOption {
|
|
|
+ id: string
|
|
|
+ label: string
|
|
|
+}
|
|
|
+
|
|
|
+const foodOptions = ref<FoodOption[]>([])
|
|
|
+
|
|
|
+// Fallback food options with i18n
|
|
|
+const getFallbackFoodOptions = (): FoodOption[] => {
|
|
|
+ return [
|
|
|
+ { id: 'sushi', label: t('register.foods.sushi') || 'Sushi' },
|
|
|
+ { id: 'ramen', label: t('register.foods.ramen') || 'Ramen' },
|
|
|
+ { id: 'gyoza', label: t('register.foods.gyoza') || 'Gyoza' },
|
|
|
+ { id: 'tempura', label: t('register.foods.tempura') || 'Tempura' },
|
|
|
+ { id: 'udon', label: t('register.foods.udon') || 'Udon' },
|
|
|
+ { id: 'sashimi', label: t('register.foods.sashimi') || 'Sashimi' },
|
|
|
+ { id: 'yakitori', label: t('register.foods.yakitori') || 'Yakitori' }
|
|
|
+ ]
|
|
|
+}
|
|
|
+
|
|
|
+// Fetch food options from API
|
|
|
+const fetchFoodOptions = async () => {
|
|
|
+ try {
|
|
|
+ // TODO: Replace with actual API call
|
|
|
+ // const response = await getFoodPreferences()
|
|
|
+ // foodOptions.value = response.data
|
|
|
+
|
|
|
+ // For now, use fallback with i18n
|
|
|
+ foodOptions.value = getFallbackFoodOptions()
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Failed to fetch food options:', error)
|
|
|
+ // Use fallback on error
|
|
|
+ foodOptions.value = getFallbackFoodOptions()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// Load food options on mount
|
|
|
+onMounted(() => {
|
|
|
+ fetchFoodOptions()
|
|
|
+})
|
|
|
|
|
|
const onConfirmDate = ({ selectedValues }: { selectedValues: string[] }) => {
|
|
|
form.birthday = selectedValues.join('/')
|
|
|
@@ -249,15 +289,21 @@ const toggleFood = (food: string) => {
|
|
|
}
|
|
|
|
|
|
const handleRegister = async () => {
|
|
|
+ // Validate required fields
|
|
|
if (!form.nickname || !form.contact) {
|
|
|
- showToast('Please fill in required fields')
|
|
|
+ showToast(t('register.fillRequired') || 'Please fill in required fields')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!form.birthday) {
|
|
|
+ showToast(t('register.selectBirthdayRequired') || 'Please select your birthday')
|
|
|
return
|
|
|
}
|
|
|
|
|
|
loading.value = true
|
|
|
setTimeout(() => {
|
|
|
loading.value = false
|
|
|
- showToast('Registration Successful (Mock)')
|
|
|
+ showToast(t('register.success') || 'Registration Successful (Mock)')
|
|
|
router.push('/index')
|
|
|
}, 1500)
|
|
|
}
|
FanLide