zhaoyingbo/cherry_fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rewrite directory structure

Browse Source
This commit is contained in:
RainSun 2020-03-10 14:42:29 +08:00
parent 30442fcf67
commit 0e209cae15
14 changed files with 793 additions and 709 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/router/index.js
View File

@ -14,7 +14,7 @@ const routes = [
{
path: '/login',
name: 'login',
component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue'),
component: () => import(/* webpackChunkName: "login" */ '../views/Login/Login.vue'),
meta:{
keepAlive:false
},
@ -22,7 +22,7 @@ const routes = [
{
path: '/schedule',
name: 'Schedule',
component: () => import(/* webpackChunkName: "schedule" */ '../views/Schedule.vue'),
component: () => import(/* webpackChunkName: "schedule" */ '../views/Schedule/Schedule.vue'),
meta:{
keepAlive:true
},
@ -30,7 +30,7 @@ const routes = [
{
path: '/grade',
name: 'Grade',
component: () => import(/* webpackChunkName: "grade" */ '../views/Grade.vue'),
component: () => import(/* webpackChunkName: "grade" */ '../views/Grade/Grade.vue'),
meta:{
keepAlive:true
},
@ -70,7 +70,7 @@ const routes = [
{
path: '/game',
name: 'Game',
component: () => import(/* webpackChunkName: "game" */ '../views/Game.vue'),
component: () => import(/* webpackChunkName: "game" */ '../views/Game/Game.vue'),
meta:{
keepAlive:false
},

692
src/views/Game.vue
View File

@ -1,692 +0,0 @@
<template>
<div class="schedule" >
<header>
<div class="w">
<i class="el-icon-back back" @click="turnToHome()"></i>
<div class="week-box">点点就会玩
</div>
<div class="rank-icon-box" @click="rank_dialog = true">
<icon class="rank" name="rank" ></icon>
</div>
</div>
</header>
<div style="height: 1.2rem;"></div>
<body>
<nav>
<div class="week-title" v-for="i in 7" :key="i">{{week_day[i-1]}}</div>
</nav>
<div class="main">
<aside>
<div class="lesson-title" v-for="i in 12" :key="i">{{i}}</div>
</aside>
<div class="lesson-warp">
<div class="day-box" v-for="(items, d) in show_game_data" :key="d">
<div class="lesson-box" v-for="(item, i) in items" :key="i">
<div class="lesson" :style="lessonStyle(item)" @click="clickCard(item, d, i)">
<p class="info">{{item.name}}</p>
</div>
</div>
</div>
</div>
</div>
<!-- 上传dialog -->
<div class="dialog" v-if="upload_dialog" @touchmove.prevent>
<div class="w dialog-w">
<div class="title">
成绩
<div class="icon-box" @click="closeUploadDialog()">
<i class="el-icon-close icon"></i>
</div>
</div>
<div class="dialog-main">
<p>您的用时：<span>{{time_finish}}</span></p>
<p>您的总点击数：<span>{{click_count}}</span></p>
<input type="text" placeholder="上传的话请在此输入昵称" v-model="nick"/>
<div class="btn-box">
<p @click="closeUploadDialog()">爬</p>
<p @click="uploadGrade()">上传</p>
</div>
</div>
</div>
</div>
<!-- rank -->
<div class="dialog dialog-rank" v-if="rank_dialog" @touchmove.prevent>
<div class="w dialog-w">
<div class="title">
排名榜
<div class="icon-box" @click="rank_dialog = false">
<i class="el-icon-close icon"></i>
</div>
<div class="reflash-box" @click="getGrade(true)">
<i class="el-icon-refresh icon"></i>
</div>
</div>
<v-touch @swiperight="rank_current_type = 'time'" @swipeleft="rank_current_type = 'count'">
<div class="dialog-main">
<div class="nav-box">
<div><p :class="rank_current_type == 'time'? 'line' :''" @click="rank_current_type = 'time'">时间榜</p></div>
<div><p :class="rank_current_type == 'count'? 'line' :''" @click="rank_current_type = 'count'">点击榜</p></div>
</div>
<div class="rank-title">
<p>昵称</p>
<p>点击数</p>
<p>时间</p>
</div>
<div class="time-rank-box" v-if="schedule_game && rank_current_type == 'time'">
<div class="price-box">
<div class="icon-box" v-if="schedule_game.time_rank.length >= 1"><icon name="firstPrize" class="icon"></icon></div>
<div class="icon-box" v-if="schedule_game.time_rank.length >= 2"><icon name="secondPrize" class="icon"></icon></div>
<div class="icon-box" v-if="schedule_game.time_rank.length >= 3"><icon name="thirdPrize" class="icon"></icon></div>
</div>
<div class="time-rank-content" v-for="(item, index) in schedule_game.time_rank" :key="index">
<p>{{item.nick.length > 7 ? item.nick.slice(0,7) : item.nick}}</p>
<p>{{item.count}}</p>
<p>{{item.time}}</p>
</div>
</div>
<div class="count-rank-box" v-if="schedule_game && rank_current_type == 'count'">
<div class="price-box">
<div class="icon-box" v-if="schedule_game.count_rank.length >= 1"><icon name="firstPrize" class="icon"></icon></div>
<div class="icon-box" v-if="schedule_game.count_rank.length >= 2"><icon name="secondPrize" class="icon"></icon></div>
<div class="icon-box" v-if="schedule_game.count_rank.length >= 3"><icon name="thirdPrize" class="icon"></icon></div>
</div>
<div class="count-rank-content" v-for="(item, index) in schedule_game.count_rank" :key="index">
<p>{{item.nick.length > 7 ? item.nick.slice(0,7) : item.nick}}</p>
<p>{{item.count}}</p>
<p>{{item.time}}</p>
</div>
</div>
</div>
</v-touch>
</div>
</div>
</body>
<FooterSpace></FooterSpace>
</div>
</template>
<script>
// @ is an alias to /src
import FooterSpace from "@/components/FooterSpace.vue";
import { mapState, mapActions } from "vuex";
import { rankGet, rankUpload } from '@/axios/api.js'
import { getGameInitData } from '@/lib/utils.js'
import { Loading } from 'element-ui';
export default {
name: "schedule",
data() {
return {
// 渲染星期
week_day: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
// 卡片背景颜色
bg_color: ["e4f5ff", "defbf7", "e7e5fa", "fcebcf", "feeeef", "d7f0db", "ebd4ef", "f9d7ea", "ede1d9", '48f350'],
// 卡片文字颜色
font_color: ["58a2d9", "2bbbbc", "8379d8", "e89812", "d36e88", "39b54a", "9c26b0", "e03997", "a5673f", '48f350'],
// 上传成绩dialog开关
upload_dialog: false,
// 排名dialog开关
rank_dialog: false,
// 排名默认方式
rank_current_type: 'time',
// 卡片内容数据
game_data: '',
// 散列完成卡片内容数据
random_game_data: [],
// 当先显示的卡片内容数据
show_game_data: [],
// 被点击过的卡片
has_clicked: [],
// 上一个被点击的卡片坐标
last_click_pos: [],
// 总点击数累计
click_count: 0,
// 已经配对成功累计
right_count: 0,
// 游戏开始时间
time_start: 0,
// 游戏结束时间
time_finish: 0,
// 用户昵称
nick: '',
};
},
computed: {
...mapState(["user_info", "current_page", "schedule", "schedule_game"]),
},
methods: {
...mapActions(["setCurrentPage","setScheduleGame"]),
// 课程颜色
lessonStyle(item) {
return `background:#${this.bg_color[item.color]};color:#${this.font_color[item.color]}`
},
// 初始化游戏
initGame() {
// 刷新本页vuex
this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
// 设置本页footerNav
this.setCurrentPage(["None", this]);
this.getGrade()
// 初始化游戏数据
this.nick = '';
this.click_count = 0;
this.right_count = 0;
this.time_start = 0;
this.upload_dialog = false;
// this.game_data = this.schedule ? this.schedule.data.game_list : this.game_data;
this.game_data = getGameInitData()
this.random_game_data = new Array(7);
this.show_game_data = new Array(7);
this.has_clicked = new Array(7);
for (var i=0; i<7; i++) {
this.random_game_data[i] = new Array(5);
this.show_game_data[i] = new Array(5);
this.has_clicked[i] = new Array(5);
}
// 随机散列表辅助轮
var used_pos = new Array(35);
for (var i=0; i<35; i++) {
used_pos[i] = 0;
}
// 随机散列表生成
for (var i=0,j=0; i<35; i++) {
var pos = Math.floor(Math.random() * 35)
while (used_pos[pos]) {
pos = Math.floor(Math.random() * 35)
}
used_pos[pos] = 1;
this.random_game_data[parseInt(pos/5)][pos%5] = this.game_data[j];
this.show_game_data[parseInt(pos/5)][pos%5] = { name: '', color: 8};
this.has_clicked[parseInt(pos/5)][pos%5] = false;
if (i % 2 == 1){
j++;
}
}
},
// 点击卡片
clickCard(item, i, j) {
// 已经点击过的拦截器
if (this.has_clicked[i][j]) {
return;
} else {
// 置卡片点击状态并增加总点击数
this.has_clicked[i][j] = !this.has_clicked[i][j];
this.click_count ++;
}
// 开始游戏计时
if (this.time_start == 0) {
this.time_start = new Date().getTime();
}
// 判断点击状态覆写卡片内容
if (this.has_clicked[i][j]){
item.name = this.random_game_data[i][j].name;
item.color = this.random_game_data[i][j].color;
}
// 强制刷新
this.$forceUpdate();
// 配对判断逻辑
if (this.last_click_pos.length == 2) {
// 取出上一个被点击的卡片坐标
let x = this.last_click_pos[0];
let y = this.last_click_pos[1];
// 当前点开的卡片和上一个点开的卡片进行比对
if (item.name != this.random_game_data[x][y].name || item.color != this.random_game_data[x][y].color) {
// 将当前和上一个卡片的点击态置否
this.has_clicked[i][j] = false;
this.has_clicked[x][y] = false;
// 1.1秒之后视觉上点击态置否
setTimeout(function(){
this.show_game_data[i][j].name = '';
this.show_game_data[x][y].name = '';
this.show_game_data[i][j].color = 8;
this.show_game_data[x][y].color = 8;
this.$forceUpdate();
}.bind(this), 1100)
} else {
// 配对成功
this.right_count += 2;
}
// 上一个点击卡片置空
this.last_click_pos = [];
} else {
// 无上一个被点击的卡片
if (item.name != ''){
// 不是单独的那个卡片
this.last_click_pos.push(i);
this.last_click_pos.push(j);
} else {
// 单单独卡片处理
this.right_count ++;
}
}
// 全部完成判定
if (this.right_count == 35 ) {
// 时间处理
let time_diff = new Date().getTime() - this.time_start;
let s = parseInt(time_diff / 1000);
let ms = time_diff % 1000;
let min = parseInt(s / 60);
s = s % 60;
let s_str
if (s < 10) {
s_str = '0' + s.toString()
} else {
s_str = s.toString()
}
this.time_finish = String(min)+':'+ s_str +':'+String(ms);
// 打开上传dialog
this.upload_dialog = true;
}
},
// 关闭dialog
closeUploadDialog() {
this.upload_dialog = false;
this.initGame()
},
// 确认上传成绩
uploadGrade() {
this.nick = this.nick.trim()
if(!this.nick) return;
let load = Loading.service({
background: "rgba(255,245,236,.7)",
target: document.querySelector(".dialog-w")
});
let data = {
nick: this.nick,
count: this.click_count,
time: this.time_finish
}
rankUpload(data).then(res => {
if(res.data.errcode == 200) {
load.close()
this.initGame()
this.$message({
message: "提交成功",
type: "success"
});
} else {
console.log(res.data)
load.close()
this.$message.error(`网络错误，错误码：${res.data.errcode}`);
}
}).catch(err => {
console.log(err)
load.close()
this.$message.error('网络错误，请重试');
})
},
// 获取排名表
getGrade( need_reflash = false ) {
let now = new Date().getTime()
// 拦截器
if( this.schedule_game && (now - this.schedule_game.update_time < 1000 * 60 * 1) && !need_reflash) {
// 有信息 未超时 无强制刷新
return
}
rankGet().then(res => {
if(res.data.errcode == 200) {
let schedule_game = res.data
schedule_game.update_time = new Date().getTime()
this.setScheduleGame([schedule_game, this])
if(need_reflash) {
this.$message({
message: "刷新成功",
type: "success"
});
}
} else if(need_reflash) {
this.$message.error('网络错误，请重试');
}
}).catch(err => {
console.log(err)
this.$message.error('网络错误，请重试');
})
},
// 强制跳转回主页
turnToHome() {
this.$router.replace('/');
},
},
created() {
},
mounted() {
this.initGame();
},
activated() {
},
components: {
FooterSpace
}
};
</script>
<style scoped lang="scss" type="text/scss">
@import "../style/main";
.schedule {
width: 100%;
max-width: 500px;
margin: 0 auto;
background-color: #f8f8f8;
min-height: 100%;
position: relative;
overflow: hidden;
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 1.2rem;
z-index: 100;
.w {
height: 1.2rem;
width: 100%;
max-width: 500px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
// background-image: linear-gradient(to right, #f0da4b, #ff005e);
background-image: $gradualLoginSubmit;
// background: #ffca9f;
color: #fff;
position: relative;
.left-box,
.right-box {
display: flex;
align-items: center;
justify-content: center;
width: 1.2rem;
height: 1.2rem;
}
.icon {
font-size: 0.5rem;
}
.week-box {
font-size: 0.5rem;
}
.more {
font-size: 0.6rem;
position: absolute;
left: 0.3rem;
}
.back {
font-size: 0.6rem;
position: absolute;
left: 0.3rem;
}
.refresh {
font-size: 0.6rem;
position: absolute;
right: 0.3rem;
}
.rank-icon-box {
position: absolute;
right: 0.3rem;
display: flex;
align-items: center;
justify-content: center;
.rank {
height: 0.7rem;
width: 0.7rem;
}
}
}
}
nav {
height: 0.8rem;
padding-left: 0.7rem;
display: flex;
.week-title {
flex: 1;
line-height: 0.8rem;
font-size: 0.3rem;
text-align: center;
}
.highlight {
color: #ff005e;
}
}
.main {
display: flex;
aside {
width: 0.7rem;
.lesson-title {
font-size: 0.3rem;
font-weight: 600;
text-align: center;
height: 1.4rem;
line-height: 1.4rem;
}
}
.lesson-warp {
flex: 1;
display: flex;
touch-action: pan-y!important;
// max-width: 94%;
.day-box {
width: 14%;
flex: 1;
flex-shrink: 1;
display: flex;
flex-direction: column;
.lesson-box {
height: 2.8rem;
border: 1px #eee solid;
display: flex;
align-items: center;
justify-content: center;
padding: 0.05rem;
box-sizing: border-box;
.lesson {
width: 100%;
height: 100%;
border-radius: 0.1rem;
word-wrap: break-word;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
.info {
font-size: 0.3rem;
margin-bottom: 0.1rem;
text-align: center;
}
}
}
}
}
}
.dialog {
position: fixed;
top: 0;
left: 0;
z-index: 101;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
.w {
width: 70%;
max-width: 350px;
height: 5rem;
background: #fff;
border-radius: 0.1rem;
overflow: hidden;
.title {
height: 1rem;
background-image: $gradualLoginSubmit;
font-size: 0.4rem;
text-align: center;
line-height: 1rem;
color: #fff;
position: relative;
.icon-box, .reflash-box {
position: absolute;
top: 0;
right: 0;
width: 1rem;
height: 1rem;
display: flex;
align-items: center;
justify-content: center;
.icon {
font-size: 0.5rem;
}
}
.reflash-box {
right: auto;
left: 0;
}
}
.dialog-main {
height: 4rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
p {
margin-bottom: 0.2rem;
text-align: center;
font-size: 0.3rem;
span {
font-size: 0.3rem;
color: $red;
}
}
input {
width: 3.5rem;
height: 0.4rem;
font-size: 0.3rem;
text-align: center;
color: $red;
border: 0;
outline:none;
border-bottom: 1px #eee solid;
}
input:focus { outline: none; }
.btn-box {
display: flex;
align-items: center;
margin-top: .3rem;
p {
height: .5rem;
width: 1.6rem;
border: 1px $red solid;
border-radius: .1rem;
line-height: .5rem;
}
p:first-of-type {
color: $red;
margin-right: .3rem;
}
p:last-of-type {
background-color: $red;
color: #fff;
}
}
}
}
}
.dialog-rank {
.w {
height: auto;
width: 90%;
max-width: 450px;
}
.dialog-main {
height: auto !important;
max-height: 15rem;
padding-bottom: .3rem;
box-sizing: border-box;
.nav-box {
display: flex;
align-items: center;
justify-content: space-between;
height: 1rem;
width: 100%;
div {
flex:1;
display: flex;
align-items: center;
justify-content: center;
p {
width: 1rem;
height: .5rem;
line-height: .5rem;
font-size: .3rem;
margin: 0 !important;
}
.line {
border-bottom: $red 2px solid;
}
}
}
.rank-title {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: .5rem;
box-sizing: border-box;
margin-top: .3rem;
p {
width: 33.3%;
}
}
.time-rank-box, .count-rank-box {
overflow-y: scroll !important;
width:100%;
position:relative;
.price-box {
position: absolute;
left: .3rem;
top: 0;
width: .5rem;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
.icon-box {
height: .8rem;
width: .5rem;
display: flex;
align-items: center;
justify-content: center;
.icon {
width: .5rem;
height: .5rem;
}
}
}
.time-rank-content, .count-rank-content{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: .5rem;
box-sizing: border-box;
p {
height: .8rem;
width: 33.3%;
line-height: .8rem;
margin: 0 !important;
}
}
}
}
}
}
</style>

776
src/views/Game/Game.vue Normal file
View File

@ -0,0 +1,776 @@
<template>
<div class="schedule">
<header>
<div class="w">
<i class="el-icon-back back" @click="turnToHome()"></i>
<div class="week-box">点点就会玩</div>
<div class="rank-icon-box" @click="rank_dialog = true">
<icon class="rank" name="rank"></icon>
</div>
</div>
</header>
<div style="height: 1.2rem;"></div>
<body>
<nav>
<div class="week-title" v-for="i in 7" :key="i">{{week_day[i-1]}}</div>
</nav>
<div class="main">
<aside>
<div class="lesson-title" v-for="i in 12" :key="i">{{i}}</div>
</aside>
<div class="lesson-warp">
<div class="day-box" v-for="(items, d) in show_game_data" :key="d">
<div class="lesson-box" v-for="(item, i) in items" :key="i">
<div class="lesson" :style="lessonStyle(item)" @click="clickCard(item, d, i)">
<p class="info">{{item.name}}</p>
</div>
</div>
</div>
</div>
</div>
<!-- 上传dialog -->
<div class="dialog" v-if="upload_dialog" @touchmove.prevent>
<div class="w dialog-w">
<div class="title">
成绩
<div class="icon-box" @click="closeUploadDialog()">
<i class="el-icon-close icon"></i>
</div>
</div>
<div class="dialog-main">
<p>
您的用时：
<span>{{time_finish}}</span>
</p>
<p>
您的总点击数：
<span>{{click_count}}</span>
</p>
<input type="text" placeholder="上传的话请在此输入昵称" v-model="nick" />
<div class="btn-box">
<p @click="closeUploadDialog()">爬</p>
<p @click="uploadGrade()">上传</p>
</div>
</div>
</div>
</div>
<!-- rank -->
<div class="dialog dialog-rank" v-if="rank_dialog" @touchmove.prevent>
<div class="w dialog-w">
<div class="title">
排名榜
<div class="icon-box" @click="rank_dialog = false">
<i class="el-icon-close icon"></i>
</div>
<div class="reflash-box" @click="getGrade(true)">
<i class="el-icon-refresh icon"></i>
</div>
</div>
<v-touch @swiperight="rank_current_type = 'time'" @swipeleft="rank_current_type = 'count'">
<div class="dialog-main">
<div class="nav-box">
<div>
<p
:class="rank_current_type == 'time'? 'line' :''"
@click="rank_current_type = 'time'"
>时间榜</p>
</div>
<div>
<p
:class="rank_current_type == 'count'? 'line' :''"
@click="rank_current_type = 'count'"
>点击榜</p>
</div>
</div>
<div class="rank-title">
<p>昵称</p>
<p>点击数</p>
<p>时间</p>
</div>
<div class="time-rank-box" v-if="schedule_game && rank_current_type == 'time'">
<div class="price-box">
<div class="icon-box" v-if="schedule_game.time_rank.length >= 1">
<icon name="firstPrize" class="icon"></icon>
</div>
<div class="icon-box" v-if="schedule_game.time_rank.length >= 2">
<icon name="secondPrize" class="icon"></icon>
</div>
<div class="icon-box" v-if="schedule_game.time_rank.length >= 3">
<icon name="thirdPrize" class="icon"></icon>
</div>
</div>
<div
class="time-rank-content"
v-for="(item, index) in schedule_game.time_rank"
:key="index"
>
<p>{{item.nick.length > 7 ? item.nick.slice(0,7) : item.nick}}</p>
<p>{{item.count}}</p>
<p>{{item.time}}</p>
</div>
</div>
<div class="count-rank-box" v-if="schedule_game && rank_current_type == 'count'">
<div class="price-box">
<div class="icon-box" v-if="schedule_game.count_rank.length >= 1">
<icon name="firstPrize" class="icon"></icon>
</div>
<div class="icon-box" v-if="schedule_game.count_rank.length >= 2">
<icon name="secondPrize" class="icon"></icon>
</div>
<div class="icon-box" v-if="schedule_game.count_rank.length >= 3">
<icon name="thirdPrize" class="icon"></icon>
</div>
</div>
<div
class="count-rank-content"
v-for="(item, index) in schedule_game.count_rank"
:key="index"
>
<p>{{item.nick.length > 7 ? item.nick.slice(0,7) : item.nick}}</p>
<p>{{item.count}}</p>
<p>{{item.time}}</p>
</div>
</div>
</div>
</v-touch>
</div>
</div>
</body>
<FooterSpace></FooterSpace>
</div>
</template>
<script>
// @ is an alias to /src
import FooterSpace from "@/components/FooterSpace.vue";
import { mapState, mapActions } from "vuex";
import { rankGet, rankUpload } from "@/axios/api.js";
import { getGameInitData } from "@/lib/utils.js";
import { Loading } from "element-ui";
export default {
name: "schedule",
data() {
return {
// 渲染星期
week_day: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
// 卡片背景颜色
bg_color: [
"e4f5ff",
"defbf7",
"e7e5fa",
"fcebcf",
"feeeef",
"d7f0db",
"ebd4ef",
"f9d7ea",
"ede1d9",
"48f350"
],
// 卡片文字颜色
font_color: [
"58a2d9",
"2bbbbc",
"8379d8",
"e89812",
"d36e88",
"39b54a",
"9c26b0",
"e03997",
"a5673f",
"48f350"
],
// 上传成绩dialog开关
upload_dialog: false,
// 排名dialog开关
rank_dialog: false,
// 排名默认方式
rank_current_type: "time",
// 卡片内容数据
game_data: "",
// 散列完成卡片内容数据
random_game_data: [],
// 当先显示的卡片内容数据
show_game_data: [],
// 被点击过的卡片
has_clicked: [],
// 上一个被点击的卡片坐标
last_click_pos: [],
// 总点击数累计
click_count: 0,
// 已经配对成功累计
right_count: 0,
// 游戏开始时间
time_start: 0,
// 游戏结束时间
time_finish: 0,
// 用户昵称
nick: ""
};
},
computed: {
...mapState(["user_info", "current_page", "schedule", "schedule_game"])
},
methods: {
...mapActions(["setCurrentPage", "setScheduleGame"]),
// 课程颜色
lessonStyle(item) {
return `background:#${this.bg_color[item.color]};color:#${
this.font_color[item.color]
}`;
},
// 初始化游戏
initGame() {
// 刷新本页vuex
this.$store.replaceState(
Object.assign(
this.$store.state,
JSON.parse(localStorage.getItem("storeState"))
)
);
// 设置本页footerNav
this.setCurrentPage(["None", this]);
this.getGrade();
// 初始化游戏数据
this.nick = "";
this.click_count = 0;
this.right_count = 0;
this.time_start = 0;
this.upload_dialog = false;
// this.game_data = this.schedule ? this.schedule.data.game_list : this.game_data;
this.game_data = getGameInitData();
this.random_game_data = new Array(7);
this.show_game_data = new Array(7);
this.has_clicked = new Array(7);
for (var i = 0; i < 7; i++) {
this.random_game_data[i] = new Array(5);
this.show_game_data[i] = new Array(5);
this.has_clicked[i] = new Array(5);
}
// 随机散列表辅助轮
var used_pos = new Array(35);
for (var i = 0; i < 35; i++) {
used_pos[i] = 0;
}
// 随机散列表生成
for (var i = 0, j = 0; i < 35; i++) {
var pos = Math.floor(Math.random() * 35);
while (used_pos[pos]) {
pos = Math.floor(Math.random() * 35);
}
used_pos[pos] = 1;
this.random_game_data[parseInt(pos / 5)][pos % 5] = this.game_data[j];
this.show_game_data[parseInt(pos / 5)][pos % 5] = {
name: "",
color: 8
};
this.has_clicked[parseInt(pos / 5)][pos % 5] = false;
if (i % 2 == 1) {
j++;
}
}
},
// 点击卡片
clickCard(item, i, j) {
// 已经点击过的拦截器
if (this.has_clicked[i][j]) {
return;
} else {
// 置卡片点击状态并增加总点击数
this.has_clicked[i][j] = !this.has_clicked[i][j];
this.click_count++;
}
// 开始游戏计时
if (this.time_start == 0) {
this.time_start = new Date().getTime();
}
// 判断点击状态覆写卡片内容
if (this.has_clicked[i][j]) {
item.name = this.random_game_data[i][j].name;
item.color = this.random_game_data[i][j].color;
}
// 强制刷新
this.$forceUpdate();
// 配对判断逻辑
if (this.last_click_pos.length == 2) {
// 取出上一个被点击的卡片坐标
let x = this.last_click_pos[0];
let y = this.last_click_pos[1];
// 当前点开的卡片和上一个点开的卡片进行比对
if (
item.name != this.random_game_data[x][y].name ||
item.color != this.random_game_data[x][y].color
) {
// 将当前和上一个卡片的点击态置否
this.has_clicked[i][j] = false;
this.has_clicked[x][y] = false;
// 1.1秒之后视觉上点击态置否
setTimeout(
function() {
this.show_game_data[i][j].name = "";
this.show_game_data[x][y].name = "";
this.show_game_data[i][j].color = 8;
this.show_game_data[x][y].color = 8;
this.$forceUpdate();
}.bind(this),
1100
);
} else {
// 配对成功
this.right_count += 2;
}
// 上一个点击卡片置空
this.last_click_pos = [];
} else {
// 无上一个被点击的卡片
if (item.name != "") {
// 不是单独的那个卡片
this.last_click_pos.push(i);
this.last_click_pos.push(j);
} else {
// 单单独卡片处理
this.right_count++;
}
}
// 全部完成判定
if (this.right_count == 35) {
// 时间处理
let time_diff = new Date().getTime() - this.time_start;
let s = parseInt(time_diff / 1000);
let ms = time_diff % 1000;
let min = parseInt(s / 60);
s = s % 60;
let s_str;
if (s < 10) {
s_str = "0" + s.toString();
} else {
s_str = s.toString();
}
this.time_finish = String(min) + ":" + s_str + ":" + String(ms);
// 打开上传dialog
this.upload_dialog = true;
}
},
// 关闭dialog
closeUploadDialog() {
this.upload_dialog = false;
this.initGame();
},
// 确认上传成绩
uploadGrade() {
this.nick = this.nick.trim();
if (!this.nick) return;
let load = Loading.service({
background: "rgba(255,245,236,.7)",
target: document.querySelector(".dialog-w")
});
let data = {
nick: this.nick,
count: this.click_count,
time: this.time_finish
};
rankUpload(data)
.then(res => {
if (res.data.errcode == 200) {
load.close();
this.initGame();
this.$message({
message: "提交成功",
type: "success"
});
} else {
console.log(res.data);
load.close();
this.$message.error(`网络错误，错误码：${res.data.errcode}`);
}
})
.catch(err => {
console.log(err);
load.close();
this.$message.error("网络错误，请重试");
});
},
// 获取排名表
getGrade(need_reflash = false) {
let now = new Date().getTime();
// 拦截器
if (
this.schedule_game &&
now - this.schedule_game.update_time < 1000 * 60 * 1 &&
!need_reflash
) {
// 有信息 未超时 无强制刷新
return;
}
rankGet()
.then(res => {
if (res.data.errcode == 200) {
let schedule_game = res.data;
schedule_game.update_time = new Date().getTime();
this.setScheduleGame([schedule_game, this]);
if (need_reflash) {
this.$message({
message: "刷新成功",
type: "success"
});
}
} else if (need_reflash) {
this.$message.error("网络错误，请重试");
}
})
.catch(err => {
console.log(err);
this.$message.error("网络错误，请重试");
});
},
// 强制跳转回主页
turnToHome() {
this.$router.replace("/");
}
},
created() {},
mounted() {
this.initGame();
},
activated() {},
components: {
FooterSpace
}
};
</script>
<style scoped lang="scss" type="text/scss">
@import "../../style/main";
.schedule {
width: 100%;
max-width: 500px;
margin: 0 auto;
background-color: #f8f8f8;
min-height: 100%;
position: relative;
overflow: hidden;
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 1.2rem;
z-index: 100;
.w {
height: 1.2rem;
width: 100%;
max-width: 500px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
// background-image: linear-gradient(to right, #f0da4b, #ff005e);
background-image: $gradualLoginSubmit;
// background: #ffca9f;
color: #fff;
position: relative;
.left-box,
.right-box {
display: flex;
align-items: center;
justify-content: center;
width: 1.2rem;
height: 1.2rem;
}
.icon {
font-size: 0.5rem;
}
.week-box {
font-size: 0.5rem;
}
.more {
font-size: 0.6rem;
position: absolute;
left: 0.3rem;
}
.back {
font-size: 0.6rem;
position: absolute;
left: 0.3rem;
}
.refresh {
font-size: 0.6rem;
position: absolute;
right: 0.3rem;
}
.rank-icon-box {
position: absolute;
right: 0.3rem;
display: flex;
align-items: center;
justify-content: center;
.rank {
height: 0.7rem;
width: 0.7rem;
}
}
}
}
nav {
height: 0.8rem;
padding-left: 0.7rem;
display: flex;
.week-title {
flex: 1;
line-height: 0.8rem;
font-size: 0.3rem;
text-align: center;
}
.highlight {
color: #ff005e;
}
}
.main {
display: flex;
aside {
width: 0.7rem;
.lesson-title {
font-size: 0.3rem;
font-weight: 600;
text-align: center;
height: 1.4rem;
line-height: 1.4rem;
}
}
.lesson-warp {
flex: 1;
display: flex;
touch-action: pan-y !important;
// max-width: 94%;
.day-box {
width: 14%;
flex: 1;
flex-shrink: 1;
display: flex;
flex-direction: column;
.lesson-box {
height: 2.8rem;
border: 1px #eee solid;
display: flex;
align-items: center;
justify-content: center;
padding: 0.05rem;
box-sizing: border-box;
.lesson {
width: 100%;
height: 100%;
border-radius: 0.1rem;
word-wrap: break-word;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
.info {
font-size: 0.3rem;
margin-bottom: 0.1rem;
text-align: center;
}
}
}
}
}
}
.dialog {
position: fixed;
top: 0;
left: 0;
z-index: 101;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
.w {
width: 70%;
max-width: 350px;
height: 5rem;
background: #fff;
border-radius: 0.1rem;
overflow: hidden;
.title {
height: 1rem;
background-image: $gradualLoginSubmit;
font-size: 0.4rem;
text-align: center;
line-height: 1rem;
color: #fff;
position: relative;
.icon-box,
.reflash-box {
position: absolute;
top: 0;
right: 0;
width: 1rem;
height: 1rem;
display: flex;
align-items: center;
justify-content: center;
.icon {
font-size: 0.5rem;
}
}
.reflash-box {
right: auto;
left: 0;
}
}
.dialog-main {
height: 4rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
p {
margin-bottom: 0.2rem;
text-align: center;
font-size: 0.3rem;
span {
font-size: 0.3rem;
color: $red;
}
}
input {
width: 3.5rem;
height: 0.4rem;
font-size: 0.3rem;
text-align: center;
color: $red;
border: 0;
outline: none;
border-bottom: 1px #eee solid;
}
input:focus {
outline: none;
}
.btn-box {
display: flex;
align-items: center;
margin-top: 0.3rem;
p {
height: 0.5rem;
width: 1.6rem;
border: 1px $red solid;
border-radius: 0.1rem;
line-height: 0.5rem;
}
p:first-of-type {
color: $red;
margin-right: 0.3rem;
}
p:last-of-type {
background-color: $red;
color: #fff;
}
}
}
}
}
.dialog-rank {
.w {
height: auto;
width: 90%;
max-width: 450px;
}
.dialog-main {
height: auto !important;
max-height: 15rem;
padding-bottom: 0.3rem;
box-sizing: border-box;
.nav-box {
display: flex;
align-items: center;
justify-content: space-between;
height: 1rem;
width: 100%;
div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
p {
width: 1rem;
height: 0.5rem;
line-height: 0.5rem;
font-size: 0.3rem;
margin: 0 !important;
}
.line {
border-bottom: $red 2px solid;
}
}
}
.rank-title {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.5rem;
box-sizing: border-box;
margin-top: 0.3rem;
p {
width: 33.3%;
}
}
.time-rank-box,
.count-rank-box {
overflow-y: scroll !important;
width: 100%;
position: relative;
.price-box {
position: absolute;
left: 0.3rem;
top: 0;
width: 0.5rem;
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
.icon-box {
height: 0.8rem;
width: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
.icon {
width: 0.5rem;
height: 0.5rem;
}
}
}
.time-rank-content,
.count-rank-content {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 0.5rem;
box-sizing: border-box;
p {
height: 0.8rem;
width: 33.3%;
line-height: 0.8rem;
margin: 0 !important;
}
}
}
}
}
}
</style>

4
src/views/Grade.vue → src/views/Grade/Grade.vue
View File

@ -92,7 +92,7 @@
// @ is an alias to /src
import FooterSpace from "@/components/FooterSpace.vue";
import GradeCard from "@/components/GradeCard.vue";
import GradeCard from "./components/GradeCard.vue";
import { mapState, mapActions } from "vuex";
import { getGradeInitData } from '@/lib/utils.js'
@ -164,7 +164,7 @@ export default {
</script>
<style scoped lang="scss" type="text/scss">
@import "../style/main";
@import "../../style/main";
.grade {
width: 100%;
max-width: 500px;

2
src/components/GradeCard.vue → src/views/Grade/components/GradeCard.vue
View File

@ -57,7 +57,7 @@ export default {
</script>
<style scoped lang="scss" type="text/scss">
@import "../style/main";
@import "../../../style/main";
.grade-card {
margin: .3rem .3rem 0 .3rem;
border-radius: .1rem;

4
src/views/Login.vue → src/views/Login/Login.vue
View File

@ -6,7 +6,7 @@
<div class="title-bg3 title-bg"></div>
</div>
<header><i class="el-icon-back" @click="turnToHome()"></i></header>
<div class="logo-box"><img src="../assets/logo.png" alt class="logo" /></div>
<div class="logo-box"><img src="../../assets/logo.png" alt class="logo" /></div>
<div class="login-box">
<div class="title">获取信息</div>
<div class="label">教务账号</div>
@ -175,7 +175,7 @@ export default {
};
</script>
<style scoped lang="scss" type="text/scss">
@import '../style/main';
@import '../../style/main';
.login {
width: 100%;
max-width: 500px;

0
src/views/MyAccount.vue → src/views/MyAccount/MyAccount.vue
View File

2
src/views/Schedule.vue → src/views/Schedule/Schedule.vue
View File

@ -224,7 +224,7 @@ export default {
</script>
<style scoped lang="scss" type="text/scss">
@import "../style/main";
@import "../../style/main";
.schedule {
width: 100%;
max-width: 500px;

4
src/views/lostandfound/LAFDetail.vue
View File

@ -53,8 +53,8 @@
// @ is an alias to /src
import FooterSpace from "@/components/FooterSpace.vue";
import InfoCard from "@/components/InfoCard.vue";
import Comment from "@/components/Comment.vue";
import InfoCard from "./components/InfoCard.vue";
import Comment from "./components/Comment.vue";
import { mapState, mapActions } from "vuex";
import { getLAFDetail, comment, delLAF } from "@/axios/api.js";
import { Loading } from "element-ui";

2
src/views/lostandfound/LAFSearch.vue
View File

@ -42,7 +42,7 @@ import FooterSpace from "@/components/FooterSpace.vue";
import { mapState, mapActions } from "vuex";
import { Loading } from "element-ui";
import { loginInterceptor } from "@/lib/utils.js";
import LAFCard from "@/components/LAFCard.vue";
import LAFCard from "./components/LAFCard.vue";
export default {
name: "LAFSearch",

2
src/views/lostandfound/LostAndFound.vue
View File

@ -41,7 +41,7 @@
// @ is an alias to /src
import FooterSpace from "@/components/FooterSpace.vue";
import LAFCard from "@/components/LAFCard.vue";
import LAFCard from "./components/LAFCard.vue";
import { mapState, mapActions } from "vuex";
import { getLAF } from "@/axios/api.js";
import { Loading } from "element-ui";

2
src/components/Comment.vue → src/views/lostandfound/components/Comment.vue
View File

@ -46,7 +46,7 @@ export default {
</script>
<style scoped lang="scss" type="text/scss">
@import "../style/main";
@import "../../../style/main";
.comment-warp {
padding: 0.5rem 0.4rem;
.comment-title {

2
src/components/InfoCard.vue → src/views/lostandfound/components/InfoCard.vue
View File

@ -44,7 +44,7 @@ export default {
</script>
<style scoped lang="scss" type="text/scss">
@import "../style/main";
@import "../../../style/main";
.infocard-page {
/* border-bottom: 0.3rem #eee solid;
padding: 0.5rem 0.4rem; */

2
src/components/LAFCard.vue → src/views/lostandfound/components/LAFCard.vue
View File

@ -44,7 +44,7 @@ export default {
</script>
<style scoped lang="scss" type="text/scss">
@import "../style/main";
@import "../../../style/main";
.content-box {
width: 48%;
background: #fff;