Gnegxin

src/views/index.vue

@@ -1,94 +1,57 @@
 <template>
   <div id="index">
-    <el-row>
-      <el-col :span="24">
-        <div class="box">
-          <div :class="{ anim: animate == true }" @mouseenter="mEnter" @mouseleave="mLeave">
-            <el-col class="list" :span="24" v-for="(item, index) in items" :key="index">
-              <el-image @click="btn(item.pic)" :src="item.pic"></el-image>
-            </el-col>
-          </div>
-        </div>
-      </el-col>
-    </el-row>
+    <p class="title">{{ msg }}</p>
+    <p class="code">{{ code }}</p>
   </div>
 </template>
 
 <script>
+import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'index',
   props: {},
   components: {},
-  data: () => ({
-    animate: false,
-    items: [
-      {
-        pic: require('@/assets/1.png'),
-      },
-      {
-        pic: require('@/assets/2.png'),
-      },
-      {
-        pic: require('@/assets/3.png'),
-      },
-      {
-        pic: require('@/assets/4.png'),
-      },
-      {
-        pic: require('@/assets/5.png'),
-      },
-      {
-        pic: require('@/assets/6.png'),
-      },
-      {
-        pic: require('@/assets/7.png'),
-      },
-      {
-        pic: require('@/assets/8.png'),
-      },
-      {
-        pic: require('@/assets/9.png'),
-      },
-      {
-        pic: require('@/assets/10.png'),
-      },
-    ],
-  }),
-  created() {},
-  computed: {},
-  mounted() {
-    this.timer1 = setInterval(this.scroll, 1000);
+  data: function() {
+    return {
+      msg: 'FaceIFaceID 人脸核身服务',
+      code: '',
+    };
+  },
+  created() {
+    this.createCode();
   },
   methods: {
-    scroll() {
-      this.animate = !this.animate;
-      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
-      setTimeout(function() {
-        that.items.push(that.items[0]);
-        that.items.shift();
-      }, 1000);
-    },
-    mEnter() {
-      clearInterval(this.timer1);
-    },
-    mLeave() {
-      this.timer1 = setInterval(this.scroll, 1000);
+    createCode() {
+      var code = '';
+      //设置长度，这里看需求，我这里设置了4
+      var codeLength = 4;
+
+      //设置随机字符
+      var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
+
+      //循环codeLength 我设置的4就是循环4次
+      for (var i = 0; i < codeLength; i++) {
+        //设置随机数范围,这设置为0 ~ 36
+        var index = Math.floor(Math.random() * 9);
+
+        //字符串拼接 将每次随机的字符 进行拼接
+        code += random[index];
+      }
+
+      //将拼接好的字符串赋值给展示的code
+      this.code = code;
     },
-    btn(name) {
-      console.log(name);
+  },
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
     },
   },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
 };
 </script>
 
-<style lang="less" scoped>
-.box {
-  width: 300px;
-  height: 500px;
-  overflow: hidden;
-  border: 1px solid #ccc;
-}
-.anim {
-  transition: all 0.5s;
-}
-</style>
+<style lang="less" scoped></style>