画布

src/views/nuic/index.vue

@@ -32,6 +32,7 @@
 
 <script setup lang="ts">
 	import { computed, ref, markRaw } from 'vue'
+	import { UpdateUserProfile } from '@/api/user'
 	import nuic1 from './nuic-1.vue'
 	import nuic2 from './nuic-2.vue'
 	import nuic3 from './nuic-3.vue'
@@ -44,16 +45,38 @@
 	const onClose = () => {
 		router.push({ name: 'mainInput' })
 	}
-	const onNext = () => {
+	const onNext = (value) => {
 		const index = active.value + 1
-		if (index < list.length) {
-			router.push({ query: { index } })
-		} else {
-			loading.value = true
-			setTimeout(() => {
-				router.push({ name: 'mainInput' })
-			}, 5000)
+		const data = {
+			...route.query,
+			...(value ? value : {})
 		}
+		delete data.index
+		if (index < list.length) {
+			router.push({
+				query: {
+					...data,
+					index
+				}
+			})
+		} else {
+			onSubmit(data)
+		}
+	}
+	const onSubmit = (data) => {
+		loading.value = true
+		const stime = Date.now()
+		UpdateUserProfile(data)
+			.then((res) => {
+				if (!res) return (loading.value = false)
+				const time = stime - Date.now() + 3000
+				setTimeout(() => {
+					router.push({ name: 'mainInput' })
+				}, time)
+			})
+			.catch((err) => {
+				loading.value = false
+			})
 	}
 </script>
 

src/views/nuic/nuic-2.vue

@@ -10,7 +10,7 @@
 			</div>
 		</div>
 		<div class="btns">
-			<button class="next" @click="emit('next')">{{ $t('Nuic.next') }}</button>
+			<button class="next" @click="onNext">{{ $t('Nuic.next') }}</button>
 			<button class="more" @click="onLoadMore">
 				<span>{{ $t('Nuic.loadMore') }}</span>
 				<div><svg-icon name="refresh-single" size="24" /></div>
@@ -34,6 +34,15 @@
 		{ id: 7, url: '/image/nuic/style-7.png', title: '沙发', active: false },
 		{ id: 8, url: '/image/nuic/style-8.png', title: '桌子', active: false }
 	])
+	const onNext = () => {
+		const data = {
+			vibe: list.value
+				.filter((v) => v.active)
+				.map((v) => v.id)
+				.join(',')
+		}
+		emit('next', data)
+	}
 	const onLoadMore = () => {}
 </script>
 

src/views/nuic/nuic-3.vue

@@ -4,10 +4,10 @@
 
 		<div class="select-item">
 			<div class="title">{{ $t('Nuic.basedIn') }}</div>
-			<el-select v-model="data.based">
+			<el-select v-model="data.base">
 				<el-option
 					class="el-select__option"
-					v-for="v in data.basedList"
+					v-for="v in data.baseList"
 					:key="v.value"
 					:label="v.label"
 					:value="v.value"
@@ -27,7 +27,7 @@
 			</el-select>
 		</div>
 		<div class="btns">
-			<button class="next" @click="emit('next')">{{ $t('Nuic.allSet') }}</button>
+			<button class="next" @click="onNext">{{ $t('Nuic.allSet') }}</button>
 		</div>
 	</div>
 </template>
@@ -38,21 +38,35 @@
 	const router = useRouter()
 	const emit = defineEmits(['next'])
 	const data = reactive({
-		basedList: [
-			{ value: '1', label: 'Student' },
-			{ value: '2', label: 'Teacher' },
-			{ value: '3', label: 'Parent' },
-			{ value: '4', label: 'Other' }
+		baseList: [
+			{ label: 'United States', value: 'United States' },
+			{ label: 'Singapore', value: 'Singapore' },
+			{ label: 'Australia', value: 'Australia' },
+			{ label: 'South Korea', value: 'South Korea' },
+			{ label: 'China', value: 'China' },
+			{ label: 'Italy', value: 'Italy' },
+			{ label: 'France', value: 'France' },
+			{ label: 'Japan', value: 'Japan' },
+			{ label: 'Canada', value: 'Canada' },
+			{ label: 'Germany', value: 'Germany' }
 		],
 		roleList: [
-			{ value: '1', label: 'Student' },
-			{ value: '2', label: 'Teacher' },
-			{ value: '3', label: 'Parent' },
-			{ value: '4', label: 'Other' }
+			{ label: 'Designer', value: 'Designer' },
+			{ value: 'Student', label: 'Student' },
+			{ value: 'Teacher', label: 'Teacher' },
+			{ value: 'Parent', label: 'Parent' },
+			{ value: 'Other', label: 'Other' }
 		],
-		based: '',
-		role: ''
+		base: 'China',
+		role: 'Student'
 	})
+	const onNext = () => {
+		const data_ = {
+			base: data.base,
+			role: data.role
+		}
+		emit('next', data_)
+	}
 </script>
 
 <style lang="less" scoped>