xiangcunwang_web/pages/xiangcunshangcheng/index.html.vue

<template>
    <ShopPageHead></ShopPageHead>
    <main class="index_main" id="all_vue">
        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
        <ShopSubMenu></ShopSubMenu>
        <section class="shop_1_box clearfix">
            <div class="shop_2_left clearfix">

                <div class="shop_2_left_name_box phone_none">
                    <label class="shop_2_left_name">商城公告：</label>
                    <span class="shop_2_left_name_box_a dot1" @click="ShowDialog = true" v-if="DialogData">
                        {{ DialogData.title }}
                    </span>
                </div>

                <div class="phone_shop_2_left_name_box pc_none">

                    <label class="phone_shop_2_left_name">
                        <!-- 商城公告： -->
                    </label>
                    <span class="phone_shop_2_left_name_tag" @click="ShowDialog_phone = true" v-if="DialogData"> &gt; </span>


                    <span class="phone_shop_2_left_name_box_a dot1" @click="ShowDialog_phone = true" v-if="DialogData">
                        {{ DialogData.title }}
                    </span>
                </div>

                <div class="shop_ul_img_1 clearfix">
                    <ShopSwiperXcShop :data="boxData1_data1" :data2="boxData1_data2" :data3="boxData1_data3"></ShopSwiperXcShop>
                </div>
            </div>
            <div class="shop_3_right clearfix">

                <div class="phone_roll_out pc_none">

                    <div class="phone_roll_box">

                        <div class="phone_roll_head">供应商品</div>
 
                        <div class="phone_roll_ul">

                            <el-carousel :interval="933993" height="28vw" indicator-position="outside" @change="change_fun">
                                
                                <el-carousel-item>
                                    <div class="phone_roll_li" v-for="(item,index) in boxData2.slice(0, 2)">
                                         
                                        <nuxtLink 
                                             :to="getShopPathDetail1(item)"
                                            class="phone_roll_li_a"
                                        >    

                                            <img class="phone_roll_li_img" :src="item.imgurl" title="" alt="">

                                            <div class="phone_roll_ul_li_dot1">
                                                {{ item.name }}
                                                 
                                            </div>
                                        </nuxtLink>
                                    </div>
                                </el-carousel-item>
                                 
                                <el-carousel-item>

                                    <div class="phone_roll_li" v-for="(item,index) in boxData2.slice(2, 4)">
                                         
                                        <nuxtLink 
                                             :to="getShopPathDetail1(item)"
                                            class="phone_roll_li_a"
                                        >    

                                            <img class="phone_roll_li_img" :src="item.imgurl" title="" alt="">

                                            <div class="phone_roll_ul_li_dot1">
                                                {{ item.name }}
                                                 
                                            </div>
                                        </nuxtLink>
                                    </div>
 

                                </el-carousel-item>
                                 
                                <el-carousel-item>

                                    <div class="phone_roll_li" v-for="(item,index) in boxData2.slice(4,6)">
                                         
                                        <nuxtLink 
                                             :to="getShopPathDetail1(item)"
                                            class="phone_roll_li_a"
                                        >    

                                            <img class="phone_roll_li_img" :src="item.imgurl" title="" alt="">

                                            <div class="phone_roll_ul_li_dot1">
                                                {{ item.name }}
                                                 
                                            </div>
                                        </nuxtLink>
                                    </div>
 

                                </el-carousel-item>
                                 
                            </el-carousel>    

                        </div>

                    </div>
 
                    <div class="phone_roll_box">


                        <div class="phone_roll_head">求购商品</div>

                        <div class="phone_roll_ul">
                            <el-carousel :interval="933993" height="28vw" indicator-position="outside" @change="change_fun">
                                
                                <el-carousel-item>

                                    <div class="phone_roll_li" v-for="(item,index) in boxData3.slice(0, 2)">
                                         
                                        <nuxtLink 
                                             :to="getShopPathDetail1(item)"
                                            class="phone_roll_li_a"
                                        >    

                                            <img class="phone_roll_li_img" :src="item.imgurl" title="" alt="">

                                            <div class="phone_roll_ul_li_dot1">
                                                {{ item.name }}
                                                 
                                            </div>
                                        </nuxtLink>
                                    </div>
                                </el-carousel-item>
                                 
                                <el-carousel-item>

                                    <div class="phone_roll_li" v-for="(item,index) in boxData3.slice(2, 4)">
                                         
                                        <nuxtLink 
                                             :to="getShopPathDetail1(item)"
                                            class="phone_roll_li_a"
                                        >    

                                            <img class="phone_roll_li_img" :src="item.imgurl" title="" alt="">

                                            <div class="phone_roll_ul_li_dot1">
                                                {{ item.name }}
                                                 
                                            </div>
                                        </nuxtLink>
                                    </div>
 

                                </el-carousel-item>
                                 
                                <el-carousel-item>

                                    <div class="phone_roll_li" v-for="(item,index) in boxData3.slice(4,6)">
                                         
                                        <nuxtLink 
                                             :to="getShopPathDetail1(item)"
                                            class="phone_roll_li_a"
                                        >    

                                            <img class="phone_roll_li_img" :src="item.imgurl" title="" alt="">

                                            <div class="phone_roll_ul_li_dot1">
                                                {{ item.name }}
                                                 
                                            </div>
                                        </nuxtLink>
                                    </div>
 

                                </el-carousel-item>
                                 
                            </el-carousel>    

                        </div>

                    </div>
 
                </div>

                <div class="choice_1_box clearfix phone_none">
                    <div class="choice_1_btn_box clearfix">
                        <div class="choice_1_btn" 
                            :class="{ choice_1_btn_only: choice_1_num == 1 }"
                            @mouseover="choice_1_num = 1">
                            <span class="choice_1_btn_a">供应商品</span>
                        </div>
                        <div class="choice_1_btn" 
                            :class="{ choice_1_btn_only: choice_1_num == 2 }"
                            @mouseover="choice_1_num = 2">
                            <span class="choice_1_btn_a">求购商品</span>
                        </div>
                    </div>
                    <div class="choice_1_card_box">
                        <div class="shop_ul_img_2 choice_1_card clearfix" v-show="choice_1_num == 1">
                            <div class="shop_li_img_2" v-for="(item,index) in boxData2">
                                <nuxtLink 
                                    :to="getShopPathDetail1(item)"
                                    class="shop_li_img_2_a"
                                >
                                    <div class="shop_li_img_2_num"> {{ index + 1 }} </div>
                                    <div class="shop_li_img_2_right clearfix">
                                        <img class="shop_li_img_2_img" :src="item.imgurl" :alt="item.name">
                                        <div class="shop_li_img_2_text">
                                            {{item.name}}
                                        </div>
                                    </div>
                                </nuxtLink>
                            </div>
                        </div>
                        <div class="shop_ul_img_2 choice_1_card clearfix" v-show="choice_1_num == 2">
                            <div class="shop_li_img_2" v-for="(item,index) in boxData3">
                                <nuxtLink 
                                    :to="getShopPathDetail1(item)"
                                    class="shop_li_img_2_a"
                                >
                                    <div class="shop_li_img_2_num"> {{ index + 1 }} </div>
                                    <div class="shop_li_img_2_right clearfix">
                                        <img class="shop_li_img_2_img" :src="item.imgurl" :alt="item.name">
                                        <div class="shop_li_img_2_text">
                                            {{item.name}}
                                        </div>
                                    </div>
                                </nuxtLink>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="shop_2_box clearfix">
            <div class="shop_name_box">
                <div class="shop_name">
                    <span class="shop_name_box_a">为你精选</span>
                </div>
                <div class="shop_name_right">
                </div>
            </div>
            <div class="shop_ul_img_3 clearfix">
                <div class="shop_li_img_3" v-for="(item,index) in boxData4">
                    <NuxtLink
                        :to="getShopPathDetail1(item)"
                        class="shop_li_img_3_a"
                        :title="item.name"
                    >
                        <img class="shop_li_img_3_img" :src="item.imgurl" alt="">
                        <div class="shop_li_img_3_dot2 dot2">
                            {{ item.name }}
                        </div>
                        <div class="shop_li_img_3_hover" v-if="index == 0">
                            <div class="shop_li_img_3_hover_dot1 dot1">
                                {{ item.name }}
                            </div>
                        </div>
                    </NuxtLink>
                </div>
            </div>
        </section>
        <section class="shop_3_box clearfix">
            <div class="shop_name_box">
                <div class="shop_name">
                    <span class="shop_name_box_a">热门产品</span>
                </div>
                <div class="shop_name_right"></div>
            </div>
            <div class="shop_ul_img_3_box_2 clearfix">
                <section class="shop_hot_door_box clearfix" v-for="item in boxData5">
                    <NuxtLink
                        :to="getShopPathDetail1(item)"
                        class="shop_hot_door_a"
                        :title="item.name"
                        
                    >
                        <img class="shop_hot_door_img" :src="item.imgurl" title="" alt="">
                        <div class="shop_hot_door_left">
                            <h4 class="shop_hot_door_h4">乡村商城热门产品</h4>
                            <div class="shop_hot_door_title">性价比高</div>
                            <div class="shop_hot_door_btn">点击查看</div>
                        </div>
                    </NuxtLink>
                </section>
                <div class="shop_li_img_3" v-for="(per_obj, per_index) in 2" :key="per_obj" v-show="false">
                    <!--占位-->
                </div>
                <div class="shop_li_img_3" v-for="item in boxData5data2">
                    <NuxtLink
                        :to="getShopPathDetail1(item)"
                        class="shop_alert_img_li_a"
                        :title="item.name"
                    >
                        <img class="shop_li_img_3_img" :src="item.imgurl" alt="item.name">
                        <div class="shop_li_img_3_dot2 dot2">
                            {{ item.name }}
                        </div>
                    </NuxtLink>
                </div>
            </div>
        </section>
        <section class="shop_4_box clearfix">
            <div class="shop_name_box">
                <div class="shop_name">
                    <span class="shop_name_box_a">热搜商品</span>
                </div>
                <div class="shop_name_right"> </div>
            </div>
            <div class="shop_ul_img_3 clearfix">
                <div class="shop_li_img_3" v-for="item in boxData6">
                    <NuxtLink
                        :to="getShopPathDetail1(item)"
                        class="shop_li_img_3_a"
                        :title="item.name"
                    >
                        <img class="shop_li_img_3_img" :src="item.imgurl" alt="item.name">
                        <div class="shop_li_img_3_dot2 dot2">
                            {{ item.name}}
                        </div>
                    </NuxtLink>
                </div>
            </div>
        </section>
        <!-- 最新发布 -->
        <!-- 热搜商品 -->
        <section class="shop_5_box clearfix">
            <div class="shop_name_box">
                <div class="shop_name"><a class="shop_name_box_a" href="" title="">最新发布</a></div>
                <div class="shop_name_right"> </div>
            </div>
            <!--热搜商品-->
            <div class="shop_ul_img_3_3 clearfix">
                <div class="shop_li_img_3" v-for="item in boxData7" :key="per_obj">
                    <NuxtLink
                        :to="getShopPathDetail1(item)"
                        class="shop_li_img_3_a"
                        :title="item.name"
                    >
                        <img class="shop_li_img_3_img" :src="item.imgurl" alt="item.name">
                        <div class="shop_li_img_3_dot2 dot2">
                            {{ item.name }}
                        </div>
                    </NuxtLink>
                </div>
            </div>
            <!--热搜商品-->
        </section>
        <!-- 热搜商品 -->
    </main>
    <!-- 页面底部 -->
    <HomeFoot></HomeFoot>

    <!--公告弹出框-->
    <el-dialog
        class="shop_notice_box"

        v-if="DialogData"
        v-model="ShowDialog"
        :title="DialogData.title"
        width="50%"
        :before-close="handleClose"
        center
    >
        <div v-html="DialogData.content" class="shop_notice_content"></div>
    </el-dialog>

    <!--公告弹出框 phone-->
    <el-dialog
        class="shop_notice_box"

        v-if="DialogData"
        v-model="ShowDialog_phone"
        :title="DialogData.title"
        width="92%" top="11%"
        :before-close="handleClose"
        center
    >
        <div v-html="DialogData.content" class="shop_notice_content"></div>
    </el-dialog>





