Merge remote-tracking branch 'origin/StableVersion' into develop
This commit is contained in:
X1627315083
@@ -652,6 +652,7 @@ export default defineComponent({
|
||||
let dataNum = dataList.length
|
||||
let state = true
|
||||
this.generateTime = setInterval(()=>{
|
||||
if(!this.isGenerate || !this.remGenerate)return
|
||||
if(!state)return
|
||||
state = false
|
||||
Https.axiosPost(Https.httpUrls.generateResult, data).then(
|
||||
|
||||
@@ -47,13 +47,30 @@
|
||||
{{ $t('Renew.Yearly') }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="autoRenewal">
|
||||
<div class="type payment">
|
||||
<div class="text">{{ $t('Renew.Payment') }}:</div>
|
||||
<label>
|
||||
<input name="payment" type="radio" value="CreditCard" v-model="current.PaymentType" @change="setPaymentType('CreditCard')">
|
||||
{{ $t('Renew.CreditCard') }}
|
||||
</label>
|
||||
<label>
|
||||
<input name="payment" type="radio" value="Alipay" v-model="current.PaymentType" @change="setPaymentType('Alipay')">
|
||||
{{ $t('Renew.Alipay') }}
|
||||
</label>
|
||||
</div>
|
||||
<!-- <div class="autoRenewal">
|
||||
<label>
|
||||
{{ current.autoRenewal.text }} :
|
||||
<a-switch v-model:checked="current.autoRenewal.value" />
|
||||
</label>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="info">{{ current?.info }}</div>
|
||||
<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
|
||||
<label>
|
||||
<input type="checkbox" v-model="clause">
|
||||
<span class="generalModelDescription">{{ $t('upgradePlan.policy1') }}<a href="https://code-create.com.hk/aida-terms-and-conditions/" target="_blank">{{ $t('upgradePlan.policy2') }}</a>{{ $t('upgradePlan.policy3') }}<a href="https://code-create.com.hk/aida-subscription-agreement/" target="_blank">{{ $t('upgradePlan.policy4') }}</a>. *</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery_btn gallery_btn_radius" @click="payment">{{ $t('Renew.SubscribeNow') }}</div>
|
||||
</div>
|
||||
@@ -74,6 +91,17 @@
|
||||
Privacy Policy
|
||||
</div>
|
||||
</div>
|
||||
<div class="mark_loading" v-show="isShowMark_">
|
||||
<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_box">
|
||||
<div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">{{ $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>
|
||||
@@ -84,6 +112,7 @@ 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";
|
||||
const md5 = require("md5");
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@@ -97,6 +126,13 @@ export default defineComponent({
|
||||
renewModelMask:true,
|
||||
pageWidth:'50%'
|
||||
})
|
||||
let payMethodData = reactive({
|
||||
clause:false,
|
||||
labelDisclaimer:null,
|
||||
newWindow:null as any,
|
||||
isShowMark:false,
|
||||
isShowMark_:false,
|
||||
})
|
||||
let renewData = reactive({
|
||||
personage:computed(()=>{
|
||||
return {
|
||||
@@ -110,10 +146,7 @@ export default defineComponent({
|
||||
year:t('Renew.HKDYear'),
|
||||
},
|
||||
type:'monthly',
|
||||
autoRenewal:{
|
||||
text:t('Renew.automatically'),
|
||||
value:true,
|
||||
},
|
||||
PaymentType:'',
|
||||
typeList:['monthly','year'],
|
||||
info:'Tax, VAT not included.',
|
||||
}
|
||||
@@ -169,26 +202,85 @@ export default defineComponent({
|
||||
const setPricType=(str:any)=>{
|
||||
renewData.current.type = str
|
||||
}
|
||||
const setPaymentType = (str:any)=>{
|
||||
renewData.current.PaymentType = str
|
||||
}
|
||||
const payment = ()=>{
|
||||
let subscribeType = 'Year'
|
||||
if(renewData.current.type == 'monthly')subscribeType= 'Month'
|
||||
let data = {
|
||||
autoRenewal:renewData.current.autoRenewal.value,//one_time为不自动续费
|
||||
// autoRenewal:true,//one_time为不自动续费
|
||||
productName:'Subscription',
|
||||
subscribeType,//yearly为年费，monthly为月费
|
||||
if(!payMethodData.clause){
|
||||
let labelDisclaimer:any = payMethodData.labelDisclaimer
|
||||
if(!labelDisclaimer.classList.contains('animation')){
|
||||
labelDisclaimer.classList.add('animation')
|
||||
setTimeout(() => {
|
||||
labelDisclaimer.classList.remove('animation')
|
||||
}, 1000);
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
renewData.payMethod.init(data)
|
||||
|
||||
let subscribeType = 'Year'
|
||||
if(!renewData.current.PaymentType)return message.info(t('Renew.PleaseSelectPayment'))
|
||||
if(renewData.current.type == 'monthly')subscribeType= 'Month'
|
||||
// let data = {
|
||||
// autoRenewal:renewData.current.PaymentType != 'Alipay',//one_time为不自动续费
|
||||
// productName:'Subscription',
|
||||
// subscribeType,//yearly为年费，monthly为月费
|
||||
// }
|
||||
let url = window.location.origin+'/paySucceed'
|
||||
let data = {
|
||||
autoRenewal:renewData.current.PaymentType != 'Alipay',//false为不自动续费
|
||||
productName:'Subscription',
|
||||
quantity:1,
|
||||
returnUrl:url,
|
||||
subscribeType:subscribeType,//yearly为年费，monthly为月费
|
||||
wallet:'ALIPAYHK',
|
||||
}
|
||||
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;
|
||||
payMethodData.newWindow = window.open("", "_blank", "width=" + width + ", height=" + height + ", left=" + left + ", top=" + top);
|
||||
let herf = rv
|
||||
if(payMethodData.newWindow){
|
||||
payMethodData.newWindow.location.href = herf
|
||||
}else{
|
||||
// window.open(herf, '_blank');
|
||||
window.location.href=herf;
|
||||
}
|
||||
payMethodData.newWindow = null
|
||||
payMethodData.isShowMark = true
|
||||
payMethodData.isShowMark_ = false
|
||||
}
|
||||
).catch(res=>{
|
||||
payMethodData.isShowMark_ = false
|
||||
});
|
||||
|
||||
// renewData.payMethod.init(data)
|
||||
}
|
||||
const setPaidBack = ()=>{
|
||||
payMethod.payMethodModel = false
|
||||
payMethodData.isShowMark = false
|
||||
payMethodData.clause = false
|
||||
}
|
||||
const completePayment = ()=>{
|
||||
renew.renewModel = false
|
||||
setPaidBack()
|
||||
}
|
||||
return{
|
||||
store,
|
||||
...toRefs(renew),
|
||||
...toRefs(renewData),
|
||||
...toRefs(payMethodData),
|
||||
init,
|
||||
cancelDsign,
|
||||
setPricType,
|
||||
setPaymentType,
|
||||
payment,
|
||||
setPaidBack,
|
||||
completePayment,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -214,7 +306,8 @@ export default defineComponent({
|
||||
}
|
||||
.renew_detail{
|
||||
width: 58rem;
|
||||
height: 53rem;
|
||||
height: 60rem;
|
||||
// height: 53rem;
|
||||
border-radius: 3rem;
|
||||
margin-bottom: 5rem;
|
||||
border: 2px solid #000;
|
||||
@@ -241,6 +334,11 @@ export default defineComponent({
|
||||
}
|
||||
.type{
|
||||
display: flex;
|
||||
> .text{
|
||||
margin-right: 2rem;
|
||||
// font-weight: 600;
|
||||
}
|
||||
|
||||
label{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -249,6 +347,14 @@ export default defineComponent({
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
&.payment{
|
||||
label{
|
||||
margin-right: 1rem;
|
||||
input{
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
label:last-child{
|
||||
margin-right: 0rem;
|
||||
}
|
||||
@@ -262,8 +368,89 @@ export default defineComponent({
|
||||
.login_footer_item_text:last-child{
|
||||
margin-bottom: 0rem;
|
||||
}
|
||||
.payMethod_payAffirm_clause{
|
||||
label{
|
||||
cursor: pointer;
|
||||
input{
|
||||
margin-right: 1rem;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span{
|
||||
vertical-align: top;
|
||||
a{
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.animation{
|
||||
animation: shake .3s linear;
|
||||
@keyframes shake {
|
||||
0%{
|
||||
transform: translateX(0px);
|
||||
}
|
||||
25%{
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
50%{
|
||||
transform: translateX(10px);
|
||||
}
|
||||
75%{
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
100%{
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mark_loading{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
.mark_loading_title{
|
||||
font-size: 3rem;
|
||||
// text-decoration: underline;
|
||||
font-weight: 600;
|
||||
margin-bottom: 2rem;
|
||||
// color: #fff;
|
||||
}
|
||||
.mark_loading_intro{
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
width: 80%;
|
||||
}
|
||||
.mark_loading_title_box{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mark_loading_btn,.mark_loading_btn2{
|
||||
// border: #000;
|
||||
// color: #fff;
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
border: 2px solid;
|
||||
padding: 0 20px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
padding: .3rem 4rem;
|
||||
background: #39215b;
|
||||
color: #fff;
|
||||
border: none;
|
||||
margin: 0 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
.mark_loading_btn2{
|
||||
border: 2px solid #000;
|
||||
color: #000;
|
||||
background: rgba(0,0,0,0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user