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">
                    <label class="shop_2_left_name">商城公告：</label>
                    <span class="shop_2_left_name_box_a dot1" @click="ShowDialog = true">
                        {{ 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="choice_1_box clearfix">
                    <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 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 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
        v-model="ShowDialog"
        :title="DialogData.title"
        width="50%"
        :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 ShowDialog = 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 ---------------------------------------->
</script>


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