style: 订阅弹窗样式
This commit is contained in:
@@ -19,7 +19,8 @@
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
||||
<svg
|
||||
width="100%" height="100%"
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox="0 0 46 46"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -49,20 +50,32 @@
|
||||
<div class="renewContent">
|
||||
<div class="left">
|
||||
<div class="video">
|
||||
<video autoplay loop muted playsinline src="@/assets/images/icon/paymentVideo.mp4"></video>
|
||||
<video
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
src="@/assets/images/icon/paymentVideo.mp4"
|
||||
></video>
|
||||
<div class="mask"></div>
|
||||
</div>
|
||||
<div class="title">{{ $t("Renew.Strengths") }}</div>
|
||||
<div class="title">{{ $t('Renew.Strengths') }}</div>
|
||||
<div class="content">
|
||||
<div class="benefitsItem">
|
||||
<div class="describe">
|
||||
<div class="icon">
|
||||
<img src="@/assets/images/icon/paymentIntroduce1.png" alt="">
|
||||
<img src="@/assets/images/icon/paymentIntroduce1.png" alt="" />
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="title">{{ $t("Renew.StrengthsTitle1") }}<br>{{ $t("Renew.StrengthsTitle1_1") }}</p>
|
||||
<p class="title">
|
||||
{{ $t('Renew.StrengthsTitle1') }}
|
||||
<br />
|
||||
{{ $t('Renew.StrengthsTitle1_1') }}
|
||||
</p>
|
||||
<p class="info">
|
||||
{{ $t("Renew.StrengthsInfo1") }}<br>{{ $t("Renew.StrengthsInfo1_1") }}
|
||||
{{ $t('Renew.StrengthsInfo1') }}
|
||||
<br />
|
||||
{{ $t('Renew.StrengthsInfo1_1') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -70,12 +83,18 @@
|
||||
<div class="benefitsItem">
|
||||
<div class="describe">
|
||||
<div class="icon">
|
||||
<img src="@/assets/images/icon/paymentIntroduce2.png" alt="">
|
||||
<img src="@/assets/images/icon/paymentIntroduce2.png" alt="" />
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="title">{{ $t("Renew.StrengthsTitle2") }}<br>{{ $t("Renew.StrengthsTitle2_1") }}</p>
|
||||
<p class="title">
|
||||
{{ $t('Renew.StrengthsTitle2') }}
|
||||
<br />
|
||||
{{ $t('Renew.StrengthsTitle2_1') }}
|
||||
</p>
|
||||
<p class="info">
|
||||
{{ $t("Renew.StrengthsInfo2") }}<br>{{ $t("Renew.StrengthsInfo2_1") }}
|
||||
{{ $t('Renew.StrengthsInfo2') }}
|
||||
<br />
|
||||
{{ $t('Renew.StrengthsInfo2_1') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,13 +102,21 @@
|
||||
<div class="benefitsItem">
|
||||
<div class="describe">
|
||||
<div class="icon">
|
||||
<img src="@/assets/images/icon/paymentIntroduce3.png" alt="">
|
||||
<img src="@/assets/images/icon/paymentIntroduce3.png" alt="" />
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="title"></p>
|
||||
<p class="title">{{ $t("Renew.StrengthsTitle3") }}<br>{{ $t("Renew.StrengthsTitle3_1") }}</p>
|
||||
<p class="title">
|
||||
{{ $t('Renew.StrengthsTitle3') }}
|
||||
<br />
|
||||
{{ $t('Renew.StrengthsTitle3_1') }}
|
||||
</p>
|
||||
<p class="info">
|
||||
{{ $t("Renew.StrengthsInfo3") }}<br>{{ $t("Renew.StrengthsInfo3_1") }}<br>{{ $t("Renew.StrengthsInfo3_2") }}
|
||||
{{ $t('Renew.StrengthsInfo3') }}
|
||||
<br />
|
||||
{{ $t('Renew.StrengthsInfo3_1') }}
|
||||
<br />
|
||||
{{ $t('Renew.StrengthsInfo3_2') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,12 +124,18 @@
|
||||
<div class="benefitsItem">
|
||||
<div class="describe">
|
||||
<div class="icon">
|
||||
<img src="@/assets/images/icon/paymentIntroduce4.png" alt="">
|
||||
<img src="@/assets/images/icon/paymentIntroduce4.png" alt="" />
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="title">{{ $t("Renew.StrengthsTitle4") }}<br>{{ $t("Renew.StrengthsTitle4_1") }}</p>
|
||||
<p class="title">
|
||||
{{ $t('Renew.StrengthsTitle4') }}
|
||||
<br />
|
||||
{{ $t('Renew.StrengthsTitle4_1') }}
|
||||
</p>
|
||||
<p class="info">
|
||||
{{ $t("Renew.StrengthsInfo4") }}<br>{{ $t("Renew.StrengthsInfo4_1") }}
|
||||
{{ $t('Renew.StrengthsInfo4') }}
|
||||
<br />
|
||||
{{ $t('Renew.StrengthsInfo4_1') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,7 +144,7 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="title">
|
||||
{{ $t("Renew.title") }}
|
||||
{{ $t('Renew.title') }}
|
||||
</div>
|
||||
<!-- <div class="info">{{ $t("Renew.unlimited") }}</div> -->
|
||||
<div class="content">
|
||||
@@ -119,36 +152,31 @@
|
||||
class="productItem"
|
||||
:class="{
|
||||
active: item.price == current.price,
|
||||
sellWell: item.sellWell,
|
||||
sellWell: item.sellWell
|
||||
}"
|
||||
v-for="item in personage"
|
||||
:key="item.price"
|
||||
@click="setPromotionData(item)"
|
||||
>
|
||||
<div class="popular" v-show="item.sellWell">{{ $t("Renew.MOSTPOPULAR") }}</div>
|
||||
<div class="popular" v-show="item.sellWell">
|
||||
{{ $t('Renew.MOSTPOPULAR') }}
|
||||
</div>
|
||||
<div class="priceBox">
|
||||
<div class="left">
|
||||
<p class="productType">1 {{ item.type.label }}</p>
|
||||
<p class="price">${{ item.price }}</p>
|
||||
<p class="price">HK $ {{ item.price }}</p>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="promotion">
|
||||
<div
|
||||
class="succeed"
|
||||
v-show="item.promotionData.error == 'true'"
|
||||
>
|
||||
<div class="succeed" v-show="item.promotionData.error == 'true'">
|
||||
{{ item.promotionData.code }}
|
||||
<i
|
||||
class="fi fi-sr-times-hexagon"
|
||||
@click="clearPromotionCode"
|
||||
></i>
|
||||
<i class="fi fi-sr-times-hexagon" @click="clearPromotionCode"></i>
|
||||
</div>
|
||||
<div
|
||||
class="input"
|
||||
@click.stop
|
||||
v-show="
|
||||
!item.promotionData.error ||
|
||||
item.promotionData.error == 'false'
|
||||
!item.promotionData.error || item.promotionData.error == 'false'
|
||||
"
|
||||
>
|
||||
<input
|
||||
@@ -156,14 +184,11 @@
|
||||
:placeholder="$t('Renew.promotionCode')"
|
||||
v-model="item.promotionData.code"
|
||||
/>
|
||||
<div style="cursor: pointer; background-color: #000; font-size: 1.2rem; color: #fff; padding: 0 .5rem;" @click="examine(item)">
|
||||
{{ $t("Renew.use") }}
|
||||
<div class="apply-btn" @click="examine(item)">
|
||||
{{ $t('Renew.use') }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="error"
|
||||
v-show="item.promotionData.error == 'false'"
|
||||
>
|
||||
<div class="error" v-show="item.promotionData.error == 'false'">
|
||||
{{ item.promotionData.str }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -181,7 +206,7 @@
|
||||
<div class="payment">
|
||||
<div class="allocation">
|
||||
<div class="selectType">
|
||||
<div class="text">{{ $t("Renew.Payment") }}:</div>
|
||||
<div class="text">{{ $t('Renew.Payment') }}:</div>
|
||||
<label>
|
||||
<input
|
||||
name="payment"
|
||||
@@ -190,7 +215,7 @@
|
||||
v-model="PaymentType"
|
||||
@change="setPaymentType('CreditCard')"
|
||||
/>
|
||||
{{ $t("Renew.CreditCard") }}
|
||||
{{ $t('Renew.CreditCard') }}
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
@@ -200,43 +225,47 @@
|
||||
v-model="PaymentType"
|
||||
@change="setPaymentType('Alipay')"
|
||||
/>
|
||||
{{ $t("Renew.Alipay") }}
|
||||
{{ $t('Renew.Alipay') }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery_btn gallery_btn_radius" @click="payment">
|
||||
{{ $t("upgradePlan.Continue") }}
|
||||
{{ $t('upgradePlan.Continue') }}
|
||||
</div>
|
||||
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
|
||||
<label>
|
||||
<!-- <input type="checkbox" v-model="clause" /> -->
|
||||
<span class="generalModelDescription"
|
||||
>{{ $t("upgradePlan.policy")}}
|
||||
<span class="generalModelDescription">
|
||||
{{ $t('upgradePlan.policy') }}
|
||||
<a
|
||||
href="https://code-create.com.hk/aida-terms-and-conditions/"
|
||||
target="_blank">
|
||||
{{ $t("upgradePlan.policy1") }}
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t('upgradePlan.policy1') }}
|
||||
</a>
|
||||
&
|
||||
<a
|
||||
href="https://code-create.com.hk/aida-subscription-agreement/"
|
||||
target="_blank">
|
||||
{{ $t("upgradePlan.policy2") }}
|
||||
target="_blank"
|
||||
>
|
||||
{{ $t('upgradePlan.policy2') }}
|
||||
</a>
|
||||
<!-- . * -->
|
||||
</span
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
<label class="secure">
|
||||
<span><i class="fi fi-rr-shield-check"></i>Pay safe & secure</span>
|
||||
<span>
|
||||
<i class="fi fi-rr-shield-check"></i>
|
||||
Pay safe & secure
|
||||
</span>
|
||||
</label>
|
||||
<label class="payIcon">
|
||||
<img class="stripe" src="@/assets/images/icon/stripe.svg" alt="">
|
||||
<img class="alipay" src="@/assets/images/icon/alipay.svg" alt="">
|
||||
<img class="alipay" src="@/assets/images/icon/jcbPay.svg" alt="">
|
||||
<img class="alipay" src="@/assets/images/icon/mastercardPay.svg" alt="">
|
||||
<img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt="">
|
||||
<img class="alipay" src="@/assets/images/icon/visaPay.svg" alt="">
|
||||
<img class="stripe" src="@/assets/images/icon/stripe.svg" alt="" />
|
||||
<img class="alipay" src="@/assets/images/icon/alipay.svg" alt="" />
|
||||
<img class="alipay" src="@/assets/images/icon/jcbPay.svg" alt="" />
|
||||
<img class="alipay" src="@/assets/images/icon/mastercardPay.svg" alt="" />
|
||||
<img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt="" />
|
||||
<img class="alipay" src="@/assets/images/icon/visaPay.svg" alt="" />
|
||||
</label>
|
||||
</div>
|
||||
<!-- <div class="paySecure">
|
||||
@@ -250,101 +279,104 @@
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark" state="true">
|
||||
<div class="mark_loading_title">{{ $t("upgradePlan.completed") }}</div>
|
||||
<div class="mark_loading_intro">{{ $t("upgradePlan.hint") }}</div>
|
||||
<div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
|
||||
<div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
|
||||
<div class="mark_loading_title_box">
|
||||
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">
|
||||
{{ $t("upgradePlan.Back") }}
|
||||
{{ $t('upgradePlan.Back') }}
|
||||
</div>
|
||||
<div class="mark_loading_btn" @click="completePayment">OK</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
<payMethod
|
||||
ref="payMethod"
|
||||
@completePayment="cancelDsign"
|
||||
type="renew"
|
||||
></payMethod>
|
||||
</template>
|
||||
<payMethod ref="payMethod" @completePayment="cancelDsign" type="renew"></payMethod>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
|
||||
import { message } from "ant-design-vue";
|
||||
import payMethod from "@/component/Pay/payMethod.vue";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { Https } from "@/tool/https";
|
||||
import md5 from "md5";
|
||||
export default defineComponent({
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent,
|
||||
computed,
|
||||
reactive,
|
||||
toRefs,
|
||||
onMounted,
|
||||
onBeforeUnmount
|
||||
} from 'vue'
|
||||
import { message } from 'ant-design-vue'
|
||||
import payMethod from '@/component/Pay/payMethod.vue'
|
||||
import { useStore } from 'vuex'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { Https } from '@/tool/https'
|
||||
import md5 from 'md5'
|
||||
export default defineComponent({
|
||||
components: {
|
||||
payMethod,
|
||||
payMethod
|
||||
},
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const { t } = useI18n();
|
||||
const store = useStore()
|
||||
const { t } = useI18n()
|
||||
let renew = reactive({
|
||||
renewModel: false,
|
||||
renewModelMask: true,
|
||||
pageWidth: "50%",
|
||||
});
|
||||
pageWidth: '50%'
|
||||
})
|
||||
let payMethodData = reactive({
|
||||
clause: false,
|
||||
labelDisclaimer: null as any,
|
||||
newWindow: null as any,
|
||||
isShowMark: false,
|
||||
isShowMark_: false,
|
||||
});
|
||||
isShowMark_: false
|
||||
})
|
||||
let renewData = reactive({
|
||||
personage: [
|
||||
{
|
||||
price: "100",
|
||||
price: '100',
|
||||
sellWell: true,
|
||||
activity: false, //活动打折
|
||||
type: {
|
||||
value: "EcoMonth",
|
||||
label: computed(()=>t("Renew.Monthly")),
|
||||
value: 'EcoMonth',
|
||||
label: computed(() => t('Renew.Monthly'))
|
||||
},
|
||||
// PaymentType: "CreditCard",
|
||||
promotionData: {
|
||||
code: "",
|
||||
error: "",
|
||||
str: "",
|
||||
price: "",
|
||||
},
|
||||
code: '',
|
||||
error: '',
|
||||
str: '',
|
||||
price: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
price: "500",
|
||||
price: '500',
|
||||
sellWell: false,
|
||||
activity: false, //活动打折
|
||||
type: {
|
||||
value: "Month",
|
||||
label: computed(()=>t("Renew.Monthly")),
|
||||
value: 'Month',
|
||||
label: computed(() => t('Renew.Monthly'))
|
||||
},
|
||||
// PaymentType: "CreditCard",
|
||||
promotionData: {
|
||||
code: "",
|
||||
error: "",
|
||||
str: "",
|
||||
price: "",
|
||||
},
|
||||
code: '',
|
||||
error: '',
|
||||
str: '',
|
||||
price: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
price: "5,000",
|
||||
price: '5,000',
|
||||
sellWell: false,
|
||||
activity: false, //活动打折
|
||||
typeValue: "year",
|
||||
typeValue: 'year',
|
||||
type: {
|
||||
value: "Year",
|
||||
label: computed(()=>t("Renew.Yearly")),
|
||||
value: 'Year',
|
||||
label: computed(() => t('Renew.Yearly'))
|
||||
},
|
||||
// PaymentType: "CreditCard",
|
||||
promotionData: {
|
||||
code: "",
|
||||
error: "",
|
||||
str: "",
|
||||
price: "",
|
||||
},
|
||||
},
|
||||
code: '',
|
||||
error: '',
|
||||
str: '',
|
||||
price: ''
|
||||
}
|
||||
}
|
||||
],
|
||||
// personage:computed(()=>{
|
||||
// return {
|
||||
@@ -365,55 +397,55 @@
|
||||
// }),
|
||||
firm: computed(() => {
|
||||
return {
|
||||
title: "Education Edition",
|
||||
title: 'Education Edition',
|
||||
price: {
|
||||
year: "500",
|
||||
year: '500'
|
||||
},
|
||||
unit: {
|
||||
year: "HKD / Year",
|
||||
year: 'HKD / Year'
|
||||
},
|
||||
type: "year",
|
||||
type: 'year',
|
||||
autoRenewal: {
|
||||
text: t("Renew.automatically"),
|
||||
value: true,
|
||||
text: t('Renew.automatically'),
|
||||
value: true
|
||||
},
|
||||
typeList: ["year"],
|
||||
info: "Customised plan",
|
||||
};
|
||||
typeList: ['year'],
|
||||
info: 'Customised plan'
|
||||
}
|
||||
}),
|
||||
education: computed(() => {
|
||||
return {
|
||||
title: "Enterprise Edition",
|
||||
title: 'Enterprise Edition',
|
||||
price: {
|
||||
year: "500",
|
||||
year: '500'
|
||||
},
|
||||
unit: {
|
||||
year: "HKD / Year",
|
||||
year: 'HKD / Year'
|
||||
},
|
||||
type: "year",
|
||||
type: 'year',
|
||||
autoRenewal: {
|
||||
text: t("Renew.automatically"),
|
||||
value: true,
|
||||
text: t('Renew.automatically'),
|
||||
value: true
|
||||
},
|
||||
typeList: ["year"],
|
||||
info: "Customised plan",
|
||||
};
|
||||
typeList: ['year'],
|
||||
info: 'Customised plan'
|
||||
}
|
||||
}),
|
||||
current: {} as any,
|
||||
payMethod: null as any,
|
||||
PaymentType: "CreditCard",
|
||||
});
|
||||
PaymentType: 'CreditCard'
|
||||
})
|
||||
const init = () => {
|
||||
renew.renewModel = true;
|
||||
renewData.current = renewData.personage[1];
|
||||
};
|
||||
renew.renewModel = true
|
||||
renewData.current = renewData.personage[1]
|
||||
}
|
||||
const cancelDsign = () => {
|
||||
renew.renewModel = false;
|
||||
renew.renewModel = false
|
||||
store.dispatch('getUserDetail')
|
||||
};
|
||||
}
|
||||
const setPaymentType = (str: any) => {
|
||||
renewData.PaymentType = str;
|
||||
};
|
||||
renewData.PaymentType = str
|
||||
}
|
||||
const payment = () => {
|
||||
// if (!payMethodData.clause) {
|
||||
// let labelDisclaimer: any = payMethodData.labelDisclaimer;
|
||||
@@ -425,104 +457,92 @@
|
||||
// }
|
||||
// return;
|
||||
// }
|
||||
if (!renewData.PaymentType)
|
||||
return message.info(t("Renew.PleaseSelectPayment"));
|
||||
let url = window.location.origin + "/paySucceed";
|
||||
if (!renewData.PaymentType) return message.info(t('Renew.PleaseSelectPayment'))
|
||||
let url = window.location.origin + '/paySucceed'
|
||||
let data = {
|
||||
autoRenewal: renewData.PaymentType != "Alipay", //false为不自动续费
|
||||
productName: "Subscription",
|
||||
autoRenewal: renewData.PaymentType != 'Alipay', //false为不自动续费
|
||||
productName: 'Subscription',
|
||||
quantity: 1,
|
||||
returnUrl: url,
|
||||
subscribeType: renewData.current.type.value, //yearly为年费，monthly为月费
|
||||
wallet: "ALIPAYHK",
|
||||
promotionCode: renewData.current.promotionData.code,
|
||||
};
|
||||
let httpsUrl = Https.httpUrls.payStripe;
|
||||
payMethodData.isShowMark_ = true;
|
||||
wallet: 'ALIPAYHK',
|
||||
promotionCode: renewData.current.promotionData.code
|
||||
}
|
||||
let httpsUrl = Https.httpUrls.payStripe
|
||||
payMethodData.isShowMark_ = true
|
||||
Https.axiosPost(httpsUrl, data)
|
||||
.then((rv: any) => {
|
||||
var width = 800;
|
||||
var height = 600;
|
||||
var left = (screen.width - width) / 2;
|
||||
var top = (screen.height - height) / 2;
|
||||
var width = 800
|
||||
var height = 600
|
||||
var left = (screen.width - width) / 2
|
||||
var top = (screen.height - height) / 2
|
||||
payMethodData.newWindow = window.open(
|
||||
"",
|
||||
"_blank",
|
||||
"width=" +
|
||||
width +
|
||||
", height=" +
|
||||
height +
|
||||
", left=" +
|
||||
left +
|
||||
", top=" +
|
||||
top
|
||||
);
|
||||
let herf = rv;
|
||||
'',
|
||||
'_blank',
|
||||
'width=' + width + ', height=' + height + ', left=' + left + ', top=' + top
|
||||
)
|
||||
let herf = rv
|
||||
if (payMethodData.newWindow) {
|
||||
payMethodData.newWindow.location.href = herf;
|
||||
payMethodData.newWindow.location.href = herf
|
||||
} else {
|
||||
// window.open(herf, '_blank');
|
||||
window.location.href = herf;
|
||||
window.location.href = herf
|
||||
}
|
||||
payMethodData.newWindow = null;
|
||||
payMethodData.isShowMark = true;
|
||||
payMethodData.isShowMark_ = false;
|
||||
payMethodData.newWindow = null
|
||||
payMethodData.isShowMark = true
|
||||
payMethodData.isShowMark_ = false
|
||||
})
|
||||
.catch(res => {
|
||||
payMethodData.isShowMark_ = false
|
||||
})
|
||||
.catch((res) => {
|
||||
payMethodData.isShowMark_ = false;
|
||||
});
|
||||
|
||||
// renewData.payMethod.init(data)
|
||||
};
|
||||
}
|
||||
const setPaidBack = () => {
|
||||
payMethod.payMethodModel = false;
|
||||
payMethodData.isShowMark = false;
|
||||
payMethodData.clause = false;
|
||||
};
|
||||
payMethod.payMethodModel = false
|
||||
payMethodData.isShowMark = false
|
||||
payMethodData.clause = false
|
||||
}
|
||||
const completePayment = () => {
|
||||
renew.renewModel = false;
|
||||
setPaidBack();
|
||||
};
|
||||
renew.renewModel = false
|
||||
setPaidBack()
|
||||
}
|
||||
const examine = (item: any) => {
|
||||
// renewData.promotionData.error
|
||||
let price = item?.price;
|
||||
const normalNumber = Number(price.replace(/,/g, ""));
|
||||
let price = item?.price
|
||||
const normalNumber = Number(price.replace(/,/g, ''))
|
||||
if (!item.promotionData.code) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
let data = {
|
||||
promotionCode: item.promotionData.code,
|
||||
price: normalNumber,
|
||||
};
|
||||
Https.axiosGet(Https.httpUrls.checkCoupon, { params: data }).then(
|
||||
(rv: any) => {
|
||||
price: normalNumber
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.checkCoupon, { params: data }).then((rv: any) => {
|
||||
if (rv) {
|
||||
renewData.personage.forEach((personageItem: any) => {
|
||||
if (personageItem.price == item.price) {
|
||||
if (rv.status == "valid") {
|
||||
item.promotionData.error = "true";
|
||||
item.promotionData.price = Number(
|
||||
rv.discountedPrice
|
||||
).toLocaleString();
|
||||
if (rv.status == 'valid') {
|
||||
item.promotionData.error = 'true'
|
||||
item.promotionData.price = Number(rv.discountedPrice).toLocaleString()
|
||||
} else {
|
||||
item.promotionData.error = "false";
|
||||
item.promotionData.str = rv.message;
|
||||
item.promotionData.error = 'false'
|
||||
item.promotionData.str = rv.message
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
} else {
|
||||
}
|
||||
})
|
||||
}
|
||||
);
|
||||
};
|
||||
const clearPromotionCode = () => {
|
||||
renewData.current.promotionData.error = "";
|
||||
renewData.current.promotionData.code = "";
|
||||
renewData.current.promotionData.price = "";
|
||||
};
|
||||
renewData.current.promotionData.error = ''
|
||||
renewData.current.promotionData.code = ''
|
||||
renewData.current.promotionData.price = ''
|
||||
}
|
||||
const setPromotionData = (item: any) => {
|
||||
renewData.current = item;
|
||||
};
|
||||
renewData.current = item
|
||||
}
|
||||
return {
|
||||
store,
|
||||
...toRefs(renew),
|
||||
@@ -536,21 +556,21 @@
|
||||
completePayment,
|
||||
examine,
|
||||
clearPromotionCode,
|
||||
setPromotionData,
|
||||
};
|
||||
setPromotionData
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
turnToWindow(url: any) {
|
||||
window.open(url);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.renew {
|
||||
window.open(url)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.renew {
|
||||
:deep(.ant-modal-body) {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -560,6 +580,18 @@
|
||||
overflow: hidden;
|
||||
> .left,
|
||||
> .right {
|
||||
.apply-btn {
|
||||
cursor: pointer;
|
||||
background-color: rgb(27, 34, 60);
|
||||
font-size: 0.8rem;
|
||||
color: #fff;
|
||||
padding: 0 0.5rem;
|
||||
width: 3.3rem;
|
||||
height: 1.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
> .title {
|
||||
text-align: center;
|
||||
font-size: 3.2rem;
|
||||
@@ -590,24 +622,24 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .video{
|
||||
> .video {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
> video{
|
||||
> video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
> .mask{
|
||||
> .mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: rgba(0,0,0,.5);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -679,11 +711,11 @@
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
border: 1.5px solid #E7EBFF;
|
||||
border: 1.5px solid #e7ebff;
|
||||
cursor: pointer;
|
||||
|
||||
> .popular {
|
||||
background: #1B223C;
|
||||
background: #1b223c;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -745,7 +777,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #000;
|
||||
border: 1.5px solid rgb(216, 218, 220);
|
||||
overflow: hidden;
|
||||
padding: 0 1rem;
|
||||
input {
|
||||
@@ -768,11 +800,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active,&:hover {
|
||||
&.active,
|
||||
&:hover {
|
||||
// 40% opacity
|
||||
background: rgba(231, 235, 255, 0.4);
|
||||
// border: 2px solid #0ea982;
|
||||
|
||||
}
|
||||
&.sellWell {
|
||||
// border: 2px solid #0ea982;
|
||||
@@ -810,9 +842,9 @@
|
||||
> .gallery_btn {
|
||||
width: 100%;
|
||||
margin: 2rem 0;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
background: #1B223C;
|
||||
background: #1b223c;
|
||||
color: #fff;
|
||||
}
|
||||
> .payMethod_payAffirm_clause {
|
||||
@@ -835,27 +867,27 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
> .secure{
|
||||
> .secure {
|
||||
border: 1px solid #ededed;
|
||||
background: #f1fbf9;
|
||||
color: #1cb36c;
|
||||
padding: .4rem .8rem;
|
||||
border-radius: .5rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-top: 4rem;
|
||||
> span{
|
||||
> span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
i{
|
||||
i {
|
||||
display: flex;
|
||||
margin-right: .5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
> .payIcon{
|
||||
> .payIcon {
|
||||
height: 2rem;
|
||||
margin-top: 1rem;
|
||||
img{
|
||||
margin: 0 .3rem;
|
||||
img {
|
||||
margin: 0 0.3rem;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -951,6 +983,5 @@
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user