fzxfb_org_cn/components/zoom/dishizhongxin.vue

<template>
    <!-- 页面头部 -->
    <HomePageHead></HomePageHead>
    <!-- 导航栏 -->
    <HomePageNavigation></HomePageNavigation>
    <!-- 面包屑导航 -->
    <div class="breadcrumb-box">
        <div class="inner">
            <span class="location">当前位置：</span>
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item>
                    <NuxtLink to="/">首页</NuxtLink>
                </el-breadcrumb-item>
                <el-breadcrumb-item class="phone_breadcrumb_text">地市中心</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
    <!--未查询结果-->
    <div class="search-result-box" v-show="showResult == 1">
        <div class="search-result-box-title">
            本地区暂未开通调研中心，欢迎有意从事法制公益性工作的公民或法人单位申请代理。
            <br />
            详情咨询电话：010-56212745、010-53382908、010-56212741。
        </div>
        <div class="search-result-box-qq">
            <div>QQ咨询：</div>
            <div>
                <NuxtLink to="https://wpa.qq.com/msgrd?v=3&uin=1234567890&site=qq&menu=yes">
                    <img src="@/public/search/qq.gif" alt="点击这里给我发消息" title="点击这里给我发消息">
                </NuxtLink>
                <NuxtLink to="http://wpa.qq.com/msgrd?v=3&amp;uin=1224368922&amp;site=qq&amp;menu=yes">
                    <img src="@/public/search/qq.gif" alt="点击这里给我发消息" title="点击这里给我发消息">
                </NuxtLink>
            </div>
        </div>
        <div class="search-result-box-back">
            <span @click="returnSearchPage">返回首页>></span>
        </div>
    </div>
    <!--查询结果-->
    <div class="search-result-box-content" v-show="showResult == 2">
        <div class="search-result-content-title">{{ resuluData.name }}</div>
        <div class="search-result-content-file">
            <div>关于成立{{ resuluData.name }}的决定</div>
            <div>关于{{ resuluData.name }}负责人任命通知</div>
        </div>
        <div class="search-result-content-info">
            <div>负责人信息</div>
        </div>
        <div class="search-result-content-table">
            <div class="search-result-content-tr">
                <div class="search-result-content-line-title">
                    <div>主任</div>
                    <div>联系方式</div>
                    <div>通讯地址</div>
                    <div>邮编</div>
                </div>
                <div class="search-result-content-line-text">
                    <div>{{ resuluData.zhuren_name }}</div>
                    <div>{{ resuluData.zhuren_phone }}</div>
                    <div></div>
                    <div></div>
                </div>
                <div class="search-result-content-line-title">
                    <div>副主任</div>
                    <div>联系方式</div>
                    <div>通讯地址</div>
                    <div>邮编</div>
                </div>
                <div class="search-result-content-line-text">
                    <div>{{ resuluData.fu_name }}</div>
                    <div>{{ resuluData.fu_phone }}</div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
        <div class="search-result-content-back">
            <span @click="returnSearchPage">返回首页>></span>
        </div>
    </div>
    <!--查询-->
    <div class="search-big-box" v-show="showResult == 0">
        <div class="search-box">
            <div class="search-left-box">
                <div>
                    <span class="search-left-box-text">地区：</span>
                    <el-select v-model="province" placeholder="--" size="large" style="width: 180px" popper-class="custom-select-dropdown">
                        <el-option v-for="item in provinceList" :key="item.id" :label="item.name" @click="change(item)"
                            :value="item.id" />
                    </el-select>
                    <el-select v-model="city" placeholder="--" no-data-text="请先选择省份" size="large" style="width: 180px"
                        popper-class="custom-select-dropdown">
                        <el-option v-for="(item, index) in cityList" :key="item.id" :label="item.name"
                            @click="change1(item)" :value="item.id" />
                    </el-select>
                    <el-select v-model="region" placeholder="--" no-data-text="请先选择市" size="large" style="width: 180px"
                        popper-class="custom-select-dropdown">
                        <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.code" @click="change2(item)"/>
                    </el-select>
                </div>
                <button @click="getRegionInfo">搜索</button>
            </div>
            <div class="search-right-box">
                <img src="@/public/search/dszx.png" alt="">
                <div>手机扫描查询</div>
            </div>
        </div>
        <div class="search-list-box">
            <div class="search-list-box-title">中心列表</div>
            <div class="search-list-box-main">
                <NuxtLink :to="'#' + item.id" v-for="item in provinceAbbr">{{ item.name }}</NuxtLink>
            </div>
            <div class="search-list-box-content">
                <div class="cityname" v-for="item in provinceDataList">
                    <div class="sheng">
                        <span :id="item.id">{{item.name}}</span>
                    </div>
                    <div class="shi">
                        <span v-for="i in item.children" @click="gotoUrl(item.name,i.name)">{{i.name}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页面底部 -->
    <!-- <HomeFoot></HomeFoot> -->
</template>
<script setup>
//1.页面依赖 start ---------------------------------------->
import { onMounted } from 'vue'
import { ElBreadcrumb, ElBreadcrumbItem, ElMessage, ElInput, ElSelect, ElOption } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'
const nuxtApp = useNuxtApp();
const route = useRoute();
// const articleId = parseInt(route.params.id);
//1.页面依赖 end ---------------------------------------->
//2.展示行政区划 start ---------------------------------------->
//let areaList = ref("")
//2.1 省
let province = ref("")
let provinceid = ref("")
let provinceName = ref("")
let provinceList = ref("")
//2.2 市
let city = ref("")
let cityid = ref("")
let cityName = ref("")
let cityList = ref("")
//2.3 县
let region = ref("")
let regionid = ref("")
let regionName = ref("")
let regionList = ref("")
//选择市
let change = async (item) => {
    provinceid.value = item.id;
    provinceName.value = item.name;
    const shengData = await requestDataPromise('/web/selectWebsiteArea', {
        method: 'GET',
        query: {
            'pid': item.id,
        },
    });
    cityList.value = shengData.data;
    regionList.value = [];// 清空县 
}
//选择县
let change1 = async (item) => {
    cityid.value = item.id;
    cityName.value = item.name;
    const xianData = await requestDataPromise('/web/selectWebsiteArea', {
        method: 'GET',
        query: {
            'pid': item.id,
        },
    });
    regionList.value = xianData.data;
}
let change2 = async (item) => {
    regionid.value = item.id;
    regionName.value = item.name;
}
onMounted(async () => {
    //从客户端获取行政区划
    try {
        const { $webUrl, $CwebUrl } = useNuxtApp();
        const response2 = await fetch($webUrl + '/web/selectWebsiteArea', {
            headers: {
                'Content-Type': 'application/json',
                'Userurl': $CwebUrl,
                'Origin': $CwebUrl
            }
        });
        const result2 = await response2.json();
        provinceList.value = result2.data;
    } catch (error) {
        console.error('获取行政区划数据失败:', error);
    }
    //获得所有地区列表
    getRegionList();
})
//2.展示行政区划 end ---------------------------------------->
//3.表单 start---------------------------------------->
//显示查询结果
let showResult = ref(0)//0=不显示结果 1=显示正确的查询结果 2=未查询到结果
let resuluData = ref({})//负责人详情
//3.1地市查询
let getRegionInfo = async () => {
    if(provinceName.value==""||cityName.value==""){
        ElMessage.error("查询条件至少需要包含省和市！")
    }else{
        //获得地区详情
        const regionInfo = await requestDataPromise('/public/getCity', {
            method: 'POST',
            body: {
                'ssxmid': 10,
                'sheng':provinceName.value,
                'shi':cityName.value,
                'qu':regionName.value
            },
        });
        if(regionInfo.code == 200){
            //查询成功
            showResult.value = 2;
            resuluData.value = regionInfo.data[0];
        }else{
            //查询失败
            console.log(regionInfo.message)
            showResult.value = 1;
        }
    }
}
//返回查询页
let returnSearchPage = () => {
    showResult.value = 0;
    //重置名称
    provinceName.value = "";
    cityName.value = "";
    regionName.value = "";
    //重置选择的值
    provinceid.value = "";
    cityid.value = "";
    regionid.value = "";
    //重置选择器
    province.value = "";
    city.value = "";
    region.value = "";
}
//跳转都网址
let gotoUrl = (sheng,shi) => {
    provinceName.value = sheng;
    cityName.value = shi;
    getRegionInfo();
}
//3.表单 end---------------------------------------->
//4.显示地市列表 start---------------------------------------->
//简称
const provinceAbbr = ref([]);
//地区列表
const provinceDataList = ref([]);
let getRegionList = async () => {
    //获得地区列表
    const regionList = await requestDataPromise('/web/getWebsiteProvinceCity', {
        method: 'GET',
        query: {},
    });
    if(regionList.code == 200){
        //查询成功
        console.log(regionList)
        //获得省份简称
        for(let item of regionList.data){
            let provinceAbbrData = {
                "name":item.abbreviation,
                "id":item.id
            }
            provinceAbbr.value.push(provinceAbbrData);
        }
        provinceDataList.value = regionList.data;
    }else{
        //查询失败
        console.log(regionList.message);
    }
}
//4.显示地市列表 end---------------------------------------->
</script>
<style lang="less" scoped>
    //面包屑
    .breadcrumb-box {
        width: 1400px;
        margin: 0 auto;
        .inner {
            width: 100%;
            height: 22px;
            margin-top: 20px;
            margin-bottom: 20px;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 20px;
            color: #666666;
            line-height: 23px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            align-items: center;
            border-bottom: 1px dashed #ccc;
            margin-bottom: 10px;
            padding: 20px 20px 20px 0;
            box-sizing: border-box;
            a {
                font-size: 16px;
                line-height: 20px;
                font-weight: normal !important;
                &:hover {
                    color: #333
                }
            }
            span {
                font-size: 16px;
                color: #000;
                line-height: 20px;
                &.location {
                    line-height: 20px;
                }
            }
        }
    }
    //搜索
    .search-big-box {
        width: 1400PX;
        margin: 0 auto;
        overflow: hidden;
    }
    .search-box {
        width: 1400PX;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        .search-left-box {
            width: 70%;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            >div {
                width: 80%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                .search-left-box-text {
                    width: 15%;
                    text-align: center;
                    font-size: 16px;
                    font-weight: bold;
                    display: block;
                }
                :deep(.el-select__wrapper) {
                    margin-left: 10px;
                }
                :deep(.el-select__placeholder) {
                    color: #000;
                }
            }
            >button {
                width: 10%;
                display: block;
                color: #fff;
                background-color: #337ab7;
                border-color: #2e6da4;
                font-size: 14px;
                font-weight: 400;
                text-align: center;
                white-space: nowrap;
                user-select: none;
                background-image: none;
                border: 1px solid transparent;
                border-radius: 4px;
                height: 35px;
                line-height: 35px;
            }
        }
        .search-right-box {
            margin-right: 50px;
            width: 20%;
            img {
                width: 100%;
                height: auto;
                display: block;
            }
            >div {
                display: block;
                width: 100%;
                height: 30px;
                line-height: 30px;
                font-size: 16px;
                color: #333;
                text-align: center
            }
        }
    }
    .search-list-box {
        width: 1400px;
        margin: 0 auto;
        border: 1px solid #ccc;
        margin: 30px auto;
        position: relative;
        box-sizing: border-box;
        .search-list-box-title {
            width: 150px;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            color: #000;
            font-weight: bold;
            text-align: center;
            position: absolute;
            top: -25px;
            left: 20px;
            background: #fff;
        }
        .search-list-box-main {
            width: 100%;
            padding: 30px;
            border-bottom: 1px solid #ccc;
            box-sizing: border-box;
            a {
                font-size: 16px;
                padding: 0 10px;
                color: #000;
            }
        }
        .search-list-box-content {
            .cityname {
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;
                border-bottom: 1px solid #ccc;
                &:last-child {
                    border-bottom: 0;
                }
            }
            .sheng {
                width: 20%;
                text-align: center;
                font-size: 20px;
                line-height: 200%;
                color: #337ab7;
            }
            .shi {
                width: 80%;
                height: 100%;
                font-size: 16px;
                color: #000;
                padding: 0 5px;
                display: block;
                border-left: 1px solid #ccc;
                line-height: 40px;
                span {
                    font-size: 16PX;
                    color: #000;
                    padding: 0 5px;
                    display: block;
                    width: auto;
                    float: left;
                    cursor: pointer;
                }
            }
        }
    }
    //返回查询结果
    .search-result-box {
        width: 500px;
        margin: 80px auto;
        height: auto;
        overflow: hidden;
        border: 1px solid #ccc;
        .search-result-box-title {
            line-height: 30px;
            width: 488px;
            height: auto;
            overflow: hidden;
            padding: 6px 6px 0 6px;
            font-size: 15px;
            font-family: serif;
        }
        .search-result-box-qq {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            line-height: 30px;
            width: 488px;
            height: auto;
            overflow: hidden;
            padding: 0 6px 0 6px;
            font-size: 15px;
            font-family: serif;
            div:nth-child(2) {
                display: flex;
                margin-left: 80px;
                img {
                    margin-right: 20px;
                }
            }
        }
        .search-result-box-back {
            text-align: right;
            width: 488px;
            height: 40px;
            overflow: hidden;
            line-height: 48px;
            margin: 0;
            span {
                color: red;
                font-weight: bold;
                font-size: 10px;
                cursor: pointer;
            }
        }
    }
    //返回查询结果
    .search-result-box-content {
        width: 1400PX;
        margin: 0 auto;
        .search-result-content-title {
            text-align: center;
            font-size: 26PX;
            font-weight: bold;
            padding-top: 30PX;
            color: #337ab7;
        }
        .search-result-content-file {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 40PX;
            >div {
                line-height: 40PX;
                height: 40PX;
                overflow: hidden;
                border-bottom: 1px solid #ccc;
                font-size: 20PX;
                width: 48%;
                color: red;
            }
        }
        .search-result-content-info {
            >div {
                width: 120PX;
                height: 40PX;
                line-height: 40PX;
                vertical-align: middle;
                text-align: center;
                color: #fff;
                background: #027dc3;
                margin-top: 30PX;
                margin-bottom: 30PX;
                clear: both;
                font-size: 14PX;
            }
        }
        .search-result-content-table {
            margin-bottom: 40PX;
            .search-result-content-line-title {
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1PX solid #666;
                div {
                    width: 25%;
                    height: 50PX;
                    line-height: 50PX;
                    border-right: 1px solid #666;
                    text-align: center;
                    font-size: 16PX;
                    color: #000;
                    font-weight: bold;
                    &:last-child {
                        border-right: 0;
                    }
                }
            }
            .search-result-content-line-text {
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1PX solid #666;
                border-top: 0;
                margin-bottom: 10px;
                &:last-child {
                    margin-bottom: 0;
                }
                div {
                    width: 25%;
                    height: 50PX;
                    line-height: 50PX;
                    border-right: 1px solid #666;
                    text-align: center;
                    font-size: 16PX;
                    color: #000;
                    &:last-child {
                        border-right: 0;
                    }
                }
            }
        }
        .search-result-content-back {
            text-align: right;
            span {
                color: red;
                font-size: 14PX;
                cursor: pointer;
            }
        }
    }
    .breadcrumb-box {
        width: 1400PX;
        margin: 0px auto 0px;
    }
    .el-breadcrumb {
        height: 22PX;
        line-height: 22PX;
    }
    .breadcrumb-box .inner span.location {
        font-size: 16PX;
        ;
        height: 22PX;
        ;
        line-height: 22PX;
        font-weight: normal;
    }
    .breadcrumb-box .inner a {
        font-size: 16PX;
        ;
        height: 22PX;
        line-height: 22PX;
        display: inline-block;
        font-weight: normal;
    }
    .breadcrumb-box .phone_breadcrumb_text /deep/.el-breadcrumb__inner {
        font-size: 16PX;
        height: 22PX;
        line-height: 22PX;
        font-weight: normal;
    }
    .breadcrumb-box:deep(.el-icon) {
        width: 16PX;
        height: 16PX;
    }
    .breadcrumb-box .inner span {
        font-size: 16PX;
        ;
        height: 22PX;
        line-height: 22PX;
    }
    .search-box {
        width: 1400PX;
        .search-left-box {
            >div {
                .search-left-box-text {
                    font-size: 16PX;
                    word-break: keep-all;
                    white-space: nowrap;
                }
                :deep(.el-select__wrapper) {
                    margin-left: 10PX;
                }
            }
            >button {
                font-size: 14PX;
                border: 1PX solid transparent;
                border-radius: 4PX;
                height: 35PX;
                line-height: 35PX;
            }
        }
        .search-right-box {
            margin-right: 50PX;
            >div {
                height: 30PX;
                line-height: 30PX;
                font-size: 16PX;
            }
        }
    }
    .search-list-box {
        width: 1400PX;
        border: 1PX solid #ccc;
        margin: 30PX auto;
        .search-list-box-title {
            width: 150PX;
            height: 50PX;
            line-height: 50PX;
            font-size: 30PX;
            top: -25PX;
            left: 20PX;
        }
        .search-list-box-main {
            padding: 30PX;
            border-bottom: 1PX solid #ccc;
            a {
                font-size: 16PX;
                padding: 0 10PX;
            }
        }
        .search-list-box-content {
            .cityname {
                border-bottom: 1PX solid #ccc;
            }
            .sheng {
                font-size: 20PX;
            }
            .shi {
                font-size: 16PX;
                padding: 0 5PX;
                border-left: 1PX solid #ccc;
                line-height: 40PX;
                a {
                    font-size: 16PX;
                    padding: 0 5PX;
                }
            }
        }
    }
    //返回查询结果
    .search-result-box {
        width: 500PX;
        margin: 80PX auto;
        border: 1PX solid #ccc;
        .search-result-box-title {
            line-height: 30PX;
            width: 488PX;
            padding: 6PX 6PX 0 6PX;
            font-size: 15PX;
        }
        .search-result-box-qq {
            line-height: 30PX;
            width: 488PX;
            padding: 0 6PX 0 6PX;
            font-size: 15PX;
            div:nth-child(2) {
                margin-left: 80PX;
                img {
                    margin-right: 20PX;
                }
            }
        }
        .search-result-box-back {
            width: 488PX;
            height: 40PX;
            line-height: 48PX;
            a {
                font-size: 10PX;
            }
        }
    }
    .breadcrumb-box .inner {
        height: 22PX;
        line-height: 22PX;
        padding: 20PX 20PX 20PX 0;
    }
    .search-left-box :deep(.el-select .el-select__wrapper) {
        min-height: 40PX !important;
        height: 40PX !important;
        padding: 10PX 10PX;
        font-size: 14PX;
    }
    .custom-select-dropdown .el-select-dropdown__item {
        height: 33PX;
        line-height: 33PX;
        font-size: 14PX;
    }
    .search-left-box :deep(.el-select__caret) {
        font-size: 18PX;
    }
    @media screen and (min-width: 1401px) {
        //你的样式
    }
    @media screen and (max-width: 1400px) {
        .breadcrumb-box {
            width: 100%;
            margin: 0px auto 0px;
            box-sizing: border-box;
            padding: 0px 10px;
        }
        .newsList {
            width: 100%;
            box-sizing: border-box;
            padding: 0px 10px;
            margin: 0px auto 0px;
        }
        .search-box {
            width: 100%;
            box-sizing: border-box;
            padding: 0px 10px;
            margin: 0px auto 0px;
        }
        .search-box .search-left-box>button {
            width: 111px;
            margin-left: 11PX;
        }
        .search-list-box {
            width: 96%;
            margin: 0px auto 0px;
            box-sizing: border-box;
            padding: 0px 10px;
        }
        .search-big-box {
            width: 100%;
            box-sizing: border-box;
            padding: 0px 10px;
        }
        .search-list-box {
            margin-top: 22px;
        }
    }
    @media screen and (min-width: 801px) and (max-width: 1400px) {
        //你的样式
        .search-box {
            width: 100%;
            box-sizing: border-box;
            padding: 0px 10px;
            margin: 0px auto 0px;
        }
    }
    @media screen and (max-width: 800px) {
        //你的样式
        .search-box {
            display: block;
        }
        .search-box .search-right-box {
            margin: 4px auto 0px;
            width: 55%;
        }
        :deep(.el-select--large) .el-select__wrapper {
            padding: 4PX 6PX;
        }
        :deep(.el-select__selection) {
            min-width: 50PX;
        }
        .search-box .search-left-box>div {
            width: 100%;
            display: block;
            overflow: hidden;
        }
        .search-box .search-left-box>div>* {
            float: left;
            width: auto !important;
        }
        .search-box .search-left-box>div :deep(.el-select__wrapper) {
            width: 90PX;
        }
        .search-box .search-left-box {
            width: 100%;
            display: block;
            overflow: hidden;
        }
        .search-box .search-left-box>button {
            margin: 22px auto;
        }
        .search-result-box {
            width: 90%;
            margin: 30px auto;
        }
        .search-result-box .search-result-box-title {
            width: 100%;
        }
        .search-list-box {
            width: 96%;
            box-sizing: border-box;
            padding: 0px 10px;
            margin: 55PX auto 0px;
        }
        .search-result-box .search-result-box-back {
            width: 97%;
        }
        .search-result-box .search-result-box-qq div:nth-child(2) {
            margin-left: 0px;
        }
        .search-left-box :deep(.el-select .el-select__wrapper) {
            min-height: 50px !important;
            height: 50px !important;
            padding: 10px 10px;
            font-size: 14PX;
        }
        .search-list-box .search-list-box-title {
            width: 150px;
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            top: -25px;
            left: 20px;
        }
        .search-box .search-left-box>div .search-left-box-text {
            font-size: 26px;
            margin-top: 4px;
        }
        .search-list-box .search-list-box-main {
            padding: 30px;
            overflow: hidden;
        }
        .search-list-box .search-list-box-main a {
            font-size: 28px;
            padding: 11px 11px;
            float: left;
        }
        .search-list-box .search-list-box-content .sheng {
            font-size: 28px;
            margin-top: 20px;
        }
        .search-list-box .search-list-box-content .shi span {
            font-size: 26px;
            padding: 10px 11px 0px;
        }
    }
</style>