78 lines
2.2 KiB
Vue
78 lines
2.2 KiB
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>
|