angelo
/
web-base-pc
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
woody 2025-05-06 13:41:28 +08:00
parent 23a9b42d8b
commit 7ae433e628
8 changed files with 466 additions and 360 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/TransferDialog.vue
View File

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

14
src/components/tradeDetails.vue
View File

@ -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>
<el-button @click="chongzhi">{{ "重置" }}</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 {

81
src/components/walletBankCard.vue
View File

@ -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,39 +101,42 @@ export default {
},
//解除绑定
removeBind(item) {
this.$confirm('是否确认解绑银行卡', "", {
confirmButtonText: '确定',
cancelButtonText: '取消',
this.$confirm("是否确认解绑银行卡", "", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
if (item.defaultCard == 1) {
this.$confirm("当前解绑为默银行卡，请设置为另一张卡为默认银行卡", "", {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: "warning",
}).then(() => {
this.$confirm(
"当前解绑为默银行卡，请设置为另一张卡为默认银行卡",
"",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
).then(() => {
removeBankBind({ pkId: item.pkId }).then((res) => {
if (res.code == 200) {
this.$message({
type: "success",
message: res.msg,
if (res.code == 200) {
this.$message({
type: "success",
message: res.msg,
});
this.research();
}
});
this.research();
}
});
});
}else{
} else {
removeBankBind({ pkId: item.pkId }).then((res) => {
if (res.code == 200) {
this.$message({
type: "success",
message: res.msg,
});
this.research();
}
});
if (res.code == 200) {
this.$message({
type: "success",
message: res.msg,
});
this.research();
}
});
}
});
},
closeBind() {
@ -142,8 +145,8 @@ export default {
},
//点击绑定银行卡
bindBank(val) {
this.isAdd = true;
this.jdTl = val;
this.isAdd = true;
},
research() {
getBankList().then((res) => {
@ -162,8 +165,8 @@ export default {
},
};
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
::v-deep .el-table .warning-row {
background: #f9f9f9;
}
@ -264,4 +267,4 @@ export default {
font-size: 18px;
}
}
</style>
</style>

641
src/components/walletBindBank.vue
View File

@ -1,28 +1,27 @@
<template>
<el-dialog
:title="'绑定银行卡'"
:visible.sync="addShow"
center=""
width="25%"
title="绑定银行卡"
:visible.sync="dialogVisible"
width="40%"
: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-select v-model="form.pkBank" :placeholder="'请选择银行名称'">
<el-form-item label="银行选择:" prop="bankId">
<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-select v-model="form.idType" :placeholder="'请选择证件类型'">
<el-form-item label="证件类型:" prop="idType">
<el-select v-model="form.idType" placeholder="请选择证件类型">
<el-option
v-for="(item, index) in cardTypeList"
:key="index"
@ -53,333 +52,479 @@
></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
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-form-item v-if="isMainlandChinaUser" label="手机号:" prop="phone">
<el-input
v-model="form.validdate"
:placeholder="$t('w_0185')"
v-model="form.phone"
placeholder="银行卡预留手机号"
></el-input>
</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>
<el-form-item
v-if="pkCountry == 1 && cancode"
:label="'验证码' + ':'"
v-if="isMainlandChinaUser && needsVerificationCode"
label="验证码:"
prop="verificationCode"
>
<el-input
v-model="form.verificationCode"
:placeholder="'请输入验证码'"
placeholder="请输入验证码"
></el-input>
<div class="hqyzm1" :class="isSend ? 'hui' : ''" @click="startTime">
{{ getCode }}
</div>
<el-button
style="margin-left: 10px"
:class="{ 'is-disabled': isSendingCode }"
:disabled="isSendingCode"
type="primary"
@click="sendVerificationCode"
>
{{ verificationCodeButtonText }}
</el-button>
</el-form-item>
</el-form>
</div>
<div class="surebtn1">
<div class="btn hh" @click="handleCloseBank">{{ '取消' }}</div>
<div class="btn" @click="submitForm('form')">{{ '确定' }}</div>
<div class="dialog-footer">
<!-- <div class="btn cancel-btn" @click="handleCloseDialog">取消</div> -->
<el-button @click="handleCloseDialog">取消</el-button>
<el-button type="primary" @click="submitBankForm('bankForm')"
>确定
</el-button>
</div>
</el-dialog>
</template>
<script>
import * as wal from "@/api/wallet.js";
<script>
import * as walletApi from "@/api/wallet.js";
import { mapGetters } from "vuex";
export default {
data() {
// 自定义验证码校验逻辑
const validateVerificationCode = (rule, value, callback) => {
if (this.isMainlandChinaUser && this.needsVerificationCode && !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: [], //证件类型
addShow: false,
cardTypeList: [], // 证件类型列表
dialogVisible: false, // 控制对话框显示
form: {
cardNumber: "",
accountName: "",
idCard: "",
phone: "",
pkBank: "",
verificationCode: "",
subBankName: "",
cardNumber: "", // 银行卡号
accountName: "", // 姓名
idCard: "", // 证件号码
phone: "", // 手机号
bankId: "", // 银行ID (原 pkBank)
verificationCode: "", // 验证码
subBankName: "", // 开户支行
idType: "", // 证件类型
},
isSend: false,
beginTime: 60,
getCode: '获取验证码',
timer: "",
isSendingCode: false, // 是否正在发送验证码
countdownSeconds: 60, // 倒计时秒数
verificationCodeButtonText: "获取验证码", // 验证码按钮文字
countdownTimer: null, // 倒计时定时器
rules: {
cardNumber: [
{ required: true, message: '请输入银行卡号', trigger: "blur" },
{ 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();
}
},
},
{ 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: [
{ required: true, message: '请输入银行卡卡号', trigger: "blur" },
],
name: [{ required: true, message: '请输入真实姓名', trigger: "blur" }],
// bankNo 验证似乎是重复的，已移除
// name 验证似乎是重复的，已移除
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" },
{
validator: (rule, value, callback) => {
if (this.pkCountry === 1 && !value) {
callback(new Error('请输入正确的手机号'));
} else {
callback();
}
},
},
// { min: 11, message: '请输入正确的手机号', trigger: "blur" }, // 合并到 validator
{ validator: validatePhoneNumber, trigger: "blur" },
],
pkBank: [
{ required: true, message: '请选择银行卡', trigger: "change" },
bankId: [
// 原 pkBank
{ required: true, message: "请选择银行卡", trigger: "change" },
],
},
ifpass: false,
bankCardChioceList: [],
pkCountry: "",
cancode: true,
isBankCardVerified: false, // 银行卡是否已验证通过 (原 ifpass)
bankCardChioceList: [], // 可选银行列表
// pkCountry: "", // 由 isMainlandChinaUser 计算属性替代
needsVerificationCode: true, // 是否需要验证码 (原 cancode)
};
},
props: {
isAdd: {
// isAdd 更名为 visible，更符合对话框的常用属性名
visible: {
type: Boolean,
default: false,
},
},
computed: {
...mapGetters(["userInfo"]),
// 计算用户是否为中国大陆用户
isMainlandChinaUser() {
return this.userInfo?.pkCountry === 1;
},
},
watch: {
isAdd(val) {
this.addShow = val;
// 监听 prop 变化来控制对话框显示
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.checkIfWhite();
this.pkCountry = this.userInfo.pkCountry;
this.fetchBankCardChoices();
this.checkVerificationRequirement();
// this.pkCountry = this.userInfo.pkCountry; // 不再需要单独存储，使用计算属性
},
beforeDestroy() {
// 组件销毁前清除定时器
if (this.countdownTimer) {
clearInterval(this.countdownTimer);
}
},
methods: {
checkIfWhite() {
wal.checkIfWhite().then((res) => {
if (res.code == 200 && res.flag == "N") {
this.cancode = true;
} else if (res.code == 200 && res.flag == "Y") {
this.cancode = false;
}
});
},
getBankCardChoiceList() {
wal.getBankCardChoiceList().then((res) => {
this.bankCardChioceList = res.data;
});
//证件类型
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",
// 检查是否需要验证码
checkVerificationRequirement() {
walletApi
.checkIfWhite()
.then((res) => {
// 后端接口 flag 为 'Y' 表示在白名单，不需要验证码
this.needsVerificationCode = !(res.code == 200 && res.flag === "Y");
})
.catch((_err) => {
// 处理获取白名单状态失败的情况，可以设置默认值或提示用户
console.error("获取白名单状态失败:", _err);
this.needsVerificationCode = true; // 默认为需要验证码
});
return;
}
if (!this.ifpass && this.pkCountry == 1) {
this.$message({
message: '银行卡验证不一致',
type: "warning",
},
// 获取银行卡选项和证件类型
fetchBankCardChoices() {
walletApi
.getBankCardChoiceList()
.then((res) => {
this.bankCardChioceList = res.data || [];
})
.catch((_err) => {
console.error("获取银行列表失败:", _err);
});
return;
}
let that = this;
wal.bindWalletBankAdd(this.form).then((res) => {
this.$message({
message: '银行卡绑定成功',
type: "success",
walletApi
.getCardType()
.then((res) => {
this.cardTypeList = res.data || [];
})
.catch((_err) => {
console.error("获取证件类型失败:", _err);
});
this.$refs.form.resetFields();
setTimeout(() => {
that.$emit("closeBind", 1);
}, 1500);
});
},
// 绑卡获取验证码
submitForm(form) {
this.$refs[form].validate((valid) => {
// 关闭对话框处理
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: "请先完成银行卡验证", // 或 '银行卡验证不一致'
type: "warning",
});
return;
}
// let that = this; // 不再需要
walletApi
.bindWalletBankAdd(this.form)
.then(() => {
this.$message({
message: "银行卡绑定成功",
type: "success",
});
// 成功后关闭对话框，并触发成功回调
setTimeout(() => {
// this.resetFormAndValidation(); // 已移至 watch 中处理关闭
// this.$emit("closeBind", 1); // 已移至 watch 中处理关闭
this.dialogVisible = false; // 关闭对话框
}, 1500);
})
.catch((_err) => {
// 添加错误处理
console.error("绑定银行卡失败:", _err);
this.$message({
message: "银行卡绑定失败，请稍后重试",
type: "error",
});
});
},
// 提交表单（验证 + 绑卡）
submitBankForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.pkCountry == 1) {
if (this.cancode) {
wal
.verifyBankCard(this.form)
.then((res) => {
if (res.code == 200) {
this.ifpass = true;
this.bindBank();
} else {
this.ifpass = false;
this.$message({
message: res.msg,
type: "warning",
});
}
})
.catch((err) => {
this.beginTime = 0;
this.ifpass = false;
// 如果是中国大陆用户且需要验证码
if (this.isMainlandChinaUser && this.needsVerificationCode) {
walletApi
.verifyBankCard(this.form)
.then(() => {
// 验证成功，标记状态并执行绑卡
this.isBankCardVerified = true;
this.performBindBank();
})
.catch((_err) => {
// 使用 _err 表示未使用
// 验证失败
this.isBankCardVerified = false;
// 提示后端返回的错误信息，或通用错误信息
this.$message({
message: _err?.msg || "银行卡验证失败", // 优先使用后端消息
type: "warning",
});
} else {
this.ifpass = true;
this.bindBank();
}
// this.countdownSeconds = 0; // 不应在此重置倒计时，应在 clearCountdown 中处理
this.clearCountdown(); // 验证失败时也应该能重新获取验证码
});
} else {
this.bindBank();
// 非中国大陆用户或不需要验证码，直接尝试绑卡
// isBankCardVerified 在 performBindBank 开始时会设置为 true
this.performBindBank();
}
} else {
// console.log('error submit!!')
console.log("表单验证失败!");
return false;
}
});
},
startTime() {
// 发送验证码并启动倒计时
sendVerificationCode() {
if (!this.form.phone) {
this.$message({
message: '请先输入手机号',
message: "请先输入手机号",
type: "warning",
});
return;
} else {
if (this.isSend) return;
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) => {
}
if (this.isSendingCode) return; // 防止重复点击
this.isSendingCode = true;
this.verificationCodeButtonText = `${this.countdownSeconds}s后重新发送`;
this.countdownTimer = setInterval(() => {
this.countdownSeconds--;
if (this.countdownSeconds <= 0) {
this.clearCountdown(); // 使用统一的清理函数
} else {
this.verificationCodeButtonText = `${this.countdownSeconds}s后重新发送`;
}
}, 1000);
// 调用发送验证码接口
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>
.add_pay {
padding: 20px;
<style lang="scss" scoped>
// 统一管理表单容器样式
.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: 20px;
margin-bottom: 22px; // 统一表单项间距
padding-bottom: 8px; // 增加底部内边距
display: flex; // 确保 label 和 content 在一行
align-items: center; // 垂直居中对齐
.el-form-item__label {
padding-right: 12px; // 标签右侧留空
color: #333; // 标签颜色
}
.el-form-item__content {
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;
}
}
.hqyzm1 {
background: #d5251d;
border-radius: 8px;
padding: 0 7px;
color: #fff;
font-size: 10px;
// 验证码按钮样式
.verification-code-button {
background-color: #d5251d; // 主题色
color: #ffffff;
border-radius: 4px; // 圆角调整
padding: 6px 12px; // 内边距调整
font-size: 12px; // 字体大小调整
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;
white-space: nowrap; // 防止文字换行
margin-left: 10px; // 与输入框的间距
transition: background-color 0.3s, opacity 0.3s; // 过渡效果
&:hover {
background-color: #c02018; // Hover 颜色加深
}
.hh {
background: #cccccc;
// 禁用状态样式
&.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;
}
</style>
</style>

75
src/components/withdrawalDetail.vue
View File

@ -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
align="center"
prop="remarks"
:label="'备注'"
>
<el-table-column align="center" prop="remarks" :label="'备注'">
</el-table-column>
<el-table-column
align="center"
prop="statusVal"
:label="'状态'"
>
<el-table-column 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>
@ -121,8 +114,8 @@
</div>
</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({
@ -187,7 +180,7 @@ export default {
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-table .warning-row {
background: #f9f9f9;
@ -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;
}
}
}
width: 100%;
.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 {
@ -263,4 +220,4 @@ export default {
}
}
}
</style>
</style>

1
src/styles/index.scss
View File

@ -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; /* 危险色 */
}

1
src/views/vipCenter/index.vue
View File

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

2
theme/index.css
View File

File diff suppressed because one or more lines are too long