shishengliang/log-lottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: i18n,add en and zh-cn language.

Browse Source
This commit is contained in:
ex_zhangwenlei@exiot.cmcc
2024-11-22 14:53:36 +08:00
parent 8e6eff54f4
commit 391142223f
18 changed files with 189 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/views/Home/PrizeList.vue
View File

@@ -9,6 +9,7 @@ import { IPrizeConfig } from '../../types/storeType';
import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
import i18n from '@/locales/i18n'
const prizeConfig = useStore().prizeConfig
const globalConfig = useStore().globalConfig
const system = useStore().system
@@ -41,7 +42,7 @@ const deleteTemporaryPrize = () => {
}
const submitTemporaryPrize = () => {
if (!temporaryPrize.value.name || !temporaryPrize.value.count) {
alert('请填写完整信息')
alert(i18n.global.t('error.completeInformation'))
return
}
@@ -94,18 +95,18 @@ onMounted(() => {
<div class="flex items-center">
<dialog id="my_modal_1" ref="temporaryPrizeRef" class="border-none modal">
<div class="modal-box">
<h3 class="text-lg font-bold">增加临时抽奖</h3>
<h3 class="text-lg font-bold">{{$t('dialog.titleTemporary')}}</h3>
<div class="flex flex-col gap-3">
<label class="flex w-full max-w-xs">
<div class="label">
<span class="label-text">名称:</span>
<span class="label-text">{{$t('table.name')}}:</span>
</div>
<input type="text" v-model="temporaryPrize.name" placeholder="名称"
<input type="text" v-model="temporaryPrize.name" :placeholder="$t('placeHolder.name')"
class="max-w-xs input-sm input input-bordered" />
</label>
<label class="flex w-full max-w-xs">
<div class="label">
<span class="label-text">是否全员参加</span>
<span class="label-text">{{$t('table.fullParticipation')}}</span>
</div>
<input type="checkbox" :checked="temporaryPrize.isAll"
@change="temporaryPrize.isAll = !temporaryPrize.isAll"
@@ -113,21 +114,21 @@ onMounted(() => {
</label>
<label class="flex w-full max-w-xs">
<div class="label">
<span class="label-text">获奖人数</span>
<span class="label-text">{{$t('table.setLuckyNumber')}}</span>
</div>
<input type="number" v-model="temporaryPrize.count" @change="changePersonCount" placeholder="获奖人数"
<input type="number" v-model="temporaryPrize.count" @change="changePersonCount" :placeholder="$t('placeHolder.winnerCount')"
class="max-w-xs input-sm input input-bordered" />
</label>
<label class="flex w-full max-w-xs">
<div class="label">
<span class="label-text">已获奖人数</span>
<span class="label-text">{{$t('table.luckyPeopleNumber')}}</span>
</div>
<input disabled type="number" v-model="temporaryPrize.isUsedCount" placeholder="获奖人数"
<input disabled type="number" v-model="temporaryPrize.isUsedCount" :placeholder="$t('placeHolder.winnerCount')"
class="max-w-xs input-sm input input-bordered" />
</label>
<label class="flex w-full max-w-xs" v-if="temporaryPrize.separateCount">
<div class="label">
<span class="label-text">单次抽取个数</span>
<span class="label-text">{{$t('table.onceNumber ')}}</span>
</div>
<div class="flex justify-start h-full" @click="selectPrize(temporaryPrize)">
<ul class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
@@ -135,24 +136,24 @@ onMounted(() => {
<li class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
v-for="se in temporaryPrize.separateCount.countList" :key="se.id">
<div class="flex items-center justify-center w-full h-full tooltip"
:data-tip="'已抽取:' + se.isUsedCount + '/' + se.count">
:data-tip="$t('tooltip.doneCount') + se.isUsedCount + '/' + se.count">
<div class="absolute left-0 z-50 h-full bg-blue-300/80"
:style="`width:${se.isUsedCount * 100 / se.count}%`"></div>
<span>{{ se.count }}</span>
</div>
</li>
</ul>
<button v-else class="btn btn-secondary btn-xs">设置</button>
<button v-else class="btn btn-secondary btn-xs">{{$t('button.setting')}}</button>
</div>
</label>
<label class="flex w-full max-w-xs">
<div class="label">
<span class="label-text">图片</span>
<span class="label-text">{{$t('table.image')}}</span>
</div>
<select class="flex-1 w-12 select select-warning select-sm" v-model="temporaryPrize.picture">
<option v-if="temporaryPrize.picture.id" :value="{ id: '', name: '', url: '' }"><span>❌</span>
</option>
<option disabled selected>选择一张图片</option>
<option disabled selected>{{$t('table.selectPicture')}}</option>
<option class="w-auto" v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{
picItem.name }}
</option>
@@ -161,8 +162,8 @@ onMounted(() => {
</div>
<div class="modal-action">
<form method="dialog" class="flex gap-3">
<button class="btn btn-sm" @click="submitTemporaryPrize">确定</button>
<button class="btn btn-sm">取消</button>
<button class="btn btn-sm" @click="submitTemporaryPrize">{{ $t('button.confirm') }}</button>
<button class="btn btn-sm">{{ $t('button.cancel') }}</button>
</form>
</div>
</div>
@@ -190,12 +191,12 @@ onMounted(() => {
<!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
</div>
<div class="flex flex-col gap-1 mr-2">
<div class="tooltip tooltip-left" data-tip="编辑">
<div class="tooltip tooltip-left" :data-tip="$t('tooltip.edit')">
<div class="cursor-pointer hover:text-blue-400" @click="addTemporaryPrize">
<svg-icon name="edit"></svg-icon>
</div>
</div>
<div class="tooltip tooltip-left" data-tip="删除">
<div class="tooltip tooltip-left" :data-tip="$t('tooltip.delete')">
<div class="cursor-pointer hover:text-blue-400" @click="deleteTemporaryPrize">
<svg-icon name="delete"></svg-icon>
</div>
@@ -234,13 +235,13 @@ onMounted(() => {
</li>
</ul>
<div class="flex flex-col gap-3">
<div class="tooltip tooltip-right" data-tip="奖项列表">
<div class="tooltip tooltip-right" :data-tip="$t('tooltip.prizeList')">
<div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
@click="prizeShow = !prizeShow">
<svg-icon name="arrow_left" class="w-full h-full"></svg-icon>
</div>
</div>
<div class="tooltip tooltip-right" data-tip="添加抽奖">
<div class="tooltip tooltip-right" :data-tip="$t('tooltip.addActivity')">
<div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
@click="addTemporaryPrize">
<svg-icon name="add" class="w-full h-full"></svg-icon>
@@ -252,7 +253,7 @@ onMounted(() => {
</div>
<transition name="prize-operate" :appear="true">
<div class="tooltip tooltip-right" data-tip="奖项列表" v-show="!prizeShow">
<div class="tooltip tooltip-right" :data-tip="$t('tooltip.prizeList')" v-show="!prizeShow">
<div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
@click="prizeShow = !prizeShow">
<svg-icon name="arrow_right" class="w-full h-full"></svg-icon>

22
src/views/Home/index.vue
View File

@@ -5,6 +5,7 @@ import { useElementStyle, useElementPosition } from '@/hooks/useElement'
import StarsBackground from '@/components/StarsBackground/index.vue'
import confetti from 'canvas-confetti'
import { filterData, selectCard } from '@/utils'
import i18n from '@/locales/i18n'
import { rgba } from '@/utils/color'
import { IPersonConfig } from '@/types/storeType'
// import * as THREE from 'three'
@@ -375,7 +376,7 @@ const startLottery = () => {
// 验证是否已抽完全部奖项
if (currentPrize.value.isUsed || !currentPrize.value) {
toast.open({
message: '抽奖抽完了',
message: i18n.global.t('error.personIsAllDone'),
type: 'warning',
position: 'top-right',
duration: 10000
@@ -387,7 +388,7 @@ const startLottery = () => {
// 验证抽奖人数是否还够
if (personPool.value.length < currentPrize.value.count - currentPrize.value.isUsedCount) {
toast.open({
message: '抽奖人数不够',
message: i18n.global.t('error.personNotEnough'),
type: 'warning',
position: 'top-right',
duration: 10000
@@ -417,7 +418,8 @@ const startLottery = () => {
}
}
toast.open({
message: `现在抽取${currentPrize.value.name} ${leftover}人`,
// message: `现在抽取${currentPrize.value.name} ${leftover}人`,
message:i18n.global.t('error.startDraw',{count:currentPrize.value.name,leftover:leftover}),
type:'default',
position: 'top-right',
duration: 8000
@@ -637,19 +639,19 @@ onUnmounted(() => {
:style="{ fontSize: textSize * 1.5 + 'px', color: textColor }">{{ topTitle }}</h2>
<div class="flex gap-3">
<button v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
@click="router.push('config')">暂无人员信息，前往导入</button>
@click="router.push('config')">{{$t('button.noInfoAndImport')}}</button>
<button v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
@click="setDefaultPersonList">使用默认数据</button>
@click="setDefaultPersonList">{{$t('button.useDefault')}}</button>
</div>
</div>
<div id="container" ref="containerRef" class="3dContainer">
<!-- 选中菜单结构 start-->
<div id="menu">
<button class="btn-end " @click="enterLottery" v-if="currentStatus == 0 && tableData.length > 0">进入抽奖</button>
<button class="btn-end " @click="enterLottery" v-if="currentStatus == 0 && tableData.length > 0">{{$t('button.enterLottery')}}</button>
<div class="start" v-if="currentStatus == 1">
<button class="btn-start" @click="startLottery"><strong>开始</strong>
<button class="btn-start" @click="startLottery"><strong>{{$t('button.start')}}</strong>
<div id="container-stars">
<div id="stars"></div>
</div>
@@ -661,11 +663,11 @@ onUnmounted(() => {
</button>
</div>
<button class="btn-end btn glass btn-lg" @click="stopLottery" v-if="currentStatus == 2">抽取幸运儿</button>
<button class="btn-end btn glass btn-lg" @click="stopLottery" v-if="currentStatus == 2">{{$t('button.selectLucky')}}</button>
<div v-if="currentStatus == 3" class="flex justify-center gap-6 enStop">
<div class="start">
<button class="btn-start" @click="continueLottery"><strong>继续！</strong>
<button class="btn-start" @click="continueLottery"><strong>{{$t('button.continue')}}</strong>
<div id="container-stars">
<div id="stars"></div>
</div>
@@ -678,7 +680,7 @@ onUnmounted(() => {
</div>
<div class="start">
<button class="btn-cancel" @click="quitLottery"><strong>取消</strong>
<button class="btn-cancel" @click="quitLottery"><strong>{{$t('button.cancel')}}</strong>
<div id="container-stars">
<div id="stars"></div>
</div>