konggang-dingtalkH5/code/src/views/company/detail.vue

<template>
    <div class="content" v-if="isShow">
        <div class="title">
            <div class="logo">
                <img :src="shareBaseUrl + info.pic_url"  alt="" class="logo-img" />
            </div>
            <div class="name">
                {{ info.name || "-" }}
            </div>
        </div>
        <div class="enterprise-item-box">
            <div
                    v-for="(item, idx) in titleList"
                    :key="idx"
                    :class="{ active: active === idx }"
                    class="enterprise-item-name"
                    @click="change(idx)"
            >
                {{ item || "-" }}
            </div>
        </div>

        <div class="baseInfo" v-if="active === 0">
            <div class="card-title">{{ model.title }}</div>
            <div class="item-list">
                <div v-for="(item, idx) in model.item" :key="idx" class="term">
                <div class="term-name">{{ item.name }}:</div>
                <div class="term-value-group" v-if="item.name !== '网址'">
                    <p v-for="(value, idx) in item.value" :key="idx" class="term-value-item" :class="{ blue: item.name === '电话' }" @click="callPhone">
                        {{ value || "-" }}
                    </p>
                </div>
                    <div class="term-value-group" v-else style="flex-direction: row; align-items: center;padding-left: 10px;">
                        <div class="flex_i">
                            <div>
                                {{ item.value[0] || "-" }}
                            </div>
                            <div
                                    v-if="item.value[0]"
                                    class="copy"
                                    @click="copy(item.value[0])"
                                    style="color: #02a7f0; margin-left: 7px"
                            >复制</div
                            >
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-else-if="active === 1" class="proInfo">
            <div class="products">
                <div class="product"  v-for="(item, idx) in productList" :key="idx" @click="goProductDetail(item.id,item.pic_url)">
                    <div class="img">
                        <img :src="item.pic_url" />
                    </div>
                    <div class="name">{{ item.name || "-" }}</div>
                </div>
            </div>
            <div v-if="productList.length === 0" class="products">
                <img src="../../assets/default.png" alt="" />
                <div style="margin: 0 auto">暂无产品信息</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
            components: {
            },
            data() {
            return {
                titleList: ["基本信息", "产品信息"],
                active: 0,
                info: {},
                model: {},
                productList: [],
                isShow: false,
                infoObj: {},
                pageId:'',
                shareBaseUrl:"https://kiq.xazhima.com/",
                companyLogo:'',
                companyName:''
            };
        },
        computed: {},
        watch: {},
        methods: {
            callPhone(value) {
            },
            change(idx) {
                this.active = idx;
            },
            goProductDetail(id,imgUrl){
                this.$router.push({ path: '/company/productDetail', query: { id: id, imgUrl: imgUrl, logo:this.companyLogo, name:this.companyName }})
            },
            getCompanyInfo(id) {
                let that = this;
                that.$api.totalApi.byIdApi(id,'common','company','info_by_id',0).then(res=>{
                    if (res.data.code === 200) {
                        this.infoObj = res.data.data;
                        let {
                            name,
                            pic_url,
                            representative,
                            found_date,
                            capital,
                            code,
                            industry_name,
                            park_name,
                            work_address,
                            rigiser_address,
                            web_url,
                            phone,
                            work_range,
                        } = res.data.data;
                        this.info = {
                            name,
                            pic_url,
                            representative,
                            found_date,
                            capital,
                            code,
                            industry_name,
                            park_name,
                            work_address,
                            rigiser_address,
                            web_url,
                            phone,
                            work_range,
                        };
                        this.info.capital = this.info.capital + '万元'
                        this.model = {
                            title: "",
                            item: [
                                {
                                    name: "法定代表人",
                                    value: [this.info.representative],
                                },
                                {
                                    name: "成立日期",
                                    value: [this.info.found_date],
                                },
                                {
                                    name: "注册资本",
                                    value: [this.info.capital],
                                },
                                {
                                    name: "统一社会信用代码",
                                    value: [this.info.code],
                                },
                                {
                                    name: "所属行业",
                                    value: [this.info.industry_name],
                                },
                                {
                                    name: "所属园区",
                                    value: [this.info.park_name],
                                },
                                {
                                    name: "经营范围",
                                    value: [this.info.work_range],
                                },
                                {
                                    name: "地址",
                                    value: [this.info.rigiser_address],
                                },
                                {
                                    name: "网址",
                                    value: [this.info.web_url],
                                },
                                {
                                    name: "电话",
                                    value: [this.info.phone],
                                },
                            ],
                        };
                        this.companyLogo = this.info.pic_url ? this.shareBaseUrl + this.info.pic_url : require('../../assets/default.png');
                        this.companyName = this.info.name;
                        this.isShow = true;
                    }
                })
            },
            getProductInfo(id) {
                let that = this;
                that.$api.totalApi.byIdApi(id,'common','company_product','list',1).then(res=>{
                    if (res.data.code === 200) {
                        let list = res.data.data.list;
                        list.forEach((e, i) => {
                            e.pic_url = e.pic_url ? this.shareBaseUrl + e.pic_url : require('../../assets/default.png')
                        });
                        this.productList = list;
                        console.log(this.productList);
                    }
                })
            },
        },
//生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
//生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.getCompanyInfo(this.$route.query.id)
            this.getProductInfo(this.$route.query.id)
        },
    }
</script>

<style scoped>
    .content {
        padding: 4%;
        font-size: 16px;
    }
    .blue {
        color: #02a7f0;
    }
    .title {
        display: flex;
        align-items: center;
        border-radius: 5px;
        margin-bottom: 25px;
        box-shadow: rgba(0, 0, 0, 0.35) 0 3px 7px;
        height: 75px;
        padding: 0 10px;
    }
    .logo {
        width: 75px;
        height: 50px;
    }
    .logo-img {
        max-width: 100%;
        max-height: 100%;
    }
    .name{
        /*margin-left: 15px;*/
    }
    .baseInfo {
        margin-bottom: 25px;
    }
    .card-title {
        padding: 10px 10px 0 10px;
        font-weight: 600;
    }
    .item-list {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
    }
    .term {
        display: flex;
    }
    .term-name {
        font-size: 14px;
        width: 35%;
        display: flex;
        margin: 10px;
        color: #7f7f7f;
    }
    .term-value-group {
        flex: 1;
        display: flex;
        flex-direction: column;
        font-size: 14px;
    }
    .term-value-item {
        margin: 10px;
        text-align: left;
    }
    .flex_i {
        display: flex;
        flex-flow: row;
        justify-content: space-around;
    }
    .proInfo {
        font-size:15px;
    }
    .products {
        width: 93%;
        display: flex;
        padding: 4%;
        flex-wrap: wrap;
    }
    .product {
        margin: 2%;
        padding: 2%;
        border-radius: 15px;
        box-shadow: rgba(0, 0, 0, 0.35) 0 3px 7px;
        width: 40%;
        height: 110px;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        align-items: center;
    }
    .img {
        width: 90px;
        /*height: 100px;*/
    }
    .img img {
        width: 100%;
        height: 90%;
    }
    .enterprise-item-box {
        display: flex;
        justify-content: space-evenly;
        margin: 0 5px;
        margin-top: 5px;
    }
    .enterprise-item-name {
        padding-bottom: 5px;
        font-size: 14px;
    }
    .active {
        font-weight: 600;
        border-bottom: 3px solid #02a7f0;
    }
    .margin-bottom-80 {
        margin-bottom: 40px;
    }
</style>