feat：3.0调整

src/assets/images/store/windows.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4H14.8V14.8H4V4Z" fill="#232A40"/>
+<path d="M4 17.2H14.8V28H4V17.2Z" fill="#232A40"/>
+<path d="M17.2002 4H28.0002V14.8H17.2002V4Z" fill="#232A40"/>
+<path d="M17.2002 17.2H28.0002V28H17.2002V17.2Z" fill="#232A40"/>
+</svg>

src/components/sideMenu.vue

@@ -10,6 +10,7 @@ import Settings from '@/components/icon/menu_setting.vue'
 import Support from '@/components/icon/menu_support.vue'
 import Order from '@/components/icon/menu_order.vue'
 import Logout from '@/components/icon/logout.vue'
+import Download from '@/components/icon/menu_download.vue'
 import { userStore } from '@/store/userInfo'
 
 export default {
@@ -23,6 +24,7 @@ export default {
     Settings,
     Support,
     Order,
+    Download,
     Logout
   },
   data() {
@@ -166,6 +168,10 @@ export default {
             <span>Manage License</span>
           </el-menu-item>
         </div>
+        <el-menu-item index="/download">
+          <Download />
+          <span>Download</span>
+        </el-menu-item>
         <el-submenu index="6" :disabled="isNoAdmin">
           <template slot="title">
             <Settings />
@@ -177,7 +183,7 @@ export default {
         </el-submenu>
         <el-menu-item index="/support" :disabled="isNoAdmin">
           <Support />
-          <span>Support</span>
+          <span>Contact Us</span>
         </el-menu-item>
       </el-menu>
     </div>

src/router/index.js

@@ -232,6 +232,14 @@ const router = new VueRouter({
             title: 'Manage Device | PDF Tech Console'
           }
         },
+        {
+          path: "/download",
+          name: "download",
+          component: () => import("../views/Download.vue"),
+          meta: {
+            title: 'Admin Console'
+          }
+        },
         {
           path: "/samlsetting",
           name: "samlsetting",

src/views/Download.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { onMounted, getCurrentInstance } from 'vue'
+import { userStore } from '@/store/userInfo'
+import { get } from '../../utils/request'
+import Download from '@/components/icon/menu_download.vue'
+
+const { proxy } = getCurrentInstance()
+
+onMounted(() => {
+  updataUserInfo()
+})
+// 获取用户信息
+const updataUserInfo = () => {
+  get(
+    '/pdf-tech/vppMember/getMemberInfo'
+  ).then((res) => {
+    if (res.data.code === 200 && res.data.msg == 'success') {
+      userStore().setUserInfo(res.data.result)
+      if (res.data.result.validFlag === '0') {
+        proxy.$router.push('/login')
+      }
+    }
+  })
+}
+
+// 下载链接
+let macPro = import.meta.env.VITE_PRO_WEB + '/downloads/' + import.meta.env.VITE_APP + import.meta.env.VITE_MAC_APP_VERSION + '.dmg'
+let windowsPro = import.meta.env.VITE_PRO_WEB + '/downloads/' + import.meta.env.VITE_APP + import.meta.env.VITE_WINDOWS_APP_VERSION + '.exe'
+let macEditor = import.meta.env.VITE_PRO_WEB + '/downloads/' + import.meta.env.VITE_EDITOR + import.meta.env.VITE_MAC_EDITOR_VERSION + '.dmg'
+let windowsEditor = import.meta.env.VITE_PRO_WEB + '/downloads/' + import.meta.env.VITE_EDITOR + import.meta.env.VITE_WINDOWS_EDITOR_VERSION + '.exe'
+</script>
+
+<template>
+  <div>
+    <h1 class="leading-40px text-[#232A40]">Download Center</h1>
+    <div class="mt-32px flex items-center text-20px leading-24px font-700 text-[#232A40]">
+      <img class="w-32px mr-12px" src="@/assets/images/logo.png" alt="logo">
+      LynxPDF Editor (Enterprise)
+    </div>
+    <div class="mt-20px flex">
+      <div class="card w-320px bg-[#FFFFFF] rounded-8px p-32px">
+        <div class="flex items-center text-16px leading-20px font-700 text-[#232A40]">
+          <img src="@/assets/images/store/mac.svg" alt="mac" class="mr-8px">
+          macOS
+        </div>
+        <div class="mt-20px text-14px leading-20px text-[#505258]">Support macOS 11 or later</div>
+        <a :href="macEditor"
+          class="rounded-8px bg-[#1460F3] mt-24px flex leading-40px text-[#fff] justify-center items-center font-700 text-16px hover:opacity-80">
+          <Download class="mr-8px" /> Download</a>
+      </div>
+      <div class="card w-320px ml-24px bg-[#FFFFFF] rounded-8px p-32px">
+        <div class="flex items-center text-16px leading-20px font-700 text-[#232A40]">
+          <img src="@/assets/images/store/windows.svg" alt="mac" class="mr-8px">
+          Windows
+        </div>
+        <div class="mt-20px text-14px leading-20px text-[#505258]">Support Windows 7 or later</div>
+        <a :href="windowsEditor"
+          class="rounded-8px bg-[#1460F3] mt-24px flex leading-40px text-[#fff] justify-center items-center font-700 text-16px hover:opacity-80">
+          <Download class="mr-8px" /> Download</a>
+      </div>
+    </div>
+    <div class="mt-48px flex items-center text-20px leading-24px font-700 text-[#232A40]">
+      <img class="w-32px mr-12px" src="@/assets/images/logo.png" alt="logo">
+      PDF Reader Pro
+    </div>
+    <div class="mt-20px flex">
+      <div class="card w-320px bg-[#FFFFFF] rounded-8px p-32px">
+        <div class="flex items-center text-16px leading-20px font-700 text-[#232A40]">
+          <img src="@/assets/images/store/mac.svg" alt="mac" class="mr-8px">
+          macOS
+        </div>
+        <div class="mt-20px text-14px leading-20px text-[#505258]">Support macOS 11 or later</div>
+        <a :href="macPro"
+          class="rounded-8px bg-[#1460F3] mt-24px flex leading-40px text-[#fff] justify-center items-center font-700 text-16px hover:opacity-80">
+          <Download class="mr-8px" /> Download</a>
+      </div>
+      <div class="card w-320px ml-24px bg-[#FFFFFF] rounded-8px p-32px">
+        <div class="flex items-center text-16px leading-20px font-700 text-[#232A40]">
+          <img src="@/assets/images/store/windows.svg" alt="mac" class="mr-8px">
+          Windows
+        </div>
+        <div class="mt-20px text-14px leading-20px text-[#505258]">Support Windows 7 or later</div>
+        <a :href="windowsPro"
+          class="rounded-8px bg-[#1460F3] mt-24px flex leading-40px text-[#fff] justify-center items-center font-700 text-16px hover:opacity-80">
+          <Download class="mr-8px" /> Download</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.card {
+  box-shadow: 0px 0px 12px 0px #2361A90D;
+}
+</style>

src/views/Product/Custom.vue

@@ -1,6 +1,6 @@
 
 <script setup>
-import { onMounted, ref, getCurrentInstance, computed, onUnmounted, nextTick } from 'vue'
+import { onMounted, ref, getCurrentInstance, computed, onUnmounted, nextTick, watch } from 'vue'
 import { country } from '../../../utils/country.js'
 import Arrow from '@/components/icon/left_arrow.vue'
 import Close from '@/components/icon/close.vue'
@@ -94,7 +94,7 @@ const updataUserInfo = () => {
     if (res.data.code === 200 && res.data.msg == 'success') {
       useInfo.value = res.data.result
       if (useInfo.value.role !== '1') {
-        window.location.href = '/product?type=isNoAdmin'
+        window.location.href = '/non-admin-user'
       }
       getShopping()
     }
@@ -130,6 +130,17 @@ let allShoppingNum = computed(() => {
   })
   return addNum
 })
+watch(allShoppingNum, (val) => {
+  if (val > 100 && paddleShow.value) {
+    paddleShow.value = false
+    if (payMethod.value === 'paddle') {
+      payMethod.value = 'paypal'
+    }
+  }
+  if (val <= 100 && !paddleShow.value) {
+    paddleShow.value = true
+  }
+})
 const getShopping = () => {
   get(
     baseUrl + '/api/shopping-cart?vpp_member_id=' + useInfo.value.id
@@ -476,10 +487,10 @@ onUnmounted(() => {
       <Arrow class="mr-6px" />
       Back
     </div>
-    <div class="pt-32px flex justify-between border-t-1px border-[#0000001A]">
+    <div class="pt-12px flex justify-between border-t-1px border-[#0000001A]">
       <div class="w-[55%] max-w-840px">
         <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 pt-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)"
@@ -598,7 +609,7 @@ onUnmounted(() => {
         </div>
       </div>
       <div class="w-[40%] max-w-500px">
-        <div class="sticky top-20px z-100 bg-[#E7EAEE] w-500px rounded-8px">
+        <div class="sticky pt-20px top-0px z-100 bg-[#E7EAEE] w-500px rounded-b-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">

src/views/Product/ID.vue

@@ -1,11 +1,10 @@
 <script setup>
-import { onMounted, ref, getCurrentInstance, nextTick, onUnmounted, computed } from 'vue'
+import { onMounted, ref, getCurrentInstance, nextTick, onUnmounted, computed, watch } from 'vue'
 import { country } from '../../../utils/country.js'
 import Arrow from '@/components/icon/left_arrow.vue'
 import Info from '@/components/icon/info.vue'
 import { get, postWithHeader } from '../../../utils/request'
 import { userStore } from '@/store/userInfo'
-import { number } from 'echarts'
 const { proxy } = getCurrentInstance()
 
 const CountryOption = country()
@@ -70,7 +69,7 @@ const updataUserInfo = () => {
     if (res.data.code === 200 && res.data.msg == 'success') {
       useInfo.value = res.data.result
       if (useInfo.value.role !== '1') {
-        window.location.href = '/product?type=isNoAdmin'
+        window.location.href = '/non-admin-user'
       }
       getCommodityInfo()
     } else {
@@ -111,6 +110,18 @@ let useTeamDiscount = computed(() => {
   }
 })
 
+watch(productNum, () => {
+  if (productNum.value > 100 && paddleShow.value) {
+    paddleShow.value = false
+    if (payMethod.value === 'paddle') {
+      payMethod.value = 'paypal'
+    }
+  }
+  if (productNum.value <= 100 && !paddleShow.value) {
+    paddleShow.value = true
+  }
+})
+
 // 查询支付状态
 const getState = (trade_no, payMethod) => {
   get(

src/views/Product/Index.vue

@@ -20,6 +20,7 @@ onMounted(() => {
     techPlatform.value = 'Windows'
     proPlatform.value = 'Windows'
   }
+  getOverview()
 })
 
 // 获取用户信息
@@ -71,29 +72,6 @@ const techPlatform = ref('Mac')
 const proPlatform = ref('Mac')
 const proProduct = ref('Permanent License')
 
-// 下载链接
-let macPro = import.meta.env.VITE_PRO_WEB + '/downloads/' + import.meta.env.VITE_APP + import.meta.env.VITE_MAC_APP_VERSION + '.dmg'
-let windowsPro = import.meta.env.VITE_PRO_WEB + '/downloads/' + import.meta.env.VITE_APP + import.meta.env.VITE_WINDOWS_APP_VERSION + '.exe'
-let macEditor = import.meta.env.VITE_PRO_WEB + '/downloads/' + import.meta.env.VITE_EDITOR + import.meta.env.VITE_MAC_EDITOR_VERSION + '.dmg'
-let windowsEditor = import.meta.env.VITE_PRO_WEB + '/downloads/' + import.meta.env.VITE_EDITOR + import.meta.env.VITE_WINDOWS_EDITOR_VERSION + '.exe'
-
-const editorDownUrl = ref(windowsEditor)
-const proDownUrl = ref(windowsPro)
-watch(techPlatform, (val) => {
-  if (val === 'Windows') {
-    editorDownUrl.value = windowsEditor
-  } else {
-    editorDownUrl.value = macEditor
-  }
-})
-watch(proPlatform, (val) => {
-  if (val === 'Windows') {
-    proDownUrl.value = windowsPro
-  } else {
-    proDownUrl.value = macPro
-  }
-})
-
 // 购买链接
 const proBuyUrl = computed(() => {
   if (proPlatform.value === 'Windows') {
@@ -110,88 +88,148 @@ const proBuyUrl = computed(() => {
     }
   }
 })
+
+// 产品
+const tableData = ref([])
+const isHaveProduct = ref('or')
+const codeMap = [
+  {
+    title: "LynxPDF Editor (Enterprise)",
+    code: "com.brother.pdftecheditor",
+    url: "/product/0"
+  },
+  {
+    title: "PDF Reader Pro Cross-Platform",
+    code: "com.brother.pdfreaderpro.cross.platform.product_3",
+    url: "/product/1"
+  },
+  {
+    title: "PDF Reader Pro Permanent for Mac",
+    code: "com.brother.pdfreaderpro.mac.product_3",
+    url: "/product/2"
+  },
+  {
+    title: "PDF Reader Pro Premium for Mac",
+    code: "com.brother.pdfreaderpro.mac.product_1",
+    url: "/product/3"
+  },
+  {
+    title: "PDF Reader Pro Permanent for Windows",
+    code: "com.brother.pdfreaderpro.windows.product_3",
+    url: "/product/4"
+  },
+  {
+    title: "PDF Reader Pro Premium for Windows",
+    code: "com.brother.pdfreaderpro.windows.product_1",
+    url: "/product/5"
+  }
+]
+// 计算商品信息
+const computeList = (productList) => {
+  tableData.value = productList.map(product => {
+    const match = codeMap.find(item => item.code === product.code)
+    if (match) {
+      return {
+        ...match,
+        id: product.id,
+        assignedCodeNumber: product.assignedCodeNumber,
+        codeNumber: product.codeNumber,
+        name: product.name,
+      }
+    }
+    return null
+  }).filter(item => item !== null)
+}
+const getOverview = () => {
+  if (proxy.$route.query && proxy.$route.query.type === 'isNoAdmin') {
+    isHaveProduct.value = 'no'
+    return
+  }
+  get('/pdf-tech/product/purchasedProductList').then((res) => {
+    if (res.data.result.length === 0) {
+      isHaveProduct.value = 'no'
+      return
+    }
+    computeList(res.data.result)
+    isHaveProduct.value = 'yes'
+  })
+}
 </script>
 
 <template>
   <div class="flex flex-col items-center">
     <div class="w-full">
-      <h1 class="leading-40px">Product</h1>
       <div class="
-          mt-36px
-          mb-16px
-          leading-20px
-          text-16px
-          font-bold
-          flex
-          justify-between
-        ">
-        <span>All Products</span>
+      mb-32px
+      leading-20px
+      text-16px
+      font-bold
+      flex
+      justify-between
+      ">
+        <h1 class="leading-40px">Product</h1>
         <a v-if="memberRole === '1'" href="/product/custom"
           class="flex items-center h-28px px-10px py-4px bg-[#1460F3] rounded-4px text-14px leading-20px font-400 text-[#fff] cursor-pointer hover:opacity-80">
-          <Shopping class="mr-8px" />Buy with Cart
+          <Shopping class="mr-8px" />Buy More Products
         </a>
       </div>
-      <div class="flex mt-24px">
+      <div v-if="isHaveProduct === 'or'"></div>
+      <div v-else-if="isHaveProduct === 'yes'">
+        <el-table :data="tableData" class="px-24px pb-40px rounded-b-8px">
+          <el-table-column prop="title" label="Product">
+            <template slot-scope="scope">
+              <div class="flex items-center text-[#232A40]">
+                <img v-if="scope.row.code === 'com.brother.pdfreaderpro.cross.platform.product_3'"
+                  src="@/assets/images/cross.png" alt="logo" class="h-32px mr-12px">
+                <img v-else src="@/assets/images/logo.png" alt="logo" class="h-32px mr-12px">
+                {{ scope.row.title }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="Quantity" label="Quantity" width="360">
+            <template slot-scope="scope">
+              {{ scope.row.assignedCodeNumber }}/{{ scope.row.codeNumber }}
+              <span v-if="scope.row.codeNumber">Licenses</span>
+              <span v-else>License</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="Purchase" label="Purchase" width="160">
+            <template slot-scope="scope">
+              <div v-if="memberRole?.indexOf('1') !== -1">
+                <a :href="scope.row.url"
+                  class="w-89px inline-block text-center h-28px mt-8px rounded-4px border-1px border-[#1460F3] text-[#1460F3] leading-28px hover:bg-[#1460F333]">
+                  Buy Now
+                </a>
+              </div>
+            </template>
+          </el-table-column>
+          <p slot="empty">No Data Available</p>
+        </el-table>
+      </div>
+      <!-- 购买卡片 -->
+      <div v-else class="flex mt-24px">
         <div class="card max-w-400px w-[32%]">
           <div class="bg-[#fff] rounded-t-8px p-32px text-center">
             <img class="w-64px m-auto" src="@/assets/images/logo.png" alt="logo">
             <div class="font-bold text-20px leading-24px mt-16px text-[#232A40]">LynxPDF Editor (Enterprise)</div>
             <div class="mt-16px text-14px leading-20px text-[#505258]">Cost-Effective PDF Solution Tailored to Your
               Business</div>
-            <el-select v-model="techPlatform">
-              <el-option label="Windows" value="Windows"></el-option>
-              <el-option label="Mac" value="Mac"></el-option>
-            </el-select>
-          </div>
-          <div class="bg-[#F6F7F9] p-32px rounded-b-8px">
-            <a v-if="memberRole === '1'" href="/product/0"
-              class="rounded-8px bg-[#1460F3] flex leading-40px text-[#fff] justify-center font-700 text-16px hover:opacity-80">
-              Buy Now</a>
-            <a v-if="showTry && memberRole === '1'" @click="dialogVisible = true"
-              class="mt-16px cursor-pointer rounded-8px border-1px border-[#1460F3] flex leading-40px text-[#1460F3] justify-center font-700 text-16px hover:opacity-80">
-              Apply for Trial</a>
-            <a :href="editorDownUrl"
-              class="mt-16px rounded-8px border-1px border-[#1460F3] flex leading-40px text-[#1460F3] justify-center font-700 text-16px hover:opacity-80">
-              Download</a>
-          </div>
-        </div>
-        <div class="card max-w-400px w-[32%] ml-40px">
-          <div class="bg-[#fff] rounded-t-8px p-32px text-center">
-            <img class="w-64px m-auto" src="@/assets/images/logo.png" alt="logo">
-            <div class="font-bold text-20px leading-24px mt-16px text-[#232A40]">PDF Reader Pro</div>
-            <div class="mt-16px text-14px leading-20px text-[#505258]">All-in-One & Affordable PDF Solution</div>
-            <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 class="bg-[#F6F7F9] p-32px rounded-b-8px">
-            <a v-if="memberRole === '1'" :href="proBuyUrl"
-              class="rounded-8px bg-[#1460F3] flex leading-40px text-[#fff] justify-center font-700 text-16px hover:opacity-80">
-              Buy Now</a>
-            <a :href="proDownUrl"
-              class="mt-16px rounded-8px border-1px border-[#1460F3] flex leading-40px text-[#1460F3] justify-center font-700 text-16px hover:opacity-80">
-              Download</a>
-          </div>
-        </div>
-        <div class="card max-w-400px w-[32%] ml-40px">
-          <div class="bg-[#fff] rounded-t-8px p-32px text-center">
-            <img class="w-208px m-auto" src="@/assets/images/cross.png" alt="logo">
-            <div class="font-bold text-20px leading-24px mt-16px text-[#232A40]">PDF Reader Pro Cross-Platform</div>
-            <div class="mt-16px text-14px leading-20px text-[#505258]">Mac + Windows</div>
-          </div>
-          <div class="bg-[#F6F7F9] p-32px rounded-b-8px">
-            <a v-if="memberRole === '1'" href="/product/1"
-              class="rounded-8px bg-[#1460F3] flex leading-40px text-[#fff] justify-center font-700 text-16px hover:opacity-80">
-              Buy Now</a>
+            <div v-if="memberRole === '1'">
+              <a href="/product/0"
+                class="rounded-8px bg-[#1460F3] flex leading-40px text-[#fff] justify-center font-700 text-16px hover:opacity-80">
+                Buy Now</a>
+              <a v-if="showTry" @click="dialogVisible = true"
+                class="mt-16px cursor-pointer rounded-8px border-1px border-[#1460F3] flex leading-40px text-[#1460F3] justify-center font-700 text-16px hover:opacity-80">
+                Apply for Trial</a>
+            </div>
+            <div v-else class="text-center text-14px leading-20px text-[#808185]">Please contact the super admin to purchase license or apply for trial.</div>
           </div>
         </div>
       </div>
     </div>
+    <!-- 试用弹窗 -->
     <el-dialog title="" :visible.sync="dialogVisible" width="376px" top="30vh" center :show-close="false">
       <!-- <Warning /> -->
       <p class="mt-16px">Are you sure to apply for the 7-day free trial of LynxPDF Editor (Enterprise)?</p>
@@ -227,5 +265,11 @@ const proBuyUrl = computed(() => {
     }
   }
 }
+::v-deep .el-table {
+  border-radius: 8px;
+  &::before {
+    display: none;
+  }
+}
 </style>