Vue生成随机卡密并绑定到表单输入框的实现技巧

<template>
  <BackgroundVideo>
    <div class="content-page">
      <div class="content-container">
        <div class="content-nav">
          <el-breadcrumb class="breadcrumb" separator="/">
            <el-breadcrumb-item>
              <a @click="$router.push('/dashboard/cardSecrets')">卡密列表</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ isEdit ? '编辑卡密记录' : '新增卡密' }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="content-main">
          <el-form :model="form" label-width="120px" class="recharge-form" :rules="rules" ref="form">
            <el-form-item label="卡密" prop="cardSecret">
              <div style="display: flex; align-items: center;">
                <el-input
                  v-model="form.cardSecret"
                  placeholder="请输入卡密或者生成"
                  style="flex: 1; margin-right: 10px;"
                ></el-input>
                <el-button type="primary" @click="generateCardSecret">生成</el-button>
              </div>
            </el-form-item>
            <el-form-item label="充值金额" prop="amount">
              <el-input v-model="form.amount" placeholder="请输入充值金额" type="number"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">{{ isEdit ? '保存修改' : '提交' }}</el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </BackgroundVideo>
</template>

methods: {
  // 随机生成卡密
  generateCardSecret() {
    const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    // 生成每段的字符
    const segment = () =>
      Array.from({ length: 4 })
        .map(() => chars.charAt(Math.floor(Math.random() * chars.length)))
        .join('');
    // 格式化生成卡密
    this.form.cardSecret = `${segment()}-${segment()}-${segment()}-${segment()}`;
  },
  // 提交表单
  onSubmit() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        if (this.isEdit) {
          this.axios
            .put('/imchat/cardSecrets', this.form)
            .then((response) => {
              if (response.data.success) {
                this.$message.success('充值记录更新成功');
                this.$router.push('/dashboard/cardSecrets');
              } else {
                this.$message.error('更新失败');
              }
            })
            .catch(() => {
              this.$message.error('更新失败，请检查网络或联系管理员。');
            });
        } else {
          this.axios
            .post('/imchat/cardSecrets', this.form)
            .then((response) => {
              if (response.data.success) {
                this.$message.success('充值记录添加成功');
                this.$router.push('/dashboard/cardSecrets');
              } else {
                this.$message.error('添加失败');
              }
            })
            .catch(() => {
              this.$message.error('添加失败，请检查网络或联系管理员。');
            });
        }
      }
    });
  },
  // 取消操作
  onCancel() {
    this.$router.push('/dashboard/cardSecrets');
  },
},

rules: {
  cardSecret: [
    { required: true, message: '卡密不能为空', trigger: 'blur' },
  ],
  amount: [
    { required: true, message: '充值金额不能为空', trigger: 'blur' },
  ],
},