diff --git a/src/component/HomePage/renew.vue b/src/component/HomePage/renew.vue index 9c27a4d8..b1d6cc32 100644 --- a/src/component/HomePage/renew.vue +++ b/src/component/HomePage/renew.vue @@ -31,11 +31,11 @@ {{ $t('Renew.title') }}
-
{{ current.title }}
+
{{ current?.title }}
$ - {{ current.price[current.type] }} {{ current.unit[current.type] }} + {{ current?.price[current?.type] }} {{ current?.unit[current?.type] }}
-
{{ current.info }}
+
+
{{ $t('Renew.Payment') }}:
+ + +
+ +
{{ current?.info }}
+
+ +
{{ $t('Renew.SubscribeNow') }}
@@ -68,6 +91,17 @@ Privacy Policy +
+ +
+
+
{{ $t('upgradePlan.completed') }}
+
{{ $t('upgradePlan.hint') }}
+
+
{{ $t('upgradePlan.Back') }}
+
OK
+
+
@@ -78,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: { @@ -91,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 { @@ -104,6 +146,7 @@ export default defineComponent({ year:t('Renew.HKDYear'), }, type:'monthly', + PaymentType:'', typeList:['monthly','year'], info:'Tax, VAT not included.', } @@ -151,24 +194,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: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() { @@ -194,7 +298,8 @@ export default defineComponent({ } .renew_detail{ width: 58rem; - height: 53rem; + height: 60rem; + // height: 53rem; border-radius: 3rem; margin-bottom: 5rem; border: 2px solid #000; @@ -221,6 +326,11 @@ export default defineComponent({ } .type{ display: flex; + > .text{ + margin-right: 2rem; + // font-weight: 600; + } + label{ display: flex; align-items: center; @@ -229,6 +339,14 @@ export default defineComponent({ margin-right: 1rem; } } + &.payment{ + label{ + margin-right: 1rem; + input{ + margin-right: .5rem; + } + } + } label:last-child{ margin-right: 0rem; } @@ -242,8 +360,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 3eaeead5..da460b27 100644 --- a/src/component/Pay/payMethod.vue +++ b/src/component/Pay/payMethod.vue @@ -39,7 +39,7 @@