feat(wallet): 会员中心-我的钱包样式调整

src/components/TransferDialog.vue

@@ -73,15 +73,10 @@
         </el-form-item>
       </el-form>
       <div class="dialog-footer">
-        <el-button
+        <el-button type="primary" class="confirm-button" @click="submitTransfer"
-          type="primary"
+          >确认</el-button
-          class="confirm-button"
-          @click="submitTransfer"
-          >{{ "确认" }}</el-button
         >
-        <el-button @click="handleCancel" class="cancel-button">{{
+        <el-button @click="handleCancel" class="cancel-button">取消</el-button>
-          "取消"
-        }}</el-button>
       </div>
     </div>
   </el-dialog>

src/components/tradeDetails.vue

@@ -45,6 +45,7 @@
                   :range-separator="'至'"
                   :start-placeholder="'开始日期'"
                   :end-placeholder="'结束日期'"
+                  :picker-options="pickerOptions"
                 >
                 </el-date-picker>
               </el-form-item>
@@ -52,12 +53,10 @@
 
             <el-col :span="4">
               <div class="searchbox">
-                <el-button class="btn2" @click="research">{{
+                <el-button type="primary" @click="research">{{
                   "搜索"
                 }}</el-button>
-                <el-button class="btn1" @click="chongzhi">{{
+                <el-button @click="chongzhi">{{ "重置" }}</el-button>
-                  "重置"
-                }}</el-button>
               </div>
             </el-col>
           </el-row>
@@ -147,6 +146,11 @@ export default {
   },
   data() {
     return {
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
       thetime: "",
       tableData: [],
       total: 0,
@@ -257,7 +261,7 @@ export default {
       cursor: pointer;
     }
     .actArea {
-      color: #00417C;
+      color: #00417c;
     }
   }
   .topbox {

src/components/walletBankCard.vue

@@ -12,14 +12,14 @@
             <div class="imgbox"><img :src="item.logo" alt="" /></div>
             <div class="titlebox">
               <div class="cardtitle">{{ item.bankName }}</div>
-              <div class="cardtitle2">{{ '储蓄卡' }}</div>
+              <div class="cardtitle2">{{ "储蓄卡" }}</div>
             </div>
           </div>
           <div class="flexs_1" v-if="item.defaultCard == 1">
             <div class="qiu"></div>
-            <div v-if="pkCountry == 1">{{ '默认' }}</div>
+            <div v-if="pkCountry == 1">{{ "默认" }}</div>
             <div style="color: #fff; font-weight: bold" v-else>
-              {{ '默认' }}
+              {{ "默认" }}
             </div>
           </div>
           <div class="flexs_1" v-else>
@@ -27,13 +27,13 @@
               style="color: #fff; font-weight: bold; cursor: pointer"
               @click="setDefault(item.pkId)"
             >
-              {{ '设为默认' }}
+              {{ "设为默认" }}
             </div>
           </div>
         </div>
         <div class="cardNumber">{{ item.cardNumber }}</div>
         <div v-if="pkCountry == 1" class="cardfooter" @click="removeBind(item)">
-          [{{ '解绑' }}]
+          [{{ "解绑" }}]
         </div>
         <div
           v-else
@@ -41,7 +41,7 @@
           class="cardfooter"
           @click="removeBind(item)"
         >
-          [{{ '解绑' }}]
+          [{{ "解绑" }}]
         </div>
       </div>
     </div>
@@ -53,13 +53,13 @@
       />
     </div>
     <el-button class="footerbtn" @click="bindBank(true)">{{
-      '绑定银行卡'
+      "绑定银行卡"
     }}</el-button>
-    <WalletBindBank :isAdd="isAdd" @closeBind="closeBind"></WalletBindBank>
+    <WalletBindBank :visible="isAdd" @closeBind="closeBind"></WalletBindBank>
   </div>
 </template>
 
-  <script>
+<script>
 import { getBankList, removeBankBind, updateDefault } from "@/api/wallet.js";
 import WalletBindBank from "@/components/walletBindBank.vue";
 export default {
@@ -101,17 +101,21 @@ export default {
     },
     //解除绑定
     removeBind(item) {
-      this.$confirm('是否确认解绑银行卡', "", {
+      this.$confirm("是否确认解绑银行卡", "", {
-        confirmButtonText: '确定',
+        confirmButtonText: "确定",
-        cancelButtonText: '取消',
+        cancelButtonText: "取消",
         type: "warning",
       }).then(() => {
         if (item.defaultCard == 1) {
-          this.$confirm("当前解绑为默银行卡，请设置为另一张卡为默认银行卡", "", {
+          this.$confirm(
-            confirmButtonText: '确定',
+            "当前解绑为默银行卡，请设置为另一张卡为默认银行卡",
-            cancelButtonText: '取消',
+            "",
+            {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
               type: "warning",
-          }).then(() => {
+            }
+          ).then(() => {
             removeBankBind({ pkId: item.pkId }).then((res) => {
               if (res.code == 200) {
                 this.$message({
@@ -122,7 +126,7 @@ export default {
               }
             });
           });
-        }else{
+        } else {
           removeBankBind({ pkId: item.pkId }).then((res) => {
             if (res.code == 200) {
               this.$message({
@@ -133,7 +137,6 @@ export default {
             }
           });
         }
-        
       });
     },
     closeBind() {
@@ -142,8 +145,8 @@ export default {
     },
     //点击绑定银行卡
     bindBank(val) {
-      this.isAdd = true;
       this.jdTl = val;
+      this.isAdd = true;
     },
     research() {
       getBankList().then((res) => {
@@ -163,7 +166,7 @@ export default {
 };
 </script>
 
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
 ::v-deep .el-table .warning-row {
   background: #f9f9f9;
 }

src/components/walletBindBank.vue

@@ -1,28 +1,27 @@
 <template>
   <el-dialog
-    :title="'绑定银行卡'"
+    title="绑定银行卡"
-    :visible.sync="addShow"
+    :visible.sync="dialogVisible"
-    center=""
+    width="40%"
-    width="25%"
     :close-on-click-modal="false"
-    :before-close="handleCloseBank"
+    :before-close="handleCloseDialog"
   >
-    <div class="add_pay">
+    <div class="bind-bank-form-container">
       <el-form
-        ref="form"
+        ref="bankForm"
         :rules="rules"
         :model="form"
         label-position="right"
         label-width="100px"
       >
-        <el-form-item :label="'银行卡号' + ':'" prop="cardNumber">
+        <el-form-item label="银行卡号:" prop="cardNumber">
           <el-input
             v-model="form.cardNumber"
-            :placeholder="'请输入银行卡号'"
+            placeholder="请输入银行卡号"
           ></el-input>
         </el-form-item>
-        <el-form-item :label="'银行选择' + ':'" prop="pkBank">
+        <el-form-item label="银行选择:" prop="bankId">
-          <el-select v-model="form.pkBank" :placeholder="'请选择银行名称'">
+          <el-select v-model="form.bankId" placeholder="请选择银行名称">
             <el-option
               v-for="(item, index) in bankCardChioceList"
               :key="index"
@@ -31,20 +30,20 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item :label="'开户支行' + ':'" prop="subBankName">
+        <el-form-item label="开户支行:" prop="subBankName">
           <el-input
             v-model="form.subBankName"
-            :placeholder="'请输入开户支行'"
+            placeholder="请输入开户支行"
           ></el-input>
         </el-form-item>
-        <el-form-item :label="'姓名' + ':'" prop="accountName">
+        <el-form-item label="姓名:" prop="accountName">
           <el-input
             v-model="form.accountName"
-            :placeholder="'请输入姓名'"
+            placeholder="请输入姓名"
           ></el-input>
         </el-form-item>
-        <el-form-item :label="'证件类型'" prop="idType">
+        <el-form-item label="证件类型:" prop="idType">
-          <el-select v-model="form.idType" :placeholder="'请选择证件类型'">
+          <el-select v-model="form.idType" placeholder="请选择证件类型">
             <el-option
               v-for="(item, index) in cardTypeList"
               :key="index"
@@ -53,332 +52,478 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item :label="'证件号码' + ':'" prop="idCard">
+        <el-form-item label="证件号码:" prop="idCard">
           <el-input
             v-model="form.idCard"
-            :placeholder="'请输入证件号码'"
+            placeholder="请输入证件号码"
           ></el-input>
         </el-form-item>
-        <el-form-item
+        <el-form-item v-if="isMainlandChinaUser" label="手机号:" prop="phone">
-          v-if="pkCountry == 1"
-          :label="'手机号' + ':'"
-          prop="phone"
-        >
-          <el-input v-model="form.phone" :placeholder="'银行卡预留手机号'"></el-input>
-        </el-form-item>
-        <!-- <el-form-item :label="$t('w_0181')+':'">
           <el-input
-            v-model="form.validdate"
+            v-model="form.phone"
-            :placeholder="$t('w_0185')"
+            placeholder="银行卡预留手机号"
           ></el-input>
-        </el-form-item> -->
+        </el-form-item>
-        <!-- <el-form-item :label="$t('w_0182')+':'">
-          <el-input v-model="form.cvv2" :placeholder="$t('w_0186')"></el-input>
-        </el-form-item> -->
         <el-form-item
-          v-if="pkCountry == 1 && cancode"
+          v-if="isMainlandChinaUser && needsVerificationCode"
-          :label="'验证码' + ':'"
+          label="验证码:"
           prop="verificationCode"
         >
           <el-input
             v-model="form.verificationCode"
-            :placeholder="'请输入验证码'"
+            placeholder="请输入验证码"
           ></el-input>
-          <div class="hqyzm1" :class="isSend ? 'hui' : ''" @click="startTime">
+          <el-button
-            {{ getCode }}
+            style="margin-left: 10px"
-          </div>
+            :class="{ 'is-disabled': isSendingCode }"
+            :disabled="isSendingCode"
+            type="primary"
+            @click="sendVerificationCode"
+          >
+            {{ verificationCodeButtonText }}
+          </el-button>
         </el-form-item>
       </el-form>
     </div>
-    <div class="surebtn1">
+    <div class="dialog-footer">
-      <div class="btn hh" @click="handleCloseBank">{{ '取消' }}</div>
+      <!-- <div class="btn cancel-btn" @click="handleCloseDialog">取消</div> -->
-      <div class="btn" @click="submitForm('form')">{{ '确定' }}</div>
+      <el-button @click="handleCloseDialog">取消</el-button>
+      <el-button type="primary" @click="submitBankForm('bankForm')"
+        >确定
+      </el-button>
     </div>
   </el-dialog>
 </template>
 
-  <script>
+<script>
-import * as wal from "@/api/wallet.js";
+import * as walletApi from "@/api/wallet.js";
 import { mapGetters } from "vuex";
 export default {
   data() {
-    return {
+    // 自定义验证码校验逻辑
-      cardTypeList: [], //证件类型
+    const validateVerificationCode = (rule, value, callback) => {
-      addShow: false,
+      if (this.isMainlandChinaUser && this.needsVerificationCode && !value) {
-      form: {
+        callback(new Error("请输入验证码"));
-        cardNumber: "",
-        accountName: "",
-        idCard: "",
-        phone: "",
-        pkBank: "",
-        verificationCode: "",
-        subBankName: "",
-      },
-      isSend: false,
-      beginTime: 60,
-      getCode: '获取验证码',
-      timer: "",
-      rules: {
-        cardNumber: [
-          { required: true, message: '请输入银行卡号', trigger: "blur" },
-        ],
-        verificationCode: [
-          { required: true, message: '请输入验证码', trigger: "blur" },
-          {
-            validator: (rule, value, callback) => {
-              if (this.pkCountry === 1 && !value) {
-                callback(new Error('请输入验证码'));
       } else {
         callback();
       }
+    };
+    // 自定义手机号校验逻辑
+    const validatePhoneNumber = (rule, value, callback) => {
+      if (this.isMainlandChinaUser && !value) {
+        callback(new Error("请输入正确的手机号"));
+      } else if (this.isMainlandChinaUser && value && value.length < 11) {
+        callback(new Error("请输入正确的手机号"));
+      } else {
+        callback();
+      }
+    };
+
+    return {
+      cardTypeList: [], // 证件类型列表
+      dialogVisible: false, // 控制对话框显示
+      form: {
+        cardNumber: "", // 银行卡号
+        accountName: "", // 姓名
+        idCard: "", // 证件号码
+        phone: "", // 手机号
+        bankId: "", // 银行ID (原 pkBank)
+        verificationCode: "", // 验证码
+        subBankName: "", // 开户支行
+        idType: "", // 证件类型
       },
-          },
+      isSendingCode: false, // 是否正在发送验证码
+      countdownSeconds: 60, // 倒计时秒数
+      verificationCodeButtonText: "获取验证码", // 验证码按钮文字
+      countdownTimer: null, // 倒计时定时器
+      rules: {
+        cardNumber: [
+          { required: true, message: "请输入银行卡号", trigger: "blur" },
+        ],
+        verificationCode: [
+          { required: true, message: "请输入验证码", trigger: "blur" },
+          { validator: validateVerificationCode, trigger: "blur" },
         ],
         idType: [
-          { required: true, message: '请选择证件类型', trigger: "change" },
+          { required: true, message: "请选择证件类型", trigger: "change" },
         ],
         accountName: [
-          { required: true, message: '请输入姓名', trigger: "blur" },
+          { required: true, message: "请输入姓名", trigger: "blur" },
         ],
         subBankName: [
-          { required: true, message: '请输入开户支行', trigger: "blur" },
+          { required: true, message: "请输入开户支行", trigger: "blur" },
         ],
-        bankNo: [
+        // bankNo 验证似乎是重复的，已移除
-          { required: true, message: '请输入银行卡卡号', trigger: "blur" },
+        // name 验证似乎是重复的，已移除
-        ],
-        name: [{ required: true, message: '请输入真实姓名', trigger: "blur" }],
         idCard: [
-          { required: true, message: '请输入证件号码', trigger: "blur" },
+          { required: true, message: "请输入证件号码", trigger: "blur" },
         ],
-        // smsCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
+        // smsCode 似乎未使用，已移除
         phone: [
           {
             required: true,
-            message: '请输入银行卡预留手机号',
+            message: "请输入银行卡预留手机号",
             trigger: "blur",
           },
-          { min: 11, message: '请输入正确的手机号', trigger: "blur" },
+          // { min: 11, message: '请输入正确的手机号', trigger: "blur" }, // 合并到 validator
-          {
+          { validator: validatePhoneNumber, trigger: "blur" },
-            validator: (rule, value, callback) => {
-              if (this.pkCountry === 1 && !value) {
-                callback(new Error('请输入正确的手机号'));
-              } else {
-                callback();
-              }
-            },
-          },
         ],
-        pkBank: [
+        bankId: [
-          { required: true, message: '请选择银行卡', trigger: "change" },
+          // 原 pkBank
+          { required: true, message: "请选择银行卡", trigger: "change" },
         ],
       },
-      ifpass: false,
+      isBankCardVerified: false, // 银行卡是否已验证通过 (原 ifpass)
-      bankCardChioceList: [],
+      bankCardChioceList: [], // 可选银行列表
-      pkCountry: "",
+      // pkCountry: "", // 由 isMainlandChinaUser 计算属性替代
-      cancode: true,
+      needsVerificationCode: true, // 是否需要验证码 (原 cancode)
     };
   },
   props: {
-    isAdd: {
+    // isAdd 更名为 visible，更符合对话框的常用属性名
+    visible: {
       type: Boolean,
       default: false,
     },
   },
   computed: {
     ...mapGetters(["userInfo"]),
+    // 计算用户是否为中国大陆用户
+    isMainlandChinaUser() {
+      return this.userInfo?.pkCountry === 1;
+    },
   },
   watch: {
-    isAdd(val) {
+    // 监听 prop 变化来控制对话框显示
-      this.addShow = val;
+    visible(newVal) {
+      this.dialogVisible = newVal;
+      if (newVal) {
+        // 对话框打开时重置状态（如果需要）
+        this.resetFormState();
+      }
+    },
+    // 监听对话框内部状态变化，并通知父组件
+    dialogVisible(newVal) {
+      if (!newVal) {
+        this.$emit("update:visible", false); // 使用 .sync 修饰符更新父组件状态
+        this.$emit("closeBind", this.isBankCardVerified ? 1 : 0); // 保留原有逻辑，根据验证状态发送不同值
+        this.resetFormAndValidation(); // 关闭时重置表单和状态
+      }
     },
   },
   created() {
-    this.getBankCardChoiceList();
+    this.fetchBankCardChoices();
-    this.checkIfWhite();
+    this.checkVerificationRequirement();
-    this.pkCountry = this.userInfo.pkCountry;
+    // this.pkCountry = this.userInfo.pkCountry; // 不再需要单独存储，使用计算属性
+  },
+  beforeDestroy() {
+    // 组件销毁前清除定时器
+    if (this.countdownTimer) {
+      clearInterval(this.countdownTimer);
+    }
   },
-
   methods: {
-    checkIfWhite() {
+    // 检查是否需要验证码
-      wal.checkIfWhite().then((res) => {
+    checkVerificationRequirement() {
-        if (res.code == 200 && res.flag == "N") {
+      walletApi
-          this.cancode = true;
+        .checkIfWhite()
-        } else if (res.code == 200 && res.flag == "Y") {
+        .then((res) => {
-          this.cancode = false;
+          // 后端接口 flag 为 'Y' 表示在白名单，不需要验证码
-        }
+          this.needsVerificationCode = !(res.code == 200 && res.flag === "Y");
+        })
+        .catch((_err) => {
+          // 处理获取白名单状态失败的情况，可以设置默认值或提示用户
+          console.error("获取白名单状态失败:", _err);
+          this.needsVerificationCode = true; // 默认为需要验证码
         });
     },
-    getBankCardChoiceList() {
+    // 获取银行卡选项和证件类型
-      wal.getBankCardChoiceList().then((res) => {
+    fetchBankCardChoices() {
-        this.bankCardChioceList = res.data;
+      walletApi
+        .getBankCardChoiceList()
+        .then((res) => {
+          this.bankCardChioceList = res.data || [];
+        })
+        .catch((_err) => {
+          console.error("获取银行列表失败:", _err);
         });
-      //证件类型
-      wal.getCardType().then((res) => {
-        this.cardTypeList = res.data;
-      });
-    },
-    handleCloseBank() {
-      this.$emit("closeBind", 0);
-      this.$refs.form.resetFields();
-    },
-    // 绑卡
-    bindBank() {
-      if (!this.form.verificationCode &&this.cancode&& this.pkCountry == 1) {
-        this.$message({
-          message: '验证码错误',
-          type: "warning",
-        });
-        return;
-      }
-      if (!this.ifpass && this.pkCountry == 1) {
-        this.$message({
-          message: '银行卡验证不一致',
-          type: "warning",
-        });
-        return;
-      }
-      let that = this;
 
-      wal.bindWalletBankAdd(this.form).then((res) => {
+      walletApi
+        .getCardType()
+        .then((res) => {
+          this.cardTypeList = res.data || [];
+        })
+        .catch((_err) => {
+          console.error("获取证件类型失败:", _err);
+        });
+    },
+    // 关闭对话框处理
+    handleCloseDialog() {
+      this.dialogVisible = false;
+      // 关闭时已在 watch 中处理了 resetFields 和 emit 事件
+    },
+    // 重置表单和相关状态
+    resetFormAndValidation() {
+      this.$refs.bankForm?.resetFields();
+      this.isBankCardVerified = false;
+      this.clearCountdown(); // 清除倒计时状态
+    },
+    // 清除倒计时状态
+    clearCountdown() {
+      if (this.countdownTimer) {
+        clearInterval(this.countdownTimer);
+        this.countdownTimer = null;
+      }
+      this.isSendingCode = false;
+      this.verificationCodeButtonText = "获取验证码";
+      this.countdownSeconds = 60;
+    },
+    // 重置表单外的状态（如果需要）
+    resetFormState() {
+      this.isBankCardVerified = false;
+      this.clearCountdown();
+    },
+    // 实际执行绑卡操作
+    performBindBank() {
+      // 对于非中国大陆用户，或不需要验证码的情况，直接标记为已验证
+      if (!this.isMainlandChinaUser || !this.needsVerificationCode) {
+        this.isBankCardVerified = true;
+      }
+
+      if (!this.isBankCardVerified) {
         this.$message({
-          message: '银行卡绑定成功',
+          message: "请先完成银行卡验证", // 或 '银行卡验证不一致'
+          type: "warning",
+        });
+        return;
+      }
+
+      // let that = this; // 不再需要
+
+      walletApi
+        .bindWalletBankAdd(this.form)
+        .then(() => {
+          this.$message({
+            message: "银行卡绑定成功",
             type: "success",
           });
-        this.$refs.form.resetFields();
+          // 成功后关闭对话框，并触发成功回调
           setTimeout(() => {
-          that.$emit("closeBind", 1);
+            // this.resetFormAndValidation(); // 已移至 watch 中处理关闭
+            // this.$emit("closeBind", 1); // 已移至 watch 中处理关闭
+            this.dialogVisible = false; // 关闭对话框
           }, 1500);
+        })
+        .catch((_err) => {
+          // 添加错误处理
+          console.error("绑定银行卡失败:", _err);
+          this.$message({
+            message: "银行卡绑定失败，请稍后重试",
+            type: "error",
+          });
         });
     },
-    // 绑卡获取验证码
+    // 提交表单（验证 + 绑卡）
-    submitForm(form) {
+    submitBankForm(formName) {
-      this.$refs[form].validate((valid) => {
+      this.$refs[formName].validate((valid) => {
         if (valid) {
-          if (this.pkCountry == 1) {
+          // 如果是中国大陆用户且需要验证码
-            if (this.cancode) {
+          if (this.isMainlandChinaUser && this.needsVerificationCode) {
-              wal
+            walletApi
               .verifyBankCard(this.form)
-                .then((res) => {
+              .then(() => {
-                  if (res.code == 200) {
+                // 验证成功，标记状态并执行绑卡
-                    this.ifpass = true;
+                this.isBankCardVerified = true;
-                    this.bindBank();
+                this.performBindBank();
-                  } else {
+              })
-                    this.ifpass = false;
+              .catch((_err) => {
+                // 使用 _err 表示未使用
+                // 验证失败
+                this.isBankCardVerified = false;
+                // 提示后端返回的错误信息，或通用错误信息
                 this.$message({
-                      message: res.msg,
+                  message: _err?.msg || "银行卡验证失败", // 优先使用后端消息
                   type: "warning",
                 });
-                  }
+                // this.countdownSeconds = 0; // 不应在此重置倒计时，应在 clearCountdown 中处理
-                })
+                this.clearCountdown(); // 验证失败时也应该能重新获取验证码
-                .catch((err) => {
-                  this.beginTime = 0;
-                  this.ifpass = false;
               });
           } else {
-              this.ifpass = true;
+            // 非中国大陆用户或不需要验证码，直接尝试绑卡
-              this.bindBank();
+            // isBankCardVerified 在 performBindBank 开始时会设置为 true
+            this.performBindBank();
           }
         } else {
-            this.bindBank();
+          console.log("表单验证失败!");
-          }
-        } else {
-          // console.log('error submit!!')
           return false;
         }
       });
     },
-    startTime() {
+    // 发送验证码并启动倒计时
+    sendVerificationCode() {
       if (!this.form.phone) {
         this.$message({
-          message: '请先输入手机号',
+          message: "请先输入手机号",
           type: "warning",
         });
         return;
+      }
+      if (this.isSendingCode) return; // 防止重复点击
+
+      this.isSendingCode = true;
+      this.verificationCodeButtonText = `${this.countdownSeconds}s后重新发送`;
+
+      this.countdownTimer = setInterval(() => {
+        this.countdownSeconds--;
+        if (this.countdownSeconds <= 0) {
+          this.clearCountdown(); // 使用统一的清理函数
         } else {
-        if (this.isSend) return;
+          this.verificationCodeButtonText = `${this.countdownSeconds}s后重新发送`;
-        this.isSend = true;
-        this.getCode = this.beginTime + 's后重新发送';
-        this.timer = setInterval(() => {
-          this.beginTime--;
-          this.getCode = this.beginTime + 's后重新发送';
-          if (this.beginTime < 0) {
-            clearInterval(this.timer);
-            this.getCode = '获取验证码';
-            this.beginTime = 60;
-            this.isSend = false;
         }
       }, 1000);
-        wal.getVerification({ phone: this.form.phone }).then((res) => {
+
+      // 调用发送验证码接口
+      walletApi
+        .getVerification({ phone: this.form.phone })
+        .then(() => {
           this.$message({
-            message: '验证码已发送',
+            message: "验证码已发送",
             type: "success",
           });
+        })
+        .catch((_err) => {
+          // 添加错误处理
+          console.error("发送验证码失败:", _err);
+          // this.$message({
+          //   message: "验证码发送失败，请稍后重试",
+          //   type: "error",
+          // });
+          this.clearCountdown(); // 发送失败时重置按钮状态
         });
-      }
     },
   },
 };
 </script>
 
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
-.add_pay {
+// 统一管理表单容器样式
-  padding: 20px;
+.bind-bank-form-container {
+  padding: 20px 30px; // 调整内边距
+
+  // 使用深度选择器影响 Element UI 内部元素
   ::v-deep .el-form-item {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05); // padding-bottom: 4px;
+    margin-bottom: 22px; // 统一表单项间距
-    margin-bottom: 20px;
+    padding-bottom: 8px; // 增加底部内边距
-  }
+    display: flex; // 确保 label 和 content 在一行
-}
+    align-items: center; // 垂直居中对齐
-.hqyzm1 {
+
-  background: #d5251d;
+    .el-form-item__label {
-  border-radius: 8px;
+      padding-right: 12px; // 标签右侧留空
-  padding: 0 7px;
+      color: #333; // 标签颜色
-  color: #fff;
-  font-size: 10px;
-  cursor: pointer;
-}
-.hui {
-  opacity: 0.5;
-}
-.add_pay {
-  ::v-deep .el-form-item {
-    display: flex;
-    align-items: center;
-  }
-  ::v-deep .el-form-item__content {
-    flex: 1;
-    display: flex;
-    margin-left: 0 !important;
-  }
-  ::v-deep .el-input {
-    flex: 1;
-    width: auto;
-  }
-  ::v-deep .el-input__inner {
-    border: 0;
-  }
-}
-.surebtn1 {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  .btn {
-    width: 180px;
-    height: 50px;
-    background: #d5251d;
-    border-radius: 6px 6px 6px 6px;
-    text-align: center;
-    font-size: 14px;
-    font-family: PingFang SC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #ffffff;
-    line-height: 50px;
-    cursor: pointer;
     }
 
-  .hh {
+    .el-form-item__content {
-    background: #cccccc;
+      flex: 1; // 内容区域占据剩余空间
+      margin-left: 0 !important; // 覆盖 Element UI 默认的 margin
+      display: flex; // 使 input 和按钮等可以在一行显示
+      align-items: center; // 垂直居中对齐内部元素
+    }
+
+    .el-input,
+    .el-select {
+      flex: 1; // 输入框/选择框占据主要空间
+      width: auto; // 覆盖固定宽度
+    }
+
+    // .el-input__inner, .el-select .el-input__inner {
+    //   border: none; // 移除内部输入框边框
+    //   padding-left: 0; // 移除左侧内边距
+    //   &:focus {
+    //     box-shadow: none; // 移除聚焦时的阴影
+    //   }
+    // }
+    //  // 移除选择框外层边框（如果需要完全无边框）
+    // .el-select .el-input.is-focus .el-input__inner {
+    //    border: none !important;
+    // }
+    //  .el-select .el-input__inner:focus {
+    //    border-color: transparent !important; // Element UI 可能有特定样式，尝试覆盖
+    // }
+  }
+  // 最后一个表单项移除下边框
+  ::v-deep .el-form-item:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
   }
 }
+
+// 验证码按钮样式
+.verification-code-button {
+  background-color: #d5251d; // 主题色
+  color: #ffffff;
+  border-radius: 4px; // 圆角调整
+  padding: 6px 12px; // 内边距调整
+  font-size: 12px; // 字体大小调整
+  cursor: pointer;
+  white-space: nowrap; // 防止文字换行
+  margin-left: 10px; // 与输入框的间距
+  transition: background-color 0.3s, opacity 0.3s; // 过渡效果
+
+  &:hover {
+    background-color: #c02018; // Hover 颜色加深
+  }
+
+  // 禁用状态样式
+  &.is-disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background-color: #fab6b6; // 禁用时颜色变浅
+    &:hover {
+      background-color: #fab6b6; // 禁用时 Hover 颜色不变
+    }
+  }
+}
+
+// 对话框底部按钮区域样式
+.dialog-footer {
+  display: flex;
+  justify-content: space-around; // 按钮均匀分布
+  padding: 20px 30px 30px; // 底部区域内边距
+  border-top: 1px solid #f0f0f0; // 添加顶部边框分隔
+
+  .btn {
+    width: 160px; // 按钮宽度调整
+    height: 45px; // 按钮高度调整
+    border-radius: 6px;
+    display: flex; // 使用 flex 居中文字
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.3s; // 添加过渡效果
+  }
+
+  .confirm-btn {
+    background-color: #d5251d; // 主题色
+    color: #ffffff;
+    &:hover {
+      background-color: #c02018;
+    }
+  }
+
+  .cancel-btn {
+    background-color: #f5f5f5; // 取消按钮背景色
+    color: #666; // 取消按钮文字颜色
+    border: 1px solid #e0e0e0; // 添加边框
+    &:hover {
+      background-color: #eeeeee;
+    }
+  }
+}
+
+// 对话框标题加粗（Element UI 默认可能已处理）
 ::v-deep .el-dialog__title {
   font-weight: 500;
 }

src/components/withdrawalDetail.vue

@@ -6,6 +6,7 @@
           :data="tableData"
           :header-cell-style="{ background: '#EEEEEE' }"
           :row-class-name="tableRowClassName"
+          style="100%"
         >
           <el-table-column
             align="center"
@@ -85,28 +86,20 @@
             min-width="150px"
           >
           </el-table-column>
-          <el-table-column
+          <el-table-column align="center" prop="remarks" :label="'备注'">
-            align="center"
-            prop="remarks"
-            :label="'备注'"
-          >
           </el-table-column>
-          <el-table-column
+          <el-table-column align="center" prop="statusVal" :label="'状态'">
-            align="center"
-            prop="statusVal"
-            :label="'状态'"
-          >
           </el-table-column>
 
-          <el-table-column align="center" prop="" :label="'操作'">
+          <el-table-column fixed="right" align="center" prop="" :label="'操作'">
             <template slot-scope="scope">
               <el-button
                 v-if="scope.row.status == 0 && scope.row.approveState == 1"
-                style="color: red"
+                style="color: var(--danger-color)"
                 @click="revoke(scope.row)"
                 type="text"
                 size="small"
-                >{{ '撤销' }}</el-button
+                >{{ "撤销" }}</el-button
               >
             </template>
           </el-table-column>
@@ -122,7 +115,7 @@
   </div>
 </template>
 
-    <script>
+<script>
 import pagination from "@/components/pagination.vue";
 import { mapGetters } from "vuex";
 import { getWithdrawList, cancelWithdraw } from "@/api/wallet.js";
@@ -157,7 +150,7 @@ export default {
   methods: {
     //撤销
     revoke(row) {
-      this.$confirm('是否确认操作?' + "?").then((_) => {
+      this.$confirm("是否确认操作?" + "?").then((_) => {
         cancelWithdraw({ pkId: row.pkId }).then((res) => {
           if (res.code == 200) {
             this.$message({
@@ -203,51 +196,15 @@ export default {
 .contain {
   background: rgba(249, 249, 249, 1);
   height: 100vh;
-  display: flex;
-  .goodArea {
-    display: flex;
-    align-items: center;
-    font-size: 18px;
-    font-weight: 400;
-    color: #333333;
   width: 100%;
-    height: 80px;
-    border-bottom: 5px solid rgba(0, 0, 0, 0.05);
-    .goodArea_i {
-      margin: 0 35px;
-      text-align: center;
-      cursor: pointer;
-    }
-    .actArea {
-      color: #00417C;
-    }
-  }
-  .topbox {
-    // height: 109px;
-    background: #ffffff;
-    box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.5);
-    border-radius: 8px 8px 8px 8px;
-    margin: 20px 0 40px 0;
-    padding: 30px 16px 10px 16px;
-    .searchbox {
-      display: flex;
-      align-items: center;
-      .btn1 {
-        background: #cccccc;
-        border-radius: 5px 5px 5px 5px;
-        color: #ffffff;
-      }
-      .btn2 {
-        border-radius: 5px 5px 5px 5px;
-        background: rgba(214, 24, 32, 1);
-        color: #ffffff;
-      }
-    }
-  }
   .rightbox {
     margin-top: 30px;
+    width: 100%;
+    overflow: hidden;
   }
   .tablebox {
+    width: 100%;
+    overflow-x: auto;
     box-shadow: 0px 2px 20px 0px rgba(135, 135, 135, 0.3);
     border-radius: 10px 10px 10px 10px;
     .tabletop {

src/styles/index.scss

@@ -9,4 +9,5 @@
   --button-primary-disabled-text-color: #FFFFFF; /* 禁用主按钮文字颜色 (白色) */
   --button-primary-disabled-bg-color: #A0CFFF; /* 禁用主按钮背景颜色 (主色变浅) */
   --button-primary-disabled-border-color: #A0CFFF; /* 禁用主按钮边框颜色 (同背景) */
+  --danger-color: #DC3545; /* 危险色 */
 }

src/views/vipCenter/index.vue

@@ -543,6 +543,7 @@ export default {
   .main_r {
     flex: 1;
     padding: 0 60px 0 0px;
+    width: 0;
     .banner {
       width: 1458px;
       height: 253px;