wx-qhb/pageA/index.vue

<template>
  <div class="dynamic-code">
    <div class="code-container">
      <div  @click="generateCode" class="code">{{ code }}</div>
    </div>
    <!-- <button @click="generateCode">看不清，换一张</button> -->
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      code: '', // 存储验证码
      characters: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', // 允许的字符
    };
  },
  methods: {
    generateRandomCode() {
      // 生成随机四位数字加大小写字母验证码
      let result = '';
      for (let i = 0; i < 4; i++) {
        const randomIndex = Math.floor(Math.random() * this.characters.length);
        result += this.characters[randomIndex];
      }
      this.code = result;
	  console.log(this.code);
    },
    generateCode() {
      this.generateRandomCode();
    },
  },
  mounted() {
    this.generateCode(); // 组件挂载后生成验证码
  },
};
</script>
 
<style>
.dynamic-code {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
 
.code-container {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  padding: 10px 20px;
  border: 2px solid #333;
  border-radius: 5px;
}
 
button {
  font-size: 18px;
  padding: 10px 20px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>