digital_park_static/digital-park-web/digital-park/src/views/index/Service.vue

<!-- 招商服务 -->
<template>
    <div class="service" id="anchor-service">
        <div class="title">招商服务</div>
        <section class="service_box">
            <div class="left">
                <div
                    v-for="(item, index) in serviceTabs"
                    :class="['tab_box', 'pointer', activeTab === index ? 'active' : '']"
                    :key="item.name"
                    @click="changeTab(index)"
                >
                    <div class="tab_title">{{ item.name }}</div>
                    <ul class="tab_ul">
                        <li v-for="item1 in item.children" :key="item1">{{ item1 }}</li>
                    </ul>
                </div>
                <div class="enter pointer" @click="showDialog">
                    <div class="left">
                        <span class="enter_title">我是企业</span>
                        <span class="enter_btn">
                            <span>我要入驻</span>
                            <i class="el-icon-right"></i>
                        </span>
                    </div>
                    <img src="@assets/image/index/icon_company_big.png" alt="企业" />
                </div>
            </div>
            <div
                :class="['right', lists && lists.length > 0 ? '' : 'no_data_padding']"
                v-loading="serviceLoading"
            >
                <ul class="product_ul" v-if="lists && lists.length > 0">
                    <li
                        class="pointer"
                        v-for="item in lists"
                        :key="
                            activeTab === 0 ? item.parkServiceProductId : item.propertyManagementId
                        "
                        @click="
                            goDetail(
                                activeTab === 0
                                    ? item.parkServiceProductId
                                    : item.propertyManagementId
                            )
                        "
                    >
                        <img
                            :src="
                                activeTab === 0
                                    ? formatImg(item.productMasterImg[0])
                                    : formatImg(item.imgList[0])
                            "
                            alt="产品图片"
                        />
                        <div class="product_info">
                            <span class="product_title">
                                {{ activeTab === 0 ? item.productName : item.name }}
                            </span>
                            <span class="product_content">
                                {{ activeTab === 0 ? item.productDetail : item.introduce }}
                            </span>

                            <span class="product_price">
                                <span>
                                    价格：
                                    <span class="price">
                                        ￥
                                        {{
                                            activeTab === 0
                                                ? item.showPrice
                                                : item.housingInformationList &&
                                                  item.housingInformationList.length > 0
                                                ? item.housingInformationList[0].price
                                                : "0"
                                        }}
                                    </span>
                                </span>
                                <span class="more"><i class="el-icon-right"></i></span>
                            </span>
                        </div>
                    </li>
                </ul>
                <div v-else class="have_no_product product_bg">
                    <div class="service_text">
                        <span>高标准厂房出租，环境优美，交通便捷</span>
                        <span>
                            可按企业需求定制，减轻企业负担
                        </span>
                    </div>
                    <div class="pointer service_btn">
                        <span>获取园区招商具体详情</span>
                        <i class="el-icon-right"></i>
                    </div>
                </div>
            </div>
        </section>
        <apply-for-admission ref="applyForAdmission"></apply-for-admission>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getParkServiceProduct, getPropertyManage } from "@api/index";
