<template>
|
<el-dialog
|
:title="$t('hj177')"
|
:visible.sync="dialogVisible"
|
width="720px"
|
:before-close="onClose"
|
>
|
<el-form ref="withdrawform" :model="form" label-width="auto" :rules="rules">
|
<el-form-item :label="$t('請選擇提款账户')" prop="assetsType">
|
<el-select v-model="form.assetsType" :placeholder="$t('請選擇')">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.name"
|
:value="item.name"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item :label="$t('支持得提款渠道')" prop="qd">
|
<el-select v-model="form.qd" :placeholder="$t('請選擇')">
|
<el-option
|
v-for="item in actions"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item :label="$t('請選擇銀行卡')" prop="bankId" v-if="!!form.qd">
|
<el-select v-model="form.bankId" :placeholder="$t('請選擇')">
|
<el-option
|
v-for="item in yhkactions"
|
:key="item.value"
|
:label="item.name"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item :label="$t('请选择提现金额')" prop="amt">
|
<div class="flex-center">
|
<el-input v-model.number="form.amt" type="number"></el-input>
|
<el-button
|
type="primary"
|
style="margin-left: 10px"
|
@click="form.amt = maxNum"
|
class="submit"
|
>{{ $t("最大") }}</el-button
|
>
|
</div>
|
</el-form-item>
|
|
<el-form-item v-if="!!form.assetsType">
|
<div class="ts">
|
{{ $t("可用餘額") }}
|
{{ maxNum }}
|
<span
|
v-for="i in moneyData"
|
:key="i.id"
|
v-show="i.accectType == form.assetsType"
|
>{{ i.symbolCode }}</span
|
>
|
</div>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button @click="onClose">{{ $t("qx") }}</el-button>
|
<el-button type="primary" @click="onSubmit" class="submit">
|
{{ $t("hj161") }}
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api";
|
export default {
|
data() {
|
return {
|
form: {
|
assetsType: "",
|
qd: "",
|
bankId: "",
|
amt: "",
|
},
|
rules: {
|
assetsType: [
|
{ required: true, message: this.$t("請選擇"), trigger: "change" },
|
],
|
qd: [{ required: true, message: this.$t("請選擇"), trigger: "change" }],
|
bankId: [
|
{ required: true, message: this.$t("請選擇"), trigger: "change" },
|
],
|
amt: [{ required: true, message: this.$t("请输入") }],
|
},
|
options: [
|
{ name: "US", value: "USD" },
|
// { name: "HK", value: "HKD" },
|
// { name: "IN", value: "INR" },
|
// { name: "TW", value: "TWD" },
|
],
|
actions: [{ name: this.$t("hj215"), value: "YHK" }],
|
yhkactions: [],
|
};
|
},
|
props: {
|
dialogVisible: {
|
type: Boolean,
|
default: false,
|
},
|
moneyData: {
|
type: Array,
|
default: () => [],
|
},
|
},
|
computed: {
|
maxNum() {
|
let max = 0;
|
this.moneyData.forEach((i) => {
|
if (i.accectType == this.form.assetsType) max = i.availableBalance;
|
});
|
return max;
|
},
|
},
|
created() {
|
this.getykh();
|
},
|
methods: {
|
// 关闭弹窗
|
onClose() {
|
this.$emit("update:dialogVisible", false);
|
this.$emit("onClose"); // 关闭弹窗时，通知父组件
|
},
|
// 提交
|
onSubmit() {
|
this.$refs["withdrawform"].validate(async (valid) => {
|
if (valid) {
|
let data = await api.outMoney(this.form);
|
if (data.status == 0) {
|
this.$message.success(this.$t("hj182"));
|
this.onClose();
|
}
|
} else {
|
console.log("outMoney err");
|
return false;
|
}
|
});
|
},
|
// 获取银行卡列表
|
async getykh() {
|
const res = await api.getBankCard();
|
if (res.status === 0) {
|
this.yhkactions = res.data.map((item) => {
|
return {
|
name: item.bankName,
|
value: item.id,
|
};
|
});
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep .el-select-dropdown__list {
|
display: flex;
|
flex-direction: column;
|
}
|
::v-deep .el-radio__input.is-checked .el-radio__inner {
|
border-color: #287dff;
|
background: #287dff;
|
}
|
|
::v-deep .el-radio__input.is-checked + .el-radio__label {
|
color: #287dff;
|
}
|
|
.submit {
|
background-color: #287dff !important;
|
border-color: #287dff !important;
|
}
|
|
.ts {
|
color: #dfb758;
|
}
|
</style>
|
