|
|
@@ -1,122 +1,87 @@
|
|
|
<template>
|
|
|
<q-page class="col bg-grey-2 sd-page-padding">
|
|
|
-
|
|
|
<!-- 自定义轮播图组件 -->
|
|
|
<div class="q-pt-lg">
|
|
|
<CustomCarousel :items="carouselItems" :mode="carouselMode" :height="320" :autoplay="5000" :arrows="true"
|
|
|
:is-loading="carouselLoading" />
|
|
|
</div>
|
|
|
|
|
|
- <!-- 商品搜索框 -->
|
|
|
- <div class="q-mt-lg">
|
|
|
- <q-card class="bg-white rounded-borders" flat>
|
|
|
- <q-card-section class="q-pa-md">
|
|
|
- <div class="row q-gutter-md items-center">
|
|
|
- <div class="col">
|
|
|
- <q-input v-model="searchQuery" outlined placeholder="搜索游戏、礼品卡或商品..." dense class="search-input"
|
|
|
- @keyup.enter="performSearch">
|
|
|
- <template v-slot:prepend>
|
|
|
- <q-icon name="search" color="grey-6" />
|
|
|
- </template>
|
|
|
- <template v-slot:append>
|
|
|
- <q-btn v-if="searchQuery" flat round dense icon="clear" color="grey-6" @click="clearSearch" />
|
|
|
- </template>
|
|
|
- </q-input>
|
|
|
- </div>
|
|
|
- <div class="col-auto">
|
|
|
- <q-btn color="primary" icon="search" label="搜索" unelevated @click="performSearch"
|
|
|
- :loading="searchLoading" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 热门搜索标签 -->
|
|
|
- <div class="q-mt-md" v-if="!searchQuery">
|
|
|
- <div class="text-caption text-grey-6 q-mb-xs">热门搜索：</div>
|
|
|
- <div class="row q-gutter-xs">
|
|
|
- <q-chip v-for="tag in popularSearchTags" :key="tag" clickable size="sm" color="grey-2" text-color="grey-7"
|
|
|
- @click="searchQuery = tag; performSearch()">
|
|
|
- {{ tag }}
|
|
|
- </q-chip>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </q-card-section>
|
|
|
- </q-card>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 商品类型选项卡 -->
|
|
|
- <div class="q-mt-sm q-mb-sm bg-white rounded-borders">
|
|
|
- <q-tabs v-model="activeTab" dense class="text-grey-7" active-color="primary" indicator-color="primary"
|
|
|
- align="left">
|
|
|
- <q-tab name="recharge" icon="account_balance_wallet" label="游戏直充" class="q-px-lg tab-with-icon" />
|
|
|
- <q-tab name="coins" icon="monetization_on" label="游戏币" class="q-px-lg tab-with-icon" />
|
|
|
- <q-tab name="items" icon="inventory" label="游戏道具" class="q-px-lg tab-with-icon" />
|
|
|
- <q-tab name="giftcards" icon="card_giftcard" label="礼品卡" class="q-px-lg tab-with-icon" />
|
|
|
- <q-tab name="cdk" icon="confirmation_number" label="CDK" class="q-px-lg tab-with-icon" />
|
|
|
- </q-tabs>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 商品网格布局 -->
|
|
|
- <div class="row q-col-gutter-sm">
|
|
|
- <!-- 骨架屏 -->
|
|
|
- <template v-if="isLoading">
|
|
|
- <div v-for="n in skeletonCount" :key="`skeleton-${n}`" class="col-12 col-md-6 col-lg-4">
|
|
|
- <q-card class="product-card q-pa-md" flat>
|
|
|
- <div class="row no-wrap items-center" style="height: 100%;">
|
|
|
- <!-- 商品图片骨架屏 -->
|
|
|
- <div class="q-mr-md" style="width: 108px; height: 108px;">
|
|
|
- <q-skeleton type="rect" width="108px" height="108px" class="rounded-borders" />
|
|
|
- </div>
|
|
|
- <!-- 商品信息骨架屏 -->
|
|
|
- <div class="col flex column justify-center">
|
|
|
- <q-skeleton type="text" width="60%" height="24px" class="q-mb-xs" />
|
|
|
- <q-skeleton type="text" width="40%" height="16px" class="q-mb-xs" />
|
|
|
- <q-skeleton type="text" width="50%" height="16px" class="q-mb-sm" />
|
|
|
- <!-- 评分区域骨架屏 -->
|
|
|
- <div class="row items-center q-gutter-xs">
|
|
|
- <q-skeleton type="rect" width="80px" height="16px" class="q-mr-sm" />
|
|
|
- <q-skeleton type="text" width="20px" height="16px" />
|
|
|
+ <!-- 热门商品模块 -->
|
|
|
+ <div class="q-mt-sm">
|
|
|
+ <div class="text-h5 text-weight-bold q-mb-lg text-grey-9">热门商品</div>
|
|
|
+ <div class="q-mb-sm bg-white rounded-borders">
|
|
|
+ <q-tabs v-model="activeTab" dense class="text-grey-7" active-color="primary" indicator-color="primary"
|
|
|
+ align="left">
|
|
|
+ <q-tab name="recharge" icon="account_balance_wallet" label="游戏直充" class="q-px-lg tab-with-icon" />
|
|
|
+ <q-tab name="coins" icon="monetization_on" label="游戏币" class="q-px-lg tab-with-icon" />
|
|
|
+ <q-tab name="items" icon="inventory" label="游戏道具" class="q-px-lg tab-with-icon" />
|
|
|
+ <q-tab name="giftcards" icon="card_giftcard" label="礼品卡" class="q-px-lg tab-with-icon" />
|
|
|
+ <q-tab name="cdk" icon="confirmation_number" label="CDK" class="q-px-lg tab-with-icon" />
|
|
|
+ </q-tabs>
|
|
|
+ </div>
|
|
|
+ <!-- 商品网格布局 -->
|
|
|
+ <div class="row q-col-gutter-sm">
|
|
|
+ <!-- 骨架屏 -->
|
|
|
+ <template v-if="isLoading">
|
|
|
+ <div v-for="n in skeletonCount" :key="`skeleton-${n}`" class="col-12 col-md-6 col-lg-4">
|
|
|
+ <q-card class="product-card q-pa-md" flat>
|
|
|
+ <div class="row no-wrap items-center" style="height: 100%;">
|
|
|
+ <!-- 商品图片骨架屏 -->
|
|
|
+ <div class="q-mr-md" style="width: 108px; height: 108px;">
|
|
|
+ <q-skeleton animation="none" type="rect" width="108px" height="108px" class="rounded-borders" />
|
|
|
+ </div>
|
|
|
+ <!-- 商品信息骨架屏 -->
|
|
|
+ <div class="col flex column justify-center">
|
|
|
+ <q-skeleton animation="none" type="text" width="60%" height="24px" class="q-mb-xs" />
|
|
|
+ <q-skeleton animation="none" type="text" width="40%" height="16px" class="q-mb-xs" />
|
|
|
+ <q-skeleton animation="none" type="text" width="50%" height="16px" class="q-mb-sm" />
|
|
|
+ <!-- 评分区域骨架屏 -->
|
|
|
+ <div class="row items-center q-gutter-xs">
|
|
|
+ <q-skeleton animation="none" type="rect" width="80px" height="16px" class="q-mr-sm" />
|
|
|
+ <q-skeleton animation="none" type="text" width="20px" height="16px" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 折扣标签骨架屏 -->
|
|
|
- <q-skeleton type="rect" width="40px" height="20px" class="absolute-top-right q-ma-sm"
|
|
|
- style="border-radius: 4px;" />
|
|
|
- </q-card>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <!-- 折扣标签骨架屏 -->
|
|
|
+ <q-skeleton animation="none" type="rect" width="40px" height="20px" class="absolute-top-right q-ma-sm"
|
|
|
+ style="border-radius: 4px;" />
|
|
|
+ </q-card>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
|
|
|
- <!-- 动态商品卡片 -->
|
|
|
- <template v-else>
|
|
|
- <div v-for="product in currentProducts" :key="product.id" class="col-12 col-md-6 col-lg-4">
|
|
|
- <q-card class="product-card card-lift q-pa-md cursor-pointer transition-generic" flat
|
|
|
- @click="navigateToProduct(product.name)">
|
|
|
- <div class="row no-wrap items-center" style="height: 100%;">
|
|
|
- <!-- 商品图片 -->
|
|
|
- <div class="q-mr-md flex items-center image-zoom-container" style="width: 108px; height: 108px;">
|
|
|
- <q-img :src="product.image" :alt="product.name" class="rounded-borders image-zoom" fit="cover"
|
|
|
- style="width: 100%; height: 100%;" />
|
|
|
- </div>
|
|
|
- <!-- 商品信息 -->
|
|
|
- <div class="col flex column justify-center">
|
|
|
- <span class="text-h6 text-weight-medium text-grey-9 q-mb-xs">{{ product.name }}</span>
|
|
|
- <p class="text-body2 text-grey-6 q-mb-xs">Sales Volume: {{ product.sales }}</p>
|
|
|
- <p class="text-body2 text-grey-6 q-mb-sm">User Reviews: {{ product.reviews }}</p>
|
|
|
- <!-- 评分区域 -->
|
|
|
- <div class="row items-center q-gutter-xs">
|
|
|
- <q-rating :model-value="product.rating" readonly size="sm" color="orange" class="q-mr-sm" />
|
|
|
- <span class="text-body2 text-weight-medium text-orange">{{ product.rating }}</span>
|
|
|
+ <!-- 动态商品卡片 -->
|
|
|
+ <template v-else>
|
|
|
+ <div v-for="product in currentProducts" :key="product.id" class="col-12 col-md-6 col-lg-4">
|
|
|
+ <q-card class="product-card card-lift q-pa-md cursor-pointer transition-generic" flat
|
|
|
+ @click="navigateToProduct(product.name)">
|
|
|
+ <div class="row no-wrap items-center" style="height: 100%;">
|
|
|
+ <!-- 商品图片 -->
|
|
|
+ <div class="q-mr-md flex items-center image-zoom-container" style="width: 108px; height: 108px;">
|
|
|
+ <q-img :src="product.image" :alt="product.name" class="rounded-borders image-zoom" fit="cover"
|
|
|
+ style="width: 100%; height: 100%;" />
|
|
|
+ </div>
|
|
|
+ <!-- 商品信息 -->
|
|
|
+ <div class="col flex column justify-center">
|
|
|
+ <span class="text-h6 text-weight-medium text-grey-9 q-mb-xs">{{ product.name }}</span>
|
|
|
+ <p class="text-body2 text-grey-6 q-mb-xs">Sales Volume: {{ product.sales }}</p>
|
|
|
+ <p class="text-body2 text-grey-6 q-mb-sm">User Reviews: {{ product.reviews }}</p>
|
|
|
+ <!-- 评分区域 -->
|
|
|
+ <div class="row items-center q-gutter-xs">
|
|
|
+ <q-rating :model-value="product.rating" readonly size="sm" color="orange" class="q-mr-sm" />
|
|
|
+ <span class="text-body2 text-weight-medium text-orange">{{ product.rating }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 折扣标签 -->
|
|
|
- <q-badge style="border-radius: 4px;" class="absolute-top-right q-ma-sm" color="red-1" text-color="red"
|
|
|
- :label="product.discount" />
|
|
|
- </q-card>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <!-- 折扣标签 -->
|
|
|
+ <q-badge style="border-radius: 4px;" class="absolute-top-right q-ma-sm" color="red-1" text-color="red"
|
|
|
+ :label="product.discount" />
|
|
|
+ </q-card>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- Figma Gift Card List -->
|
|
|
+ <!-- 礼品卡模块 -->
|
|
|
<div class="q-mt-lg">
|
|
|
<div class="text-h5 text-weight-bold q-mb-lg text-grey-9">熱銷禮品卡</div>
|
|
|
<div class="row q-col-gutter-md">
|
|
|
@@ -125,12 +90,12 @@
|
|
|
<div v-for="n in skeletonCount" :key="`gift-skeleton-${n}`"
|
|
|
class="col-6 col-sm-6 col-md-3 col-lg-2 col-xl-custom-8">
|
|
|
<q-card class="figma-gift-card bg-white" flat>
|
|
|
- <q-skeleton height="200px" square />
|
|
|
+ <q-skeleton animation="none" height="200px" square />
|
|
|
<q-card-section class="q-pa-md">
|
|
|
- <q-skeleton type="text" class="text-subtitle1" />
|
|
|
+ <q-skeleton animation="none" type="text" class="text-subtitle1" />
|
|
|
<div class="row items-center no-wrap q-mt-sm">
|
|
|
- <q-skeleton type="text" width="60px" class="text-h6" />
|
|
|
- <q-skeleton type="rect" width="50px" height="20px" class="q-ml-sm" />
|
|
|
+ <q-skeleton animation="none" type="text" width="60px" class="text-h6" />
|
|
|
+ <q-skeleton animation="none" type="rect" width="50px" height="20px" class="q-ml-sm" />
|
|
|
</div>
|
|
|
</q-card-section>
|
|
|
</q-card>
|
|
|
@@ -140,7 +105,8 @@
|
|
|
<!-- 实际礼品卡内容 -->
|
|
|
<template v-else>
|
|
|
<div v-for="card in figmaGiftCards" :key="card.id" class="col-6 col-sm-6 col-md-3 col-lg-2 col-xl-custom-8">
|
|
|
- <q-card class="figma-gift-card card-lift bg-white cursor-pointer" flat @click="navigateToProduct(card.name)">
|
|
|
+ <q-card class="figma-gift-card card-lift bg-white cursor-pointer" flat
|
|
|
+ @click="navigateToProduct(card.name)">
|
|
|
<div class="image-zoom-container">
|
|
|
<q-img :src="card.image" :ratio="1" class="image-zoom" />
|
|
|
</div>
|
|
|
@@ -159,7 +125,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 服务特色区块 -->
|
|
|
+ <!-- 服务特色模块 -->
|
|
|
<div class="q-mt-lg">
|
|
|
<div class="text-h5 text-weight-bold q-mb-lg text-grey-9">為什麼選擇我們？</div>
|
|
|
<div class="row bg-white q-pa-md rounded-borders">
|
|
|
@@ -216,7 +182,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 支付方式和语言选择区块 -->
|
|
|
+ <!-- 支付方式和语言选择模块 -->
|
|
|
<div class="q-mt-lg">
|
|
|
<FooterComponent />
|
|
|
</div>
|
|
|
@@ -229,30 +195,20 @@ import { useQuasar } from 'quasar'
|
|
|
import { useRouter } from 'vue-router'
|
|
|
import FooterComponent from 'src/components/FooterComponent.vue'
|
|
|
import CustomCarousel from 'src/components/CustomCarousel.vue'
|
|
|
-
|
|
|
const $q = useQuasar()
|
|
|
const router = useRouter()
|
|
|
|
|
|
// 当前激活的选项卡
|
|
|
const activeTab = ref('recharge')
|
|
|
-
|
|
|
-// 搜索相关状态
|
|
|
-const searchQuery = ref('')
|
|
|
-const searchLoading = ref(false)
|
|
|
-const popularSearchTags = ref(['原神', '王者荣耀', 'Steam', 'PUBG', '礼品卡', 'CDK'])
|
|
|
-
|
|
|
// 加载状态
|
|
|
const isLoading = ref(true)
|
|
|
const carouselLoading = ref(true)
|
|
|
-
|
|
|
// 根据屏幕宽度计算骨架屏数量
|
|
|
const skeletonCount = computed(() => {
|
|
|
return ($q.screen.lg || $q.screen.xl) ? 9 : ($q.screen.md ? 8 : 4)
|
|
|
})
|
|
|
-
|
|
|
// 轮播图模式
|
|
|
const carouselMode = ref('card')
|
|
|
-
|
|
|
// 轮播图数据
|
|
|
const carouselItems = ref([
|
|
|
{
|
|
|
@@ -276,8 +232,6 @@ const carouselItems = ref([
|
|
|
description: 'Steam礼品卡 - 畅享游戏世界'
|
|
|
}
|
|
|
])
|
|
|
-
|
|
|
-
|
|
|
const figmaGiftCards = ref([
|
|
|
{
|
|
|
id: 1,
|
|
|
@@ -320,8 +274,21 @@ const figmaGiftCards = ref([
|
|
|
price: '$36.80',
|
|
|
discount: '8% OFF'
|
|
|
},
|
|
|
+ {
|
|
|
+ id: 7,
|
|
|
+ name: 'EA Sports FC 24',
|
|
|
+ image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', // Placeholder image
|
|
|
+ price: '$36.80',
|
|
|
+ discount: '8% OFF'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 8,
|
|
|
+ name: 'EA Sports FC 24',
|
|
|
+ image: 'https://static.ezbuygame.com/uploads/20250503/7cf4d30153984cc6905a4a39a8464f16.png', // Placeholder image
|
|
|
+ price: '$36.80',
|
|
|
+ discount: '8% OFF'
|
|
|
+ },
|
|
|
]);
|
|
|
-
|
|
|
// 不同类型的商品数据
|
|
|
const productData = {
|
|
|
recharge: [
|
|
|
@@ -356,52 +323,14 @@ const productData = {
|
|
|
{ id: 15, name: 'PUBG Mobile CDK', image: 'https://static.ezbuygame.com/uploads/20250815/0a6cd8b0eac4416d94bd76254af2b423.jpg', sales: '20k+', reviews: '6,789', rating: 3.9, discount: '-30%' }
|
|
|
]
|
|
|
}
|
|
|
-
|
|
|
// 当前显示的商品列表
|
|
|
const currentProducts = computed(() => {
|
|
|
return productData[activeTab.value] || []
|
|
|
})
|
|
|
-
|
|
|
const navigateToProduct = (gameType) => {
|
|
|
// 跳转到charge页面，传递游戏类型参数
|
|
|
router.push({ path: '/charge', query: { game: gameType } })
|
|
|
}
|
|
|
-
|
|
|
-// 搜索相关方法
|
|
|
-const performSearch = () => {
|
|
|
- if (!searchQuery.value.trim()) {
|
|
|
- $q.notify({
|
|
|
- message: '请输入搜索关键词',
|
|
|
- color: 'warning',
|
|
|
- position: 'top'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- searchLoading.value = true
|
|
|
-
|
|
|
- // 模拟搜索API调用
|
|
|
- setTimeout(() => {
|
|
|
- searchLoading.value = false
|
|
|
- $q.notify({
|
|
|
- message: `正在搜索 "${searchQuery.value}"`,
|
|
|
- color: 'positive',
|
|
|
- position: 'top'
|
|
|
- })
|
|
|
- // 这里可以添加实际的搜索逻辑
|
|
|
- // 例如：调用搜索API，更新商品列表等
|
|
|
- }, 1000)
|
|
|
-}
|
|
|
-
|
|
|
-const clearSearch = () => {
|
|
|
- searchQuery.value = ''
|
|
|
- $q.notify({
|
|
|
- message: '已清除搜索内容',
|
|
|
- color: 'info',
|
|
|
- position: 'top'
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
// 检查轮播图图片是否加载完成
|
|
|
const checkCarouselImagesLoaded = () => {
|
|
|
const imagePromises = carouselItems.value.map(item => {
|
|
|
@@ -422,7 +351,6 @@ const checkCarouselImagesLoaded = () => {
|
|
|
carouselLoading.value = false
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
// 模拟数据加载
|
|
|
onMounted(() => {
|
|
|
// 开始检查轮播图图片加载
|
|
|
@@ -494,10 +422,10 @@ onMounted(() => {
|
|
|
/* Custom breakpoint for xl showing 8 cards per row */
|
|
|
@media (min-width: 1440px) {
|
|
|
.col-xl-custom-8 {
|
|
|
- width: 12.5%;
|
|
|
+ width: 16.66%;
|
|
|
/* 100% / 8 = 12.5% */
|
|
|
- flex: 0 0 12.5%;
|
|
|
- max-width: 12.5%;
|
|
|
+ flex: 0 0 16.66%;
|
|
|
+ max-width: 16.66%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -521,7 +449,6 @@ onMounted(() => {
|
|
|
|
|
|
/* sm: 2 cards per row (50%) */
|
|
|
@media (max-width: 599px) {
|
|
|
-
|
|
|
.col-6,
|
|
|
.col-sm-6 {
|
|
|
width: 50%;
|
|
|
@@ -541,21 +468,4 @@ onMounted(() => {
|
|
|
justify-content: center;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
-
|
|
|
-/* 搜索框样式 */
|
|
|
-.search-input :deep(.q-field__control) {
|
|
|
- border-radius: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.search-input :deep(.q-field__native) {
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-
|
|
|
-.search-input :deep(.q-field__prepend) {
|
|
|
- padding-right: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.search-input :deep(.q-field__append) {
|
|
|
- padding-left: 8px;
|
|
|
-}
|
|
|
</style>
|
