FiDA_Front/src/views/home/setting/Profile.vue

<template>
	<div>
		<div class="label">Region</div>
		<dropdown-menu v-model="base" :list="baseList" @change="changeBase" />
	</div>
	<div>
		<div class="label">Role</div>
		<dropdown-menu v-model="role" :list="roles" @change="changeRole" />
	</div>
	<div>
		<div class="label">Current Agent Profile</div>
		<div class="group">
			<span class="icon"><svg-icon name="xiang" size="20" color="#000" /></span>
			<dropdown-menu v-model="agent" :list="agents" @change="changeAgent" />
		</div>
	</div>
	<div>
		<div class="label">Current Notification Frequency</div>
		<div class="value">3–6 times per hour</div>
	</div>
</template>

<script setup lang="ts">
	import { computed, ref, onBeforeUnmount, inject } from 'vue'
	import dropdownMenu from '@/components/dropdown-menu.vue'
	import { useUserInfoStore } from '@/stores'
	import { useI18n } from 'vue-i18n'
	const userInfoStore = useUserInfoStore()
	const { locale } = useI18n()
	const base = ref(userInfoStore.state.userInfo.base)
	const baseList = ref([
		{ 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' }
	])
	const changeBase = (value: string) => {
		console.log(value)
	}

	const role = ref(userInfoStore.state.userInfo.role)
	const roles = ref([
		{ label: 'Designer', value: 'Designer' },
		{ label: 'Student', value: 'Student' },
		{ label: 'Teacher', value: 'Teacher' },
		{ label: 'Parent', value: 'Parent' },
		{ value: 'Other', label: 'Other' }
	])
	const changeRole = (value: string) => {
		console.log(value)
	}

	const agent = ref('Partner')
	const agents = ref([
		{ label: 'Partner', value: 'Partner' },
		{ label: 'Observer', value: 'Observer' },
		{ label: 'Mentor', value: 'Mentor' }
	])
	const changeAgent = (value: string) => {
		console.log(value)
	}
</script>
 
<style lang="less" scoped>
	.group {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1rem;
	}
</style>