chore(管理员赠送礼物页): 补充翻译，替换头部组件
This commit is contained in:
hzj
parent
d9b56abd71
commit
61e6290d54
@ -401,5 +401,17 @@
|
||||
"this_period_recharge": "إعادة الشحن لهذه الفترة:",
|
||||
"recharge_agency_list": "قائمة وكيل إعادة الشحن:",
|
||||
|
||||
"invite_recharge_agent": "دعوة المستخدم ليصبح وكيل إعادة الشحن"
|
||||
"invite_recharge_agent": "دعوة المستخدم ليصبح وكيل إعادة الشحن",
|
||||
|
||||
"item_distribution": "توزيع العناصر",
|
||||
"validity": "الصلاحية",
|
||||
"day": "يوم",
|
||||
"enter_user_id_placeholder": "أدخل معرف المستخدم",
|
||||
"send": "إرسال",
|
||||
"gift_delivery_successful": "تم تسليم الهدية بنجاح",
|
||||
"frames": "الإطارات",
|
||||
"vehicles": "المركبات",
|
||||
"chat_box": "صندوق الدردشة",
|
||||
"theme": "الموضوع",
|
||||
"vip": "VIP"
|
||||
}
|
||||
|
||||
@ -401,5 +401,17 @@
|
||||
"this_period_recharge": "This period's recharge:",
|
||||
"recharge_agency_list": "Recharge Agency List:",
|
||||
|
||||
"invite_recharge_agent": "Invite User To Become Recharge Agency"
|
||||
"invite_recharge_agent": "Invite User To Become Recharge Agency",
|
||||
|
||||
"item_distribution": "Item Distribution",
|
||||
"validity": "Validity",
|
||||
"day": "day",
|
||||
"enter_user_id_placeholder": "Enter user ID",
|
||||
"send": "Send",
|
||||
"gift_delivery_successful": "Gift delivery successful",
|
||||
"frames": "Frames",
|
||||
"vehicles": "Vehicles",
|
||||
"chat_box": "Chat Box",
|
||||
"theme": "Theme",
|
||||
"vip": "VIP"
|
||||
}
|
||||
|
||||
@ -401,5 +401,17 @@
|
||||
"this_period_recharge": "本期充值：",
|
||||
"recharge_agency_list": "充值代理列表：",
|
||||
|
||||
"invite_recharge_agent": "邀请用户成为充值代理"
|
||||
"invite_recharge_agent": "邀请用户成为充值代理",
|
||||
|
||||
"item_distribution": "道具分发",
|
||||
"validity": "有效期",
|
||||
"day": "天",
|
||||
"enter_user_id_placeholder": "请输入用户ID",
|
||||
"send": "发送",
|
||||
"gift_delivery_successful": "礼物发送成功",
|
||||
"frames": "头像框",
|
||||
"vehicles": "坐骑",
|
||||
"chat_box": "聊天框",
|
||||
"theme": "主题",
|
||||
"vip": "VIP"
|
||||
}
|
||||
|
||||
@ -1,13 +1,21 @@
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<div class="bg">
|
||||
<MobileHeader title="Item Distribution" />
|
||||
<!-- 顶部导航 -->
|
||||
<GeneralHeader
|
||||
:showLanguageList="true"
|
||||
:title="t('item_distribution')"
|
||||
:backImg="imgUrl"
|
||||
color="black"
|
||||
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
|
||||
/>
|
||||
|
||||
<!-- 标签 -->
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
"
|
||||
@ -15,13 +23,13 @@
|
||||
<div
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
style="font-size: 18px; padding: 10px 0; flex: 1; text-align: center"
|
||||
style="font-size: 1.3em; padding: 10px 0; flex: 1; text-align: center"
|
||||
class="tab-item"
|
||||
:class="activeIndex == index ? 'tabName-active' : 'tabName'"
|
||||
ref="tabItems"
|
||||
@click="setActiveTab(index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
{{ t(item.name) }}
|
||||
</div>
|
||||
<!-- 下划线元素 -->
|
||||
<div
|
||||
@ -51,7 +59,7 @@
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img :src="product.cover" alt="虚拟商品" style="width: 60%; margin: 10px 0" />
|
||||
<img :src="product.cover" alt="" style="width: 60%; margin: 10px 0" />
|
||||
<button
|
||||
style="
|
||||
background-color: #bb92ff;
|
||||
@ -62,7 +70,7 @@
|
||||
padding: 5px 10px;
|
||||
"
|
||||
>
|
||||
Send
|
||||
{{ t('send') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -84,42 +92,55 @@
|
||||
@click.stop
|
||||
>
|
||||
<img :src="selectedGoods.cover" alt="" style="width: 60%; margin: 5px 0" />
|
||||
<div style="font-weight: 600; font-size: 16px; margin: 10px 0">
|
||||
<span style="color: #00000080; margin-right: 10px">Validity:</span>
|
||||
<span style="font-weight: 700; color: #000">{{ validityPeriod }}day</span>
|
||||
<div style="font-weight: 600; margin: 10px 0">
|
||||
<span style="color: #00000080; margin-right: 10px">{{ t('validity') }}:</span>
|
||||
<span style="font-weight: 700; color: #000">{{ validityPeriod }}{{ t('day') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
style="
|
||||
width: 90%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter user ID"
|
||||
:placeholder="t('enter_user_id_placeholder')"
|
||||
style="
|
||||
height: 36px;
|
||||
width: 171px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background-color: #f1f1f1b2;
|
||||
padding: 8px;
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
font-size: 1em;
|
||||
font-weight: 590;
|
||||
"
|
||||
v-model="targetUserId"
|
||||
/>
|
||||
<button
|
||||
style="
|
||||
height: 36px;
|
||||
width: 72px;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
align-self: stretch;
|
||||
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
padding: 8px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-size: 1em;
|
||||
font-weight: 590;
|
||||
"
|
||||
:style="{ backgroundColor: confirmClick ? '#bb92ff' : '#00000080' }"
|
||||
@click="sendGoods"
|
||||
>
|
||||
Confirm
|
||||
{{ t('confirm') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -131,34 +152,39 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { showWarning, showSuccess } from '@/utils/toast.js'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { getAdminCenterList, giveProps, hasSendGiftsPermission } from '@/api/itemDistribution'
|
||||
import { searchUser } from '@/api/userInfo'
|
||||
|
||||
import MobileHeader from '@/components/MobileHeader.vue'
|
||||
import GeneralHeader from '@/components/GeneralHeader.vue'
|
||||
import maskLayer from '@/components/MaskLayer.vue'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
|
||||
|
||||
const tabList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Frames',
|
||||
name: 'frames',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Vehicles',
|
||||
name: 'vehicles',
|
||||
},
|
||||
// {
|
||||
// id: 3,
|
||||
// name: 'Chat Box',
|
||||
// name: 'chat_box',
|
||||
// },
|
||||
// {
|
||||
// id: 4,
|
||||
// name: 'Theme',
|
||||
// name: 'theme',
|
||||
// },
|
||||
])
|
||||
|
||||
const activeIndex = ref(0)
|
||||
const currentTab = ref('Frames') //选中名字
|
||||
const currentTab = ref('frames') //选中名字
|
||||
const tabItems = ref([]) // 存储标签DOM引用
|
||||
|
||||
const confirmClick = ref(true)
|
||||
@ -218,7 +244,7 @@ const sendGoods = async () => {
|
||||
const res = await giveProps(data)
|
||||
if (res.errorCode == 0 && res.status) {
|
||||
closedPopup()
|
||||
showSuccess('Gift delivery successful')
|
||||
showSuccess(t('gift_delivery_successful'))
|
||||
} else {
|
||||
confirmClick.value = true
|
||||
}
|
||||
@ -238,11 +264,11 @@ const sendGoods = async () => {
|
||||
// 选中的标签
|
||||
const getPropsType = () => {
|
||||
const typeMap = {
|
||||
Frames: 'AVATAR_FRAME',
|
||||
Vehicles: 'RIDE',
|
||||
'Chat Box': 'CHAT_BUBBLE',
|
||||
Theme: 'THEME',
|
||||
VIP: 'NOBLE_VIP',
|
||||
frames: 'AVATAR_FRAME',
|
||||
vehicles: 'RIDE',
|
||||
chat_box: 'CHAT_BUBBLE',
|
||||
theme: 'THEME',
|
||||
vip: 'NOBLE_VIP',
|
||||
}
|
||||
return typeMap[currentTab.value]
|
||||
}
|
||||
@ -300,7 +326,7 @@ onMounted(() => {
|
||||
if (getHasSendVIPPermission('NOBLE_VIP')) {
|
||||
tabList.value.push({
|
||||
id: 3,
|
||||
name: 'VIP',
|
||||
name: 'vip',
|
||||
})
|
||||
}
|
||||
|
||||
@ -339,4 +365,28 @@ onMounted(() => {
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
* {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
* {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
* {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
* {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user