JbSxs/0414task/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 {
                const response = await axios.get(`http://192.168.8.94:8080/recharges/checkJwcode/${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:8080/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 {
    min-width: 600px;
    margin-left: 8px;
    margin-top: 2px;

    padding: 20px;
    /* border: 10px solid #ccc; */
    border-radius: 8px;
    background-color: #f9f9f9;
  }

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

  /* 表单组样式 */
  .form-group {
    margin-bottom: 15px;
  }

  /* 表单组标签样式 */
  .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }

  /* 表单组输入框、选择框和文本框样式 */
  .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;
  }

  /* 表单组文本框样式 */
  .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>