diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue index f91f3631..5b2fee1f 100644 --- a/src/component/HomePage/Generate.vue +++ b/src/component/HomePage/Generate.vue @@ -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( diff --git a/src/component/HomePage/renew.vue b/src/component/HomePage/renew.vue index 69f51f25..3e12d7a7 100644 --- a/src/component/HomePage/renew.vue +++ b/src/component/HomePage/renew.vue @@ -47,13 +47,30 @@ {{ $t('Renew.Yearly') }} -
+
+
{{ $t('Renew.Payment') }}:
+ + +
+
{{ current?.info }}
+
+ +
{{ $t('Renew.SubscribeNow') }}
@@ -74,6 +91,17 @@ Privacy Policy +
+ +
+
+
{{ $t('upgradePlan.completed') }}
+
{{ $t('upgradePlan.hint') }}
+
+
{{ $t('upgradePlan.Back') }}
+
OK
+
+
@@ -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); + } + } } \ No newline at end of file diff --git a/src/component/Pay/payMethod.vue b/src/component/Pay/payMethod.vue index 8c37b453..da460b27 100644 --- a/src/component/Pay/payMethod.vue +++ b/src/component/Pay/payMethod.vue @@ -39,7 +39,7 @@