feat: 使用新的头部组件，对接语言切换功能并调整布局
This commit is contained in:
hzj
parent
7a91f448c0
commit
834bcbb166
@ -219,6 +219,7 @@ onMounted(() => {
|
||||
|
||||
.extraList {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
padding: 10px;
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<!-- 顶部导航 -->
|
||||
<MobileHeader title="Invite user to become agency" />
|
||||
<GeneralHeader
|
||||
:title="t('invite_become_agent')"
|
||||
:showLanguageList="true"
|
||||
color="black"
|
||||
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
|
||||
/>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div style="padding: 16px; position: relative">
|
||||
@ -27,7 +32,7 @@
|
||||
type="text"
|
||||
name=""
|
||||
id=""
|
||||
placeholder="Please enter the user lD"
|
||||
:placeholder="t('enter_user_id')"
|
||||
@keyup.enter="handleEnterPress"
|
||||
@input="handleInputChange"
|
||||
style="
|
||||
@ -62,7 +67,7 @@
|
||||
@click="inviteAgency"
|
||||
:disabled="disInvite"
|
||||
>
|
||||
invite
|
||||
{{ t('invite') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -106,7 +111,7 @@
|
||||
font-weight: 600;
|
||||
"
|
||||
>
|
||||
Pending
|
||||
{{ t('pending') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="user.status == 1"
|
||||
@ -118,11 +123,11 @@
|
||||
font-weight: 600;
|
||||
"
|
||||
>
|
||||
Success
|
||||
{{ t('success') }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 用户信息 -->
|
||||
<div style="font-weight: 600">Invited user information:</div>
|
||||
<div style="font-weight: 600">{{ t('information') }}:</div>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<div style="display: flex; align-items: center; flex: 1">
|
||||
<div
|
||||
@ -178,19 +183,25 @@
|
||||
"
|
||||
@click="cancelInviteAgency(user.id)"
|
||||
>
|
||||
Cancel
|
||||
{{ t('cancel') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<div v-else class="no-data">
|
||||
{{ t('no_users_found') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MobileHeader from '@/components/MobileHeader.vue'
|
||||
import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
import { showError, showSuccess } from '@/utils/toast.js'
|
||||
import { searchUser } from '@/api/userInfo'
|
||||
import {
|
||||
invitedList,
|
||||
@ -200,6 +211,12 @@ import {
|
||||
cancelInvite,
|
||||
} from '@/api/bdCenter.js'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// 监听语言变化并设置文档方向
|
||||
locale.value && setDocumentDirection(locale.value)
|
||||
|
||||
const searchQuery = ref('') //关键词
|
||||
const invitedUserList = ref([]) //已邀请列表
|
||||
@ -275,10 +292,10 @@ const inviteAgency = async () => {
|
||||
let data = { inviteUserId: selectedUser.value.id }
|
||||
const resInvite = await inviteToBeAgency(data)
|
||||
if (resInvite.status) {
|
||||
showSuccess('Invitation information submitted successfully!')
|
||||
showSuccess(t('invitation_submitted'))
|
||||
}
|
||||
} catch (error) {
|
||||
showError(error.response.errorMsg)
|
||||
showError(error.response?.errorMsg || t('something_went_wrong'))
|
||||
}
|
||||
clearSearch()
|
||||
}
|
||||
@ -298,11 +315,12 @@ const cancelInviteAgency = async (userId) => {
|
||||
try {
|
||||
const resCancel = await cancelInvite(userId)
|
||||
if (resCancel.status) {
|
||||
showSuccess('Cancel invitation successfully!')
|
||||
showSuccess(t('application_cancelled'))
|
||||
getInvitedList()
|
||||
}
|
||||
} catch (error) {
|
||||
let errorMsg = error.response.errorMsg.replace(/^.*\]\s*/, '')
|
||||
let errorMsg =
|
||||
error.response?.errorMsg?.replace(/^.*\]\s*/, '') || t('cancellation_failed_try_again')
|
||||
showError(errorMsg)
|
||||
}
|
||||
}
|
||||
@ -359,6 +377,12 @@ input::placeholder {
|
||||
border: 2px solid #8b5cf6 !important;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
@ -376,4 +400,14 @@ input::placeholder {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL支持 */
|
||||
[dir='rtl'] .avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .user-info {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<!-- 顶部导航 -->
|
||||
<MobileHeader title="Invite user to become BD" />
|
||||
<GeneralHeader
|
||||
:title="t('invite')"
|
||||
:showLanguageList="true"
|
||||
color="black"
|
||||
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
|
||||
/>
|
||||
|
||||
<!-- 内容 -->
|
||||
<div style="padding: 16px; position: relative">
|
||||
@ -27,7 +32,7 @@
|
||||
type="text"
|
||||
name=""
|
||||
id=""
|
||||
placeholder="Please enter the user lD"
|
||||
:placeholder="t('enter_user_id')"
|
||||
@keyup.enter="handleEnterPress"
|
||||
@input="handleInputChange"
|
||||
style="
|
||||
@ -62,7 +67,7 @@
|
||||
@click="inviteAgency"
|
||||
:disabled="disInvite"
|
||||
>
|
||||
invite
|
||||
{{ t('invite') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -106,7 +111,7 @@
|
||||
font-weight: 600;
|
||||
"
|
||||
>
|
||||
Pending
|
||||
{{ t('pending') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="user.status == 1"
|
||||
@ -118,11 +123,11 @@
|
||||
font-weight: 600;
|
||||
"
|
||||
>
|
||||
Success
|
||||
{{ t('success') }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- 用户信息 -->
|
||||
<div style="font-weight: 600">Invited user information:</div>
|
||||
<div style="font-weight: 600">{{ t('information') }}:</div>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between">
|
||||
<div style="display: flex; align-items: center; flex: 1">
|
||||
<div
|
||||
@ -178,19 +183,25 @@
|
||||
"
|
||||
@click="cancelInviteAgency(user.id)"
|
||||
>
|
||||
Cancel
|
||||
{{ t('cancel') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<div v-else class="no-data">
|
||||
{{ t('no_users_found') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MobileHeader from '@/components/MobileHeader.vue'
|
||||
import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
import { showError, showSuccess } from '@/utils/toast.js'
|
||||
import { searchUser } from '@/api/userInfo'
|
||||
import {
|
||||
invitedList, // 获取已邀请列表
|
||||
@ -198,6 +209,12 @@ import {
|
||||
cancelInvite, // 处理邀请(取消邀请)
|
||||
} from '@/api/bdLeaderCenter.js'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { setDocumentDirection } from '@/locales/i18n'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
// 监听语言变化并设置文档方向
|
||||
locale.value && setDocumentDirection(locale.value)
|
||||
|
||||
const searchQuery = ref('') //关键词
|
||||
const invitedUserList = ref([]) //已邀请列表
|
||||
@ -273,10 +290,10 @@ const inviteAgency = async () => {
|
||||
let data = { inviteUserId: selectedUser.value.id }
|
||||
const resInvite = await inviteToBeBD(data)
|
||||
if (resInvite.status) {
|
||||
showSuccess('Invitation information submitted successfully!')
|
||||
showSuccess(t('invitation_submitted'))
|
||||
}
|
||||
} catch (error) {
|
||||
showError(error.response.errorMsg)
|
||||
showError(error.response?.errorMsg || t('something_went_wrong'))
|
||||
}
|
||||
clearSearch()
|
||||
}
|
||||
@ -296,11 +313,12 @@ const cancelInviteAgency = async (userId) => {
|
||||
try {
|
||||
const resCancel = await cancelInvite(userId)
|
||||
if (resCancel.status) {
|
||||
showSuccess('Cancel invitation successfully!')
|
||||
showSuccess(t('application_cancelled'))
|
||||
getInvitedList()
|
||||
}
|
||||
} catch (error) {
|
||||
let errorMsg = error.response.errorMsg.replace(/^.*\]\s*/, '')
|
||||
let errorMsg =
|
||||
error.response?.errorMsg?.replace(/^.*\]\s*/, '') || t('cancellation_failed_try_again')
|
||||
showError(errorMsg)
|
||||
}
|
||||
}
|
||||
@ -357,6 +375,12 @@ input::placeholder {
|
||||
border: 2px solid #8b5cf6 !important;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
@ -374,4 +398,14 @@ input::placeholder {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL支持 */
|
||||
[dir='rtl'] .avatar {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
[dir='rtl'] .user-info {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user