JbSxs/code/vue-base1/src/views/Recharge.vue

<template>
  <div class="recharge-form">
    <h2 class="form-title">后台充值</h2>

    <form @submit.prevent="submitForm">
      <!-- 精网号输入组 -->
      <div class="form-group">
        <label for="jwcode">精网号</label>
        <!-- 添加 @blur 事件监听器 -->
        <input
          type="text"
          id="jwcode"
          v-model="formData.jwcode"
          placeholder="请输入精网号"
          required
          @blur="checkJwcodeExists"
        />
      </div>

      <!-- 充值金额输入组 -->
      <div class="form-group">
        <label for="amount">充值金额</label>
        <!-- 充值金额输入框，使用 v-model.number 绑定到 formData.amount，确保输入为数字 -->
        <input
          type="number"
          id="amount"
          v-model.number="formData.amount"
          placeholder="请输入充值金额"
          required
          min="0"
        />
      </div>

      <!-- 支付方式选择组 -->
      <div class="form-group">
        <label for="payment-method">支付方式</label>
        <!-- 支付方式选择框，使用 v-model 绑定到 formData.paymentMethod -->
        <select id="payment-method" v-model="formData.paymentMethod" required>
          <!-- 默认选项 -->
          <option value="">请选择支付方式</option>
          <!-- 微信支付选项 -->
          <option value="WECHAT">微信</option>
          <!-- 支付宝支付选项 -->
          <option value="ALIPAY">支付宝</option>
          <!-- 银行卡支付选项 -->
          <option value="BANK">银行卡</option>
        </select>
      </div>

      <!-- 备注输入组 -->
      <div class="form-group">
        <label for="notes">备注：</label>
        <!-- 修正为绑定到 formData.notes -->
        <textarea
          id="notes"
          v-model="formData.notes"
          rows="4"
          placeholder="请输入备注（非必填）"
        ></textarea>
      </div>

      <!-- 提交按钮组 -->
      <div class="form-group">
        <!-- 修改按钮，根据 isLoading 状态显示不同文字和禁用状态 -->
        <button type="submit" :disabled="isLoading">
          {{ isLoading ? '提交中...' : '提交' }}
        </button>
      </div>
    </form>
  </div>
</template>

<script>

import axios from 'axios';

export default {
  data() {
      return {

          formData: {

              jwcode: '',

              amount: null,

              paymentMethod: '',

              notes: ''
          },
          isLoading: false,
          jwcodeExists: true // 新增变量，用于标记精网号是否存在
      };
  },
  methods: {
      /**
       * 检查精网号是否存在于数据库
       */
      async checkJwcodeExists() {
          if (!this.formData.jwcode) {
              this.jwcodeExists = true;
              return;
          }
          try {
              // 修改为 post 请求，将精网号作为请求体传递
              const response = await axios.post('http://192.168.8.94:5173/recharges/checkJwcode', {
                  jwcode: this.formData.jwcode
              }); 
              if (response.data && typeof response.data.exists === 'boolean') {
                  this.jwcodeExists = response.data.exists;
              } else {
                  console.error('后端返回的数据格式不正确，缺少 exists 属性或属性类型错误');
                  // 可以根据实际情况处理错误，比如设置默认值
                  this.jwcodeExists = true; 
              }
              if (!this.jwcodeExists) {
                  alert('用户不存在1，请检查精网号。');
              }
          } catch (error) {
              console.error('检查精网号失败：', error);
              alert('检查精网号时出错，请稍后再试。');
              // 清空精网号记录
              this.formData.jwcode = ''; 
          }
      },
      /**
       * 提交表单的方法
       * 发送表单数据到后端，并处理响应
       */
      async submitForm() {
          // 提交前检查精网号是否为空
          if (!this.formData.jwcode) {
              alert("精网号不能为空！");
              return;
          }
          // 检查精网号是否存在
          if (!this.jwcodeExists) {
              alert('用户不存在2，请检查精网号。');
              return;
          }
          try {

              // 开始提交，设置加载状态为 true
              this.isLoading = true; 
              const response = await axios.post('http://192.168.8.94:5173/recharges/add/addRecharges', this.formData);
              
              if (response.data.code === "200") {
                console.log('后端响应：', response.data.code === "200");
                alert('提交成功！');
              } else {
                alert('提交失败：' + (response.data.message || '未知错误'));
              }
          } catch (error) {
              console.error('提交表单失败：', error);
              alert('提交失败，请稍后再试。');
          } finally {
              // 无论提交成功与否，都清空表单数据
              this.formData = {
                  jwcode: '',
                  amount: null,
                  paymentMethod: '',
                  notes: ''
              };
              this.isLoading = false; 
          }
      }
  }
};
</script>

<style scoped>
/* 充值表单样式 */
.recharge-form {
  /* 假设导航栏宽度为 200px，根据实际情况修改 */
  margin-left: 200px; 
  /* 调整表单宽度，使用百分比适应剩余空间 */
  width: calc(100% - 300px); 
  min-width: auto; 
  min-height: 890px;
  margin-top: 10px;
  padding: 20px;
  border-radius: 8px;
  /* 设置表单完全透明 */
  background-color: rgba(255, 255, 255, 0.4); 
}

/* 表单标题样式 */
.form-title {
  text-align: center;
  margin-bottom: 30px; 
  color: #000; 
}

/* 表单组样式 */
.form-group {
  margin-bottom: 30px; /* 增加表单组之间的间距 */
}

/* 表单组标签样式，修改文字颜色为深黑色 */
.form-group label {
  display: block;
  margin-bottom: 10px; /* 增加标签与输入框的间距 */
  font-weight: bold;
  color: #000; 
}

/* 表单组输入框、选择框和文本框样式 */
.form-group input[type="text"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
  width: 98%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  /* 设置文本框、选择框和文本域一般透明 */
  background-color: rgba(255, 255, 255, 0.5); 
  color: black; 
}

/* 表单组文本框样式 */
.form-group textarea {
  resize: vertical;
}

/* 表单组按钮样式 */
.form-group button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 表单组按钮悬停样式 */
.form-group button:hover {
  background-color: #0056b3;
}
</style>