|
@@ -46,6 +46,7 @@ const codeMap = [
|
|
|
}
|
|
|
]
|
|
|
const combinedList = ref([])
|
|
|
+// 计算购物车商品信息
|
|
|
const computeList = (productList) => {
|
|
|
combinedList.value = productList.map(product => {
|
|
|
const match = codeMap.find(item => item.code === product.code)
|
|
@@ -60,6 +61,22 @@ const computeList = (productList) => {
|
|
|
return null
|
|
|
}).filter(item => item !== null)
|
|
|
}
|
|
|
+const hadList = ref([])
|
|
|
+// 计算已有商品
|
|
|
+const computeHadList = (productList) => {
|
|
|
+ if (productList.includes('com.brother.pdftecheditor')) {
|
|
|
+ hadList.value.push(0)
|
|
|
+ }
|
|
|
+ if (productList.includes('com.brother.pdfreaderpro.cross.platform.product_3')) {
|
|
|
+ hadList.value.push(1)
|
|
|
+ }
|
|
|
+ const arr = ['com.brother.pdfreaderpro.mac.product_3', 'com.brother.pdfreaderpro.mac.product_1', 'com.brother.pdfreaderpro.windows.product_3', 'com.brother.pdfreaderpro.windows.product_1']
|
|
|
+ const set = new Set(arr)
|
|
|
+ if (productList.some(item => set.has(item))) {
|
|
|
+ hadList.value.push(2)
|
|
|
+ }
|
|
|
+ console.log(productList,hadList.value)
|
|
|
+}
|
|
|
|
|
|
// 回到上一级
|
|
|
const goBack = () => {
|
|
@@ -106,7 +123,11 @@ let useTeamDiscount = computed(() => {
|
|
|
let allShoppingNum = computed(() => {
|
|
|
let addNum = 0
|
|
|
combinedList.value.forEach(item => {
|
|
|
- addNum = addNum + item.number
|
|
|
+ if (item.code === 'com.brother.pdfreaderpro.cross.platform.product_3') {
|
|
|
+ addNum = addNum + (item.number * 2)
|
|
|
+ } else {
|
|
|
+ addNum = addNum + item.number
|
|
|
+ }
|
|
|
})
|
|
|
return addNum
|
|
|
})
|
|
@@ -118,6 +139,7 @@ const getShopping = () => {
|
|
|
commodityInfo.value = res.data.data
|
|
|
allNum.value = commodityInfo.value.purchase_quantity
|
|
|
computeList(commodityInfo.value.products)
|
|
|
+ computeHadList(commodityInfo.value.purchase_products)
|
|
|
} else {
|
|
|
window.location.href = '/product/pay'
|
|
|
}
|
|
@@ -452,70 +474,128 @@ onUnmounted(() => {
|
|
|
<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 flex items-center text-[#1460F3] cursor-pointer pb-16px border-b-1px border-[#0000001A]">
|
|
|
+ class="mt-16px items-center text-[#1460F3] cursor-pointer pb-16px inline-flex">
|
|
|
<Arrow class="mr-6px" />
|
|
|
Back
|
|
|
</div>
|
|
|
- <div class="mt-32px flex justify-between">
|
|
|
+ <div class="pt-32px flex justify-between border-t-1px border-[#0000001A]">
|
|
|
<div class="w-[55%] max-w-840px">
|
|
|
- <div class="text-[16px] leading-20px text-[#232A40] font-700">Your Current Products</div>
|
|
|
- <div class="text-[16px] leading-20px text-[#232A40] mt-8px">Add more licenses for products that you already own.
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="mt-24px rounded-8px p-28px bg-[#FFFFFF] border-1px border-[#D9D9D9] flex justify-between items-center">
|
|
|
- <div class="flex items-center">
|
|
|
- <img src="@/assets/images/cross.png" alt="logo" class="h-48px">
|
|
|
- <div class="ml-20px">
|
|
|
- <div class="text-[16px] leading-20px text-[#232A40] font-700">PDF Reader Pro Cross-Platform</div>
|
|
|
- <div class="text-[14px] leading-20px text-[#232A40] mt-4px">Mac + Windows</div>
|
|
|
+ <div v-if="hadList.length !== 0">
|
|
|
+ <div class="text-[16px] leading-20px text-[#232A40] font-700">Your Current Products</div>
|
|
|
+ <div class="text-[16px] leading-20px text-[#232A40] mt-8px">Add more licenses for products that you already own.
|
|
|
+ </div>
|
|
|
+ <div v-if="hadList.includes(0)"
|
|
|
+ class="mt-24px rounded-8px p-28px bg-[#FFFFFF] border-1px border-[#D9D9D9] flex justify-between items-center">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <img src="@/assets/images/logo.png" alt="logo" class="h-48px">
|
|
|
+ <div class="ml-20px">
|
|
|
+ <div class="text-[16px] leading-20px text-[#232A40] font-700">LynxPDF Editor (Enterprise)</div>
|
|
|
+ <div class="text-[14px] leading-20px text-[#232A40] mt-4px">Cost-Effective PDF Solution Tailored to Your
|
|
|
+ Business</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div
|
|
|
+ class="rounded-8px cursor-pointer w-96px border-1px border-[#1460F3] flex leading-40px text-[#1460F3] justify-center font-700 text-16px hover:opacity-80"
|
|
|
+ @click="addShopping('com.brother.pdftecheditor')">
|
|
|
+ Add</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="rounded-8px cursor-pointer w-96px border-1px border-[#1460F3] flex leading-40px text-[#1460F3] justify-center font-700 text-16px hover:opacity-80"
|
|
|
- @click="addShopping('com.brother.pdfreaderpro.cross.platform.product_3')">
|
|
|
- Add</div>
|
|
|
- </div>
|
|
|
- <div class="mt-32px text-[16px] leading-20px text-[#232A40] font-700">More Products and Services</div>
|
|
|
- <div class="text-[16px] leading-20px text-[#232A40] mt-8px">See other ways to enhance your team’s productivity
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="mt-24px rounded-8px p-28px bg-[#FFFFFF] border-1px border-[#D9D9D9] flex justify-between items-center">
|
|
|
- <div class="flex items-center">
|
|
|
- <img src="@/assets/images/logo.png" alt="logo" class="h-48px">
|
|
|
- <div class="ml-20px">
|
|
|
- <div class="text-[16px] leading-20px text-[#232A40] font-700">LynxPDF Editor (Enterprise)</div>
|
|
|
- <div class="text-[14px] leading-20px text-[#232A40] mt-4px">Cost-Effective PDF Solution Tailored to Your
|
|
|
- Business</div>
|
|
|
+ <div v-if="hadList.includes(1)"
|
|
|
+ class="mt-24px rounded-8px p-28px bg-[#FFFFFF] border-1px border-[#D9D9D9] flex justify-between items-center">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <img src="@/assets/images/cross.png" alt="logo" class="h-48px">
|
|
|
+ <div class="ml-20px">
|
|
|
+ <div class="text-[16px] leading-20px text-[#232A40] font-700">PDF Reader Pro Cross-Platform</div>
|
|
|
+ <div class="text-[14px] leading-20px text-[#232A40] mt-4px">Mac + Windows</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="rounded-8px cursor-pointer w-96px border-1px border-[#1460F3] flex leading-40px text-[#1460F3] justify-center font-700 text-16px hover:opacity-80"
|
|
|
+ @click="addShopping('com.brother.pdfreaderpro.cross.platform.product_3')">
|
|
|
+ Add</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="hadList.includes(2)" class="mt-24px rounded-8px p-28px bg-[#FFFFFF] border-1px border-[#D9D9D9]">
|
|
|
+ <div class=" flex justify-between items-center border-b-1px border-[#0000001A] pb-16px">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <img src="@/assets/images/logo.png" alt="logo" class="h-48px">
|
|
|
+ <div class="ml-20px">
|
|
|
+ <div class="text-[16px] leading-20px text-[#232A40] font-700">PDF Reader Pro</div>
|
|
|
+ <div class="text-[14px] leading-20px text-[#232A40] mt-4px">All-in-One & Affordable PDF Solution</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="rounded-8px cursor-pointer w-96px border-1px border-[#1460F3] flex leading-40px text-[#1460F3] justify-center font-700 text-16px hover:opacity-80"
|
|
|
+ @click="addShopping('pro')">
|
|
|
+ Add</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex mt-16px">
|
|
|
+ <el-select v-model="proPlatform">
|
|
|
+ <el-option label="Windows" value="Windows"></el-option>
|
|
|
+ <el-option label="Mac" value="Mac"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="proProduct">
|
|
|
+ <el-option label="Permanent License" value="Permanent License"></el-option>
|
|
|
+ <el-option label="Premium License" value="Premium License"></el-option>
|
|
|
+ </el-select>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="rounded-8px cursor-pointer w-96px border-1px border-[#1460F3] flex leading-40px text-[#1460F3] justify-center font-700 text-16px hover:opacity-80"
|
|
|
- @click="addShopping('com.brother.pdftecheditor')">
|
|
|
- Add</div>
|
|
|
</div>
|
|
|
- <div class="mt-24px rounded-8px p-28px bg-[#FFFFFF] border-1px border-[#D9D9D9]">
|
|
|
- <div class=" flex justify-between items-center border-b-1px border-[#0000001A] pb-16px">
|
|
|
+ <div v-if="hadList.length !== 3">
|
|
|
+ <div class="mt-32px text-[16px] leading-20px text-[#232A40] font-700">More Products and Services</div>
|
|
|
+ <div class="text-[16px] leading-20px text-[#232A40] mt-8px">See other ways to enhance your team’s productivity
|
|
|
+ </div>
|
|
|
+ <div v-if="!hadList.includes(0)"
|
|
|
+ class="mt-24px rounded-8px p-28px bg-[#FFFFFF] border-1px border-[#D9D9D9] flex justify-between items-center">
|
|
|
<div class="flex items-center">
|
|
|
<img src="@/assets/images/logo.png" alt="logo" class="h-48px">
|
|
|
<div class="ml-20px">
|
|
|
- <div class="text-[16px] leading-20px text-[#232A40] font-700">PDF Reader Pro</div>
|
|
|
- <div class="text-[14px] leading-20px text-[#232A40] mt-4px">All-in-One & Affordable PDF Solution</div>
|
|
|
+ <div class="text-[16px] leading-20px text-[#232A40] font-700">LynxPDF Editor (Enterprise)</div>
|
|
|
+ <div class="text-[14px] leading-20px text-[#232A40] mt-4px">Cost-Effective PDF Solution Tailored to Your
|
|
|
+ Business</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="rounded-8px cursor-pointer w-96px border-1px border-[#1460F3] flex leading-40px text-[#1460F3] justify-center font-700 text-16px hover:opacity-80"
|
|
|
+ @click="addShopping('com.brother.pdftecheditor')">
|
|
|
+ Add</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="!hadList.includes(1)"
|
|
|
+ class="mt-24px rounded-8px p-28px bg-[#FFFFFF] border-1px border-[#D9D9D9] flex justify-between items-center">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <img src="@/assets/images/cross.png" alt="logo" class="h-48px">
|
|
|
+ <div class="ml-20px">
|
|
|
+ <div class="text-[16px] leading-20px text-[#232A40] font-700">PDF Reader Pro Cross-Platform</div>
|
|
|
+ <div class="text-[14px] leading-20px text-[#232A40] mt-4px">Mac + Windows</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
class="rounded-8px cursor-pointer w-96px border-1px border-[#1460F3] flex leading-40px text-[#1460F3] justify-center font-700 text-16px hover:opacity-80"
|
|
|
- @click="addShopping('pro')">
|
|
|
+ @click="addShopping('com.brother.pdfreaderpro.cross.platform.product_3')">
|
|
|
Add</div>
|
|
|
</div>
|
|
|
- <div class="flex mt-16px">
|
|
|
- <el-select v-model="proPlatform">
|
|
|
- <el-option label="Windows" value="Windows"></el-option>
|
|
|
- <el-option label="Mac" value="Mac"></el-option>
|
|
|
- </el-select>
|
|
|
- <el-select v-model="proProduct">
|
|
|
- <el-option label="Permanent License" value="Permanent License"></el-option>
|
|
|
- <el-option label="Premium License" value="Premium License"></el-option>
|
|
|
- </el-select>
|
|
|
+ <div v-if="!hadList.includes(2)" class="mt-24px rounded-8px p-28px bg-[#FFFFFF] border-1px border-[#D9D9D9]">
|
|
|
+ <div class=" flex justify-between items-center border-b-1px border-[#0000001A] pb-16px">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <img src="@/assets/images/logo.png" alt="logo" class="h-48px">
|
|
|
+ <div class="ml-20px">
|
|
|
+ <div class="text-[16px] leading-20px text-[#232A40] font-700">PDF Reader Pro</div>
|
|
|
+ <div class="text-[14px] leading-20px text-[#232A40] mt-4px">All-in-One & Affordable PDF Solution</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="rounded-8px cursor-pointer w-96px border-1px border-[#1460F3] flex leading-40px text-[#1460F3] justify-center font-700 text-16px hover:opacity-80"
|
|
|
+ @click="addShopping('pro')">
|
|
|
+ Add</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex mt-16px">
|
|
|
+ <el-select v-model="proPlatform">
|
|
|
+ <el-option label="Windows" value="Windows"></el-option>
|
|
|
+ <el-option label="Mac" value="Mac"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="proProduct">
|
|
|
+ <el-option label="Permanent License" value="Permanent License"></el-option>
|
|
|
+ <el-option label="Premium License" value="Premium License"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -525,25 +605,26 @@ onUnmounted(() => {
|
|
|
<div class="flex justify-between">
|
|
|
<div>
|
|
|
<div class="font-700 text-14px leading-20px text-[#232A40]">
|
|
|
- Total Licenses
|
|
|
+ Authorized Devices
|
|
|
</div>
|
|
|
<div class="recommend-icon text-14px leading-20px text-[#808185] cursor-pointer">
|
|
|
<span v-show="commodityInfo.next_number">
|
|
|
- Buy another <span class="text-[#232A40]">{{ commodityInfo.next_number }} license</span> to upgrade to
|
|
|
+ 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">
|
|
|
- Buy another <span class="text-[#232A40]">0 license</span> to upgrade to
|
|
|
- <span class="text-[#232A40]">45% OFF</span>
|
|
|
+ <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 purchased {{ commodityInfo.purchase_quantity }}
|
|
|
- <div>Buy 2 licenses cumulatively: 15% OFF</div>
|
|
|
- <div>Buy 5 licenses cumulatively: 25% OFF</div>
|
|
|
- <div>Buy 10 licenses cumulatively: 30% OFF</div>
|
|
|
- <div>Buy 30 licenses cumulatively: 35% OFF</div>
|
|
|
- <div>Buy 100 licenses cumulatively: 45% OFF</div>
|
|
|
+ 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>
|