realty/virgo.wzfrontend/workark/src/components/work/serve/content/detail.vue

<template>
	<div class="hui-detail">
		<div class="hui-detail-box">
			<div class="hui-detail-title">基础信息</div>
			<div class="hui-detail-content">
				<div class="hui-detail-item">
					<div class="hui-detail-label">主标题</div>
					<div class="hui-detail-value">{{detail.name}}</div>
				</div>
				<div class="hui-detail-item">
					<div class="hui-detail-label">副标题</div>
					<div class="hui-detail-value">{{detail.subtitle}}</div>
				</div>
				<div class="hui-detail-item">
					<div class="hui-detail-label">价格(元)</div>
					<div class="hui-detail-value color-danger">{{detail.price}}</div>
				</div>
			</div>
		</div>
		<div class="hui-detail-box">
			<div class="hui-detail-title">商品附件</div>
			<div class="hui-detail-content">
				<div class="hui-detail-item">
					<div class="hui-detail-label">列表展示图</div>
					<div class="hui-detail-value">
						<upload :list="detail.listDisplayImage ? JSON.parse(detail.listDisplayImage) : []" type="preview">
						</upload>
					</div>
				</div>
				<div class="hui-detail-item">
					<div class="hui-detail-label">商品配图</div>
					<div class="hui-detail-value">
						<upload :list="detail.rotatingImages ? JSON.parse(detail.rotatingImages) : []" type="preview">
						</upload>
					</div>
				</div>
				<div class="hui-detail-item">
					<div class="hui-detail-label">详情配图</div>
					<div class="hui-detail-value">
						<upload :list="detail.detailedImage ? JSON.parse(detail.detailedImage) : []" type="preview">
						</upload>
					</div>
				</div>
			</div>
		</div>
		<div class="hui-detail-box" v-if="detail.intro && detail.intro != '[]'">
			<div class="hui-detail-title">商品介绍</div>
			<div class="hui-detail-content">
				<div class="hui-detail-item" v-for="(item,index) in JSON.parse(detail.intro)" :key="index">
					<div class="hui-detail-label">{{item.title}}</div>
					<div class="hui-detail-value">{{item.content}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getServeById
	} from '@/api/serve'
	const upload = () => import('@/components/common/upload');
	export default {
		props: ['detailId'],
		data() {
			return {
				detail: {}
			}
		},
		mounted() {
			if (this.detailId) this.init();
		},
		methods: {
			init() {
				getServeById(this.detailId).then(res => {
					if (res.state) {
						this.detail = res.data;
					}
				})
			}
		},
		components: {
			upload
		}
	}
</script>

<style>
</style>