</template>

<script setup>
// 引入全局状态
 
 



//1.页面必备方法 start ---------------------------------------->
import { ref, onMounted } from 'vue'
import { ElRadio, ElRadioGroup, ElMessage, ElDialog} from 'element-plus'
const radio1 = ref('1')
// vue选项卡	
const choice_1_num = ref(1)
//1.页面必备方法 end ---------------------------------------->

//2.获得所有数据 start ---------------------------------------->
//模块1 最新数据 轮埠图
const boxData1_data1 = ref([])
const boxData1_data2 = ref([])
const boxData1_data3 = ref([])
//模块2 供应商品
const boxData2 = ref([])
//模块3 求购商品
const boxData3 = ref([])
//模块4 为你精选
const boxData4 = ref([])
//模块5 热门产品
const boxData5 = ref([])
const boxData5data2 = ref([])
//模块6 热搜商品
const boxData6 = ref([])
//模块7 最新发布 图文
const boxData7 = ref([])
//公告
const DialogData = ref("")
const DialogData_phone = ref("")

const ShowDialog = ref(false)
const ShowDialog_phone = ref(false)

//创建请求数据json
let getJson = [
    {"level":"4,0,24"},//最新数据
    {"level":"5,0,6"},//供应商品
    {"level":"6,0,6"},//求购商品
    {"level":"1,0,6"},//为你精选
    {"level":"2,0,11"},//热门产品
    {"level":"3,0,6"},//热搜商品
]

