Skip to content

C
celebrate1024_web
Commit a8aee09f authored by 曹洋's avatar 曹洋
Browse files
Options

initial

parents
Expand all Show whitespace changes
Inline Side-by-side
Showing with 862 additions and 0 deletions
.gitignore 0 → 100644
View file @ a8aee09f
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
README.md 0 → 100644
View file @ a8aee09f
# celebrate1024
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
后台接口地址在src/viewer/luckDraw/components/drawTree/index.vue
\ No newline at end of file
babel.config.js 0 → 100644
View file @ a8aee09f
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
package-lock.json 0 → 100644
View file @ a8aee09f
This diff is collapsed.
package.json 0 → 100644
View file @ a8aee09f
{
"name": "celebrate1024",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"element-ui": "^2.13.2",
"qs.js": "^0.1.12",
"vue": "^2.6.11",
"vue-axios": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.1",
"sass-loader": "^10.0.3",
"vue-router": "^3.4.6",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
public/index.html 0 → 100644
View file @ a8aee09f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
html, body{
height: 100%;
width:100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
public/jquery-3.4.1/jquery-3.4.1.js 0 → 100644
View file @ a8aee09f
This diff is collapsed.
public/jquery-3.4.1/jquery-3.4.1.min.js 0 → 100644
View file @ a8aee09f
This diff is collapsed.
public/jquery-3.4.1/jquery插件库.url 0 → 100644
View file @ a8aee09f
[{000214A0-0000-0000-C000-000000000046}]
Prop3=19,2
[InternetShortcut]
URL=http://www.jq22.com/
IDList=
HotKey=0
public/jquery-3.4.1/www.jq22.com.txt 0 → 100644
View file @ a8aee09f
jQuery插件库
http://www.jq22.com
找的更少，做的更多！ jQuery插件库只为您提供最好的！
src/App.vue 0 → 100644
View file @ a8aee09f
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
width: 100%;
height: 100%;
}
</style>
src/components/HelloWorld.vue 0 → 100644
View file @ a8aee09f
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/main.js 0 → 100644
View file @ a8aee09f
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './routes'
import ElementUI from 'element-ui';
import axios from 'axios'
import 'element-ui/lib/theme-chalk/index.css';
Vue.prototype.$axios = axios
Vue.use(VueRouter)
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
src/routes.js 0 → 100644
View file @ a8aee09f
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from './viewer/HelloWorld';
import luckDraw from './viewer/LuckDraw';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'celebrate',
component: HelloWorld
},
{
path: '/luckDraw',
name: 'luckDraw',
component: luckDraw
}
],
});
src/viewer/HelloWorld/index.vue 0 → 100644
View file @ a8aee09f
<template>
<div class="hello">
<div class="hello-world">Hello World!</div>
<div class="img-contanier"><img src="../../assets/img/main.png"></div>
<div class="dream">我们挥舞着键盘和本子,发誓要把这世界写的明明白白</div>
<div class="btn" @click="letsGoToParty">Lets Go Party!</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
letsGoToParty() {
this.$router.push('/luckDraw')
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
.hello{
background: #252526;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.hello-world{
font-size: 100px;
color: white;
letter-spacing:13px;
}
.dream{
font-size: 30px;
color: white;
}
.img-contanier{
width: 368px;
height: 208px;
img{
width: 100%;
height: 100%;
}
padding: 60px 0 60px 0;
}
.btn{
color: white;
margin-top: 100px;
border: 4px solid white;
border-radius: 5px;
font-size: 50px;
padding: 30px;
cursor: pointer;
}
}
</style>
src/viewer/LuckDraw/components/LucklyItem/index.vue 0 → 100644
View file @ a8aee09f
<template>
<div class="lucklyitem-containr" :class="{ win: isWin}">
<div class="item-name">{{dataItem.name}}</div>
<div class="item-lable-list"><i>分数：</i>{{dataItem.score}}</div>
<div class="item-lable-list"><i>排名：</i>{{dataIndex}}</div>
</div>
</template>
<script>
export default {
name:'LucklyItem',
props: {
dataItem: {
type: Object,
default: () => {}
},
dataIndex:{
type: Number,
default: 0
},
awardLevel:{
type:String,
default: '3'
}
},
watch: {
// eslint-disable-next-line no-unused-vars
dataIndex(newValue, oldValue) {
this.updataLucklyItem(this.awardLevel,newValue)
},
// eslint-disable-next-line no-unused-vars
awardLevel(newValue, oldValue){
this.updataLucklyItem(newValue,this.dataIndex)
}
},
mounted(){
this.updataLucklyItem(this.awardLevel,this.dataIndex)
},
data() {
return {
isWin:false
}
},
methods: {
updataLucklyItem(awardLevel,dataIndex) {
let topNum = 0;
switch(awardLevel){
case '3':
topNum = 1;
break;
case '2':
topNum = 10;
break;
case '1':
topNum = 20;
break;
default:
break;
}
this.isWin = dataIndex <= topNum ? true : false
}
},
}
</script>
<style lang="scss">
.win{
border: 1px solid red;
}
.lucklyitem-containr{
width: 100%;
height: 100%;
align-self: center;
display: flex;
justify-content: center;
// align-items: center;
flex-direction: column;
.item-name{
margin-left: 30px;
font-size: 30px;
color: #ccc7c7;
margin-bottom: 15px;
}
.item-lable-list{
padding-left: 30px;
font-size: 20px;
color: #989898;
margin: 5px 0 5px 0;
i{
font-size: 20px;
color: #3794ff;
font-style: normal;
}
}
}
</style>
\ No newline at end of file
src/viewer/LuckDraw/components/drawTree/index.vue 0 → 100644
View file @ a8aee09f
<template>
<div class="drawTreeContainer">
<img src="@/assets/img/treeHead.png" alt="">
<div class="treeContainer">
<el-upload
class="treeContainer-upload"
action=""
:multiple="false"
:auto-upload="false"
:on-change="onUpload"
:limit="3">
<el-button class="input-btn" size="mini" type="primary">导入抽奖名单</el-button>
</el-upload>
<el-collapse class="tree-collapse" v-model="activeName" accordion @change="onCollapseChange">
<el-collapse-item title="三等奖 third prize" name="1">
<div class="collapse-item-container">
<div class="award-lable">第{{round}}轮抽奖</div>
<el-button @click="luckDraw" :disabled="isDrawDisable" size="mini" class="award-btn" type="primary">开始抽奖</el-button>
</div>
</el-collapse-item>
<el-collapse-item title="二等奖 second prize" name="2">
<div class="collapse-item-container">
<div class="award-lable">第{{round}}轮抽奖</div>
<el-button @click="luckDraw" :disabled="isDrawDisable" size="mini" class="award-btn" type="primary">开始抽奖</el-button>
</div>
</el-collapse-item>
<el-collapse-item title="一等奖 the first prize" name="3">
<div class="collapse-item-container">
<div class="award-lable">第{{round}}轮抽奖</div>
<el-button @click="luckDraw" :disabled="isDrawDisable" size="mini" class="award-btn" type="primary">开始抽奖</el-button>
</div>
</el-collapse-item>
</el-collapse>
</div>
</div>
</template>
<script>
export default {
/* eslint-disable no-undef */
name:'drawTree',
data() {
return {
round: 0,
activeName: 0,
isDrawDisable: false,
drawResult: [[],[],[]]
}
},
watch: {
// 如果是第三轮了，就不允许继续抽了
// eslint-disable-next-line no-unused-vars
round(newValue, oldValue) {
if(newValue === 3){
this.isDrawDisable = true
}
else {
this.isDrawDisable = false
}
}
},
methods: {
getFileList(){
},
luckDraw(){
// 判断抽奖人数
let lucklyCount = 0
switch(this.activeName){
case '3':
lucklyCount = 1;
break;
case '2':
lucklyCount = 10;
break;
case '1':
lucklyCount = 20;
break;
default:
break;
}
const url = `http://172.16.127.24:1024/luckDraw/getLuck?prizeNum=${lucklyCount}`
// 第一轮抽奖拿到三轮名单
if(this.round === 0){
this.$axios
.get(url, {
})
.then(res => {
if (res.data.code !== 200) {
cosnole.log(res);
}
console.log(res);
// 保存名单
this.drawResult = res.data.results
this.$emit('luckDraw',res.data.results[0],this.activeName)
})
.catch(res => {
console.log(res);
});
// 第二轮第三轮直接从缓存取保存到的名单
}else{
this.$emit('luckDraw',this.drawResult[this.round],this.activeName)
}
this.round = this.round + 1
},
// eslint-disable-next-line no-unused-vars
onCollapseChange(activeName){
this.round = 0
},
onUpload(file,fileList){
const formData = new FormData();
formData.append('file',fileList[0].raw);
this.$axios
.post('http://172.16.127.24:1024/luckDraw/importParticipant', formData, {
headers: {
'Content-type': 'multipart/form-data'
},
})
.then(res => {
if (res.data.code !== 200) {
console.log(res);
}
console.log(res.data);
this.$message({
message: '上传成功',
type:'success'
})
})
.catch(res => {
console.log(res);
});
},
},
}
</script>
<style lang="scss">
.drawTreeContainer{
width: 335px;
height: 100%;
float: left;
background-color: #252526;
img{
width: 100%;
height: 80px;
}
.treeContainer{
width: 100%;
height: calc(100% - 80px);
padding: 5px 10px 5px 10px;
.treeContainer-upload{
width: calc(100% - 20px);
div{
width: 100%;
}
ul{
display: none
}
}
.input-btn{
margin: 0 0 10px 0;
width: calc(100% - 0px);
}
.tree-collapse{
width: calc(100% - 20px);
border-bottom: 1px solid #474747;
border-top: 1px solid #474747;
div{
background-color: #252526 !important;
}
.el-collapse-item__header{
background-color: #252526 !important;
border-bottom: 1px solid #474747;
height: 30px;
color: #cccccc;
}
.el-collapse-item__content{
padding-bottom: 10px;
}
.collapse-item-container{
padding: 0 10px 0 10px;
.award-btn{
width: calc(100% - 0px);
margin: 5px 0 5px 0;
}
.award-lable{
width: calc(100% - 20px);
color: #cccccc;
}
}
}
}
}
</style>
\ No newline at end of file
src/viewer/LuckDraw/components/mockToolbar/index.vue 0 → 100644
View file @ a8aee09f
<template>
<div class="mocktoolbar">
<img class="top" src="@/assets/img/toolTop.png">
<img class="bottom" src="@/assets/img/toolBottom.png">
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.mocktoolbar{
height: 100%;
width: 50px;
float: left;
background: #333333;
position: relative;
.bottom{
position: absolute;
bottom: 0px;
left: 0px;
}
}
</style>
\ No newline at end of file
src/viewer/LuckDraw/index.vue 0 → 100644
View file @ a8aee09f
<template>
<div class="party-container">
<div class="main-container">
<mockToolbar/>
<drawTree
@luckDraw="luckDraw"
/>
<div class="programmerContainer">
<img class="top" src="@/assets/img/title.png">
<div class="list-container">
<div class="list">
<el-row
v-for="(stepData,stepIndex) in showResultData"
:key="stepIndex"
type="flex"
justify="space-around"
:gutter="20">
<el-col
v-for="(item,index) in stepData"
:span="4"
:key="index">
<LucklyItem :dataItem="item" :dataIndex="item.rant" :awardLevel="item.awardLevel"/>
</el-col>
</el-row>
</div>
<el-pagination
class="list-pagination"
layout="prev, pager, next"
:page-size="20"
:current-page="currentPage"
:total="datalist.length"
:hide-on-single-page="true"
@current-change="onPageChange">
</el-pagination>
</div>
<img class="bottom" src="@/assets/img/terminal.png">
</div>
</div>
<div class="bottomInfo">
<img src="@/assets/img/bottomInfo.png" alt="">
</div>
</div>
</template>
<script>
import mockToolbar from './components/mockToolbar';
import drawTree from './components/drawTree';
import LucklyItem from './components/LucklyItem';
export default {
name:'luckDraw',
components:{
mockToolbar,
drawTree,
LucklyItem
},
computed: {
// showResultData() {
// let showResultData = []
// let stepData=[]
// this.datalist.map((data,index)=>{
// if(index < this.currentPage * 20 && index >= this.currentPage - 1 * 20){
// stepData.push(data)
// if((index+1)%5 ===0 || index+1 === this.datalist.length){
// showResultData.push(stepData)
// stepData=[]
// }
// }
// })
// console.log(showResultData);
// return showResultData
// }
},
mounted () {
let showResultData = []
let stepData=[]
this.datalist = this.datalist.sort((a,b)=>{
return b.score - a.score
});
// 把名单处理成五个一排，一页四排的嵌套数组格式
this.datalist.map((data,index)=>{
if(index < this.currentPage * 20 && index >= (this.currentPage - 1) * 20){
stepData.push(data)
if((index+1)%5 ===0 || index+1 === this.datalist.length){
showResultData.push(stepData)
stepData=[]
}
}
})
this.showResultData = showResultData
},
watch: {
// 监听名单改变，把名单处理成五个一排，一页四排的嵌套数组格式
// eslint-disable-next-line no-unused-vars
datalist(newValue, oldValue) {
let showResultData = []
let stepData=[]
newValue.map((data,index)=>{
if(index < this.currentPage * 20 && index >= (this.currentPage - 1) * 20){
stepData.push(data)
if((index+1)%5 ===0 || index+1 === newValue.length){
showResultData.push(stepData)
stepData=[]
}
}
})
this.showResultData = showResultData
}
},
data() {
return {
currentPage: 1,
showResultData: [],
awardLevel: '3',
datalist: [
]
}
},
methods: {
// 翻页方法
onPageChange(currentPage) {
let showResultData = []
let stepData=[]
this.datalist = this.datalist.sort((a,b)=>{
return b.score - a.score
});
// 把名单处理成五个一排，一页四排的嵌套数组格式
this.datalist.map((data,index)=>{
if(index < currentPage * 20 && index >= (currentPage - 1) * 20){
stepData.push(data)
if((index+1)%5 ===0 || index+1 === this.datalist.length){
showResultData.push(stepData)
stepData=[]
}
}
})
this.showResultData = showResultData
this.currentPage = currentPage
},
// 点击抽奖后吧请求到的名单排序、加上排名字段、在抽的是几等奖等信息加上
luckDraw(datalist,awardLevel){
datalist = datalist.sort((a,b)=>{
return b.score - a.score
});
datalist.map((item,index)=>{
item.rant = index + 1
item.awardLevel = awardLevel
})
this.datalist = datalist
}
},
}
</script>
<style lang="scss">
.party-container{
// background: url(../../assets/img/BackGround.png);
width: 100%;
height: 100%;
.main-container{
width: 100%;
height: calc(100% - 23px);
.programmerContainer{
float: left;
height: calc(100%);
width: calc(100% - 385px);
background-color: #1e1e1e;
position: relative;
.list-container{
height: calc(100% - 195px);
width: 100%;
padding-top: 40px;
.list{
height: 90%;
width: 100%;
.el-row{
height: 24%;
margin: 0 0 1% 0;
width: 100%;
.el-col{
height: 100%;
}
}
}
.list-pagination{
margin-top: 2%;
display: flex;
justify-content: center;
button{
background: #1e1e1e;
}
li{
background: #1e1e1e;
}
}
}
.top{
position: absolute;
top: 0px;
width: 100%;
}
.bottom{
position: absolute;
width: 100%;
bottom: 0px;
}
}
}
.bottomInfo{
height: 23px;
width: 100%;
}
}
</style>
\ No newline at end of file
vue.config.js 0 → 100644
View file @ a8aee09f
module.exports = {
publicPath: './',
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment