274 lines
8.0 KiB
Vue
274 lines
8.0 KiB
Vue
<template>
|
||
<div class="product-detail-page" v-if="product">
|
||
<BackNav />
|
||
<div class="detail-card">
|
||
<el-row :gutter="32">
|
||
<el-col :span="12">
|
||
<div class="product-images">
|
||
<el-carousel v-if="productImages.length > 1" height="400px" :autoplay="false" indicator-position="outside">
|
||
<el-carousel-item v-for="(img, index) in productImages" :key="index">
|
||
<el-image :src="img" fit="scale-down" class="carousel-image" :preview-src-list="productImages" :initial-index="index">
|
||
<template #error>
|
||
<div class="image-placeholder">
|
||
<el-icon size="80"><Goods /></el-icon>
|
||
</div>
|
||
</template>
|
||
</el-image>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<el-image v-else-if="productImages.length === 1" :src="productImages[0]" fit="scale-down" class="single-image" :preview-src-list="productImages">
|
||
<template #error>
|
||
<div class="image-placeholder">
|
||
<el-icon size="80"><Goods /></el-icon>
|
||
</div>
|
||
</template>
|
||
</el-image>
|
||
<div v-else class="image-placeholder empty">
|
||
<el-icon size="80"><Goods /></el-icon>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<h1>{{ product.name }}</h1>
|
||
<p class="price">¥{{ product.price }}</p>
|
||
<p class="description">{{ product.description }}</p>
|
||
<div class="meta">
|
||
<el-tag v-if="product.require_credit" :type="hasEnoughCredit() ? 'warning' : 'danger'">
|
||
{{ $t('product.requireCredit') }}: 1
|
||
<span v-if="!hasEnoughCredit()"> (资格不足)</span>
|
||
</el-tag>
|
||
<el-tag v-if="product.credit_reward > 0" type="success">+{{ product.credit_reward * quantity }} {{ $t('product.creditReward') }}</el-tag>
|
||
</div>
|
||
<div class="user-credits" v-if="product.require_credit">
|
||
<span class="credits-label">当前资格：</span>
|
||
<span class="credits-value" :class="{ 'insufficient': !hasEnoughCredit() }">{{ userCredits }}</span>
|
||
</div>
|
||
<div class="custom-fields" v-if="product.custom_fields?.length">
|
||
<h4>{{ $t('product.customFields') }}</h4>
|
||
<div v-for="f in product.custom_fields" :key="f.id" class="field-item">
|
||
<span class="field-name">{{ f.field_name }}:</span>
|
||
<span>{{ f.field_value }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="purchase-section">
|
||
<el-input-number v-model="quantity" :min="product.min_purchase || 1" :max="product.max_purchase || 999" />
|
||
<el-button type="primary" size="large" @click="addToCart">{{ $t('product.addToCart') }}</el-button>
|
||
<el-button type="success" size="large" @click="buyNow">{{ $t('product.buyNow') }}</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import { ElMessage } from 'element-plus'
|
||
import { Goods } from '@element-plus/icons-vue'
|
||
import { productApi, userApi } from '../../api'
|
||
import { useCartStore } from '../../store/cart'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { getImageUrl } from '../../utils/image'
|
||
import BackNav from '../../components/BackNav.vue'
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const { t } = useI18n()
|
||
const cartStore = useCartStore()
|
||
const product = ref<any>(null)
|
||
const quantity = ref(1)
|
||
const userCredits = ref(0)
|
||
|
||
const productImages = computed(() => {
|
||
if (!product.value?.images) return []
|
||
return product.value.images.split(',').map((s: string) => s.trim()).filter(Boolean).map((url: string) => getImageUrl(url))
|
||
})
|
||
|
||
// 检查用户是否有足够资格购买
|
||
function hasEnoughCredit(): boolean {
|
||
if (!product.value || !product.value.require_credit) return true
|
||
return userCredits.value >= 1
|
||
}
|
||
|
||
// 获取用户资格信息
|
||
async function fetchUserCredits() {
|
||
// 未登录时静默跳过，不发起请求
|
||
const token = localStorage.getItem('token')
|
||
if (!token) return
|
||
|
||
try {
|
||
const res: any = await userApi.getProfile()
|
||
userCredits.value = res.data?.purchase_credits || 0
|
||
} catch {
|
||
// 静默处理错误
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
const res: any = await productApi.getById(Number(route.params.id))
|
||
product.value = res.data
|
||
// 设置默认数量为最小购买量
|
||
if (product.value?.min_purchase && product.value.min_purchase > 1) {
|
||
quantity.value = product.value.min_purchase
|
||
}
|
||
// 获取用户资格信息
|
||
await fetchUserCredits()
|
||
})
|
||
|
||
async function addToCart() {
|
||
// 检查购物资格
|
||
if (!hasEnoughCredit()) {
|
||
ElMessage.warning(`资格不足！该商品需要1个资格，您当前只有 ${userCredits.value} 资格`)
|
||
return
|
||
}
|
||
|
||
try {
|
||
// 传入商品信息，支持游客购物车显示
|
||
await cartStore.addItem(product.value.id, quantity.value, product.value)
|
||
ElMessage.success(t('product.addToCart') + ' ✓')
|
||
} catch (err: any) {
|
||
// 处理后端返回的错误
|
||
const errorMsg = err.response?.data?.error || '添加购物车失败'
|
||
ElMessage.error(errorMsg)
|
||
}
|
||
}
|
||
|
||
function buyNow() {
|
||
addToCart().then(() => {
|
||
// 只有成功添加后才跳转
|
||
router.push('/cart')
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.product-detail-page { padding: 0; }
|
||
.detail-card { background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 32px; }
|
||
.product-images {
|
||
height: 400px;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.carousel-image, .single-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
// 约束 el-image 组件
|
||
:deep(.el-image) {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
}
|
||
|
||
// 确保图片按比例缩放显示并居中
|
||
:deep(.el-image__inner) {
|
||
max-width: 100%;
|
||
max-height: 100%;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
|
||
.image-placeholder {
|
||
width: 100%;
|
||
height: 400px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.image-placeholder.empty {
|
||
height: 400px;
|
||
}
|
||
}
|
||
h1 { font-size: 28px; color: #fff; margin-bottom: 16px; }
|
||
.price { font-size: 32px; font-weight: 700; color: #4e6ef2; margin-bottom: 16px; }
|
||
.description { color: rgba(255, 255, 255, 0.5); margin-bottom: 16px; line-height: 1.6; }
|
||
.meta { display: flex; gap: 8px; margin-bottom: 16px; }
|
||
.user-credits {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 16px;
|
||
padding: 8px 12px;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border-radius: 6px;
|
||
|
||
.credits-label {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.credits-value {
|
||
color: #10b981;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
|
||
&.insufficient {
|
||
color: #f56c6c;
|
||
}
|
||
}
|
||
}
|
||
.custom-fields { margin-bottom: 24px; h4 { color: #fff; margin-bottom: 8px; } .field-item { color: rgba(255, 255, 255, 0.7); margin-bottom: 4px; .field-name { color: rgba(255, 255, 255, 0.5); margin-right: 8px; } } }
|
||
.purchase-section { display: flex; gap: 12px; align-items: center; margin-top: 24px; }
|
||
|
||
@media (max-width: 768px) {
|
||
.detail-card {
|
||
padding: 16px;
|
||
}
|
||
|
||
.el-row {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.el-col {
|
||
max-width: 100%;
|
||
flex: 0 0 100%;
|
||
}
|
||
|
||
.product-images {
|
||
height: 300px;
|
||
|
||
.image-placeholder {
|
||
height: 300px;
|
||
}
|
||
}
|
||
|
||
h1 {
|
||
font-size: 18px;
|
||
margin-top: 12px;
|
||
margin-bottom: 12px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.price {
|
||
font-size: 20px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.description {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.purchase-section {
|
||
flex-wrap: wrap;
|
||
|
||
:deep(.el-input-number) {
|
||
width: 100%;
|
||
}
|
||
|
||
:deep(.el-button) {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
</style>
|