let jsonString = JSON.stringify(getJson)

  

//获取所有数据
async function getPageAllData() {
    const mkdata = await requestDataPromise('/web/getWebsiteshop', {
        method: 'GET',
        query: {
            'catid': 346,
            'id': jsonString,
        },
    });

    if (mkdata.code == 200) {
        console.log(mkdata)
        //最新数据1
        for(let index in mkdata.data.goods[0]){
            //取出前面15个放到boxData1中
            if(index < 5){
                boxData1_data1.value.push(mkdata.data.goods[0][index])
            }else if(index >= 5 && index < 10){
                boxData1_data2.value.push(mkdata.data.goods[0][index])
            }else if(index >= 10 && index < 15){
                boxData1_data3.value.push(mkdata.data.goods[0][index])
            }
        }
        //最新数据2
        boxData7.value = mkdata.data.goods[0];
        //供应商品
        boxData2.value = mkdata.data.goods[1];
        //求购商品
        boxData3.value = mkdata.data.goods[2];
        //为你精选
        boxData4.value = mkdata.data.goods[3];
        //热门产品
        for(let index in mkdata.data.goods[4]){
            if(index < 1){
                boxData5.value.push(mkdata.data.goods[4][index])
            }else{
                boxData5data2.value.push(mkdata.data.goods[4][index])
            }
        }
        //热搜商品
        boxData6.value = mkdata.data.goods[5];
        //通知公告
        DialogData.value = mkdata.data.article;
    } else {
        ElMessage.error(mkdata.message)
    }
}
getPageAllData();
//2.获得所有数据 end ---------------------------------------->

