<template>
|
<div class="container mx-auto px-4 py-8 bg-white">
|
<!-- 面包屑导航 -->
|
<div class="mb-6 text-gray-500">
|
<el-breadcrumb separator="/">
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
<el-breadcrumb-item :to="{ path: '/certified-products' }">认证产品</el-breadcrumb-item>
|
<el-breadcrumb-item>产品详情</el-breadcrumb-item>
|
</el-breadcrumb>
|
</div>
|
|
<div class="flex gap-8">
|
<!-- 左侧商品图片 -->
|
<div class="w-[400px] flex-shrink-0">
|
<el-image :src="product.image" fit="contain" :preview-src-list="[product.image]" class="w-full h-[400px] border rounded-lg" />
|
</div>
|
|
<!-- 右侧商品信息 -->
|
<div class="flex-1">
|
<h1 class="text-2xl font-medium mb-4">{{ product.name }}</h1>
|
|
<!-- 订货信息 -->
|
<div class="bg-gray-50 p-4 rounded-lg mb-4">
|
<div class="text-gray-500 mb-2">订货编码：{{ product.applicationCode }}</div>
|
<div class="flex items-center gap-2">
|
<span class="text-gray-500">能效等级：</span>
|
<div class="flex items-center">
|
<img :src="product.eecLevelIcon" class="h-8" />
|
<span class="text-white relative right-[42px] top-[-1px]">1</span>
|
<span class="text-white relative right-[30px] top-[-1px] text-sm">一级能效</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 价格区域 -->
|
<div class="mb-6">
|
<div class="flex items-baseline gap-2">
|
<span class="text-gray-500">价格：</span>
|
<span class="text-2xl font-bold text-red-500">¥{{ product.price }}</span>
|
</div>
|
</div>
|
|
<!-- 服务承诺 -->
|
<div class="border-t border-b py-4 mb-6">
|
<div class="flex items-center gap-6">
|
<div class="flex items-center gap-2">
|
<el-icon class="text-green-500"><Check /></el-icon>
|
<span>正品保证</span>
|
</div>
|
<div class="flex items-center gap-2">
|
<el-icon class="text-green-500"><Check /></el-icon>
|
<span>极速发货</span>
|
</div>
|
<div class="flex items-center gap-2">
|
<el-icon class="text-green-500"><Check /></el-icon>
|
<span>售后无忧</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 购买按钮 -->
|
<div class="flex gap-4">
|
<el-button type="primary" size="large" @click="handleBuyNow">立即购买</el-button>
|
<el-button size="large" @click="handleAddToCart">加入购物车</el-button>
|
</div>
|
</div>
|
</div>
|
|
<!-- 商品详情 -->
|
<div class="mt-8">
|
<el-tabs v-model="activeTab">
|
<el-tab-pane label="商品介绍" name="intro">
|
<div class="p-6">
|
<h3 class="text-lg font-medium mb-4">产品参数</h3>
|
<el-descriptions :column="2" border>
|
<el-descriptions-item label="品牌">{{ product.brand }}</el-descriptions-item>
|
<el-descriptions-item label="型号">{{ product.model }}</el-descriptions-item>
|
<el-descriptions-item label="功率">{{ product.power }}</el-descriptions-item>
|
<el-descriptions-item label="电压">{{ product.voltage }}</el-descriptions-item>
|
<el-descriptions-item label="转速">{{ product.speed }}</el-descriptions-item>
|
<el-descriptions-item label="防护等级">{{ product.protection }}</el-descriptions-item>
|
</el-descriptions>
|
|
<div class="mt-8">
|
<h3 class="text-lg font-medium mb-4">产品详情</h3>
|
<div class="space-y-4">
|
<img v-for="(img, index) in product.detailImages" :key="index" :src="img" class="w-full" alt="产品详情图" />
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="规格参数" name="params">
|
<div class="p-6">
|
<el-descriptions :column="1" border>
|
<el-descriptions-item v-for="(value, key) in product.specifications" :key="key" :label="key">
|
{{ value }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="包装售后" name="service">
|
<div class="p-6">
|
<h3 class="text-lg font-medium mb-4">包装清单</h3>
|
<p class="text-gray-600">{{ product.package }}</p>
|
|
<h3 class="text-lg font-medium mt-6 mb-4">售后服务</h3>
|
<div class="text-gray-600">
|
<p>1. 本产品全国联保，享受三包服务</p>
|
<p>2. 质保期：12个月</p>
|
<p>3. 对于质量问题，提供免费维修服务</p>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
|
<!-- 购买确认对话框 -->
|
<el-dialog v-model="showBuyDialog" title="确认订单" width="500px">
|
<div class="p-4">
|
<div class="flex items-center gap-4 mb-6">
|
<el-image :src="product.image" class="w-20 h-20" />
|
<div>
|
<div class="font-medium">{{ product.name }}</div>
|
<div class="text-red-500 mt-2">¥{{ product.price }}</div>
|
</div>
|
</div>
|
|
<el-form :model="orderForm" label-width="100px">
|
<el-form-item label="收货人">
|
<el-input v-model="orderForm.name" placeholder="请输入收货人姓名" />
|
</el-form-item>
|
<el-form-item label="联系电话">
|
<el-input v-model="orderForm.phone" placeholder="请输入联系电话" />
|
</el-form-item>
|
<el-form-item label="收货地址">
|
<el-input v-model="orderForm.address" type="textarea" placeholder="请输入详细地址" />
|
</el-form-item>
|
</el-form>
|
</div>
|
<template #footer>
|
<div class="flex justify-between items-center">
|
<div class="text-lg">
|
实付款：<span class="text-red-500 font-medium">¥{{ product.price }}</span>
|
</div>
|
<div class="flex gap-2">
|
<el-button @click="showBuyDialog = false">取消</el-button>
|
<el-button type="primary" @click="confirmOrder">提交订单</el-button>
|
</div>
|
</div>
|
</template>
|
</el-dialog>
|
</template>
|
|
<script setup lang="ts">
|
import EecLevel1 from '@/assets/icons/energy_level_1.svg';
|
import { Check } from '@element-plus/icons-vue';
|
import { ElMessage } from 'element-plus';
|
import { onMounted, ref } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
|
const route = useRoute();
|
const router = useRouter();
|
|
const activeTab = ref('intro');
|
const showBuyDialog = ref(false);
|
|
const orderForm = ref({
|
name: '',
|
phone: '',
|
address: '',
|
});
|
|
// 从localStorage获取产品信息
|
const product = ref({
|
id: '',
|
name: '',
|
applicationCode: '',
|
price: '',
|
image: '',
|
brand: '',
|
model: '',
|
power: '',
|
voltage: '',
|
speed: '',
|
protection: '',
|
eecLevelIcon: EecLevel1,
|
package: '电机 × 1, 说明书 × 1, 合格证 × 1',
|
specifications: {
|
产品型号: '',
|
额定功率: '',
|
额定电压: '',
|
防护等级: '',
|
绝缘等级: 'F级',
|
效率等级: '一级能效',
|
重量: '约12kg',
|
},
|
detailImages: [],
|
});
|
|
const handleBuyNow = () => {
|
showBuyDialog.value = true;
|
};
|
|
const handleAddToCart = () => {
|
ElMessage.success('已添加到购物车');
|
};
|
|
const confirmOrder = () => {
|
if (!orderForm.value.name || !orderForm.value.phone || !orderForm.value.address) {
|
ElMessage.warning('请填写完整的收货信息');
|
return;
|
}
|
ElMessage.success('订单提交成功');
|
showBuyDialog.value = false;
|
// 这里可以添加跳转到订单详情页的逻辑
|
};
|
|
onMounted(() => {
|
// 从localStorage获取产品信息
|
const savedProduct = localStorage.getItem('currentProduct');
|
if (savedProduct) {
|
const productData = JSON.parse(savedProduct);
|
// 合并默认值和保存的产品数据
|
product.value = {
|
...product.value,
|
id: productData.Id,
|
name: productData.ModelType,
|
applicationCode: productData.RecordNumber,
|
price: '询价',
|
image: productData.PhysicalPicturePath,
|
brand: productData.CompanyName,
|
model: productData.Model,
|
power: '详询厂家',
|
voltage: '详询厂家',
|
speed: '详询厂家',
|
protection: '详询厂家',
|
detailImages: [productData.PhysicalPicturePath],
|
specifications: {
|
...product.value.specifications,
|
产品型号: productData.Model,
|
生产企业: productData.CompanyName,
|
备案编号: productData.RecordNumber,
|
备案时间: productData.RecordTime,
|
能效等级: `${productData.EnergyEfficiencyClass}级`,
|
},
|
};
|
}
|
});
|
</script>
|
|
<style scoped>
|
:deep(.el-tabs__nav-wrap::after) {
|
height: 1px;
|
}
|
|
:deep(.el-descriptions__label) {
|
width: 120px;
|
font-weight: normal;
|
}
|
</style>
|
