99 lines
5.0 KiB
Vue
99 lines
5.0 KiB
Vue
<template>
|
|
<div class="page">
|
|
<div class="page-title">
|
|
材料详情
|
|
<el-button class="back-btn" plain size="small" @click="goBack">返回</el-button>
|
|
</div>
|
|
<div class="card detail-card" v-if="material">
|
|
<el-descriptions :column="1" border class="detail-descriptions">
|
|
<el-descriptions-item label="材料名称">{{ displayText(material.name) }}</el-descriptions-item>
|
|
<el-descriptions-item label="专业类别">{{ displayText(material.major_category_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="材料分类">{{ displayText(material.material_category) }}</el-descriptions-item>
|
|
<el-descriptions-item label="材料子类">{{ displayText(material.material_subcategory) }}</el-descriptions-item>
|
|
<el-descriptions-item label="阶段">{{ displayText(material.stage_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="重要等级">{{ displayText(material.importance_level_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="落地项目">{{ displayText(material.landing_project) }}</el-descriptions-item>
|
|
<el-descriptions-item label="对接人">{{ displayText(material.contact_person) }}</el-descriptions-item>
|
|
<el-descriptions-item label="对接人联系方式">{{ displayText(material.contact_phone) }}</el-descriptions-item>
|
|
<el-descriptions-item label="经办人">{{ displayText(material.handler) }}</el-descriptions-item>
|
|
<el-descriptions-item label="备注">{{ displayText(material.remark) }}</el-descriptions-item>
|
|
<el-descriptions-item label="规格型号">{{ displayText(material.spec) }}</el-descriptions-item>
|
|
<el-descriptions-item label="符合标准">{{ displayText(material.standard) }}</el-descriptions-item>
|
|
<el-descriptions-item label="应用场景">{{ displayList(material.application_scene_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="应用说明">{{ displayText(material.application_desc) }}</el-descriptions-item>
|
|
<el-descriptions-item label="替代材料类型">{{ displayText(material.replace_type_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="竞争优势">{{ displayList(material.advantage_display) }}</el-descriptions-item>
|
|
<el-descriptions-item label="优势说明">{{ displayText(material.advantage_desc) }}</el-descriptions-item>
|
|
<el-descriptions-item label="成本对比">{{ formatPercent(material.cost_compare) }}</el-descriptions-item>
|
|
<el-descriptions-item label="成本说明">{{ displayText(material.cost_desc) }}</el-descriptions-item>
|
|
<el-descriptions-item label="案例">{{ displayText(material.cases) }}</el-descriptions-item>
|
|
<el-descriptions-item label="所属工厂">{{ displayText(material.factory_name) }}</el-descriptions-item>
|
|
<el-descriptions-item label="质量等级">{{ formatStarLevel(material.quality_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="耐久等级">{{ formatStarLevel(material.durability_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="环保等级">{{ formatStarLevel(material.eco_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="低碳等级">{{ formatStarLevel(material.carbon_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="总评分">{{ formatStarLevel(material.score_level) }}</el-descriptions-item>
|
|
<el-descriptions-item label="连接方式">{{ displayText(material.connection_method) }}</el-descriptions-item>
|
|
<el-descriptions-item label="施工工艺">{{ displayText(material.construction_method) }}</el-descriptions-item>
|
|
<el-descriptions-item label="限制条件">{{ displayText(material.limit_condition) }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
<div v-if="material.brochure_url" class="brochure">
|
|
<div class="brochure-title">宣传页</div>
|
|
<img :src="material.brochure_url" alt="宣传页" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { fetchMaterialDetail } from '@/api/material'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const material = ref(null)
|
|
|
|
const loadDetail = async () => {
|
|
material.value = await fetchMaterialDetail(route.params.id)
|
|
}
|
|
|
|
onMounted(loadDetail)
|
|
|
|
const goBack = () => {
|
|
router.back()
|
|
}
|
|
|
|
const displayText = (value) => value || '-'
|
|
|
|
const displayList = (value) => (value?.length ? value.join('、') : '-')
|
|
|
|
const formatPercent = (value) => (value === null || value === undefined || value === '' ? '-' : `${value}%`)
|
|
|
|
const formatStarLevel = (value) => (value ? `${value}星` : '-')
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.brochure {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.brochure-title {
|
|
margin-bottom: 12px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.brochure img {
|
|
max-width: 100%;
|
|
border-radius: 8px;
|
|
border: 1px solid #eee;
|
|
}
|
|
</style>
|