Skip to content

yangchao / brains-h5

Go to a project
Commit 8d06eb9f by yangchao
Options

update

1 parent 4611fa0d
Inline Side-by-side
Showing with 272 additions and 130 deletions
src/store/index.js
......@@ -12,8 +12,10 @@ const state = {
const store = new Vuex.Store({
modules : {
app,
randomNumber: [],
myNumberAnswer: []
randomNumber: [], //随机数字正确答案
myNumberAnswer: [], //我的随机数字答案
randomLetter: [], //随机字母正确答案
myLetterAnswer: [], //我的随机字母答案
},
state
})
......
src/views/home/result.vue
<template>
<div class="content">
<div class="title">圆周率</div>
<div class="title" v-if="type == 1">随机数字</div>
<div class="title" v-if="type == 2">随机字母</div>
<div class="title" v-if="type == 3">圆周率</div>
<div class="data-list">
<div class="data-item">答题数量：<span>{{number}}</span></div>
<div class="data-item">正确数量：<span>{{correctNumber}}</span></div>
......@@ -36,7 +38,8 @@
correctAnswer: [],
number: 0,
correctNumber: 0,
percentage: 0
percentage: 0,
type: 1, //1随机数字 2随机字母 3圆周率
}
},
methods: {
......@@ -47,11 +50,17 @@
}
},
mounted() {
this.myAnswer = this.$store.state.myNumberAnswer;
this.correctAnswer = this.$store.state.randomNumber;
if(this.$route.query&&this.$route.query.number) {
this.correctNumber = this.$route.query.correctNumber;
this.number = this.$route.query.number;
this.type = this.$route.query.type;
if(this.type == 1) {
this.myAnswer = this.$store.state.myNumberAnswer;
this.correctAnswer = this.$store.state.randomNumber;
}else if(this.type==2) {
this.myAnswer = this.$store.state.myLetterAnswer;
this.correctAnswer = this.$store.state.randomLetter;
}
this.percentage = (this.correctNumber/this.number*100).toFixed(2);
}
}
......
src/views/randomLetter/answerLetter.vue
<template>
<div>字母答题</div>
<div class="content">
<div class="title">
<div>随机数字</div>
<div class="submit" @click="submit">提交</div>
</div>
<div class="next-pre">
<div class="label">辅助操作</div>
<div class="btn-operation" @click="pre">前插一位</div>
<div class="btn-operation" @click="next">后插一位</div>
</div>
<div class="answer-list">
<div class="item" v-for="(item,index) in answer">
<div class="data" :style="{background: item.focus?'#409eff':''}" @click="changeFocus(index)">{{item.txt}}</div>
</div>
</div>
<div class="btn-list">
<div class="item" @click="input('a')">a</div>
<div class="item" @click="input('b')">b</div>
<div class="item" @click="input('c')">c</div>
<div class="item" @click="input('d')">d</div>
<div class="item" @click="input('e')">e</div>
<div class="item" @click="input('f')">f</div>
<div class="item" @click="input('g')">g</div>
<div class="item" @click="input('h')">h</div>
<div class="item" @click="input('i')">i</div>
<div class="item" @click="input('j')">j</div>
<div class="item" @click="input('k')">k</div>
<div class="item" @click="input('l')">l</div>
<div class="item" @click="input('m')">m</div>
<div class="item" @click="input('n')">n</div>
<div class="item" @click="input('o')">o</div>
<div class="item" @click="input('p')">p</div>
<div class="item" @click="input('q')">q</div>
<div class="item" @click="input('r')">r</div>
<div class="item" @click="input('s')">s</div>
<div class="item" @click="input('t')">t</div>
<div class="item" @click="input('u')">u</div>
<div class="item delete">删除</div>
<div class="item" @click="input('v')">v</div>
<div class="item" @click="input('w')">w</div>
<div class="item" @click="input('x')">x</div>
<div class="item" @click="input('y')">y</div>
<div class="item" @click="input('z')">z</div>
</div>
</div>
</template>
<script>
export default {
name: "answerLetter"
name: "answerLetter",
data() {
return {
answerLength: 0,
answer: [],
focus: 0,
correctAnswer: [],
correctNumber: 0
}
},
methods:{
//提交
submit() {
this.answer.forEach((v,i)=>{
if(v.txt === this.correctAnswer[i].num) {
this.correctNumber = this.correctNumber + 1;
}
})
this.$store.state.myLetterAnswer = this.answer;
this.$router.push({
path: '/home/result',
query: {
number: this.answerLength,
correctNumber: this.correctNumber,
type: 2
}
})
},
//前插一位
pre() {
this.answer[this.focus].focus = false;
this.answer.splice(this.focus,0,{
txt: '',
focus: false,
})
this.answer[this.focus].focus = true;
this.answer.length = this.answerLength;
},
//后插一位
next(){
this.answer.splice(this.focus+1,0,{
txt: '',
focus: false,
})
this.answer.length = this.answerLength;
},
//点击改变焦点
changeFocus(i){
this.answer[this.focus].focus = false;
this.answer[i].focus = true;
this.focus = i;
},
input(val) {
this.answer[this.focus].txt = val;
if(this.focus < this.answer.length-1) {
this.answer[this.focus].focus = false;
this.focus ++ ;
this.answer[this.focus].focus = true;
}
}
},
mounted() {
this.correctAnswer = this.$store.state.randomLetter;
if(this.$route.query&&this.$route.query.number) {
this.answerLength = this.$route.query.number;
for(let i=0; i< this.answerLength; i++) {
this.answer.push({
txt: '',
focus: i == 0 ? true : false,
})
}
}
}
}
</script>
<style scoped>
.content {
padding: 30px 24px;
}
.title {
display: flex;
align-items: center;
justify-content: space-between;
color: #333;
font-size: 30px;
}
.title .submit {
width: 100px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
color: #409eff;
border: 2px solid #409eff;
border-radius: 8px;
}
.next-pre {
display: flex;
align-items: center;
margin: 20px 0;
}
.next-pre .label {
font-size: 30px;
color: #333;
margin-right: 30px;
}
.next-pre .btn-operation {
width: 160px;
height: 60px;
background: #409eff;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
margin-right: 20px;
border-radius: 8px;
}
.answer-list {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.answer-list .item {
width: 5%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.answer-list .item .data {
width: 90%;
height: 100%;
border-bottom: 2px solid #666;
display: flex;
align-items: center;
justify-content: center;
}
.btn-list {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 20px;
}
.btn-list .item {
width: 13%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: white;
background: #409eff;
border-radius: 10px;
font-size: 30px;
margin-bottom: 20px;
}
.btn-list .delete {
width: 27.5%;
background: #f56c6c;
}
.btn-list .zero {
width: 48%;
}
</style>
src/views/randomLetter/index.vue
......@@ -19,8 +19,19 @@
},
methods: {
start() {
if(!this.number || this.number <= 0) {
alert('请输入正确的个数');
return;
}
if(this.number>320) {
alert('记忆数量必须小于或等于320');
return;
}
this.$router.push({
path : '/randomLetter/startMemoryLetter'
path : '/randomLetter/startMemoryLetter',
query: {
number: this.number
}
})
}
}
......
src/views/randomLetter/startMemoryLetter.vue
......@@ -16,7 +16,7 @@
</div>
<div class="number-list">
<div class="number-item" v-for="(item,index) in number" :key="index" :style="{borderRightColor: item.border?'#666':''}">{{item.num}}</div>
<div class="number-item" v-for="(item,index) in letterList" :key="index" :style="{borderRightColor: item.border?'#666':''}">{{item.num}}</div>
</div>
<div class="start" @click="goAnswer">记忆完成</div>
......@@ -28,134 +28,20 @@
name: "startMemoryLetter",
data() {
return {
number: 0,
checked: 0,
number: [
{
num: 'g',
border: false
},
{
num: 'h',
border: false
},
{
num: 'j',
border: false
},
{
num: 'v',
border: false
},
{
num: 'd',
border: false
},
{
num: 't',
border: false
},
{
num: 's',
border: false
},
{
num: 'x',
border: false
},
{
num: 'm',
border: false
},
{
num: 'y',
border: false
},
{
num: 'w',
border: false
},
{
num: 'q',
border: false
},
{
num: 'u',
border: false
},
{
num: 'g',
border: false
},
{
num: 'b',
border: false
},{
num: 'd',
border: false
},
{
num: 'e',
border: false
},
{
num: 'p',
border: false
},
{
num: 'o',
border: false
},
{
num: 'a',
border: false
},
{
num: 'z',
border: false
},
{
num: 'c',
border: false
},{
num: 'b',
border: false
},
{
num: 'n',
border: false
},
{
num: 'l',
border: false
},
{
num: 'k',
border: false
},
{
num: 'i',
border: false
},
{
num: 'g',
border: false
},
{
num: 'r',
border: false
},
]
letterList: []
}
},
methods: {
change(val) {
if(this.checked == val) return;
this.checked = val;
this.number.forEach(v=>{
this.letterList.forEach(v=>{
v.border = false
})
if(this.checked != 0) {
this.number.forEach((vv,ii)=>{
this.letterList.forEach((vv,ii)=>{
if((ii+1)%val == 0) {
vv.border = true;
}
......@@ -163,7 +49,25 @@
}
},
goAnswer(){
this.$router.push({
path: '/randomLetter/answerLetter',
query: {
number: this.number
}
})
}
},
mounted() {
if(this.$route.query&&this.$route.query.number) {
this.number = this.$route.query.number;
for(let i=0;i<this.number;i++) {
let arr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
this.letterList.push({
num: arr[Math.floor(Math.random()*26)],
border: false
})
this.$store.state.randomLetter = this.letterList;
}
}
}
}
......
src/views/randomNumber/answerNumber.vue
......@@ -58,7 +58,8 @@
path: '/home/result',
query: {
number: this.answerLength,
correctNumber: this.correctNumber
correctNumber: this.correctNumber,
type: 1
}
})
},
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!