xiangcunwang_web/components/home/foot.vue

<template>
    <footer class="index_foot">
        <div class="foot_img_box">
            <a :href="item.url" v-for="(item, index) in bottomLink" :title="item.title" target="_blank">
                <img :src="item.logo_url" :alt="item.title">
            </a>
        </div>
        <div class="foot_frind_box">
            <span>友情链接</span>
            <div>
                <a :href="item.url" v-for="(item, index) in bottomText" :key="index" :title="item.title"
                    target="_blank">{{ item.title }}</a>
            </div>
        </div>
    </footer>

    <div class="call_us_box">
        <span v-for="(item, index) in bottomMenu" :key="index">
            <NuxtLink :to="{ path: `/specialList/${item.id}` }" v-if="item.type == 1" :title="item.name">
                {{ item.name }}
            </NuxtLink>
            <NuxtLink :to="{ path: `/speciaArticle/${item.id}` }" v-if="item.type == 0" :title="item.name">
                {{ item.name }}
            </NuxtLink>
        </span>
    </div>
    <footer class="index_foot">
        <div class="foot_text_box" v-if="bottomBase">
            <p v-html="bottomBase.statement" class="foot_text_html_css"></p>
            <p v-html="bottomBase.organizer" class="foot_text_html_css"></p>
            <p v-html="bottomBase.copyright_information" class="foot_text_html_css"></p>
            <p><span v-html="bottomBase.icp_number" class="foot_text_html_css"></span><span
                    v-html="bottomBase.record_number" class="foot_text_html_css"></span></p>
            <p v-html="bottomBase.email" class="foot_text_html_css"></p>
            <p v-html="bottomBase.company_address" class="foot_text_html_css"></p>
            <p v-html="bottomBase.contact_number" class="foot_text_html_css"></p>
        </div>
        <div class="foot_logo_out" v-if="bottomBase">
            <a :href="'http://' + bottomBase.project_url" :title="bottomBase.project_name"
                v-if="bottomBase.project_logo != '' && bottomBase.project_url != ''">
                <img :src="bottomBase.project_logo" class="floatLogoRight" :alt="bottomBase.project_name">
            </a>
            <span v-else-if="bottomBase.project_logo != '' && bottomBase.project_url == ''">
                <img :src="bottomBase.project_logo" class="floatLogoRight" :alt="bottomBase.project_name">
            </span>
            <a :href="'http://' + bottomBase.company_url" :title="bottomBase.company_name"
                v-if="bottomBase.company_logo != '' && bottomBase.company_url != ''">
                <img :src="bottomBase.company_logo" class="floatLogoLeft" :alt="bottomBase.company_name">
            </a>
            <span v-else-if="bottomBase.company_logo != '' && bottomBase.company_url == ''">
                <img :src="bottomBase.company_logo" class="floatLogoLeft" :alt="bottomBase.company_name">
            </span>
        </div>
        <div class="foot_last_img_box">
            <a :href="item.url" v-for="(item, index) in bottomphoto" :title="item.title">
                <img :src="item.logo_url" :alt="item.title">
            </a>
        </div>

        <!--在线客服-->
        <!-- <div class="kefu">
            <div class="kefu_itemKf">
                <a :href="bottomBase.online_service" target="_blank">
                    <img src="https://img.bjzxtw.org.cn/pre/public/image/online1.png">
                    <p>在线客服</p>
                </a>
            </div>
            <div class="kefu_itemQQ">
                <img src="https://img.bjzxtw.org.cn/pre/public/image/qq1.png">
                <p>QQ客服</p>
                <div class="kefu_item_content_QQ">
                    <div @click="addQQFriend(qq1)" class="qqadd">
                        <img src="https://img.bjzxtw.org.cn/pre/public/index/tubiao1.png" width="100">
                        <div class="qqfs">{{ bottomBase.customer_service_qq }}</div>
                    </div>
                    <div @click="addQQFriend(qq2)" class="qqadd">
                        <img src="https://img.bjzxtw.org.cn/pre/public/index/tubiao2.png" width="100">
                        <div class="qqfs">{{ bottomBase.communications }}</div>
                    </div>
                    <div class="arrow"></div>
                </div>
            </div>
            <div class="kefu_itemPhone">
                <img src="https://img.bjzxtw.org.cn/pre/public/image/dianhua1.png">
                <p>电话客服</p>
                <div class="kefu_item_content_phone">
                    <div class="kefu_item_content_phone_title">联系电话：</div>
                    <div>{{ bottomBase.customer_service }}</div>
                    <div class="arrow"></div>
                </div>
            </div>
        </div> -->
    </footer>
</template>

<script setup>
//0.添加网站客服 start---------------------------------------->
//添加网站客服
function addQQFriend(qqNumber) {
    // 使用tencent协议唤起QQ客户端并添加好友
    window.location.href = `tencent://message/?uin=${qqNumber}&Site=&Menu=yes`;
}
//0.添加网站客服 end---------------------------------------->

//获得底部基本信息 start---------------------------------------->
//1.获得全部友情链接与底部图片
const bottomLink = ref([])
const bottomText = ref([])
const bottomphoto = ref([])
const bottomMenu = ref([])
const bottomBase = ref({})

const qq1 = ref("")
const qq2 = ref("")

async function getModelDataAll() {
    const mkdata = await requestDataPromise('/web/getWebsiteFootAll', {
        method: 'GET',
        query: {
            'link_textnum': 8,
            'link_imgnum': 12,
            'link_footnum': 4
        },
    });
    if (mkdata.code == 200) {
        bottomLink.value = mkdata.data.link_img;
        bottomText.value = mkdata.data.link_text;
        bottomphoto.value = mkdata.data.link_foot;
        bottomMenu.value = mkdata.data.foot_cate;
        bottomBase.value = mkdata.data.foot_info;
        //获取qq号数字部分
        qq1.value = bottomBase.value.customer_service_qq.match(/\d+/g);
        qq2.value = bottomBase.value.communications.match(/\d+/g);

    } else {
        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
        console.log("错误位置：获取友情链接图片")
        console.log("后端错误反馈：", mkdata.message)
        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    }
}
getModelDataAll();
//获得底部基本信息 end---------------------------------------->
</script>

<style lang="less" scoped>
@import '@/assets/css/foot.less';
</style>