3b41cffbc9
All checks were successful
continuous-integration/drone/push Build is passing
- 解压官方默认主题 default_yfMBA.tar.gz 到 clientarea/hgcloud/ - .gitignore 排除压缩包和临时解压目录 - drone 新增步骤: 同步 hgcloud 到 /clientarea/template/pc/
256 lines
12 KiB
JavaScript
256 lines
12 KiB
JavaScript
const rechargeDialog = {
|
||
template: /*html*/ `
|
||
<div>
|
||
<el-dialog width="7.5rem" :visible.sync="isShowCz" @close="czClose" custom-class="recharge-dialog"
|
||
:show-close="false">
|
||
<div class="recharge-content">
|
||
<div class="recharge-title">
|
||
<span class="title-text">{{lang.finance_title4}}</span>
|
||
<span class="close-btn" @click="czClose">
|
||
<i class="el-icon-close"></i>
|
||
</span>
|
||
</div>
|
||
<div class="recharge-box">
|
||
<div class="recharge-input">
|
||
<el-input-number v-model="amount" :min="0" :precision="2" :step="0.01" :controls="false"
|
||
:placeholder="lang.finance_text130">
|
||
</el-input-number>
|
||
<el-button @click="handleSubmit" type="primary" :loading="submitLoading">{{lang.finance_btn6}}
|
||
</el-button>
|
||
</div>
|
||
<template v-if="rechargeActive.length > 0">
|
||
<div class="recharge-tip">
|
||
<template v-for="(item, index) in rechargeTip">
|
||
<span>{{item}}</span>
|
||
<template v-if="index !== rechargeTip.length - 1">
|
||
<br />
|
||
</template>
|
||
</template>
|
||
</div>
|
||
<div class="recharge-active">
|
||
<div class="active-title">{{lang.coin_text12}}<el-tooltip effect="dark" placement="top"
|
||
v-if="coinClientCoupon.coin_description_open == 1">
|
||
<div slot="content" v-html="coinClientCoupon.coin_description"></div>
|
||
<svg t="1745803081479" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="14138" width="16" height="16"
|
||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
<path
|
||
d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512s152.81981 341.333333 341.333333 341.333333 341.333333-152.81981 341.333333-341.333333S700.513524 170.666667 512 170.666667z m45.32419 487.619047v73.142857h-68.510476l-0.024381-73.142857h68.534857z m-4.047238-362.008381c44.251429 8.923429 96.889905 51.126857 96.889905 112.518096 0 61.415619-50.151619 84.650667-68.120381 96.134095-17.993143 11.50781-24.722286 24.771048-24.722286 38.863238V609.52381h-68.534857v-90.672762c0-21.504 6.89981-36.571429 26.087619-49.883429l4.315429-2.852571 38.497524-25.6c24.551619-16.530286 24.210286-49.712762 9.020952-64.365715a68.998095 68.998095 0 0 0-60.391619-15.481904c-42.715429 8.387048-47.640381 38.521905-47.932952 67.779047v16.554667H390.095238c0-56.953905 6.534095-82.773333 36.912762-115.395048 34.03581-36.449524 81.993143-42.300952 126.268952-33.328762z"
|
||
p-id="14139" fill="currentColor"></path>
|
||
</svg>
|
||
</el-tooltip></div>
|
||
<div class="active-main">
|
||
<div class="active-list">
|
||
<div class="active-item" v-for="item in rechargeActive" :key="item.id">
|
||
<div class="active-name">
|
||
<span>{{item.name}}</span>
|
||
<span class="active-time">
|
||
<template v-if="item.begin_time == 0">
|
||
{{item.begin_time | formateTime}}
|
||
</template>
|
||
<template v-else>
|
||
{{item.begin_time | formateTime}} - {{item.end_time | formateTime}}
|
||
</template>
|
||
</span>
|
||
</div>
|
||
<div class="gradient-content" v-if="item.type === 'gradient'">
|
||
<div class="gradient-item"
|
||
:class="{active: amount *1 >= items.amount * 1 && (index == item.return.length - 1 || amount * 1 < item.return[index + 1].amount * 1)}"
|
||
v-for="(items, index) in item.return" :key="items.id"
|
||
@click="amount = items.amount">
|
||
<div class="gradient-money">
|
||
<span class="s-12">{{currency_prefix}}</span>{{items.amount}}
|
||
</div>
|
||
<div class="gradient-award ">
|
||
{{lang.coin_text13}}{{items.amount}}{{lang.coin_text14}}{{items.award}}{{coinClientCoupon.name}}
|
||
<i class="el-icon-check active-icon"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gradient-content" v-if="item.type === 'proportion'">
|
||
<div class="gradient-item" :class="{active:amount * 1 >= item.recharge_min * 1}"
|
||
@click="amount = item.recharge_min">
|
||
<div class="gradient-money">
|
||
<span class="s-12">{{currency_prefix}}</span>{{item.recharge_min}}
|
||
</div>
|
||
<div class="gradient-award ">
|
||
{{lang.coin_text15}}{{item.recharge_min}}<br>{{lang.coin_text16}}{{Number(item.recharge_proportion)}}%{{coinClientCoupon.name}}
|
||
<i class="el-icon-check active-icon"></i>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div v-if="commonData.recharge_money_notice_content" v-html="commonData.recharge_money_notice_content"
|
||
class="cz-notice">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<pay-dialog ref="payDialog" @payok="paySuccess"></pay-dialog>
|
||
</div>
|
||
`,
|
||
|
||
data() {
|
||
return {
|
||
isShowCz: false,
|
||
currency_prefix: "",
|
||
currency_suffix: "",
|
||
commonData: {},
|
||
amount: undefined,
|
||
submitLoading: false,
|
||
rechargeActive: [],
|
||
coinClientCoupon: {},
|
||
};
|
||
},
|
||
components: {
|
||
payDialog,
|
||
},
|
||
created() {
|
||
this.getCommon();
|
||
},
|
||
filters: {
|
||
formateTime(time) {
|
||
if (time && time !== 0) {
|
||
return formateDate(time * 1000);
|
||
} else if (time === 0) {
|
||
return lang.coin_text17;
|
||
} else {
|
||
return "--";
|
||
}
|
||
},
|
||
},
|
||
computed: {
|
||
rechargeTip() {
|
||
if (this.rechargeActive.length === 0 || !this.amount) {
|
||
return [];
|
||
}
|
||
const rechargeTipList = [];
|
||
const maxCoinAward = Number(
|
||
this.coinClientCoupon.per_recharge_get_coin_max
|
||
);
|
||
this.rechargeActive.forEach((item) => {
|
||
if (item.type === "proportion") {
|
||
if (this.amount * 1 >= item.recharge_min * 1) {
|
||
const award = Number(item.recharge_proportion * 0.01 * this.amount);
|
||
const tip = `${item.name}：${lang.coin_text18}${Number(
|
||
award > maxCoinAward ? maxCoinAward : award
|
||
).toFixed(2)}${this.coinClientCoupon.name}`;
|
||
rechargeTipList.push(tip);
|
||
} else {
|
||
const tip = `${item.name}：${lang.coin_text19}${Number(
|
||
item.recharge_min - this.amount
|
||
).toFixed(2)}${this.currency_suffix}${lang.coin_text20}${Number(
|
||
item.recharge_proportion * 0.01 * item.recharge_min
|
||
).toFixed(2)}${this.coinClientCoupon.name}`;
|
||
rechargeTipList.push(tip);
|
||
}
|
||
}
|
||
if (item.type === "gradient") {
|
||
// 找出最大的阶梯金额
|
||
const maxAmount = Math.max(
|
||
...item.return.map((items) => items.amount)
|
||
);
|
||
if (this.amount * 1 >= maxAmount * 1) {
|
||
const maxAward = item.return.find(
|
||
(items) => items.amount === maxAmount
|
||
)?.award;
|
||
const tip = `${item.name}：${lang.coin_text18}${Number(
|
||
maxAward > maxCoinAward ? maxCoinAward : maxAward
|
||
).toFixed(2)}${this.coinClientCoupon.name}`;
|
||
rechargeTipList.push(tip);
|
||
} else {
|
||
// 找出当前充值金额对应的阶梯 和 下一个阶梯
|
||
const currentIndex = item.return.findIndex((items, index) => {
|
||
return (
|
||
this.amount * 1 >= items.amount * 1 &&
|
||
this.amount * 1 < item.return[index + 1]?.amount * 1
|
||
);
|
||
});
|
||
const currentAmount = item.return[currentIndex];
|
||
const nextAmount = item.return[currentIndex + 1];
|
||
if (currentAmount && nextAmount) {
|
||
const currentAward =
|
||
currentAmount.award > maxCoinAward
|
||
? maxCoinAward
|
||
: currentAmount.award;
|
||
const nextAward =
|
||
nextAmount.award > maxCoinAward
|
||
? maxCoinAward
|
||
: nextAmount.award;
|
||
const tip = `${item.name}：${lang.coin_text21}${Number(
|
||
currentAward
|
||
).toFixed(2)}${this.coinClientCoupon.name}，${
|
||
lang.coin_text22
|
||
}${Number(nextAmount.amount - this.amount).toFixed(2)}${
|
||
this.currency_suffix
|
||
}${lang.coin_text20}${Number(nextAward).toFixed(2)}${
|
||
this.coinClientCoupon.name
|
||
}`;
|
||
rechargeTipList.push(tip);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
return rechargeTipList;
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
getCoinClientCoupon() {
|
||
apiCoinClientCoupon().then((res) => {
|
||
this.coinClientCoupon = res.data.data;
|
||
});
|
||
},
|
||
getRechargeDetail() {
|
||
apiCoinRechargeDetail().then((res) => {
|
||
this.rechargeActive = res.data.data.coins;
|
||
});
|
||
},
|
||
open() {
|
||
if (havePlugin("Coin")) {
|
||
this.getRechargeDetail();
|
||
this.getCoinClientCoupon();
|
||
}
|
||
this.isShowCz = true;
|
||
},
|
||
czClose() {
|
||
this.amount = undefined;
|
||
this.isShowCz = false;
|
||
},
|
||
handleSubmit() {
|
||
if (!this.amount) {
|
||
return this.$message.error(lang.finance_text130);
|
||
}
|
||
this.submitLoading = true;
|
||
apiRecharge({amount: this.amount})
|
||
.then((res) => {
|
||
if (res.data.status === 200) {
|
||
this.isShowCz = false;
|
||
const orderId = res.data.data.id;
|
||
this.$refs.payDialog.czPay(orderId);
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
this.$message.error(error.data.msg);
|
||
})
|
||
.finally(() => {
|
||
this.submitLoading = false;
|
||
});
|
||
},
|
||
paySuccess() {
|
||
this.$emit("success");
|
||
},
|
||
|
||
getCommon() {
|
||
this.commonData = JSON.parse(localStorage.getItem("common_set_before"));
|
||
this.currency_prefix = this.commonData.currency_prefix;
|
||
this.currency_suffix = this.commonData.currency_suffix;
|
||
},
|
||
},
|
||
};
|