feat: 会员中心 hgcloud 主题初始化 + drone 部署步骤
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
- 解压官方默认主题 default_yfMBA.tar.gz 到 clientarea/hgcloud/ - .gitignore 排除压缩包和临时解压目录 - drone 新增步骤: 同步 hgcloud 到 /clientarea/template/pc/
This commit is contained in:
yiqiu
96
clientarea/hgcloud/components/renewDialog/renewDialog.css
Normal file
96
clientarea/hgcloud/components/renewDialog/renewDialog.css
Normal file
@@ -0,0 +1,96 @@
|
||||
.common-renew-dialog .dialog-main .renew-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 105%;
|
||||
}
|
||||
.common-renew-dialog .dialog-main .renew-content .renew-item {
|
||||
width: 1.6rem;
|
||||
min-height: 0.83rem;
|
||||
border: 1px solid #E6E7EB;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: 0.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.common-renew-dialog .dialog-main .renew-content .renew-item:nth-child(3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.common-renew-dialog .dialog-main .renew-content .renew-item:nth-child(6) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.common-renew-dialog .dialog-main .renew-content .renew-item .item-top {
|
||||
font-size: 0.15rem;
|
||||
color: #1E2736;
|
||||
margin-top: 0.08rem;
|
||||
}
|
||||
.common-renew-dialog .dialog-main .renew-content .renew-item .item-bottom {
|
||||
font-size: 0.15rem;
|
||||
color: var(--color-primary);
|
||||
margin-top: 0.04rem;
|
||||
}
|
||||
.common-renew-dialog .dialog-main .renew-content .renew-item .check {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
color: #FFF;
|
||||
}
|
||||
.common-renew-dialog .dialog-main .renew-content .renew-item .item-origin-price {
|
||||
text-decoration: line-through;
|
||||
font-size: 0.15rem;
|
||||
color: #8692B0;
|
||||
}
|
||||
.common-renew-dialog .dialog-main .renew-content .renew-active {
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
.common-renew-dialog .dialog-main .renew-content .renew-active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 0.24rem solid var(--color-primary);
|
||||
border-left: 0.24rem solid transparent;
|
||||
}
|
||||
.common-renew-dialog .dialog-main .pay-content {
|
||||
border: 1px solid #E6E7EB;
|
||||
border-radius: 3px;
|
||||
padding: 0.2rem 0;
|
||||
padding-right: 0.3rem;
|
||||
}
|
||||
.common-renew-dialog .dialog-main .pay-content .pay-price {
|
||||
display: flex;
|
||||
text-align: right;
|
||||
flex-direction: row;
|
||||
}
|
||||
.common-renew-dialog .dialog-main .pay-content .pay-price .text {
|
||||
font-size: 0.14rem;
|
||||
margin-top: 0.1rem;
|
||||
color: #1E2736;
|
||||
margin-right: 1.43rem;
|
||||
}
|
||||
.common-renew-dialog .dialog-main .pay-content .pay-price .money {
|
||||
width: 100%;
|
||||
font-size: 0.28rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-price-text);
|
||||
text-align: right;
|
||||
}
|
||||
.common-renew-dialog .dialog-main .pay-content .pay-price .total-icon {
|
||||
font-size: 0.16rem;
|
||||
color: #1E2736;
|
||||
}
|
||||
.common-renew-dialog .dialog-main .pay-content .pay-price .original-price {
|
||||
text-decoration: line-through;
|
||||
font-size: 0.2rem;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
325
clientarea/hgcloud/components/renewDialog/renewDialog.js
Normal file
325
clientarea/hgcloud/components/renewDialog/renewDialog.js
Normal file
@@ -0,0 +1,325 @@
|
||||
const renewDialog = {
|
||||
template: /*html*/ `
|
||||
<div>
|
||||
<el-dialog width="6.9rem" :visible.sync="isShowRenew" :show-close="false" @close="renewDgClose" class="common-renew-dialog">
|
||||
<div class="dialog-title">{{demand ? '转包年包月' : '续费'}}</div>
|
||||
<div class="dialog-main">
|
||||
<div class="renew-content">
|
||||
<div class="renew-item" :class="selected_id==item.id?'renew-active':''" v-for="item in renewList"
|
||||
:key="item.id" @click="renewItemChange(item)">
|
||||
<div class="item-top">{{item.customfield?.multi_language?.billing_cycle || item.billing_cycle}}</div>
|
||||
<div class="item-bottom" v-if="hasShowPromo && useDiscount">
|
||||
{{commonData.currency_prefix + item.base_price}}
|
||||
</div>
|
||||
<div class="item-bottom" v-else>{{commonData.currency_prefix + item.price}}</div>
|
||||
<div class="item-origin-price"
|
||||
v-if="item.price*1 < item.base_price*1 && !useDiscount">
|
||||
{{commonData.currency_prefix + item.base_price}}
|
||||
</div>
|
||||
<i class="el-icon-check check" v-show="selected_id==item.id"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay-content">
|
||||
<div class="pay-price">
|
||||
<div class="money" v-loading="renewLoading">
|
||||
<span class="text">{{lang.common_cloud_label11}}:</span>
|
||||
<span>{{commonData.currency_prefix}}{{totalPrice | filterMoney}}</span>
|
||||
<el-popover placement="top-start" width="200" trigger="hover" v-if="level_discount_amount * 1 || code_discount_amount * 1">
|
||||
<div class="show-config-list">
|
||||
<p v-if="level_discount_amount*1 > 0">
|
||||
{{lang.shoppingCar_tip_text2}}：{{commonData.currency_prefix}}
|
||||
{{ level_discount_amount | filterMoney}}
|
||||
</p>
|
||||
<p v-if="code_discount_amount * 1 > 0">
|
||||
{{lang.shoppingCar_tip_text4}}：{{commonData.currency_prefix}}
|
||||
{{ code_discount_amount | filterMoney }}
|
||||
</p>
|
||||
</div>
|
||||
<i class="el-icon-warning-outline total-icon" slot="reference"></i>
|
||||
</el-popover>
|
||||
<p class="original-price"
|
||||
v-if="customfield.promo_code && totalPrice != base_price">
|
||||
{{commonData.currency_prefix}} {{ base_price | filterMoney}}
|
||||
</p>
|
||||
<p class="original-price"
|
||||
v-if="!customfield.promo_code && totalPrice != original_price">
|
||||
{{commonData.currency_prefix}} {{ original_price | filterMoney}}
|
||||
</p>
|
||||
<div class="code-box">
|
||||
<!-- 优惠码 -->
|
||||
<discount-code v-show="hasShowPromo && !customfield.promo_code"
|
||||
@get-discount="getRenewDiscount(arguments)"
|
||||
:scene="demand ? 'change_billing_cycle' : 'renew'" :product_id="product_id"
|
||||
:amount="base_price" :billing_cycle_time="duration"></discount-code>
|
||||
</div>
|
||||
<div class="code-number-text">
|
||||
<div class="discount-codeNumber" v-show="customfield.promo_code">
|
||||
{{ customfield.promo_code }}<i class="el-icon-circle-close remove-discountCode"
|
||||
@click="removeRenewDiscountCode"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<el-button :loading="submitLoading" type="primary" class="btn-ok" @click="subRenew">
|
||||
{{demand ? lang.mf_demand_tip9 : lang.common_cloud_btn30}}
|
||||
</el-button>
|
||||
<div class="btn-no" @click="renewDgClose">{{lang.common_cloud_btn29}}</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
`,
|
||||
|
||||
data() {
|
||||
return {
|
||||
isShowRenew: false,
|
||||
currency_prefix: "",
|
||||
currency_suffix: "",
|
||||
commonData: {},
|
||||
submitLoading: false,
|
||||
renewList: [],
|
||||
hasClientLevel: false,
|
||||
hasShowPromo: false,
|
||||
hasShowCash: false,
|
||||
useDiscount: false,
|
||||
level_discount_amount: 0, // 用户等级优惠金额
|
||||
code_discount_amount: 0, // 优惠码优惠金额
|
||||
duration: 0, // 续费周期
|
||||
customfield: {
|
||||
promo_code: "",
|
||||
voucher_get_id: "",
|
||||
},
|
||||
billing_cycle: "",
|
||||
selected_id: 0,
|
||||
original_price: 0,
|
||||
base_price: 0,
|
||||
renewLoading: false,
|
||||
};
|
||||
},
|
||||
|
||||
props: {
|
||||
demand: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
id: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
required: true,
|
||||
},
|
||||
product_id: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
required: true,
|
||||
},
|
||||
renew_amount: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
billing_cycle_time: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
billing_cycle_name: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
// 加载css
|
||||
if (
|
||||
!document.querySelector(
|
||||
'link[href="' + url + 'components/renewDialog/renewDialog.css"]'
|
||||
)
|
||||
) {
|
||||
const link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = `${url}components/renewDialog/renewDialog.css`;
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
this.hasClientLevel = havePlugin("IdcsmartClientLevel");
|
||||
this.hasShowPromo = havePlugin("PromoCode");
|
||||
this.hasShowCash = havePlugin("IdcsmartVoucher");
|
||||
this.getCommon();
|
||||
},
|
||||
computed: {
|
||||
totalPrice() {
|
||||
const goodsPrice =
|
||||
this.hasShowPromo && this.customfield.promo_code
|
||||
? this.base_price
|
||||
: this.original_price;
|
||||
const discountPrice =
|
||||
this.level_discount_amount + this.code_discount_amount;
|
||||
const totalPrice = goodsPrice - discountPrice;
|
||||
const nowPrice = totalPrice > 0 ? totalPrice.toFixed(2) : 0;
|
||||
const showPirce = Number(nowPrice);
|
||||
return showPirce > 0 ? showPirce.toFixed(2) : 0;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 显示续费弹窗
|
||||
showRenew() {
|
||||
if (this.isShowRenew) return;
|
||||
// 获取续费页面信息
|
||||
const params = {
|
||||
id: this.id,
|
||||
};
|
||||
this.renewLoading = true;
|
||||
this.submitLoading = true;
|
||||
this.isShowRenew = true;
|
||||
const getRenewApi = this.demand
|
||||
? apiGetDemandToPrepaymentPrice
|
||||
: renewPage;
|
||||
getRenewApi(params)
|
||||
.then(async (res) => {
|
||||
this.submitLoading = false;
|
||||
this.renewLoading = false;
|
||||
if (res.data.status === 200) {
|
||||
this.renewList = res.data.data.host || res.data.data.duration || [];
|
||||
this.selected_id = this.renewList[0].id;
|
||||
this.billing_cycle = this.renewList[0].billing_cycle;
|
||||
this.duration = this.renewList[0].duration;
|
||||
this.original_price = this.renewList[0].price;
|
||||
this.base_price = this.renewList[0].base_price;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.submitLoading = false;
|
||||
this.renewLoading = false;
|
||||
this.isShowRenew = false;
|
||||
this.$message.error(err.data.msg);
|
||||
});
|
||||
},
|
||||
|
||||
// 续费使用优惠码
|
||||
async getRenewDiscount(data) {
|
||||
this.customfield.promo_code = data[1];
|
||||
this.useDiscount = true;
|
||||
this.code_discount_amount = Number(data[0]);
|
||||
this.level_discount_amount = await this.getClientLevelAmount(
|
||||
this.base_price
|
||||
);
|
||||
},
|
||||
|
||||
// 移除续费的优惠码
|
||||
removeRenewDiscountCode() {
|
||||
this.useDiscount = false;
|
||||
this.customfield.promo_code = "";
|
||||
this.code_discount_amount = 0;
|
||||
this.level_discount_amount = 0;
|
||||
},
|
||||
|
||||
// 续费弹窗关闭
|
||||
renewDgClose() {
|
||||
this.isShowRenew = false;
|
||||
this.selected_id = 0;
|
||||
this.duration = 0;
|
||||
this.billing_cycle = "";
|
||||
this.original_price = 0;
|
||||
this.base_price = 0;
|
||||
this.renewList = [];
|
||||
this.customfield = {
|
||||
promo_code: "",
|
||||
voucher_get_id: "",
|
||||
};
|
||||
this.code_discount_amount = 0;
|
||||
this.level_discount_amount = 0;
|
||||
this.removeRenewDiscountCode();
|
||||
},
|
||||
|
||||
async getClientLevelAmount(amount) {
|
||||
try {
|
||||
if (!this.hasClientLevel) {
|
||||
return 0;
|
||||
}
|
||||
const params = {id: this.product_id, amount: amount};
|
||||
const res = await apiClientLevelAmount(params);
|
||||
return Number(res.data.data.discount);
|
||||
} catch (error) {
|
||||
this.$message.error(error.data.msg);
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
|
||||
async getPromoDiscount(amount) {
|
||||
try {
|
||||
if (!this.hasShowPromo || !this.useDiscount) {
|
||||
return 0;
|
||||
}
|
||||
const params = {
|
||||
scene: this.demand ? "change_billing_cycle" : "renew",
|
||||
product_id: this.product_id,
|
||||
amount: amount,
|
||||
billing_cycle_time: this.duration,
|
||||
promo_code: this.customfield.promo_code,
|
||||
};
|
||||
|
||||
// 更新优惠码
|
||||
const res = await applyPromoCode(params);
|
||||
return Number(res.data.data.discount);
|
||||
} catch (error) {
|
||||
this.useDiscount = false;
|
||||
this.customfield.promo_code = "";
|
||||
this.level_discount_amount = 0;
|
||||
this.$message.error(error.data.msg);
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
|
||||
// 续费周期点击
|
||||
async renewItemChange(item) {
|
||||
this.submitLoading = true;
|
||||
this.selected_id = item.id;
|
||||
this.duration = item.duration;
|
||||
this.billing_cycle = item.billing_cycle;
|
||||
this.original_price = item.price;
|
||||
this.base_price = item.base_price;
|
||||
// 开启了优惠码插件
|
||||
this.level_discount_amount = await this.getClientLevelAmount(
|
||||
item.base_price
|
||||
);
|
||||
this.code_discount_amount = await this.getPromoDiscount(item.base_price);
|
||||
this.submitLoading = false;
|
||||
},
|
||||
|
||||
// 续费提交
|
||||
subRenew() {
|
||||
this.submitLoading = true;
|
||||
const params = {
|
||||
id: this.id,
|
||||
billing_cycle: this.billing_cycle,
|
||||
customfield: this.customfield,
|
||||
duration_id: this.selected_id,
|
||||
};
|
||||
const subApi = this.demand ? apiDemandToPrepayment : apiRenew;
|
||||
subApi(params)
|
||||
.then((res) => {
|
||||
this.submitLoading = false;
|
||||
if (res.data.status === 200) {
|
||||
if (res.data.code == "Paid") {
|
||||
this.isShowRenew = false;
|
||||
this.$message.success(res.data.msg);
|
||||
this.$emit("success");
|
||||
} else {
|
||||
this.isShowRenew = false;
|
||||
this.$emit("pay", res.data.data.id);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
this.submitLoading = false;
|
||||
this.$message.error(err.data.msg);
|
||||
});
|
||||
},
|
||||
|
||||
getCommon() {
|
||||
this.commonData = JSON.parse(localStorage.getItem("common_set_before"));
|
||||
this.currency_prefix = this.commonData.currency_prefix;
|
||||
this.currency_suffix = this.commonData.currency_suffix;
|
||||
},
|
||||
},
|
||||
};
|
||||
122
clientarea/hgcloud/components/renewDialog/renewDialog.less
Normal file
122
clientarea/hgcloud/components/renewDialog/renewDialog.less
Normal file
@@ -0,0 +1,122 @@
|
||||
.common-renew-dialog {
|
||||
|
||||
|
||||
|
||||
.dialog-main {
|
||||
.renew-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 105%;
|
||||
|
||||
.renew-item {
|
||||
width: 1.6rem;
|
||||
min-height: .83rem;
|
||||
border: 1px solid #E6E7EB;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-right: .2rem;
|
||||
margin-bottom: .2rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.item-top {
|
||||
font-size: .15rem;
|
||||
color: #1E2736;
|
||||
margin-top: .08rem;
|
||||
}
|
||||
|
||||
.item-bottom {
|
||||
font-size: .15rem;
|
||||
color: var(--color-primary);
|
||||
margin-top: .04rem;
|
||||
}
|
||||
|
||||
.check {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.item-origin-price {
|
||||
text-decoration: line-through;
|
||||
font-size: 0.15rem;
|
||||
color: #8692B0;
|
||||
}
|
||||
}
|
||||
|
||||
.renew-active {
|
||||
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 0.24rem solid var(--color-primary);
|
||||
border-left: 0.24rem solid transparent;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-content {
|
||||
border: 1px solid #E6E7EB;
|
||||
border-radius: 3px;
|
||||
padding: 0.2rem 0;
|
||||
padding-right: 0.3rem;
|
||||
|
||||
.pay-price {
|
||||
display: flex;
|
||||
text-align: right;
|
||||
flex-direction: row;
|
||||
|
||||
.text {
|
||||
font-size: 0.14rem;
|
||||
margin-top: .1rem;
|
||||
color: #1E2736;
|
||||
margin-right: 1.43rem;
|
||||
}
|
||||
|
||||
.money {
|
||||
width: 100%;
|
||||
font-size: .28rem;
|
||||
font-weight: bold;
|
||||
color: var(--color-price-text);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.total-icon {
|
||||
font-size: 0.16rem;
|
||||
color: #1E2736;
|
||||
}
|
||||
|
||||
.original-price {
|
||||
text-decoration: line-through;
|
||||
font-size: 0.2rem;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user