aida_front/src/component/Pay/payMethod.vue

<template>
  <div class="payMethod" ref="payMethod"></div>
  <a-modal
    class="generalModel"
    :get-container="() => $refs.payMethod"
    v-model:visible="payMethodModel"
    :footer="null"
    :width="pageWidth"
    height="auto"
    :maskClosable="false"
    :centered="true"
    :closable="false"
    :mask="payMethodModelMask"
    :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="payMethodContent">
      <div class="generalModelTitle">
        {{ $t("upgradePlan.paymentmethod") }}
      </div>
      <div class="payMethod_list">
        <label class="payMethod_item" v-show="$props.type == 'credits'">
          <input
            name="payAffirm"
            type="radio"
            value="paypal"
            v-model="modeOfPayment"
          />
          <img src="../../assets/images/homePage/paypal.svg" alt="" />
          <span>PayPal</span>
        </label>
        <label class="payMethod_item">
          <input
            name="Stripe"
            type="radio"
            value="stripe"
            v-model="modeOfPayment"
          />
          <img src="../../assets/images/homePage/stripe.svg" alt="" />
          <span
            >Stripe ({{ $t("Renew.CreditCard") }}、{{
              $t("Renew.Alipay")
            }})</span
          >
        </label>
        <label class="payMethod_item" v-show="$props.type == 'credits'">
          <input
            name="payAffirm"
            type="radio"
            value="alipay"
            v-model="modeOfPayment"
          />
          <img src="../../assets/images/homePage/alipay.svg" alt="" />
          <span>{{ $t("upgradePlan.Alipay") }}</span>
          <div v-show="modeOfPayment == 'alipay'" class="payAffirm_detail">
            <label>
              <input
                name="location"
                type="radio"
                value="ALIPAYHK"
                v-model="modeOfPaymentDetail"
              />
              <span>{{ $t("upgradePlan.HongKong") }}</span>
            </label>
            <label>
              <input
                name="location"
                type="radio"
                value="ALIPAYCN"
                v-model="modeOfPaymentDetail"
              />
              <span>{{ $t("upgradePlan.MainlandChina") }}</span>
            </label>
          </div>
        </label>
      </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 class="payMethod_payAffirm_btn">
        <div class="gallery_btn white" @click="cancelDsign">
          {{ $t("upgradePlan.Cancel") }}
        </div>
        <div class="gallery_btn" @click="payAffirm">
          {{ $t("upgradePlan.Payment") }}
        </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>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, onMounted } from "vue";
import { Https } from "@/tool/https";
import { isEmail } from "@/tool/util";
import { message } from "ant-design-vue";
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { setLang } from "@/tool/guide";
import md5 from "md5";
export default defineComponent({
  components: {
    VerificationCodeInput,
  },
  props: {
    type: {
      type: String,
      default: "",
    },
  },
  emits: ["completePayment"],
  setup(prop, { emit }) {
    const store = useStore();
    let payMethod = reactive({
      payMethodModel: false,
      payMethodModelMask: true,
      pageWidth: "50%",
    });
    let payMethodData = reactive({
      modeOfPayment: prop.type == "credits" ? "paypal" : "stripe",
      modeOfPaymentDetail: "ALIPAYHK",
      labelDisclaimer: null, //dom
      payAffirmData: {} as any,
      clause: false,
      newWindow: null as any,
      isShowMark: false,
      isShowMark_: false,
    });
    const init = (data: any) => {
      payMethod.payMethodModel = true;
      payMethodData.payAffirmData = data;
    };
    const cancelDsign = () => {
      payMethod.payMethodModel = false;
    };
    const payAffirm = () => {
      if (!payMethodData.clause) {
        let labelDisclaimer: any = payMethodData.labelDisclaimer;
        if (!labelDisclaimer.classList.contains("animation")) {
          labelDisclaimer.classList.add("animation");
          setTimeout(() => {
            labelDisclaimer.classList.remove("animation");
          }, 1000);
        }
        return;
      }
      payMethodData.isShowMark_ = true;
      let httpsUrl;
      let url = window.location.origin + "/paySucceed";
      let payAffirmData = payMethodData.payAffirmData;
      let data = {
        autoRenewal: payAffirmData.autoRenewal, //false为不自动续费
        productName: payAffirmData.productName,
        quantity: payAffirmData.quantity ? payAffirmData.quantity : 1,
        returnUrl: url,
        subscribeType: payAffirmData.subscribeType
          ? payAffirmData.subscribeType
          : "", //yearly为年费，monthly为月费
        wallet: payMethodData.modeOfPaymentDetail,
      };
      if (payMethodData.modeOfPayment == "paypal") {
        httpsUrl = Https.httpUrls.payPaypal;
      } else if (payMethodData.modeOfPayment == "stripe") {
        httpsUrl = Https.httpUrls.payStripe;
        // data.
      } else {
        httpsUrl = Https.httpUrls.payAlipayHK;
      }
      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;
          if (payMethodData.modeOfPayment == "paypal") {
            // 在新窗口中写入内容
            herf = rv.approve;
            // payMethodData.newWindow.location.href = rv.approve;
          } else if (payMethodData.modeOfPayment == "stripe") {
            herf = rv;
            // payMethodData.newWindow.location.href = rv
          } else {
            let data = JSON.parse(rv);
            herf = `${data.url}?${data.alipay_order_string}`;
            // payMethodData.newWindow.location.href = herf;
          }
          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;
        });
    };
    const setPaidBack = () => {
      payMethod.payMethodModel = false;
      payMethodData.isShowMark = false;
      payMethodData.clause = false;
      payMethodData.modeOfPayment =
        prop.type == "credits" ? "paypal" : "stripe";
      payMethodData.modeOfPaymentDetail = "ALIPAYHK";
    };
    const completePayment = () => {
      setPaidBack();
      emit("completePayment");
    };
    return {
      store,
      ...toRefs(payMethod),
      ...toRefs(payMethodData),
      init,
      cancelDsign,
      payAffirm,
      setPaidBack,
      completePayment,
    };
  },
  data() {
    return {};
  },
  methods: {
    turnToWindow(url: any) {
      window.open(url);
    },
  },
});
</script>
<style lang="less" scoped>
.payMethod {
  .payMethodContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60rem;
    margin: 0 auto;
    position: relative;
    .generalModelTitle,
    .generalModelInfo {
      width: 100%;
    }
    .payMethod_list {
      margin-bottom: 4rem;
      display: flex;
      flex-direction: column;
      width: 100%;
      > label {
        display: flex;
        align-items: center;
        padding: 0 2rem;
        margin-bottom: 3rem;
        cursor: pointer;
        border: 2px solid #efefef;
        border-radius: 2rem;
        height: 8rem;
        width: 100%;
        img {
          margin: 0rem 2rem;
          // max-width: 4rem;
          width: 4rem;
        }
        .payAffirm_detail {
          margin-left: auto;
          display: flex;
          > label {
            cursor: pointer;
            display: flex;
            align-items: center;
            margin-right: 1rem;
            span {
              margin-left: 0.5rem;
            }
          }
        }
      }
      > label:last-child {
        margin: 0;
      }
    }
    .payMethod_payAffirm_clause {
      margin-bottom: 4rem;
      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 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);
          }
        }
      }
    }
    .payMethod_payAffirm_btn {
      display: flex;
      justify-content: space-between;
      width: 100%;
      > div {
        width: 29rem;
      }
    }
  }
  .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: 0.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>