新增公共验证码

src/components/HelloWorld.vue

@@ -1,114 +0,0 @@
-<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 lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/verify-message.vue

@@ -0,0 +1,36 @@
+<template>
+  <div id="verify-message">
+    <el-button type="success" style="width: 86px;height: 33px;padding: 0;margin: 0 0 0 5px;" @click="send">
+      <el-link target="_blank" :underline="false" style="color:#fff;">获取验证码</el-link>
+    </el-button>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex';
+export default {
+  name: 'verify-message',
+  props: {
+    mobile: { type: String },
+  },
+  components: {},
+  data: () => ({}),
+  created() {},
+  computed: {},
+  methods: {
+    ...mapActions(['verifyOperation']),
+    async send() {
+      if (!this.mobile) {
+        this.$message.error('请输入手机号码');
+        return;
+      }
+      let result = await this.verifyOperation({ type: 'message', data: { mobile: this.mobile } });
+      if (`${result.errcode}` === '0') {
+        this.$message.success('短信正在发送中,请耐心等待');
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/components/verify.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="verify">
+    <span v-html="pic" @click="toCreated"></span>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapState } from 'vuex';
+export default {
+  name: 'verify',
+  props: {
+    value: { type: null, default: '' },
+  },
+  model: {
+    prop: 'value',
+    event: 'change', // 默认为input时间，此处改为change
+  },
+  components: {},
+  data: () => ({
+    pic: '',
+    code: '',
+  }),
+  created() {
+    this.toCreated();
+  },
+  computed: {},
+  methods: {
+    ...mapActions(['verifyOperation']),
+    async toCreated() {
+      this.$set(this, `code`, new Date().getTime());
+      this.$emit('change', this.code);
+      let result = await this.verifyOperation({ type: 'verify', data: { code: this.code } });
+      if (`${result.errcode}` === '0') {
+        this.$set(this, `pic`, result.data);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+img {
+  width: 100%;
+  height: 47px;
+}
+</style>