Initial commit: 商品售卖网站

2026-04-13 07:20:09 +08:00
commit c6154273f2
865 changed files with 26573 additions and 0 deletions
@@ -0,0 +1,128 @@
+<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="contain" 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="contain" 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">
+              <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="warning">{{ $t('product.requireCredit') }}: {{ product.credit_cost }}</el-tag>
+            <el-tag v-if="product.credit_reward > 0" type="success">+{{ product.credit_reward }} {{ $t('product.creditReward') }}</el-tag>
+          </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 } 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 productImages = computed(() => {
+  if (!product.value?.images) return []
+  return product.value.images.split(',').map((s: string) => s.trim()).filter(Boolean).map(url => getImageUrl(url))
+})
+
+onMounted(async () => {
+  const res: any = await productApi.getById(Number(route.params.id))
+  product.value = res.data
+})
+
+async function addToCart() {
+  await cartStore.addItem(product.value.id, quantity.value)
+  ElMessage.success(t('product.addToCart') + ' ✓')
+}
+
+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;
+
+  .carousel-image, .single-image {
+    width: 100%;
+    height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .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);
+  }
+}
+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; }
+.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; }
+</style>