|
|
@@ -75,7 +75,6 @@ const computeHadList = (productList) => {
|
|
|
if (productList.some(item => set.has(item))) {
|
|
|
hadList.value.push(2)
|
|
|
}
|
|
|
- console.log(productList,hadList.value)
|
|
|
}
|
|
|
|
|
|
// 回到上一级
|
|
|
@@ -473,8 +472,7 @@ onUnmounted(() => {
|
|
|
<template>
|
|
|
<div class="min-h-100vh bg-[#E7EAEE] py-48px px-120px">
|
|
|
<div class="font-700 text-28px leading-40px text-[#232A40]">Add Products</div>
|
|
|
- <div @click="goBack"
|
|
|
- class="mt-16px items-center text-[#1460F3] cursor-pointer pb-16px inline-flex">
|
|
|
+ <div @click="goBack" class="mt-16px items-center text-[#1460F3] cursor-pointer pb-16px inline-flex">
|
|
|
<Arrow class="mr-6px" />
|
|
|
Back
|
|
|
</div>
|
|
|
@@ -600,97 +598,106 @@ onUnmounted(() => {
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="w-[40%] max-w-500px">
|
|
|
- <div class="font-700 text-16px leading-20px text-[#232A40]">You’re Adding</div>
|
|
|
- <div class="card w-500px rounded-8px p-40px bg-[#fff] mt-12px">
|
|
|
- <div class="flex justify-between">
|
|
|
- <div>
|
|
|
- <div class="font-700 text-14px leading-20px text-[#232A40]">
|
|
|
- Authorized Devices
|
|
|
- </div>
|
|
|
- <div class="recommend-icon text-14px leading-20px text-[#808185] cursor-pointer">
|
|
|
- <span v-show="commodityInfo.next_number">
|
|
|
- Authorize another <span class="text-[#232A40]">{{ commodityInfo.next_number }} device</span> to upgrade
|
|
|
- to
|
|
|
- <span class="text-[#232A40]">{{ commodityInfo.next_discount }} OFF</span>
|
|
|
- </span>
|
|
|
- <span v-show="!commodityInfo.next_number">
|
|
|
- <a href="mailto:support@pdfreaderpro.com" class="text-[#1460F3] hover:underline">Contact us</a> for a
|
|
|
- higher discount.
|
|
|
- </span>
|
|
|
- <Info class="ml-8px inline-block mb-4px" />
|
|
|
- <div class="tip">
|
|
|
- You have currently authorized {{ commodityInfo.purchase_quantity }} devices
|
|
|
- <div>Authorize 2 devices cumulatively: 15% OFF</div>
|
|
|
- <div>Authorize 5 devices cumulatively: 25% OFF</div>
|
|
|
- <div>Authorize 10 devices cumulatively: 30% OFF</div>
|
|
|
- <div>Authorize 30 devices cumulatively: 35% OFF</div>
|
|
|
- <div>Authorize 100 devices cumulatively:: 45% OFF</div>
|
|
|
+ <div class="sticky top-20px z-100 bg-[#E7EAEE] w-500px rounded-8px">
|
|
|
+ <div class="font-700 text-16px leading-20px text-[#232A40]">You’re Adding</div>
|
|
|
+ <div class="card w-500px rounded-8px p-40px bg-[#fff] mt-12px">
|
|
|
+ <div class="flex justify-between">
|
|
|
+ <div>
|
|
|
+ <div class="font-700 text-14px leading-20px text-[#232A40]">
|
|
|
+ Authorized Devices
|
|
|
+ </div>
|
|
|
+ <div class="recommend-icon text-14px leading-20px text-[#808185] cursor-pointer">
|
|
|
+ <span v-show="commodityInfo.next_number">
|
|
|
+ Authorize another <span class="text-[#232A40]">{{ commodityInfo.next_number }} device</span> to
|
|
|
+ upgrade
|
|
|
+ to
|
|
|
+ <span class="text-[#232A40]">{{ commodityInfo.next_discount }} OFF</span>
|
|
|
+ </span>
|
|
|
+ <span v-show="!commodityInfo.next_number">
|
|
|
+ <a href="mailto:support@pdfreaderpro.com" class="text-[#1460F3] hover:underline">Contact us</a> for a
|
|
|
+ higher discount.
|
|
|
+ </span>
|
|
|
+ <Info class="ml-8px inline-block mb-4px" />
|
|
|
+ <div class="tip">
|
|
|
+ You have currently authorized {{ commodityInfo.purchase_quantity }} devices
|
|
|
+ <div>Authorize 2 devices cumulatively: 15% OFF</div>
|
|
|
+ <div>Authorize 5 devices cumulatively: 25% OFF</div>
|
|
|
+ <div>Authorize 10 devices cumulatively: 30% OFF</div>
|
|
|
+ <div>Authorize 30 devices cumulatively: 35% OFF</div>
|
|
|
+ <div>Authorize 100 devices cumulatively:: 45% OFF</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="font-700 text-16px leading-20px text-[#232A40]">
|
|
|
+ {{ allShoppingNum }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="font-700 text-16px leading-20px text-[#232A40]">
|
|
|
- {{ allShoppingNum }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="flex justify-between mt-12px">
|
|
|
- <div class="text-14px font-700 leading-20px text-[#232A40]">Discount</div>
|
|
|
- <div class="text-16px leading-20px font-700 text-[#FF5054]"><span
|
|
|
- v-show="useTeamDiscount !== commodityInfo.discount">Upgrade to</span> {{ commodityInfo.discount }} OFF
|
|
|
+ <div class="flex justify-between mt-12px">
|
|
|
+ <div class="text-14px font-700 leading-20px text-[#232A40]">Discount</div>
|
|
|
+ <div class="text-16px leading-20px font-700 text-[#FF5054]"><span
|
|
|
+ v-show="useTeamDiscount !== commodityInfo.discount">Upgrade to</span> {{ commodityInfo.discount }} OFF
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="flex justify-between mt-12px items-center">
|
|
|
- <div class="text-14px font-700 leading-20px text-[#232A40]">Total Price</div>
|
|
|
- <!-- 数据没回来之前不展示 -->
|
|
|
- <template v-if="combinedList.length === 0">
|
|
|
- <div v-show="payMethod === 'paypal' || payMethod === 'paddle'"
|
|
|
- class="text-28px leading-40px font-700 text-[#232A40]">$0</div>
|
|
|
- <div v-show="payMethod === 'wxpay' || payMethod === 'alipay'"
|
|
|
- class="text-28px leading-40px font-700 text-[#232A40]">￥0</div>
|
|
|
- </template>
|
|
|
- <template v-else-if="commodityInfo.discount_price">
|
|
|
- <div v-show="payMethod === 'paypal' || payMethod === 'paddle'"
|
|
|
- class="text-28px leading-40px font-700 text-[#232A40]">${{ commodityInfo.discount_price }}</div>
|
|
|
- <div v-show="payMethod === 'wxpay' || payMethod === 'alipay'"
|
|
|
- class="text-28px leading-40px font-700 text-[#232A40]">￥{{ commodityInfo.discount_cny_price }}</div>
|
|
|
- </template>
|
|
|
- <div v-else class="h-40px"></div>
|
|
|
- </div>
|
|
|
- <div class="method-container">
|
|
|
- <div class="paypal-btn pay-btn" :class="{ active: payMethod === 'paypal' }" @click="payMethod = 'paypal'">
|
|
|
- <img loading="lazy" src="@/assets/images/store/order_box.png" alt="select pic">
|
|
|
+ <div class="flex justify-between mt-12px items-center">
|
|
|
+ <div class="text-14px font-700 leading-20px text-[#232A40]">Total Price</div>
|
|
|
+ <!-- 数据没回来之前不展示 -->
|
|
|
+ <template v-if="combinedList.length === 0">
|
|
|
+ <div v-show="payMethod === 'paypal' || payMethod === 'paddle'"
|
|
|
+ class="text-28px leading-40px font-700 text-[#232A40]">$0</div>
|
|
|
+ <div v-show="payMethod === 'wxpay' || payMethod === 'alipay'"
|
|
|
+ class="text-28px leading-40px font-700 text-[#232A40]">￥0</div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="commodityInfo.discount_price">
|
|
|
+ <div v-show="payMethod === 'paypal' || payMethod === 'paddle'"
|
|
|
+ class="text-28px leading-40px font-700 text-[#232A40]">
|
|
|
+ <span class="text-16px font-400 text-[#808185] line-through">${{ commodityInfo.price }}</span>
|
|
|
+ ${{ commodityInfo.discount_price }}
|
|
|
+ </div>
|
|
|
+ <div v-show="payMethod === 'wxpay' || payMethod === 'alipay'"
|
|
|
+ class="text-28px leading-40px font-700 text-[#232A40]">
|
|
|
+ <span class="text-16px font-400 text-[#808185] line-through">￥{{ commodityInfo.cny_price }}</span>
|
|
|
+ ￥{{ commodityInfo.discount_cny_price }}</div>
|
|
|
+ </template>
|
|
|
+ <div v-else class="h-40px"></div>
|
|
|
</div>
|
|
|
- <div v-if="paddleShow" class="card-btn pay-btn" :class="{ active: payMethod === 'paddle' }"
|
|
|
- @click="payMethod = 'paddle'">
|
|
|
- <img loading="lazy" src="@/assets/images/store/order_box.png" alt="select pic">
|
|
|
+ <div class="method-container">
|
|
|
+ <div class="paypal-btn pay-btn" :class="{ active: payMethod === 'paypal' }" @click="payMethod = 'paypal'">
|
|
|
+ <img loading="lazy" src="@/assets/images/store/order_box.png" alt="select pic">
|
|
|
+ </div>
|
|
|
+ <div v-if="paddleShow" class="card-btn pay-btn" :class="{ active: payMethod === 'paddle' }"
|
|
|
+ @click="payMethod = 'paddle'">
|
|
|
+ <img loading="lazy" src="@/assets/images/store/order_box.png" alt="select pic">
|
|
|
+ </div>
|
|
|
+ <div class="wxpay-btn pay-btn pay-btn-cny" :class="{ active: payMethod === 'wxpay' }"
|
|
|
+ @click="payMethod = 'wxpay'">
|
|
|
+ <img loading="lazy" src="@/assets/images/store/order_box.png" alt="select pic">
|
|
|
+ </div>
|
|
|
+ <div class="ali-btn pay-btn pay-btn-cny" :class="{ active: payMethod === 'alipay' }"
|
|
|
+ @click="payMethod = 'alipay'">
|
|
|
+ <img loading="lazy" src="@/assets/images/store/order_box.png" alt="select pic">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="wxpay-btn pay-btn pay-btn-cny" :class="{ active: payMethod === 'wxpay' }"
|
|
|
- @click="payMethod = 'wxpay'">
|
|
|
- <img loading="lazy" src="@/assets/images/store/order_box.png" alt="select pic">
|
|
|
+ <div v-if="payMethod === 'paddle'" class="info-message flex justify-center items-center mt-16px">
|
|
|
+ <select v-model="countryCode" name="countryCode"
|
|
|
+ class="w-[60%] border-1 border-[#E2E3E5] leading-40px h-40px">
|
|
|
+ <option disabled value>Select a country</option>
|
|
|
+ <option v-for="(item, index) in CountryOption" :key="index" :value="item.code">{{ item.name }}
|
|
|
+ </option>
|
|
|
+ </select>
|
|
|
+ <input v-model.trim="postCode" type="text" name="Postcode" placeholder="Postcode"
|
|
|
+ class="border-1 border-[#E2E3E5] ml-12px rounded-4px leading-40px px-8px text-[#888C94]">
|
|
|
</div>
|
|
|
- <div class="ali-btn pay-btn pay-btn-cny" :class="{ active: payMethod === 'alipay' }"
|
|
|
- @click="payMethod = 'alipay'">
|
|
|
- <img loading="lazy" src="@/assets/images/store/order_box.png" alt="select pic">
|
|
|
+ <div v-if="payMethod !== 'paypal'"
|
|
|
+ class="mt-16px cursor-pointer leading-48px text-center bg-[#0097ff] rounded-8px text-16px font-700 text-[#fff] hover:bg-[#1460F3]"
|
|
|
+ @click="payNow">Continue to Checkout</div>
|
|
|
+ <button v-show="!paypalLoading && payMethod === 'paypal'" id="paypal-button"
|
|
|
+ class="w-[100%] mt-24px"></button>
|
|
|
+ <div v-if="paypalLoading && payMethod === 'paypal'" class="load-container">
|
|
|
+ <svg class="load" x="0px" y="0px" viewBox="0 0 150 150">
|
|
|
+ <circle id="loading-inner" cx="75" cy="75" r="50" />
|
|
|
+ </svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="payMethod === 'paddle'" class="info-message flex justify-center items-center mt-16px">
|
|
|
- <select v-model="countryCode" name="countryCode"
|
|
|
- class="w-[60%] border-1 border-[#E2E3E5] leading-40px h-40px">
|
|
|
- <option disabled value>Select a country</option>
|
|
|
- <option v-for="(item, index) in CountryOption" :key="index" :value="item.code">{{ item.name }}
|
|
|
- </option>
|
|
|
- </select>
|
|
|
- <input v-model.trim="postCode" type="text" name="Postcode" placeholder="Postcode"
|
|
|
- class="border-1 border-[#E2E3E5] ml-12px rounded-4px leading-40px px-8px text-[#888C94]">
|
|
|
- </div>
|
|
|
- <div v-if="payMethod !== 'paypal'"
|
|
|
- class="mt-16px cursor-pointer leading-48px text-center bg-[#0097ff] rounded-8px text-16px font-700 text-[#fff] hover:bg-[#1460F3]"
|
|
|
- @click="payNow">Continue to Checkout</div>
|
|
|
- <button v-show="!paypalLoading && payMethod === 'paypal'" id="paypal-button" class="w-[100%] mt-24px"></button>
|
|
|
- <div v-if="paypalLoading && payMethod === 'paypal'" class="load-container">
|
|
|
- <svg class="load" x="0px" y="0px" viewBox="0 0 150 150">
|
|
|
- <circle id="loading-inner" cx="75" cy="75" r="50" />
|
|
|
- </svg>
|
|
|
- </div>
|
|
|
</div>
|
|
|
<div class="card w-500px rounded-8px bg-[#fff] mt-12px">
|
|
|
<div v-for="item in combinedList" :key="item.id" class="list p-40px relative">
|
|
|
@@ -714,6 +721,22 @@ onUnmounted(() => {
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 支付弹窗 -->
|
|
|
+ <div v-show="wxpayShow" class="wxpay-container">
|
|
|
+ <div class="wxpay-content">
|
|
|
+ <span class="wx-close" @click="closeWXpayShow"></span>
|
|
|
+ <div class="title">{{ payMethod === 'wxpay' ? 'Wechat Pay' : 'Alipay' }}</div>
|
|
|
+ <span class="img-container">
|
|
|
+ <template v-if="loading">
|
|
|
+ <img loading="lazy" class="loading" src="@/assets/images/store/loading.gif" alt="loading icon">
|
|
|
+ <div class="loading">Loading ...</div>
|
|
|
+ </template>
|
|
|
+ <img v-else loading="lazy" class="qrcode" :src="qrcode" alt="QR code">
|
|
|
+ </span>
|
|
|
+ <p class="note">{{ payMethod === 'wxpay' ? 'Please scan QR Code with Wechat' : 'Please scan QR Code with Alipay'
|
|
|
+ }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -959,5 +982,97 @@ onUnmounted(() => {
|
|
|
.list+.list {
|
|
|
border-top: 1px solid #0000001A;
|
|
|
}
|
|
|
+
|
|
|
+// wechatpay
|
|
|
+.wxpay-container {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 1800;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+
|
|
|
+ .wxpay-content {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ padding-bottom: 50px;
|
|
|
+ background-color: #fff;
|
|
|
+ width: 334px;
|
|
|
+ border-radius: 7px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ padding-top: 42px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-container {
|
|
|
+ display: inline-block;
|
|
|
+ width: 244px;
|
|
|
+ height: 244px;
|
|
|
+
|
|
|
+ img.loading {
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 110px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ div.loading {
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .qrcode {
|
|
|
+ width: 244px;
|
|
|
+ height: 244px;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .note {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mess {
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(153, 153, 153, 1);
|
|
|
+ line-height: 22px;
|
|
|
+
|
|
|
+ a {
|
|
|
+ color: #3285E3;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .wx-close {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ background: url('@/assets/images/store/ic_close.png') no-repeat;
|
|
|
+ background-size: 14px 14px;
|
|
|
+ opacity: 0.5;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
|
