jjx-web/pages/yellowPage/factory.vue

<template>
    <view>
        <top-bar></top-bar>
        <common-header></common-header>
        <category-bar></category-bar>
        <gap/>
        <view class="m-a w-1200 bg-white p-20 rounded">
            <el-divider>
                <span class="text-50 text-main font-bold">工厂信息</span>
            </el-divider>
            <el-descriptions border :column="2">
                <el-descriptions-item label="成立年限">
                    <p>{{ info.year }}年</p>
                </el-descriptions-item>
                <el-descriptions-item label="年产值">
                    <p>{{ info.yearsIncome }}万元</p>
                </el-descriptions-item>
                <el-descriptions-item label="员工人数">
                    <p>{{ info.employeeNum }}人</p>
                </el-descriptions-item>
                <el-descriptions-item label="流水线数量">
                    <p>{{ info.flowNum }}条</p>
                </el-descriptions-item>
                <el-descriptions-item label="厂房归属">
                    <p>{{ info.blongTo }}</p>
                </el-descriptions-item>
                <el-descriptions-item label="厂房面积">
                    <p>{{ info.size }}平方米</p>
                </el-descriptions-item>
                <el-descriptions-item label="所在地">
                    <p>{{ info.addressRegion.province.name }}{{ info.addressRegion.city.name }}</p>
                </el-descriptions-item>
                <el-descriptions-item label="主营工艺和业务范围">
                    <p>{{ info.mainProcess }}</p>
                </el-descriptions-item>
                <el-descriptions-item label="主营类别" v-if="info.mainSpotCategory">
                    <p>{{ info.mainSpotCategory.join() }}</p>
                </el-descriptions-item>
                <el-descriptions-item label="服务信息">
                    <p>{{ info.serviceInfo }}</p>
                </el-descriptions-item>
            </el-descriptions>
            <template v-if="info.video">
                <el-divider>
                    <span class="text-50 text-main font-bold">视频</span>
                </el-divider>
                <video :src="info.video" style="width: 100%" controls></video>
            </template>
            <el-divider>
                <span class="text-50 text-main font-bold">设备信息</span>
            </el-divider>
            <el-row :gutter="10" class="p-20 bg-gray-light">
                <el-col :span="3">
                    <p class="text-center">设备名称</p>
                </el-col>
                <el-col :span="3">
                    <p class="text-center">设备数量</p>
                </el-col>
                <el-col :span="3">
                    <p class="text-center">设备来源</p>
                </el-col>
                <el-col :span="3">
                    <p class="text-center">设备类型</p>
                </el-col>
                <el-col :span="3">
                    <p class="text-center">品牌</p>
                </el-col>
                <el-col :span="3">
                    <p class="text-center">型号</p>
                </el-col>
                <el-col :span="3">
                    <p class="text-center">投产年限</p>
                </el-col>
                <el-col :span="3">
                    <p class="text-center">特点描述</p>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="p-20" v-for="(item, index) in info.deviceList" :key="index">
                <el-col :span="3">
                    <p class="text-center">{{ item.name }}</p>
                </el-col>
                <el-col :span="3">
                    <p class="text-center">{{ item.num }}台</p>
                </el-col>
                <el-col :span="3">
                    <p class="text-center">{{ item.source }}</p>
                </el-col>
                <el-col :span="3">
                    <p class="text-center">{{ item.type }}</p>
                </el-col>
                <el-col :span="3">
                    <p class="text-center">{{ item.brand }}</p>
                </el-col>
                <el-col :span="3">
                    <p class="text-center">{{ item.model }}</p>
                </el-col>
                <el-col :span="3">
                    <p class="text-center">{{ item.year }}年</p>
                </el-col>
                <el-col :span="3">
                    <p class="text-center">{{ item.desc }}</p>
                </el-col>
            </el-row>
            <el-divider>
                <span class="text-50 text-main font-bold">工厂实景</span>
            </el-divider>
            <div class="flex justify-start items-start">
                <el-image v-for="(item, index) in info.album" :key="index" :src="item" class="mr-25 mb-25"
                          style="width: 200px; height: 200px;" fit="cover" :preview-src-list="info.album"/>
            </div>
        </view>
        <gap/>
        <common-footer></common-footer>
    </view>
</template>

<script>
export default {
    name: "factory",
    data() {
        return {
            info: null
        }
    },
    methods: {
        async getInfo(userId) {
            const {data} = await vk.callFunction({
                url: 'client/factory/pub/getInfo',
                data: {
                    userId
                }
            })
            if (!data) {
                this.$message.error('获取工厂信息失败')
                setTimeout(() => {
                    vk.navigationBack()
                }, 1000)
            } else {
                this.info = data
            }
        }
    },
    onLoad(options) {
        if (options && options.userId) {
            this.getInfo(options.userId)
        }
    }
}
</script>