助记词功能,后台会返回一段字符串 前端将这段字符串转成数组显示在页面上
- 需求
- 后台返回12个字符串的单词 前端展示在页面让用户看到并且记住
- 点击下一步的时候 跳到备份助记词页面 用户将上个页面的助记词按照顺序点击
- 打乱助记词数组让用户点击 用到了冒泡排序 交换每个index
- 提交的时候判断这次点击的所有助记词与上次的是否相等 不等就提示错误
- 实现
1.例如a.json 就是后台返回的数据
- 在 src下 新建 a.json
{
"msg": "",
"status": 1,
"data":{
"mnemonic": "insect voice elder shift photo settle steel advice tennis clown drop sauce"
}
}
- word文件就是用户要记住的助记词
- 新建 word.vue
<template>
<div class="word">
<div class="title">备份助记词</div>
<div class="title">请认真抄写下方12个单词</div>
<div class="mnemonic">
<div class="item" v-for="(i, index) in calcMnemonic" :key="index">
{{ i }}
</div>
</div>
<div class="next" @click="next">下一步</div>
</div>
</template>
<script>
<!-- 导入json -->
import a from '../a.json'
export default {
data () {
return {
mnemonic: a.data.mnemonic
}
},
methods: {
next () {
// 将数据保存到本地
localStorage.setItem('zjc', this.mnemonic)
this.$router.push('/bf')
}
},
computed: {
// 将字符串转成数组
calcMnemonic () {
return this.mnemonic.split(" ");
},
}
}
</script>
<style lang="scss" scoped>
.title {
margin: 20px 30px;
}
.next {
height: 50px;
background-color: #1bc0fe;
color: #fff;
text-align: center;
line-height: 50px;
margin: 20px auto;
width: 300px;
border-radius: 5px;
}
.mnemonic {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 15px;
background: #f8f8f8;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
color: #333333;
.item {
width: 33.33%;
padding: 22px 10px;
text-align: center;
box-sizing: border-box;
}
}
</style>
- 备份助记词 匹配是否通过
- 新建一个bf.vue
<template>
<div class="bf">
<div class="title">备份助记词</div>
<!-- 备份助记词 -->
<div class="warper">
<div
class="item"
v-for="(item, index) in virifyItems"
:key="index"
@click="clickVirify(item, index)"
>
{{ item }}
</div>
</div>
<!-- 助记词区域 -->
<div class="box">
<div
class="item"
v-for="(i, index) in clickItems"
:key="index"
@click="clickWord(i, index)"
>
{{ i }}
</div>
</div>
<!-- 按钮 -->
<div class="next" @click="virifyOrder">确定</div>
</div>
</template>
<script>
export default {
data () {
return {
mnemonic: localStorage.getItem('zjc'), // 本地助记词数组
clickItems: [], // 点击的助记词数组
virifyItems: [], // 备份助记词数组
}
},
methods: {
clickWord (word, index) {
// 从助记词数组中删除点击的
this.clickItems.splice(index, 1)
// 添加到备份助记词数组
this.virifyItems.push(word)
},
// 备份助记词点击
clickVirify (word, index) {
// 从备份词数组删除点击的
this.virifyItems.splice(index, 1)
// 添加会助记词数组
this.clickItems.push(word)
},
// 确定按钮
virifyOrder () {
// 备份助记词数组数据
var virifyingOrder = this.virifyItems.join(" ")
// 校验数组数据
var correctOrder = this.mnemonic
console.log('correctOrder', correctOrder);
// 如果两者相等 说明可以通过
if (virifyingOrder === correctOrder) {
alert('成功')
} else {
alert('助记词不对')
}
}
},
created () {
const oldArr = this.mnemonic.split(" ")
// 冒泡排序
for (let i = 0; i < oldArr.length; i++) {
// 每个下标交换
let rIndex = Math.floor(Math.random() * (i + 1));
let temp = oldArr[rIndex];
oldArr[rIndex] = oldArr[i];
oldArr[i] = temp;
}
this.clickItems = oldArr
},
}
</script>
<style lang="scss" scoped>
.title {
margin: 20px 30px;
}
.warper {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
margin: 30px 15px 0;
background: #f8f8f8;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
color: #333333;
min-height: 190px;
box-sizing: border-box;
.item {
width: (1 / 3) * 100%;
padding: 16px 10px;
text-align: center;
box-sizing: border-box;
}
}
.box {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
padding: 5px 15px;
box-sizing: border-box;
.item {
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
margin-right: 22px;
width: 100px;
height: 40px;
padding: 0 10px;
background: #f8f8f8;
border-radius: 4px;
text-align: center;
font-size: 14px;
font-weight: 500;
box-sizing: border-box;
color: #333333;
&:nth-child(3n) {
margin-right: 0;
}
}
}
.next {
height: 50px;
background-color: #1bc0fe;
color: #fff;
text-align: center;
line-height: 50px;
margin: 20px auto;
width: 300px;
border-radius: 5px;
}
</style>
