aida_front/src/component/HomePage/renew.vue

<template>
  <div class="renew" ref="renew"></div>
  <a-modal
    class="generalModel"
    :get-container="() => $refs.renew"
    v-model:visible="renewModel"
    :footer="null"
    width="110rem"
    height="auto"
    :maskClosable="false"
    :centered="true"
    :closable="false"
    :mask="renewModelMask"
    :keyboard="false"
    :destroyOnClose="true"
    :zIndex="1000"
  >
    <div class="generalModel_btn">
      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
        <!-- <i class="fi fi-rr-cross-small"></i> -->
        <svg
          width="46"
          height="46"
          viewBox="0 0 46 46"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
          <rect
            x="32.5063"
            y="12"
            width="3"
            height="29"
            rx="1.5"
            transform="rotate(45 32.5063 12)"
            fill="white"
          />
          <rect
            x="34.6274"
            y="32.5059"
            width="3"
            height="29"
            rx="1.5"
            transform="rotate(135 34.6274 32.5059)"
            fill="white"
          />
        </svg>
      </div>
    </div>
    <div class="renewContent">
      <div class="left">
		<div class="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="content">
          <div class="benefitsItem">
            <div class="describe">
              <div class="icon">
				<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="info">
					{{ $t("Renew.StrengthsInfo1") }}<br>{{ $t("Renew.StrengthsInfo1_1") }}
                </p>
              </div>
            </div>
          </div>
          <div class="benefitsItem">
            <div class="describe">
              <div class="icon">
				<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="info">
					{{ $t("Renew.StrengthsInfo2") }}<br>{{ $t("Renew.StrengthsInfo2_1") }}
                </p>
              </div>
            </div>
          </div>
          <div class="benefitsItem">
            <div class="describe">
              <div class="icon">
				<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="info">
					{{ $t("Renew.StrengthsInfo3") }}<br>{{ $t("Renew.StrengthsInfo3_1") }}<br>{{ $t("Renew.StrengthsInfo3_2") }}
                </p>
              </div>
            </div>
          </div>
          <div class="benefitsItem">
            <div class="describe">
              <div class="icon">
				<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="info">
					{{ $t("Renew.StrengthsInfo4") }}<br>{{ $t("Renew.StrengthsInfo4_1") }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title">
          {{ $t("Renew.title") }}
        </div>
        <!-- <div class="info">{{ $t("Renew.unlimited") }}</div> -->
        <div class="content">
          <div
            class="productItem"
            :class="{
              active: item.price == current.price,
              sellWell: item.sellWell,
            }"
            v-for="item in personage"
            :key="item.price"
            @click="setPromotionData(item)"
          >
            <div class="popular" v-show="item.sellWell">MOST POPULAR</div>
            <div class="priceBox">
              <div class="left">
                <p class="productType">1 {{ item.type.label }}</p>
                <p class="price">${{ item.price }}</p>
              </div>
              <div class="right">
                <div class="promotion">
                  <div
                    class="succeed"
                    v-show="item.promotionData.error == 'true'"
                  >
                    {{ item.promotionData.code }}
                    <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'
                    "
                  >
                    <input
                      type="text"
                      :placeholder="$t('Renew.promotionCode')"
                      v-model="item.promotionData.code"
                    />
                    <div style="cursor: pointer" @click="examine(item)">
                      {{ $t("Renew.use") }}
                    </div>
                  </div>
                  <div
                    class="error"
                    v-show="item.promotionData.error == 'false'"
                  >
                    {{ item.promotionData.str }}
                  </div>
                </div>
                <p
                  class="discountsPrice"
                  v-show="item.promotionData.price"
                  style="text-align: center"
                >
                  ${{ item.promotionData.price }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="payment">
          <div class="allocation">
            <div class="selectType">
              <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>
          <div class="gallery_btn gallery_btn_radius" @click="payment">
                {{ $t("upgradePlan.Continue") }}
          </div>
          <div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
            <label>
              <!-- <input type="checkbox" v-model="clause" /> -->
              <span class="generalModelDescription"
                >{{ $t("upgradePlan.policy")}}
				<a
                  href="https://code-create.com.hk/aida-terms-and-conditions/"
                  target="_blank">
				  {{ $t("upgradePlan.policy1") }}
				</a>
				&
				<a
                  href="https://code-create.com.hk/aida-subscription-agreement/"
                  target="_blank">
				  {{ $t("upgradePlan.policy2") }}
				</a>
				<!-- . * -->
				</span
              >
            </label>
			<label class="secure">
				<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="">
			</label>
          </div>
          <!-- <div class="paySecure">
						<svg data-v-4715f595="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17" class="shield-icon"><path fill="#4AA181" stroke="#4AA181" stroke-width=".395" d="M7.44.957 1.914 3.398a1.38 1.38 0 0 0-.822 1.256v3.69c0 1.648.443 3.257 1.218 4.667 1.577 2.154 3.835 3.222 5.986 3.222 2.152 0 4.206-1.069 5.387-3.21a9.7 9.7 0 0 0 1.225-4.679v-3.69a1.38 1.38 0 0 0-.822-1.256L8.56.957zm0 0h.001m-.001 0h.001m0 0c.351-.158.758-.159 1.119 0z"></path><g clip-path="url(#a)"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.184" d="M10.634 6.563 7.016 10.18 5.37 8.536"></path></g><defs><clipPath id="a"><path fill="#fff" d="M4.055 4.586h7.895v7.895H4.055z"></path></clipPath></defs></svg>
						<span>Pay safe & secure </span>
					</div> -->
        </div>
      </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>

<script lang="ts">
import { defineComponent, computed, reactive, toRefs, onMounted } 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,
  },
  setup() {
    const store = useStore();
    const { t } = useI18n();
    let renew = reactive({
      renewModel: false,
      renewModelMask: true,
      pageWidth: "50%",
    });
    let payMethodData = reactive({
      clause: false,
      labelDisclaimer: null as any,
      newWindow: null as any,
      isShowMark: false,
      isShowMark_: false,
    });
    let renewData = reactive({
      personage: [
        {
          price: "500",
          sellWell: true,
          activity: false, //活动打折
          type: {
            value: "Month",
            label: "Monthly",
          },
          PaymentType: "CreditCard",
          promotionData: {
            code: "",
            error: "",
            str: "",
            price: "",
          },
        },
        {
          price: "5,000",
          sellWell: false,
          activity: false, //活动打折
          typeValue: "year",
          type: {
            value: "Year",
            label: "Yearly",
          },
          PaymentType: "",
          promotionData: {
            code: "",
            error: "",
            str: "",
            price: "",
          },
        },
      ],
      // personage:computed(()=>{
      //     return {
      // 		title:t('Renew.PersonalVersion'),
      // 		price:{
      // 			monthly:'500',
      // 			year:'5,000',
      // 		},
      // 		unit:{
      // 			monthly:t('Renew.HKDMonth'),
      // 			year:t('Renew.HKDYear'),
      // 		},
      // 		type:'monthly',
      // 		PaymentType:'',
      // 		typeList:['monthly','year'],
      // 		info:'Tax, VAT not included.',
      // 	}
      // }),
      firm: computed(() => {
        return {
          title: "Education Edition",
          price: {
            year: "500",
          },
          unit: {
            year: "HKD / Year",
          },
          type: "year",
          autoRenewal: {
            text: t("Renew.automatically"),
            value: true,
          },
          typeList: ["year"],
          info: "Customised plan",
        };
      }),
      education: computed(() => {
        return {
          title: "Enterprise Edition",
          price: {
            year: "500",
          },
          unit: {
            year: "HKD / Year",
          },
          type: "year",
          autoRenewal: {
            text: t("Renew.automatically"),
            value: true,
          },
          typeList: ["year"],
          info: "Customised plan",
        };
      }),
      current: {} as any,
      payMethod: null as any,
    });
    const init = () => {
      renew.renewModel = true;
      renewData.current = renewData.personage[0];
    };
    const cancelDsign = () => {
      renew.renewModel = false;
    };
    const setPaymentType = (str: any) => {
      renewData.current.PaymentType = str;
    };
    const payment = () => {
    //   if (!payMethodData.clause) {
    //     let labelDisclaimer: any = payMethodData.labelDisclaimer;
    //     if (!labelDisclaimer.classList.contains("animation")) {
    //       labelDisclaimer.classList.add("animation");
    //       setTimeout(() => {
    //         labelDisclaimer.classList.remove("animation");
    //       }, 1000);
    //     }
    //     return;
    //   }
      if (!renewData.current.PaymentType)
        return message.info(t("Renew.PleaseSelectPayment"));
      let url = window.location.origin + "/paySucceed";
      let data = {
        autoRenewal: renewData.current.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;
      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();
    };
    const examine = (item: any) => {
      // renewData.promotionData.error
      let price = item?.price;
      const normalNumber = Number(price.replace(/,/g, ""));
      if (!item.promotionData.code) {
        return;
      }
      let data = {
        promotionCode: item.promotionData.code,
        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();
                } else {
                  item.promotionData.error = "false";
                  item.promotionData.str = rv.message;
                }
              }
            });
          } else {
          }
        }
      );
    };
    const clearPromotionCode = () => {
      renewData.current.promotionData.error = "";
      renewData.current.promotionData.code = "";
      renewData.current.promotionData.price = "";
    };
    const setPromotionData = (item: any) => {
      renewData.current = item;
    };
    return {
      store,
      ...toRefs(renew),
      ...toRefs(renewData),
      ...toRefs(payMethodData),
      init,
      cancelDsign,
      setPaymentType,
      payment,
      setPaidBack,
      completePayment,
      examine,
      clearPromotionCode,
      setPromotionData,
    };
  },
  data() {
    return {};
  },
  methods: {
    turnToWindow(url: any) {
      window.open(url);
    },
  },
});
</script>
<style lang="less" scoped>
.renew {
  :deep(.ant-modal-body) {
    padding: 0;
  }
  .renewContent {
    display: flex;
    border-radius: 3rem;
    overflow: hidden;
    > .left,
    > .right {
      > .title {
        text-align: center;
        font-size: 3.2rem;
        font-weight: 600;
        line-height: 4rem;
		position: relative;
      }
      > .info {
        text-align: center;
        opacity: 0.6;
        font-weight: 400;
        margin-top: 0.8rem;
        font-size: 1.6rem;
		position: relative;
      }
      > .content {
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
		position: relative;
      }
    }
    > .left {
      width: 50%;
      background: #0f0f0f;
      color: #fff;
      padding: 4rem 3.2rem;
	  position: relative;
	  > .video{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		> video{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		> .mask{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: rgba(0,0,0,.5);
		}
	  }
	 
      > .title {
        opacity: 1;
		// color: #fff;	
      }
      > .content {
		flex-wrap: wrap;
		flex-direction: row;
        > .benefitsItem {
          display: flex;
		  width: 50%;
        }
      
        > .benefitsItem {
          border-radius: 2.4rem;
          margin-bottom: 1.6rem;
          padding: 1.6rem;
		justify-content: center;
          > .describe {
            display: flex;
            align-items: center;
			flex-direction: column;
            > .icon {
            //   border: 1px solid #27272a;
            //   background: linear-gradient(#1d1d1d, #000);
            //   border-radius: 1.4rem;
            //   margin-right: 1.6rem;
            //   padding: 1.4rem;
              > img {
                width: 12rem;
                height: 12rem;
              }
            }
            > .text {
				text-align: center;
              > p {
                margin: 0;
              }
              > .title {
                font-size: 2.1rem;
                font-weight: 600;
				line-height: 1;
              }
              > .info {
                font-weight: 600;
                margin-top: 0.4rem;
                font-size: 1.2rem;
                // opacity: 0.5;
              }
            }
          }
        }
      }
    }
    > .right {
      width: 50%;
      flex-direction: column;
      align-items: center;
      padding: 4rem 3.2rem;
      > .content {
        margin-top: 2rem;
        > .productItem {
          margin-bottom: 1rem;
          border-radius: 1rem;
          overflow: hidden;
          border: 2px solid #eaecf0;

          > .popular {
            background: #2d9f75;
            font-weight: 600;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            padding: 0.8rem 1.2rem;
          }
          > .priceBox {
            height: 11rem;
            padding: 1rem 1.2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            > .left,
            > .right {
              p {
                margin: 0;
              }
              > .discountsPrice,
              > .price {
                font-size: 1.8rem;
                margin-top: 0.4rem;
                opacity: 0.4;
                font-weight: 500;
              }
            }
            > .left {
              > p:nth-child(1) {
                font-size: 2rem;
                opacity: 0.7;
                font-weight: 700;
              }
            }
            > .right {
              > .promotion {
                display: flex;
                align-items: center;
                flex-direction: column;
                > .text {
                  font-size: 1.4rem;
                  font-weight: 600;
                  margin-right: 2rem;
                }
                > .succeed {
                  padding: 1rem;
                  display: flex;
                  align-items: center;
                  border-radius: 1rem;
                  background: #eee;
                  // color: #fff;
                  // font-weight: 600;
                  > i {
                    display: flex;
                    margin-left: 1rem;
                    cursor: pointer;
                  }
                }
                > .input {
                  display: flex;
                  align-items: center;
                  border-radius: 2rem;
                  border: 2px solid #000;
                  overflow: hidden;
                  padding: 0 1rem;
                  input {
                    border: none;
                    height: 3rem;
                    width: 10rem;
                    font-size: 1.2rem;
                    background: rgba(0, 0, 0, 0);
                  }
                }
                > .error {
                  color: red;
                  text-align: center;
                  font-size: 1.2rem;
                }
              }
              > .discountsPrice {
                font-weight: 600;
                color: red;
              }
            }
          }
          &.active {
            background: #0ea98233;
            border: 2px solid #0ea982;
            > .priceBox {
              > .left {
                > p:nth-child(1) {
                  opacity: 1;
                }
              }
              > .right {
                > .discountsPrice {
                  opacity: 1;
                }
              }
            }
          }
          &.sellWell {
            border: 2px solid #0ea982;
          }
        }
        > .productItem:last-child {
          margin-bottom: 2rem;
        }
      }
      > .payment {
        margin-top: auto;
        > .allocation {
          // border-radius: 1rem;
          // border: 2px solid #eaecf0;
          // padding: 1rem 1.2rem;

          > .selectType {
            display: flex;
            > .text {
              font-size: 1.4rem;
              font-weight: 600;
              margin-right: 2rem;
            }
            label {
              margin-right: 1rem;
              display: flex;
              cursor: pointer;
              input {
                margin-right: 0.5rem;
              }
            }
          }
        }

        > .gallery_btn {
          width: 100%;
          margin: 2rem 0;
		  margin-bottom: .5rem;
          margin-top: 1rem;
        }
        > .payMethod_payAffirm_clause {
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
          label {
            input {
              margin-right: 1rem;
              cursor: pointer;
              vertical-align: middle;
            }
            span {
              vertical-align: top;
              font-size: 1.4rem;
              a {
                color: #000;
                text-decoration: underline;
              }
            }
          }
		  > .secure{
			border: 1px solid #ededed;
			background: #f1fbf9;
			color: #1cb36c;
			padding: .4rem .8rem;
			border-radius: .5rem;
			margin-top: 4rem;
			> span{
				display: flex;
				align-items: center;
			}
			i{
				display: flex;
				margin-right: .5rem;
			}
		  }
		  > .payIcon{
			height: 2rem;
			margin-top: 1rem;
			img{
				margin: 0 .3rem;
				height: 100%;
			}
		  }
          &.animation {
            animation: shake 0.3s linear;
            @keyframes shake {
              0% {
                transform: translateX(0px);
              }
              25% {
                transform: translateX(-10px);
              }
              50% {
                transform: translateX(10px);
              }
              75% {
                transform: translateX(-10px);
              }
              100% {
                transform: translateX(0px);
              }
            }
          }
        }
        // > .paySecure{
        // 	display: flex;
        // 	margin-top: 1rem;
        // 	> svg{
        // 		width: 1.6rem;
        // 		height: 1.6rem;
        // 	}
        // 	> span{
        // 		font-weight: 600;
        // 		font-size: 1.4rem;
        // 	}
        // }
      }
    }
    // .login_footer_item_text{
    // 	text-align: center;
    // 	margin-bottom: 1.5rem;
    // 	text-decoration: underline;
    // }
    // .login_footer_item_text:last-child{
    // 	margin-bottom: 0rem;
    // }
  }
  .mark_loading {
    position: absolute;
    z-index: 2;
    background: #fff;
    border-radius: 3rem;
    .mark_loading_title {
      font-size: 3rem;
      // text-decoration: underline;
      font-weight: 600;
      margin-bottom: 2rem;
      overflow: hidden;
      // 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: 0.3rem 4rem;
      background: #000;
      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>