import { formatImg, routerOpenInNewWindow } from "@/utils/common.js";
import ApplyForAdmission from "./ApplyForAdmission.vue";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: { ApplyForAdmission },
    data() {
        //这里存放数据
        return {
            serviceTabs: [
                {
                    name: "产业招商",
                    children: ["集成电路", "人工智能", "生物医药", "电子信息"],
                },
                {
                    name: "招商载体",
                    children: ["集成电路", "人工智能", "生物医药", "电子信息"],
                },
            ],
            activeTab: 0,
            queryParams: {
                page: 1,
                pageSize: 3,
            },
            lists: [],
            tempList1: [],
            tempList2: [],
            serviceLoading: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        formatImg,
        changeTab(index) {
            this.activeTab = index;
            this.lists = [];
            this.getData();
        },
        getData() {
            if (this.activeTab === 0) {
                this.lists = this.tempList1;
                // this.getParkServiceProduct();
            } else {
                this.lists = this.tempList2;
                // this.getPropertyManage();
            }
        },
        getParkServiceProduct() {
            this.serviceLoading = true;
            getParkServiceProduct(this.queryParams)
                .then(res => {
                    console.log(res.data);
                    if (res.data.status == 0) {
                        this.tempList1 = res.data.data.list;
                        this.lists = this.tempList1;
                    } else {
                        this.$message.error(`获取数据失败,请刷新重试！`);
                    }
                    this.serviceLoading = false;
                })
                .catch(err => {
                    this.$message.error(`获取数据失败,失败原因${err},请刷新重试！`);
                    this.serviceLoading = false;
                });
        },
        getPropertyManage() {
            this.serviceLoading = true;
            getPropertyManage(this.queryParams)
                .then(res => {
                    console.log(res.data);
                    if (res.data.status == 0) {
                        this.tempList2 = res.data.data.list;
                    } else {
                        this.$message.error(`获取数据失败,请刷新重试！`);
                    }
                    this.serviceLoading = false;
                })
                .catch(err => {
                    this.$message.error(`获取数据失败,失败原因${err},请刷新重试！`);
                    this.serviceLoading = false;
                });
        },
        goDetail(id) {
            if (this.activeTab === 0) {
                routerOpenInNewWindow({
                    path: "/product-detail",
                    query: {
                        parkServiceProductId: id,
                    },
                });
            } else {
                routerOpenInNewWindow({
                    path: "/property-detail",
                    query: {
                        propertyManagementId: id,
                    },
                });
            }
        },
        showDialog() {
            this.$refs.applyForAdmission.showDialog();
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getParkServiceProduct();
        this.getPropertyManage();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.service {
    @include size(100%, 910px);
    @include flex(column, center, center, null);
    background: url("~@assets/image/index/bg_service.png") no-repeat;
    background-size: 100% 100%;
}
.title {
    @include font(36px, $color-white);
    padding: 60px 0 40px;
    @include border-box;
}
.service_box {
    @include size($wrapWidth, 700px);
    background: #fff;
    padding: 30px;
    @include border-box;
    @include flex(row, space-between, flex-start, null);
    .left {
        @include size(260px, 100%);
        .tab_box {
            @include size(100%, calc((100% - 140px) / 2));
            margin-bottom: 20px;
            padding: 25px 10px 25px 30px;
            @include border-box;
            .tab_ul {
                @include flex(row, flex-start, center, wrap);
                li {
                    margin-top: 20px;
                    margin-right: 25px;
                }
            }

            background-image: linear-gradient(90deg, #e5f3fd 0%, #fbfeff 100%);
            .tab_title {
                @include font(24px, #334a5f);
                border-bottom: 1px solid #d2e8f6;
                padding-bottom: 20px;
                @include border-box;
            }
            .tab_ul {
                @include font(16px, #637485);
            }
        }
        .active {
            background-image: linear-gradient(90deg, #0689e7 0%, #eff8fe 100%);
            .tab_title {
                @include font(24px, $color-white);
                border-bottom: 1px solid #d2e8f6;
                padding-bottom: 20px;
                @include border-box;
            }
            .tab_ul {
                @include font(16px, $color-white);
            }
        }
        .enter {
            @include size(260px, 100px);
            background-image: linear-gradient(135deg, #01d8ba 0%, #0086e7 100%);
            padding: 18px 18px 18px 26px;

            @include border-box;
            @include flex(row, space-between, center, null);
            .left {
                flex: 1;
                padding-right: 48px;
                @include border-box;
                @include flex(column, space-around, flex-start, null);
                .enter_title {
                    @include font(26px, $color-white);
                }
                .enter_btn {
                    width: 100%;
                    @include font(16px, $color-white);
                    @include flex(row, space-between, center, null);
                }
            }
            img {
                @include size(64px, 64px);
                border-radius: 50%;
            }
        }
    }
    .right {
        @include size(860px, 100%);
        padding: 40px 32px 40px 38px;
        @include border-box;
        background-image: linear-gradient(90deg, #e5f3fd 0%, #fbfeff 100%);

        .product_ul {
            height: 100%;
            @include flex(column, space-between, flex-start, null);
            li {
                @include size(100%, 160px);
                @include flex(row, space-between, center, null);
                img {
                    @include size(260px, 100%);
                }
                .product_info {
                    overflow: hidden;
                    padding-left: 20px;
                    height: 100%;
                    @include border-box;
                    flex: 1;
                    @include flex(column, flex-start, flex-start, null);
                }
                .product_title {
                    width: 100%;
                    @include font(18px, #334a5f);
                    font-weight: 600;
                    @include text-ellipsis;
                }
                .product_content {
                    width: 100%;
                    margin: 15px 0;
                    @include font(16px, #637485);
                    @include text-ellipsis-multiple(3);
                }
                .product_price {
                    width: 100%;
                    @include font(16px, #637485);
                    @include flex(row, space-between, center, null);
                    .price {
                        @include font(24px, #d9121a);
                    }
                    .more {
                        @include font(24px, #637485);
                    }
                }
            }
        }
        .have_no_product {
            @include flex(column, space-around, center, null);
            padding: 130px 88px;
            width: 100%;
            height: 100%;
            @include border-box;
            .service_text {
                @include font(36px, #f2faff);
                @include flex(row, center, center, wrap);
                line-height: 64px;
            }
            .service_btn {
                @include size(282px, 62px);
                @include font(20px, $color-white);
                background-image: linear-gradient(135deg, #01d8ba 0%, #0086e7 100%);
                border-radius: 8px;
                padding: 0 24px;
                @include border-box;
                @include flex(row, space-between, center, null);
            }
        }
        .product_bg {
            background: url("~@assets/image/index/product_bg.png") no-repeat;
            background-size: 100% 100%;
        }
        .service_bg {
            background: url("~@assets/image/index/service_bg.png") no-repeat;
            background-size: 100% 100%;
        }
    }
    .no_data_padding {
        padding: 28px;
        background: #e6f3fd;
    }
}
</style>