//3.广告 start ---------------------------------------->
//获得所有广告
let adImg1 = ref({})
onMounted(async () => {
    const { $webUrl, $CwebUrl } = useNuxtApp();

    //从客户端启动广告
    //广告1
    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shopcategory_0001`
    const responseAd1 = await fetch(url, {
        headers: {
            'Content-Type': 'application/json',
            'Userurl': $CwebUrl,
            'Origin': $CwebUrl
        }
    });
    const resultAd1 = await responseAd1.json();
    adImg1.value = resultAd1.data[0];
})
//3.广告 end ---------------------------------------->


useSeoMeta({
            title: "",
            meta: [
                { name: 'keywords', content: "", tagPriority: 10 },
                { name: 'description', content: "", tagPriority: 10 },
                { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no',tagPriority: 10 }
            ]
});
//4.设置seo信息 start---------------------------------------->
//获得当前的完整路径
const route = useRoute();
const fullPath = route.path;
//拆分，取出来中间这一段，然后提取数字部分
const segments = fullPath.split('/');
const targetSegment = segments[1];
const articleId = ref(0);

//通过导航路径反向查询导航id
const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': targetSegment,
    },
});
if (getRouteId.code == 200) {
    articleId.value = getRouteId.data.category_id
} else {
    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    console.log("错误位置：通过url路径查询导航池id")
    console.log("后端错误反馈：", getRouteId.message)
    console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
}
//4.1 设置seo信息
const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
    method: 'GET',
    query: {
        'catid': articleId.value
    },
});

if (setData.code == 200) {
    let seoTitle = setData.data.seo_title;
    let seoDescription = setData.data.seo_description;
    let seoKeywords = setData.data.seo_keywords;
    let seoSuffix = setData.data.suffix;
    let seoName = setData.data.website_name;

    useSeoMeta({
        title: seoTitle + "_" + seoName + "_" + seoSuffix,
        meta: [
            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
            { name: 'viewport', content:"width=device-width,initial-scale=1,user-scalable=no"}

        ]
    });
} else {
    // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    // console.log("错误位置：设置列表页面SEO数据")
    // console.log("后端错误反馈：", setData.message)
    // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
}
//4.设置seo信息 end---------------------------------------->
</script>


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


<style lang="less" scoped>

 
    @media screen and (min-width:801px){/*pc*/
         
		
            .pc_none{display:none;}
    }
    @media screen and (max-width:800px){/*ipad_phone*/

            .index_main{width:100%;margin:0px auto;}
            .shop_2_left{width:100%;float:none;}
             
            .shop_1_box{ margin-top:8px;}

            .phone_shop_2_left_name_box{
                height:33px;width:92%;background:#A01C0E;
                padding:0px 4%;box-sizing:border-box;
                margin:0px auto;

                .phone_shop_2_left_name{
                    height:100%;line-height:33px;color:#fff;font-size:16px;float:left;margin-right:8px;
                     padding-right:20px;
                    background:url(../../public/image/3.png) no-repeat right center;
                    background-size:auto 18px;
                }

                .phone_shop_2_left_name_tag{height:100%;line-height:33px;color:#fff;font-size:22px;float:right;margin-left:8px;}

                .phone_shop_2_left_name_box_a{display:block;height:100%;line-height:33px;color:#fff;font-size:14px;}

            }

            .shop_ul_img_1{
                width:92%;margin:10px auto;
            }    
            .shop_3_right{width:92%;float:none;margin:0px auto 8px; }

            .phone_roll_out{
                overflow:hidden;

                .phone_roll_box{width:49%;box-sizing:border-box;border:solid 4px #A01C0E;border-radius:4px;
                             background:#A01C0E;}    
                .phone_roll_box:nth-of-type(odd){float:left;}    
                .phone_roll_box:nth-of-type(even){float:right;}    

                .phone_roll_head{height:33px;line-height:33px;color:#fff;font-size:16px;
                                    font-style:italic;text-indent:11px;}    
                .phone_roll_ul{overflow:hidden;background:#fff7ed;border-radius:4px;}    
                .phone_roll_li{width:44%;box-sizing:border-box; }    
                .phone_roll_li:nth-of-type(odd){float:left;margin-left:3%;}    
                .phone_roll_li:nth-of-type(even){float:right;margin-right:3%;}    

                .phone_roll_li_a{display:block;width:100%;height:100%;}    
                .phone_roll_li_img{display:block;width:100%;height:20vw;margin-top:2vw;}    

                .phone_roll_ul_li_dot1{height:5vw;line-height:5vw;color:#A01C0E;font-size:3vw;text-align:center;
                        margin:1vw 0;
                                   word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis; 
                }    

                /deep/.el-carousel__arrow--left{display:none;}
                /deep/.el-carousel__arrow--right{display:none;}

                 
                /deep/.el-carousel__indicators--outside button{width:3vw;height:3vw;border-radius:50%;background:#e98008;margin:0px 1vw;}
                /deep/.el-carousel__indicator.is-active button{background:#ffc62e;}

            }    

             .shop_2_box{width:92%;margin:10px auto;}   
             .shop_name_box .shop_name{height:33px;line-height:33px;}   
             .shop_name_box .shop_name_box_a{height:33px;line-height:33px;font-size:14px;font-weight:normal;display:block;}
             .shop_name_box{overflow:hidden;border-bottom:1px solid #E6E6E6;}   
            .shop_name_right{display:none;}

            .shop_ul_img_3{height:120vw!important;margin-top:11px; }
            .shop_ul_img_3_box_2{margin:10px auto;overflow:hidden;height:169vw; }
            .shop_ul_img_3_3{height:300vw;margin-top:11px; }    


            .shop_li_img_3{width:48%;margin:0px auto 15px;}
            .shop_ul_img_3 .shop_li_img_3:nth-of-type(n+5){display:none;}
            .shop_li_img_3:nth-of-type(even){float:right;}
            .shop_li_img_3:nth-of-type(odd){float:left;}
            .shop_li_img_3_a{display:block;width:100%;}
            .shop_li_img_3_img{display:block;width:100%;height:44vw;}
            .shop_li_img_3_dot2{width:100%;margin:2vw auto 0;
                        font-size:4vw;line-height:5vw;height:10vw;}    


            .shop_ul_img_3_box_2 .shop_li_img_3:nth-of-type(n+7){display:none;}
            .shop_3_box{width:92%;margin:10px auto 0;}

            .shop_hot_door_box{float:none;width:100%;margin:8px auto;height:auto;}
            .shop_hot_door_box a{display:block;width:100%;overflow:hidden;}
            .shop_hot_door_img{margin:10px;}
            .shop_hot_door_h4{height:auto;line-height:22px;font-size:16px;font-weight:normal;margin-top:22px;}

            .shop_4_box{height:auto;width:92%;margin:10px auto 0;}

            .shop_4_box .shop_li_img_3:nth-of-type(n+7){display:none;}
            
            .shop_5_box{width:92%;margin:10px auto 0;}    
            .shop_5_box .shop_li_img_3:nth-of-type(n+11){display:none;}

            //  /deep/ .el-dialog--center{width:92%;}   
            :deep(.el-overlay){width:92%;border:dashed 1px red;}   
            /deep/ .el-overlay{width:92%;border:dashed 1px red;}   


            .phone_none{display:none;}
            
        }
        

</style>