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

feat(for): for

Browse Source
This commit is contained in:
ex_zhangwenlei@exiot.cmcc
2024-01-09 01:03:42 +08:00
parent bea54865ea
commit f34e850ff0
26 changed files with 500 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/Config/Global/FaceConfig.vue
View File

@@ -12,7 +12,7 @@ import { isRgbOrRgba, isHex } from '@/utils/color'
const globalConfig = useStore().globalConfig
const personConfig = useStore().personConfig
const { getTheme: localTheme, getCardColor: cardColor,getLuckyColor:luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount,getIsShowPrizeList:isShowPrizeList } = storeToRefs(globalConfig)
const {getTopTitle:topTitle, getTheme: localTheme, getCardColor: cardColor,getLuckyColor:luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount,getIsShowPrizeList:isShowPrizeList } = storeToRefs(globalConfig)
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
const colorPickerRef = ref()
@@ -21,6 +21,7 @@ interface ThemeDaType {
}
const isRowCountChange = ref(0) //0未改变，1改变,2加载中
const themeValue = ref(localTheme.value.name)
const topTitleValue= ref(structuredClone(topTitle.value))
const cardColorValue = ref(structuredClone(cardColor.value))
const luckyCardColorValue = ref(structuredClone(luckyCardColor.value))
const textColorValue = ref(structuredClone(textColor.value))
@@ -71,7 +72,7 @@ const resetPersonLayout = () => {
const newNotPersonList = newList.slice(alreadyLen, notLen + alreadyLen)
personConfig.deleteAllPerson()
personConfig.addNotPersonList(newNotPersonList)
personConfig.addAlreadyPersonList(newAlreadyPersonList)
personConfig.addAlreadyPersonList(newAlreadyPersonList,null)
isRowCountChange.value = 0
}, 1000)
@@ -130,6 +131,15 @@ onMounted(() => {
<template>
<div>
<label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
<div class="">
<div class="label">
<span class="label-text">标题</span>
</div>
<input type="text" v-model="topTitleValue" placeholder="输入标题"
class="w-full max-w-xs input input-bordered" />
</div>
</label>
<label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
<div class="">
<div class="label">

6
src/views/Config/Person/PersonAll.vue
View File

@@ -5,7 +5,7 @@ import useStore from '@/store'
import {storeToRefs } from 'pinia'
import * as XLSX from 'xlsx'
import { readFile } from '@/utils/file'
import {filterData} from '@/utils'
import {filterData,addOtherInfo} from '@/utils'
import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
const personConfig = useStore().personConfig
@@ -23,9 +23,9 @@ const handleFileChange = async (e: any) => {
let workSheet = workBook.Sheets[workBook.SheetNames[0]]
excelData.value = XLSX.utils.sheet_to_json(workSheet)
const uploadData = filterData(excelData.value,rowCount.value)
const allData=addOtherInfo(uploadData);
personConfig.resetPerson()
personConfig.addNotPersonList(uploadData)
personConfig.addNotPersonList(allData)
}
const deleteAll = () => {

28
src/views/Config/Person/PersonAlready.vue
View File

@@ -2,19 +2,22 @@
<script setup lang='ts'>
import { ref } from 'vue';
import useStore from '@/store'
import { storeToRefs } from 'pinia';
import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
const personConfig = useStore().personConfig
const { getAlreadyPersonList: alreadyPersonList } = personConfig
const personList = ref<any[]>(
alreadyPersonList
)
const { getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
// const personList = ref<any[]>(
// alreadyPersonList
// )
const deleteAll = () => {
personConfig.deleteAllPerson()
personList.value = alreadyPersonList
}
const handleMoveNotPerson=(row:any)=>{
personConfig.moveAlreadyToNot(row)
}
const tableColumns = [
@@ -34,14 +37,23 @@ const tableColumns = [
label: '职位',
props: 'other',
},
{
label:'奖品',
props:'prizeName'
},
{
label: '中奖时间',
props: 'prizeTime',
},
{
label: '操作',
actions: [
{
label: '编辑',
label: '移入未中奖名单',
type: 'btn-info',
onClick: (row: any) => {
console.log('编辑:', row)
handleMoveNotPerson(row)
}
},
{
@@ -63,7 +75,7 @@ const tableColumns = [
<button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button>
</div>
<DaiysuiTable :tableColumns="tableColumns" :data="personList"></DaiysuiTable>
<DaiysuiTable :tableColumns="tableColumns" :data="alreadyPersonList"></DaiysuiTable>
</div>
</template>

91
src/views/Config/Prize/PrizeConfig.vue
View File

@@ -1,7 +1,7 @@
<script setup lang='ts'>
import { ref, onMounted,watch } from 'vue'
import { ref, onMounted, watch } from 'vue'
import useStore from '@/store'
import {storeToRefs } from 'pinia'
import { storeToRefs } from 'pinia'
import localforage from 'localforage'
import { IPrizeConfig } from '@/types/prizeConfig';
@@ -10,9 +10,9 @@ const imageDbStore = localforage.createInstance({
})
const prizeConfig = useStore().prizeConfig
const globalConfig = useStore().globalConfig
const { getPrizeConfig:localPrizeList} = storeToRefs(prizeConfig)
const { getPrizeConfig: localPrizeList, getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
const { getImageList:localImageList} = storeToRefs(globalConfig)
const { getImageList: localImageList } = storeToRefs(globalConfig)
const prizeList = ref(localPrizeList)
const imgList = ref<any[]>([])
const addPrize = () => {
@@ -22,10 +22,11 @@ const addPrize = () => {
sort: 0,
isAll: true,
count: 1,
isUsedCount:0,
picture: {
id:'',
name:'',
url:''
id: '',
name: '',
url: ''
},
desc: '',
isUsed: false,
@@ -34,7 +35,7 @@ const addPrize = () => {
}
prizeConfig.addPrizeConfig(defaultPrizeCOnfig)
}
const resetDefault=()=>{
const resetDefault = () => {
prizeConfig.resetDefault()
}
@@ -50,60 +51,65 @@ const getImageDbStore = async () => {
}
}
const sort = (item:any,isUp:number) => {
const itemIndex=prizeList.value.indexOf(item)
if(isUp==1){
prizeList.value.splice(itemIndex,1)
prizeList.value.splice(itemIndex-1,0,item)
}else{
prizeList.value.splice(itemIndex,1)
prizeList.value.splice(itemIndex+1,0,item)
const sort = (item: any, isUp: number) => {
const itemIndex = prizeList.value.indexOf(item)
if (isUp == 1) {
prizeList.value.splice(itemIndex, 1)
prizeList.value.splice(itemIndex - 1, 0, item)
} else {
prizeList.value.splice(itemIndex, 1)
prizeList.value.splice(itemIndex + 1, 0, item)
}
}
const delItem=(item:IPrizeConfig)=>{
const delItem = (item: IPrizeConfig) => {
prizeConfig.deletePrizeConfig(item.id)
// 更新奖项列表
}
const delAll=async ()=>{
await prizeConfig.deleteAllPrizeConfig()
const delAll = async () => {
await prizeConfig.deleteAllPrizeConfig()
}
onMounted(() => {
getImageDbStore()
})
watch(()=>prizeList,()=>{
watch(() => prizeList, () => {
prizeConfig.setPrizeConfig(prizeList.value)
},{deep:true})
}, { deep: true })
</script>
<template>
<div>
<h2>奖项配置</h2>
<div class="flex w-full gap-3">
<button class="btn btn-info btn-sm" @click="addPrize">添加</button>
<button class="btn btn-info btn-sm" @click="resetDefault">默认列表</button>
<button class="btn btn-error btn-sm" @click="delAll">全部删除</button>
</div>
<button class="btn btn-info btn-sm" @click="addPrize">添加</button>
<button class="btn btn-info btn-sm" @click="resetDefault">默认列表</button>
<button class="btn btn-error btn-sm" @click="delAll">全部删除</button>
</div>
<ul>
<li v-for="item in prizeList" :key="item.id" class="flex gap-10">
<li v-for="item in prizeList" :key="item.id" class="flex gap-10"
:class="currentPrize.id == item.id ? 'border-1 border-solid rounded-xl' : null">
<label class="max-w-xs mb-10 form-control">
<!-- 向上向下 -->
<div class="flex flex-col items-center gap-2 pt-5">
<svg-icon class="cursor-pointer hover:text-blue-400" :class="prizeList.indexOf(item)==0?'opacity-0 cursor-default':''" name="up" @click="sort(item,1)"></svg-icon>
<svg-icon class="cursor-pointer hover:text-blue-400" name="down" @click="sort(item,0)" :class="prizeList.indexOf(item)==prizeList.length-1?'opacity-0 cursor-default':''"></svg-icon>
<svg-icon class="cursor-pointer hover:text-blue-400"
:class="prizeList.indexOf(item) == 0 ? 'opacity-0 cursor-default' : ''" name="up"
@click="sort(item, 1)"></svg-icon>
<svg-icon class="cursor-pointer hover:text-blue-400" name="down" @click="sort(item, 0)"
:class="prizeList.indexOf(item) == prizeList.length - 1 ? 'opacity-0 cursor-default' : ''"></svg-icon>
</div>
</label>
<label class="w-full max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">名称</span>
</div>
<input type="text" v-model="item.name" placeholder="名称" class="w-full max-w-xs input-sm input input-bordered" />
<input type="text" v-model="item.name" placeholder="名称"
class="w-full max-w-xs input-sm input input-bordered" />
</label>
<label class="w-full max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">是否全员参加</span>
</div>
<input type="checkbox" :checked="item.isAll" @change="item.isAll =!item.isAll"
<input type="checkbox" :checked="item.isAll" @change="item.isAll = !item.isAll"
class="mt-2 border-solid checkbox checkbox-secondary border-1" />
</label>
<label class="w-full max-w-xs mb-10 form-control">
@@ -113,39 +119,46 @@ watch(()=>prizeList,()=>{
<input type="number" v-model="item.count" placeholder="获奖人数"
class="w-full max-w-xs input-sm input input-bordered" />
</label>
<label class="w-full max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">已获奖人数</span>
</div>
<input disabled type="number" v-model="item.isUsedCount" placeholder="获奖人数" class="w-full max-w-xs input-sm input input-bordered" />
</label>
<label class="w-full max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">图片</span>
</div>
<select class="w-full max-w-xs select select-warning select-sm" v-model="item.picture">
<select class="w-full max-w-xs select select-warning select-sm" v-model="item.picture">
<option disabled selected>选择一张图片</option>
<option v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{ picItem.name }}</option>
<option v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{ picItem.name }}
</option>
</select>
</label>
<label class="w-full max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">展示在主界面</span>
</div>
<input type="checkbox" :checked="item.isShow" @change="item.isShow =!item.isShow"
<input type="checkbox" :checked="item.isShow" @change="item.isShow = !item.isShow"
class="mt-2 border-solid checkbox checkbox-secondary border-1" />
</label>
<label class="w-full max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">抽取次数</span>
</div>
<input type="text" v-model="item.frequency" placeholder="抽取次数" class="w-full max-w-xs input-sm input input-bordered" />
<input type="text" v-model="item.frequency" placeholder="抽取次数"
class="w-full max-w-xs input-sm input input-bordered" />
</label>
<label class="w-full max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">操作</span>
</div>
<div class="flex gap-2">
<button class="btn btn-error btn-sm" @click="delItem(item)">删除</button>
</div>
<button class="btn btn-error btn-sm" @click="delItem(item)">删除</button>
</div>
</label>
</li>
</ul>
</div>
</template>
</div></template>
<style lang='scss' scoped></style>

8
src/views/Config/index.vue
View File

@@ -71,11 +71,9 @@ const skip = (path: string) => {
</nav>
<nav>
<div class="grid grid-flow-col gap-4">
<a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
<path
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z">
</path>
</svg></a>
<a href="https://github.com/LOG1997/log-lottery" target="_blank" class="cursor-pointer">
<svg-icon name="github"></svg-icon>
</a>
<a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
<path
d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z">

225
src/views/Home/LuckyThree.vue
View File

@@ -1,225 +0,0 @@
<script setup lang="ts">
import { ref, onMounted,computed,watch,toRef } from 'vue'
// import { tableData2 as tableData } from './data'
import { rgba } from '@/utils/color'
import {filterData} from '@/utils'
import * as THREE from 'three'
import {
CSS3DRenderer, CSS3DObject
} from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
import TWEEN from 'three/examples/jsm/libs/tween.module.js';
import useStore from '@/store'
const props=defineProps({
luckyPersonList:{
type:Array as ()=>Array<any>,
default:()=>{[]}
}
})
// const emits=defineEmits()=
const globalConfig = useStore().globalConfig
const { getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = globalConfig
const tableData = computed(()=>{
console.log('pppppprops:',props.luckyPersonList)
const cloneData=toRef(props.luckyPersonList)
console.log(props.luckyPersonList,cloneData.value)
const luckyList=filterData(cloneData.value,Math.floor(rowCount/2))
console.log('lucskskskskksks:',luckyList)
return luckyList
})
const luckyContainerRef = ref<HTMLElement>()
const scene = ref()
const camera = ref()
const renderer = ref()
const controls = ref()
const objects = ref<any[]>([])
const targets = {
table: <any[]>[],
};
const init = () => {
const felidView = 40;
const width = window.innerWidth;
const height = window.innerHeight;
const aspect = width / height;
const nearPlane = 1;
const farPlane = 10000;
const WebGLoutput = luckyContainerRef.value
scene.value = new THREE.Scene();
camera.value = new THREE.PerspectiveCamera(felidView, aspect, nearPlane, farPlane);
camera.value.position.z = 3000;
renderer.value = new CSS3DRenderer()
renderer.value.setSize(width, height)
renderer.value.domElement.style.position = 'absolute';
WebGLoutput!.appendChild(renderer.value.domElement);
controls.value = new TrackballControls(camera.value, renderer.value.domElement);
controls.value.rotateSpeed = 1;
controls.value.staticMoving = true;
controls.value.minDistance = 500;
controls.value.maxDistance = 6000;
controls.value.addEventListener('change', render);
const tableLen = tableData.value.length
for (let i = 0; i < tableLen; i++) {
const element = document.createElement('div');
element.className = 'lucky-element-card';
// element.style.backgroundColor = `rgba( 0, 127, 127, ${Math.random() * 0.5 + 0.25} )`;
element.style.backgroundColor = rgba(luckyCardColor, Math.random() * 0.5 + 0.25)
element.style.border = `1px solid ${rgba(luckyCardColor, 0.25)}`
element.style.boxShadow = `0 0 12px ${rgba(luckyCardColor, 0.5)}`
// hover style
element.addEventListener('mouseover', function () {
this.style.border = `1px solid ${rgba(luckyCardColor, 0.75)}`
this.style.boxShadow = `0 0 12px ${rgba(luckyCardColor, 0.75)}`
})
element.addEventListener('mouseout', function () {
this.style.border = `1px solid ${rgba(luckyCardColor, 0.25)}`
this.style.boxShadow = `0 0 12px ${rgba(luckyCardColor, 0.5)}`
})
element.style.width = `${cardSize.width*2}px`;
element.style.height = `${cardSize.height*2}px`;
// element.style.color=localTheme.detail.primary
const number = document.createElement('div');
number.className = 'lucky-card-id';
// number.textContent = (i / 5 + 1).toString();
number.textContent = tableData.value[i].uid;
number.style.fontSize = `${textSize}px`;
element.appendChild(number);
const symbol = document.createElement('div');
symbol.className = 'lucky-card-name';
symbol.textContent = tableData.value[i].name;
symbol.style.textShadow = `0 0 12px ${rgba(luckyCardColor, 0.95)}`
symbol.style.fontSize = `${textSize*2}px`;
element.appendChild(symbol);
const detail = document.createElement('div');
detail.className = 'lucky-card-detail';
detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].other}`;
detail.style.fontSize = `${textSize}px`;
element.appendChild(detail);
const object = new CSS3DObject(element);
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
object.position.z = Math.random() * 4000 - 2000;
scene.value.add(object);
objects.value.push(object);
}
createTableVertices();
function createTableVertices() {
const tableLen = tableData.value.length;
for (let i = 0; i < tableLen; i++) {
const object = new THREE.Object3D();
object.position.x = tableData.value[i].x * (cardSize.width*2 + 40) - rowCount * 90;
object.position.y = -tableData.value[i].y * (cardSize.height*2 + 20) + 1000;
object.position.z = 0;
targets.table.push(object);
}
}
window.addEventListener('resize', onWindowResize, false);
transform(targets.table, 2000)
render();
}
const transform = (targets: any[], duration: number) => {
TWEEN.removeAll();
const objLength = objects.value.length;
for (let i = 0; i < objLength; ++i) {
let object = objects.value[i];
let target = targets[i];
new TWEEN.Tween(object.position)
.to({ x: target.position.x, y: target.position.y, z: target.position.z },
Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
new TWEEN.Tween(object.rotation)
.to({ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z }, Math.random() * duration + duration)
.easing(TWEEN.Easing.Exponential.InOut)
.start();
}
// 这个补间用来在位置与旋转补间同步执行，通过onUpdate在每次更新数据后渲染scene和camera
new TWEEN.Tween({})
.to({}, duration * 2)
.onUpdate(render)
.start();
// 整体自动旋转
}
function onWindowResize() {
camera.value.aspect = window.innerWidth / window.innerHeight
camera.value.updateProjectionMatrix();
renderer.value.setSize(window.innerWidth, window.innerHeight);
render();
}
/**
* [animation update all tween && controls]
*/
function animation() {
TWEEN.update();
controls.value.update();
// 设置自动旋转
// console.log('animation',controls.value.target);
// 设置相机位置
requestAnimationFrame(animation);
}
function render() {
renderer.value.render(scene.value, camera.value);
}
const submit=()=>{
tableData.value.length=0;
}
onMounted(() => {
});
watch(()=>props.luckyPersonList,()=>{
luckyContainerRef.value!.style.zIndex='100'
init();
animation();
luckyContainerRef.value!.style.color = `${textColor}`
console.log('tableData',tableData.value)
},{deep:true})
</script>
<template>
<div class="absolute top-0 w-full h-full bg-gray-400/10 -z-50" ref="luckyContainerRef">
<button class="btn glass" @click="submit">确定</button>
</div>
</template>
<style scoped lang="scss">
</style>

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

@@ -19,17 +19,6 @@ const getPrizeListHeight = () => {
}
const prizeShow = ref(structuredClone(isShowPrizeList.value))
const delAll = () => {
prizeConfig.deleteAllPrizeConfig()
}
const resetDefault = () => {
prizeConfig.resetDefault()
}
const print = () => {
console.log(prizeConfig)
}
const addTemporaryPrize = () => {
console.log('addTemporaryPrize')
}
@@ -44,23 +33,25 @@ onMounted(() => {
<transition name="prize-list" :appear="true">
<div v-if="prizeShow" class="flex items-center">
<ul class="flex flex-col gap-1 p-2 rounded-xl bg-slate-500/50" ref="prizeListRef">
<li v-for="item in localPrizeList" :key="item.id"
:class="currentPrize.id == item.id ? 'current-prize' : ''">
<div
class="relative flex flex-row items-center justify-between w-64 h-20 shadow-xl card bg-base-100">
<div v-if="item.isUsed" class="absolute w-full h-full bg-gray-800/90 item-mask z-200 rounded-xl"></div>
class="relative flex flex-row items-center justify-between w-64 h-20 shadow-xl card bg-base-100" v-if="item.isShow">
<div v-if="item.isUsed" class="absolute z-50 w-full h-full bg-gray-800/70 item-mask rounded-xl"></div>
<figure class="w-10 h-10 rounded-xl">
<img :src="item.picture.url" alt="Shoes" class="object-cover h-full rounded-xl" />
</figure>
<div class="items-center text-center card-body">
<h2 class="card-title">{{ item.name }}</h2>
<div class="items-center p-0 text-center card-body">
<h2 class="p-0 m-0 card-title">{{ item.name }}</h2>
<p class="absolute z-40 p-0 m-0 text-gray-300/80 pt-9">{{ item.isUsedCount }}/{{ item.count }}</p>
<progress class="w-3/4 h-6 progress progress-primary" :value="item.isUsedCount" :max="item.count"></progress>
<!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
</div>
</div>
</li>
</ul>
<div class="flex flex-col gap-3">
<div class="tooltip" data-tip="抽奖">
<div class="tooltip" data-tip="奖项列表">
<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>
@@ -78,7 +69,7 @@ onMounted(() => {
</div>
<transition name="prize-operate" :appear="true">
<div class="tooltip" data-tip="抽奖" v-show="!prizeShow">
<div class="tooltip" data-tip="奖项列表" 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>

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

@@ -1,12 +1,9 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue'
// import { tableData2 as tableData } from './data'
import { rgba } from '@/utils/color'
// import PlayMusic from './PlayMusic.vue'
import { ref, onMounted,onUnmounted, watch } from 'vue'
import PrizeList from './PrizeList.vue'
import { useElementStyle } from '@/hooks/useElement'
import { useElementStyle, useElementPosition } from '@/hooks/useElement'
import StarsBackground from '@/components/StarsBackground/index.vue'
import LuckyView from './LuckyThree.vue'
import confetti from 'canvas-confetti'
import * as THREE from 'three'
import {
CSS3DRenderer, CSS3DObject
@@ -14,23 +11,26 @@ import {
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';
import TWEEN from 'three/examples/jsm/libs/tween.module.js';
import useStore from '@/store'
import { storeToRefs } from 'pinia'
import { useToast } from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-sugar.css';
const toast = useToast();
const personConfig = useStore().personConfig
const globalConfig = useStore().globalConfig
const prizeConfig = useStore().prizeConfig
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = personConfig
const { getCurrentPrize: currentPrize } = prizeConfig
const { getCardColor: cardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = globalConfig
const tableData = ref(
alreadyPersonList.concat(notPersonList)
)
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
const { getCurrentPrize: currentPrize } = storeToRefs(prizeConfig)
const {getTopTitle:topTitle, getCardColor: cardColor, getTextColor: textColor, getLuckyColor: luckyColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount } = storeToRefs(globalConfig)
const tableData = ref(JSON.parse(JSON.stringify(alreadyPersonList.value)).concat(JSON.parse(JSON.stringify(notPersonList.value))))
const currentStatus = ref(0) // 0为初始状态， 1为抽奖准备状态，2为抽奖中状态，3为抽奖结束状态
const ballRotationY = ref(0)
const containerRef = ref<HTMLElement>()
// const LuckyViewRef= ref()
const canOperate = ref(true)
const cameraZ = ref(3000)
const scene = ref()
const camera = ref()
@@ -47,6 +47,7 @@ const targets = {
const luckyTargets = ref<any[]>([])
const luckyCardList = ref<any[]>([])
const currentPrizeValue=ref(JSON.parse(JSON.stringify(currentPrize.value)))
const init = () => {
const felidView = 40;
const width = window.innerWidth;
@@ -58,11 +59,27 @@ const init = () => {
scene.value = new THREE.Scene();
camera.value = new THREE.PerspectiveCamera(felidView, aspect, nearPlane, farPlane);
camera.value.position.z = 3000;
camera.value.position.z = cameraZ.value
// 侦听camera position变化
// watch(() => camera.value.position.z, (value) => {
// console.log('code line-63 \n\r😍 camara posi:\n\r',value);
// console.log('code line-63 \n\r😍 camara rrrr:\n\r',camera.value.rotation);
// cameraZ.value = value
// })
// watch(() => camera.value.rotation.z, (value) => {
// console.log('code line-68 \n\r😁 camraea rotation:\n\r',value);
// // cameraZ.value = value
// })
renderer.value = new CSS3DRenderer()
renderer.value.setSize(width, height)
renderer.value.setSize(width, height*0.9)
renderer.value.domElement.style.position = 'absolute';
// 垂直居中
renderer.value.domElement.style.paddingTop = '50px'
renderer.value.domElement.style.top = '50%';
renderer.value.domElement.style.left = '50%';
renderer.value.domElement.style.transform = 'translate(-50%, -50%)';
WebGLoutput!.appendChild(renderer.value.domElement);
controls.value = new TrackballControls(camera.value, renderer.value.domElement);
@@ -76,25 +93,6 @@ const init = () => {
for (let i = 0; i < tableLen; i++) {
let element = document.createElement('div');
element.className = 'element-card';
// element.style.backgroundColor = `rgba( 0, 127, 127, ${Math.random() * 0.5 + 0.25} )`;
// element.style.backgroundColor = rgba(cardColor, Math.random() * 0.5 + 0.25)
// element.style.border = `1px solid ${rgba(cardColor, 0.25)}`
// element.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
// element.style.width = `${cardSize.width}px`;
// element.style.height = `${cardSize.height}px`;
// element.addEventListener('mouseover', function () {
// console.log(this)
// this.style.border = `1px solid ${rgba(cardColor, 0.75)}`
// this.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.75)}`
// })
// element.addEventListener('mouseout', function () {
// this.style.border = `1px solid ${rgba(cardColor, 0.25)}`
// this.style.boxShadow = `0 0 12px ${rgba(cardColor, 0.5)}`
// })
// hover style
// element.style.color=localTheme.detail.primary
const number = document.createElement('div');
number.className = 'card-id';
@@ -116,7 +114,7 @@ const init = () => {
// detail.style.fontSize = `${textSize * 0.5}px`;
element.appendChild(detail);
element = useElementStyle(element, cardColor, cardSize, textSize)
element = useElementStyle(element, cardColor.value, cardSize.value, textSize.value)
const object = new CSS3DObject(element);
object.position.x = Math.random() * 4000 - 2000;
object.position.y = Math.random() * 4000 - 2000;
@@ -136,8 +134,8 @@ const init = () => {
for (let i = 0; i < tableLen; i++) {
const object = new THREE.Object3D();
object.position.x = tableData.value[i].x * (cardSize.width + 40) - rowCount * 90;
object.position.y = -tableData.value[i].y * (cardSize.height + 20) + 1000;
object.position.x = tableData.value[i].x * (cardSize.value.width + 40) - rowCount.value * 90;
object.position.y = -tableData.value[i].y * (cardSize.value.height + 20) + 1000;
object.position.z = 0;
targets.table.push(object);
@@ -214,10 +212,12 @@ const transform = (targets: any[], duration: number) => {
.onComplete(() => {
if (luckyCardList.value.length) {
luckyCardList.value.forEach((item: any) => {
return useElementStyle(item.element, cardColor, { width: cardSize.width, height: cardSize.height }, textSize)
return useElementStyle(item.element, cardColor.value, cardSize.value, textSize.value)
})
}
luckyCardList.value = [];
canOperate.value = true
});
}
@@ -248,11 +248,11 @@ function animation() {
requestAnimationFrame(animation);
}
// // 自动旋转的动画
function rollBall(rotateY: number, duration: number, mod: 'default' | 'restore' = 'default') {
// // 旋转的动画
function rollBall(rotateY: number, duration: number) {
TWEEN.removeAll();
return new Promise((resolve, reject) => {
return new Promise((resolve) => {
scene.value.rotation.y = 0;
ballRotationY.value = Math.PI * rotateY * 1000
const rotateObj = new TWEEN.Tween(scene.value.rotation);
@@ -270,85 +270,240 @@ function rollBall(rotateY: number, duration: number, mod: 'default' | 'restore'
.onUpdate(render)
.start()
.onStop(() => {
scene.value.rotation.y = 0;
resolve('')
})
.onComplete(() => {
resolve('')
canOperate.value = true
})
})
}
// 将视野转回正面
function resetCamera() {
new TWEEN.Tween(camera.value.position)
.to(
{
x: 0,
y: 0,
z: 3000
},
1000
)
.onUpdate(render)
.start()
.onComplete(() => {
new TWEEN.Tween(camera.value.rotation)
.to(
{
x: 0,
y: 0,
z: 0
},
1000
)
.onUpdate(render)
.start()
.onComplete(() => {
canOperate.value = true // 相机恢复原位
// camera.value.lookAt(scene.value.position)
camera.value.position.y = 0
camera.value.position.x = 0
camera.value.position.z = 3000
camera.value.rotation.x = 0
camera.value.rotation.y = 0
camera.value.rotation.z = -0
controls.value.reset()
})
})
}
function render() {
renderer.value.render(scene.value, camera.value);
}
const enterLottery = async () => {
if (!canOperate.value) {
return
}
canOperate.value = false
transform(targets.sphere, 1000)
currentStatus.value = 1
// setTimeout(() => {
// rollBall(0.1,3000)
// }, 3000)
setTimeout(() => {
rollBall(0.1, 2000)
}, 2000)
}
// 开始抽奖
const startLottery = () => {
if (!canOperate.value) {
return
}
currentStatus.value = 2
rollBall(10, 3000)
}
const stopLottery = async () => {
if (!canOperate.value) {
return
}
canOperate.value = false
TWEEN.removeAll();
rollBall(0, 1)
// scene正面
currentStatus.value = 0
// 从notPersonList随机抽取currentPrize.count个
const notPersonListLength = notPersonList.length;
for (let i = 0; i < currentPrize.count; i++) {
const notPersonListLength = notPersonList.value.length;
// 每次最多抽十个
let luckyCount = 10
const leftover = currentPrize.value.count - currentPrize.value.isUsedCount
leftover < luckyCount ? luckyCount = leftover : luckyCount
if (notPersonListLength < luckyCount) {
toast.open({
message: '抽奖人数不够',
type: 'warning',
position: 'top-right',
duration: 10000
})
return;
}
for (let i = 0; i < luckyCount; i++) {
if (notPersonListLength > 0) {
const randomIndex = Math.floor(Math.random() * notPersonListLength);
luckyTargets.value.push(notPersonList[randomIndex])
luckyTargets.value.push(notPersonList.value[randomIndex])
let LuckyCard = objects.value[randomIndex]
console.log(LuckyCard)
LuckyCard.element = useElementStyle(LuckyCard.element, '#ffd700', { width: cardSize.width * 2, height: cardSize.height * 2 }, textSize * 2, 'lucky')
// 重新设置位置
LuckyCard.position.x = 100
LuckyCard.position.y = 300
LuckyCard.position.z = 0
// LuckyCard.rotation.x = 0
// LuckyCard.rotation.y = 0
// LuckyCard.rotation.z = 0
new TWEEN.Tween(LuckyCard.position)
.to({
x: LuckyCard.x,
y: LuckyCard.y,
z: 1200
}, 1000)
.start()
new TWEEN.Tween(LuckyCard.rotation)
.to({
x: 0,
y: 0,
z: 0
}, 1000)
.start()
luckyCardList.value.push(LuckyCard)
}
}
personConfig.addAlreadyPersonList(luckyTargets.value)
const luckyCardListLength = luckyCardList.value.length;
const windowSize = { width: window.innerWidth, height: window.innerHeight }
luckyCardListLength && luckyCardList.value.forEach((item: any, index: number) => {
item.element = useElementStyle(item.element, luckyColor.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, textSize.value * 2, 'lucky')
item = useElementPosition(item, rowCount.value, { width: cardSize.value.width * 2, height: cardSize.value.height * 2 }, windowSize, index)
new TWEEN.Tween(item.position)
.to({
x: item.x,
y: item.y,
z: 1000
}, 700)
.start()
new TWEEN.Tween(item.rotation)
.to({
x: 0,
y: 0,
z: 0
}, 600)
.start()
.onComplete(() => {
confettiFire()
resetCamera()
})
})
currentPrizeValue.value.isUsedCount += luckyCount
if(currentPrizeValue.value.isUsedCount>=currentPrizeValue.value.count){
currentPrizeValue.value.isUsed=true
}
prizeConfig.setCurrentPrize(currentPrizeValue.value)
prizeConfig.updatePrizeConfig(currentPrizeValue.value)
personConfig.addAlreadyPersonList(luckyTargets.value, currentPrize.value)
}
// 庆祝动画
const confettiFire = () => {
var duration = 3 * 1000;
var end = Date.now() + duration;
(function frame() {
// launch a few confetti from the left edge
confetti({
particleCount: 2,
angle: 60,
spread: 55,
origin: { x: 0 }
});
// and launch a few from the right edge
confetti({
particleCount: 2,
angle: 120,
spread: 55,
origin: { x: 1 }
});
// keep going until we are out of time
if (Date.now() < end) {
requestAnimationFrame(frame);
}
}());
centerFire(0.25, {
spread: 26,
startVelocity: 55,
});
centerFire(0.2, {
spread: 60,
});
centerFire(0.35, {
spread: 100,
decay: 0.91,
scalar: 0.8
});
centerFire(0.1, {
spread: 120,
startVelocity: 25,
decay: 0.92,
scalar: 1.2
});
centerFire(0.1, {
spread: 120,
startVelocity: 45,
});
}
const centerFire = (particleRatio: number, opts: any) => {
const count = 200
confetti({
origin: { y: 0.7 },
...opts,
particleCount: Math.floor(count * particleRatio)
});
}
// 监听空格键
const listenSpaceKey=()=>{
window.addEventListener('keydown', (e) => {
console.log('code line-468 \n\r😒 e:\n\r',e);
//
if (e.code !== 'Space') {
return
}
if(currentStatus.value==0){
enterLottery()
}
else if(currentStatus.value==1){
startLottery()
}
else if(currentStatus.value==2){
stopLottery()
}
})
}
onMounted(() => {
init();
animation();
containerRef.value!.style.color = `${textColor}`
listenSpaceKey()
});
onUnmounted(() => {
window.removeEventListener('keydown', listenSpaceKey)
})
watch(()=>currentPrizeValue.value.isUsed,(val)=>{
if(val){
currentPrizeValue.value=JSON.parse(JSON.stringify(currentPrize.value))
}
})
</script>
<template>
<div id="container" ref="containerRef">
<h2 class="absolute w-full pt-12 m-0 font-mono tracking-wide text-center leading-12" :style="{fontSize:textSize*1.5+'px',color:textColor}">{{ topTitle }}</h2>
<div id="container" ref="containerRef" class="3dContainer">
<!-- 选中菜单结构 start-->
<div id="menu">
<button class="btn glass" @click="enterLottery" v-if="currentStatus == 0">进入抽奖</button>
@@ -356,8 +511,10 @@ onMounted(() => {
<button class="btn glass" @click="startLottery" v-if="currentStatus == 1">开始</button>
<button class="btn glass" @click="stopLottery" v-if="currentStatus == 2">结束</button>
<button id="table" @click="transform(targets.table, 2000)">TABLE</button>
<button id="helix" @click="transform(targets.helix, 2000)">HELIX</button>
<!-- <button id="table" @click="transform(targets.table, 2000)">TABLE</button> -->
<!-- <button id="helix" @click="transform(targets.helix, 2000)">HELIX</button> -->
</div>
<!-- end -->