sannongshichangwang/components/goods/detail.vue

<template>
    <!-- goods -->
    <div class="goods"> 
        <main class="index_main" v-if="shopType == 1">
                         
            <div class="phone_nav_1 pc_none">
                <div class="phone_nav_in" >

                        <NuxtLink class="phone_nav_a"
                            v-for="(per_obj,per_index) in pageData_1" :key="per_index"

                            :href="`/${per_obj.aLIas_pinyin}/index.html`"
                            :title="per_obj.title">
                            {{ per_obj.alias }}

                        </NuxtLink>

                </div>
            </div>
  
            <section class="index_1 clearfix">

                <div class="breadcrumb phone_none">

                    <div class="inner">
                        <span class="location">当前位置：</span>
                        <el-breadcrumb :separator-icon="ArrowRight">
                            <el-breadcrumb-item>
                                <NuxtLink to="/">首页</NuxtLink>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item v-if="p_parent_name != ''">
                                <NuxtLink :to="`/${targetSegment}/index.html`"> {{ p_parent_name }}</NuxtLink>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item v-if="parent_name != ''">
                                <NuxtLink :to="`/${targetSegment}/${targetSegment1}/index.html`"> {{ parent_name }}
                                </NuxtLink>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>
                                <NuxtLink :to="`/${targetSegment}/${targetSegment1}/${targetSegment2}/list-1.html`">
                                    {{ navTitle }}
                                </NuxtLink>
                            </el-breadcrumb-item>
                            <el-breadcrumb-item>
                                {{ routeNewsTtitle }}
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </div>

                <div class="breadcrumb_box pc_none">
                    
                    <span class=" ">当前位置：</span>

                        <NuxtLink to="/">首页</NuxtLink>
                        <span class=" ">&gt;</span>

                        <NuxtLink v-if="p_parent_name != ''" :to="`/${targetSegment}/index.html`">{{ p_parent_name }}</NuxtLink>
                        <span class=" " v-if="p_parent_name != ''">&gt;</span>

                        <NuxtLink v-if="parent_name != ''" :to="`/${targetSegment}/${targetSegment1}/index.html`"> {{ parent_name }}
                        </NuxtLink>
                        <span class=" " v-if="parent_name != ''">&gt;</span>
                         
                        <span class="">{{ routeNewsTtitle }}</span>
                    
                </div>

            </section>
            <section class="index_2 clearfix">

                <img class="index_2_img" :src="shopImg" :title="newsDetail.name" alt="">
                <div class="index_2_left">
                    <h4 class="index_2_h4 dot1">{{ newsDetail.name }}</h4>
                    <div class="index_2_title_box clearfix">
                        <time class="index_2_title"> 更新日期：{{ newsDetail.updated_at }}</time>
                        <span class="index_2_title">浏览次数：{{ newsDetail.hits }}</span>
                    </div>
                    <div class="index_2_ul clearfix">
                        <div class="index_2_li clearfix">
                            <label class="index_2_li_label">公 司 名</label>
                            <span class="index_2_li_text "> {{ newsDetail.com }}</span>
                        </div>
                        <div class="index_2_li clearfix">
                            <label class="index_2_li_label">所 在 地</label>
                            <span class="index_2_li_text ">{{ newsDetail.address }}</span>
                        </div>
                        <div class="index_2_li clearfix">
                            <label class="index_2_li_label">联 系 人</label>
                            <span class="index_2_li_text ">{{ newsDetail.contact }}</span>
                        </div>
                        <div class="index_2_li clearfix">
                            <label class="index_2_li_label">产品单价</label>

                            <span class="index_2_li_text">
                                {{ newsDetail.price }}
                                元/
                                {{ newsDetail.unit }}
                            </span>
                        </div>
                        <div class="index_2_li clearfix">
                            <label class="index_2_li_label">最小定量</label>
                            <span class="index_2_li_text ">{{ newsDetail.min }}</span>
                        </div>
                        <div class="index_2_li clearfix">
                            <label class="index_2_li_label">供货总量</label>
                            <span class="index_2_li_text ">{{ newsDetail.max }}</span>
                        </div>
                        <div class="index_2_li clearfix">
                            <label class="index_2_li_label">有 效 期</label>
                            <span class="index_2_li_text ">{{ getValidityTime(newsDetail) }}</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 选项卡1 -->
            <section class="index_3 clearfix phone_none">
                <div class="shop_head_1 clearfix">
                    <div class="shop_head_1_name" :class="{ shop_head_1_name_only: supply_num == 1 }"
                        @mouseover="supply_num = 1">详情信息</div>
                    <div class="shop_head_1_name" :class="{ shop_head_1_name_only: supply_num == 2 }"
                        @mouseover="supply_num = 2">联系方式</div>
                    <div class="shop_head_1_name" :class="{ shop_head_1_name_only: supply_num == 3 }"
                        @mouseover="supply_num = 3">图片展示</div>
                </div>
                <div class="card_out clearfix">
                    <div class="card_1_box clearfix card_1_box_only" v-if="supply_num == 1" v-html="newsDetail.detail">
                    </div>
                    <div class="card_1_box clearfix card_1_box_only" v-if="supply_num == 2">
                        <p class="supply_art_box_p">公司名称：{{ newsDetail.com }}</p>
                        <p class="supply_art_box_p">电子邮箱：{{ newsDetail.email }}</p>
                        <p class="supply_art_box_p">邮政编码：{{ newsDetail.postal }}</p>
                        <p class="supply_art_box_p">联系地址：{{ newsDetail.address }}</p>
                    </div>
                    <div class="card_1_box clearfix card_1_box_only" v-if="supply_num == 3">
                        <div class="supply_art_box_img">
                            <img :src="item" v-for="item in newsDetail.imgurl">
                        </div>
                    </div>
                </div>
            </section>


            <div class="index_3 clearfix pc_none">
                
                <div class="phone_box_1_head">
                                
                    <a :class="{ a_choice_only: 1 == supply_num }"
                        @mouseover="supply_num = 1">详情信息</a>
                    <a :class="{ a_choice_only: 2 == supply_num }"
                        @mouseover="supply_num = 2">联系方式</a>
                    <a :class="{ a_choice_only: 3 == supply_num }"
                        @mouseover="supply_num = 3">图片展示</a>

                </div>

                <div class=" pc_none">
                    <!-- 详情信息 phone -->
                    <div class="phone_box_1" v-show="supply_num == 1">
                        
                        <div class="phone_box_1_text" v-html="newsDetail.detail"></div>
                    </div>

                    <!-- 联系方式 phone -->
                    <div class="phone_box_2 " v-show="supply_num == 2">

                        <div class="phone_box_2_text">

                            <div class="phone_box_2_li"><label class="phone_box_2_li_label">公司名称：</label> <span class="phone_box_2_li_text">{{ newsDetail.com }}</span></div>
                            <div class="phone_box_2_li"><label class="phone_box_2_li_label">电子邮箱：</label> <span class="phone_box_2_li_text">{{ newsDetail.email }}</span></div>
                            <div class="phone_box_2_li"><label class="phone_box_2_li_label">邮政编码：</label> <span class="phone_box_2_li_text">{{ newsDetail.postal }}</span></div>
                            <div class="phone_box_2_li"><label class="phone_box_2_li_label">联系地址：</label> <span class="phone_box_2_li_text">{{ newsDetail.address }}</span></div>

                        </div>
                    </div>

                    <!-- 图片展示 phone -->
                    <div class="phone_box_5" v-show="supply_num == 3">

                        <div class="phone_box_5_img_ul">
                                <img :src="item" v-for="item in newsDetail.imgurl">      
                        </div>

                        
                    </div>

                </div>

            </div>

            <!-- 选项卡2 -->
            <section class="index_4 clearfix phone_none">
                <div class="box_1 clearfix">
                    <div class="box_1_head">
                        <div class="box_1_head_name">点击排行</div>
                    </div>
                    <div class="img_ul_1 clearfix">
                        <div class="img_li_1 clearfix" v-for="(item, index) in pageData1" :key="index">
                            <NuxtLink class="img_li_1_a" :href="getLinkPathDetail(item)" :title="item.title">
                                <div class="img_li_1_img_box clearfix">
                                    <img class="img_li_1_img" :src="item.imgurl" :title="item.title" alt="">
                                </div>
                                <div class="img_li_1_dot2">{{ item.name }}
                                </div>
                            </NuxtLink>
                        </div>
                    </div>
                </div>
                <div class="box_1 clearfix">
                    <div class="box_1_head">
                        <div class="box_1_head_name">最新商机</div>
                    </div>
                    <div class="img_ul_1 clearfix">
                        <div class="img_li_1 clearfix" v-for="(item, index) in pageData2" :key="index">
                            <NuxtLink class="img_li_1_a" :href="getLinkPathDetail(item)" :title="item.title">
                                <div class="img_li_1_img_box clearfix">
                                    <img class="img_li_1_img" :src="item.imgurl" :title="item.title" alt="">
                                </div>
                                <div class="img_li_1_dot2">{{ item.name }}
                                </div>
                            </NuxtLink>
                        </div>
                    </div>
                </div>
            </section>
            
            <div class="phone_3_box pc_none" >

                <div class="phone_head">
                    <NuxtLink class="phone_head_a">
                            点击排行
                    </NuxtLink>
                </div>

                <div class="phone_img_ul clearfix">

                    <div class="phone_img_li clearfix" v-for="(item, index) in pageData1.slice(0,4)" :key="index">
                        <NuxtLink class="phone_img_li_a" :href="getLinkPathDetail(item)" >
                                    <div class="phone_img_li_img_box clearfix">
                                        <img class="phone_img_li_img" :src="item.imgurl" :alt="item.name" >
                                    </div>
                                    <div class="phone_img_li_dot2 dot2">{{ item.name }}</div>
                        </NuxtLink>         
                    </div> 
                    
                </div>

            </div>

            <div class="phone_4_box pc_none" >

                <div class="phone_head">
                    <NuxtLink class="phone_head_a">
                            最新商机
                    </NuxtLink>
                </div>

                <div class="phone_img_ul clearfix">

                    <div class="phone_img_li clearfix" v-for="(item, index) in pageData2.slice(0,6)" :key="index">
                        <NuxtLink class="phone_img_li_a" :href="getLinkPathDetail(item)" >
                                    <div class="phone_img_li_img_box clearfix">
                                        <img class="phone_img_li_img" :src="item.imgurl" :alt="item.name" >
                                    </div>
                                    <div class="phone_img_li_dot2 dot2">{{ item.name }}</div>
                        </NuxtLink>         
                    </div>
                    
                </div>

            </div>

        </main>
    
        <main class="index_main" v-if="shopType == 2">
            <div class="phone_nav_1 pc_none">
                <div class="phone_nav_in" >

                        <NuxtLink class="phone_nav_a"
                            v-for="(per_obj,per_index) in pageData_1" :key="per_index"

                            :href="`/${per_obj.aLIas_pinyin}/index.html`"
                            :title="per_obj.title">
                            {{ per_obj.alias }}

                        </NuxtLink>

                </div>
            </div>
              
            <section class=" clearfix">
                <div class="index_out_1_left clearfix">
                    <section class="index_1 clearfix">

                        <div class="breadcrumb phone_none">

                            <div class="inner">
                                <span class="location">当前位置 :</span>
                                <el-breadcrumb :separator-icon="ArrowRight">
                                    <el-breadcrumb-item>
                                        <NuxtLink to="/">首页</NuxtLink>
                                    </el-breadcrumb-item>
                                    <el-breadcrumb-item v-if="p_parent_name != ''">
                                        <NuxtLink :to="`/${targetSegment}/index.html`"> {{ p_parent_name }}</NuxtLink>
                                    </el-breadcrumb-item>
                                    <el-breadcrumb-item v-if="parent_name != ''">
                                        <NuxtLink :to="`/${targetSegment}/${targetSegment1}/index.html`">
                                            {{ parent_name }}
                                        </NuxtLink>
                                    </el-breadcrumb-item>
                                    <el-breadcrumb-item>
                                        <NuxtLink :to="`/${targetSegment}/${targetSegment1}/${targetSegment2}/list-1.html`">
                                            {{ navTitle }}
                                        </NuxtLink>
                                    </el-breadcrumb-item>
                                    <el-breadcrumb-item>
                                        {{ routeNewsTtitle }}
                                    </el-breadcrumb-item>
                                </el-breadcrumb>
                            </div>
                        </div>


                        <div class="breadcrumb_box pc_none">
                            
                            <span class=" ">当前位置：</span>

                                <NuxtLink to="/">首页</NuxtLink>

                                <span class=" " v-if="p_parent_name != ''">&gt;</span>
                                <NuxtLink v-if="p_parent_name != ''" :to="`/${targetSegment}/index.html`">{{ p_parent_name }}</NuxtLink>

                                <span class=" " v-if="parent_name != ''">&gt;</span>
                                <NuxtLink v-if="parent_name != ''" :to="`/${targetSegment}/${targetSegment1}/index.html`"> {{ parent_name }}
                                </NuxtLink>

                                <span class=" " >&gt;</span>
                                <NuxtLink :to="`/${targetSegment}/${targetSegment1}/${targetSegment2}/list-1.html`"> {{ navTitle }}</NuxtLink>


                                <span class=" " >&gt;</span>
                                <span class="">{{ routeNewsTtitle }}</span>
                            
                        </div>

                    </section>
                    <section class="index_2 clearfix">
                        <img class="index_2_img" :src="shopImg" :title="newsDetail.name" alt="">
                        <div class="index_2_right">
                            <h4 class="index_2_h4 dot1">求购：{{ newsDetail.name }}</h4>
                            <div class="index_2_ul clearfix">
                                <div class="index_2_li clearfix">
                                    <label class="index_2_li_label">发布日期</label>
                                    <span class="index_2_li_text">{{ getTime(newsDetail.updated_at, 'year', 1) }}</span>
                                </div>
                                <div class="index_2_li clearfix">
                                    <label class="index_2_li_label">截止日期</label>
                                    <span class="index_2_li_text">{{ getTime(newsDetail.validity, 'year', 1) }}</span>
                                </div>
                                <div class="index_2_li clearfix">
                                    <label class="index_2_li_label">浏览次数</label>
                                    <span class="index_2_li_text">{{ newsDetail.hits }}</span>
                                </div>
                                <div class="index_2_li clearfix">
                                    <label class="index_2_li_label">联 系 人</label>
                                    <span class="index_2_li_text">{{ newsDetail.contact }}</span>
                                </div>
                                <div class="index_2_li clearfix">
                                    <label class="index_2_li_label">发布地区</label>
                                    <span class="index_2_li_text">{{ newsDetail.address }}</span>
                                </div>
                                <div class="index_2_li clearfix">
                                    <label class="index_2_li_label">座 机</label>
                                    <span class="index_2_li_text">{{ newsDetail.landline }}</span>
                                </div>
                                <div class="index_2_li clearfix">
                                    <label class="index_2_li_label">联系电话</label>
                                    <span class="index_2_li_text">{{ newsDetail.phone }}</span>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="shop_3_right clearfix phone_none">
                    <div class="choice_1_box clearfix">
                        <div class="choice_1_btn_box clearfix">
                            <div class="choice_1_btn" :class="{ choice_1_btn_only: supply_buy == 1 }"
                                @mouseover="supply_buy = 1">
                                <span class="choice_1_btn_a" title="供应商品">供应商品</span>
                            </div>
                            <div class="choice_1_btn " :class="{ choice_1_btn_only: supply_buy == 2 }"
                                @mouseover="supply_buy = 2">
                                <a class="choice_1_btn_a" title="求购商品">求购商品</a>
                            </div>
                        </div>
                        <div class="choice_1_card_box">
                            <!-- 供应商品 -->
                            <div class="shop_ul_img_2 choice_1_card clearfix" v-show="supply_buy == 1">
                                <div class="shop_li_img_2" v-for="(item, index) in pageData3" :key="index">
                                    <NuxtLink class="shop_li_img_2_a" :href="getLinkPathDetail(item)"
                                        :title="item.name">
                                        <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" :title="item.name" alt="">
                                            <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="supply_buy == 2">
                                <div class="shop_li_img_2" v-for="(item, index) in pageData4" :key="index">
                                    <NuxtLink class="shop_li_img_2_a" :href="getLinkPathDetail(item)"
                                        :title="item.name">
                                        <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" :title="item.name" alt="">
                                            <div class="shop_li_img_2_text">
                                                {{ item.name }}
                                            </div>
                                        </div>
                                    </NuxtLink>
                                </div>
                            </div>
                            <!-- 求购商品 -->
                        </div>
                    </div>
                </div>
            </section>
            <!-- 选项卡1 -->
            <section class="index_3 clearfix phone_none">

                <div class="shop_head_1 clearfix">
                    <div class="shop_head_1_name" :class="{ shop_head_1_name_only: buy_num == 1 }"
                        @mouseover="buy_num = 1">详情信息</div>
                    <div class="shop_head_1_name" :class="{ shop_head_1_name_only: buy_num == 2 }"
                        @mouseover="buy_num = 2">发布人信息</div>
                </div>
                <div class="card_out clearfix">
                    <div class="card_1_box clearfix card_1_box_only" v-show="buy_num == 1" v-html="newsDetail.detail">
                    </div>
                    <div class="card_1_box clearfix card_1_box_only" v-show="buy_num == 2">
                        <P>公司名称：{{ newsDetail.com }}</P>
                        <P>电子邮箱：{{ newsDetail.email }}</P>
                        <P>邮政编码：{{ newsDetail.postal }}</P>
                        <P>联系地址：{{ newsDetail.address }}</P>
                    </div>
                </div>
            </section>
            
            <div class="index_3 clearfix pc_none">
                
                <div class="phone_box_1_head">
                                
                    <a :class="{ a_choice_only: 1 == buy_num }"
                        @mouseover="buy_num = 1">详情信息</a>
                    <a :class="{ a_choice_only: 2 == buy_num }"
                        @mouseover="buy_num = 2">发布人信息</a>
                </div>

                <div class="">

                    <!-- 详情信息 phone -->
                    <div class="phone_box_1" v-show="buy_num == 1">
                        
                        <div class="phone_box_1_text" v-html="newsDetail.detail"></div>
                    </div>

                    <!-- 发布人信息 phone -->
                    <div class="phone_box_2 " v-show="buy_num == 2">


                        <div class="phone_box_2_text">

                            <div class="phone_box_2_li"><label class="phone_box_2_li_label">公司名称：</label> <span class="phone_box_2_li_text">{{ newsDetail.com }}</span></div>
                            <div class="phone_box_2_li"><label class="phone_box_2_li_label">电子邮箱：</label> <span class="phone_box_2_li_text">{{ newsDetail.email }}</span></div>
                            <div class="phone_box_2_li"><label class="phone_box_2_li_label">邮政编码：</label> <span class="phone_box_2_li_text">{{ newsDetail.postal }}</span></div>
                            <div class="phone_box_2_li"><label class="phone_box_2_li_label">联系地址：</label> <span class="phone_box_2_li_text">{{ newsDetail.address }}</span></div>

                        </div>
                    </div>
 

                </div>

            </div>


            <!-- 选项卡2 -->
            <section class="index_4 clearfix phone_none">
                <div class="box_1 clearfix">
                    <div class="box_1_head">
                        <div class="box_1_head_name">点击排行</div>
                    </div>
                    <div class="img_ul_1 clearfix">
                        <div class="img_li_1 clearfix" v-for="(item, index) in pageData1" :key="index">
                            <NuxtLink class="img_li_1_a" :href="getLinkPathDetail(item)" :title="item.title">
                                <div class="img_li_1_img_box clearfix">
                                    <img class="img_li_1_img" :src="item.imgurl" :title="item.title" alt="">
                                </div>
                                <div class="img_li_1_dot2">{{ item.name }}
                                </div>
                            </NuxtLink>
                        </div>
                    </div>
                </div>
                <div class="box_1 clearfix">
                    <div class="box_1_head">
                        <div class="box_1_head_name">最新商机</div>
                    </div>
                    <div class="img_ul_1 clearfix">
                        <div class="img_li_1 clearfix" v-for="(item, index) in pageData2" :key="index">
                            <NuxtLink class="img_li_1_a" :href="getLinkPathDetail(item)" :title="item.title">
                                <div class="img_li_1_img_box clearfix">
                                    <img class="img_li_1_img" :src="item.imgurl" :title="item.title" alt="">
                                </div>
                                <div class="img_li_1_dot2">{{ item.name }}
                                </div>
                            </NuxtLink>
                        </div>
                    </div>
                </div>
            </section>

            <div class="phone_3_box pc_none" >

                <div class="phone_head">
                    <NuxtLink class="phone_head_a">
                            点击排行
                    </NuxtLink>
                </div>

                <div class="phone_img_ul clearfix">

                    <div class="phone_img_li clearfix" v-for="(item, index) in pageData1.slice(0,4)" :key="index">
                        <NuxtLink class="phone_img_li_a" :href="getLinkPathDetail(item)" >
                                    <div class="phone_img_li_img_box clearfix">
                                        <img class="phone_img_li_img" :src="item.imgurl" :alt="item.name" >
                                    </div>
                                    <div class="phone_img_li_dot2 dot2">{{ item.name }}</div>
                        </NuxtLink>         
                    </div> 
                    
                </div>

            </div>

            <div class="phone_4_box pc_none" >

                <div class="phone_head">
                    <NuxtLink class="phone_head_a">
                            最新商机
                    </NuxtLink>
                </div>

                <div class="phone_img_ul clearfix">

                    <div class="phone_img_li clearfix" v-for="(item, index) in pageData2.slice(0,6)" :key="index">
                        <NuxtLink class="phone_img_li_a" :href="getLinkPathDetail(item)" >
                                    <div class="phone_img_li_img_box clearfix">
                                        <img class="phone_img_li_img" :src="item.imgurl" :alt="item.name" >
                                    </div>
                                    <div class="phone_img_li_dot2 dot2">{{ item.name }}</div>
                        </NuxtLink>         
                    </div>
                    
                </div>

            </div>

        </main>   
    </div>
</template>

<script setup>
//0.页面依赖 start ---------------------------------------->
import { onMounted, ref } from 'vue'
import { ElBreadcrumb, ElBreadcrumbItem, ElRadio, ElRadioGroup, ElCheckbox, ElCheckboxGroup, ElMessage, ElInput } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'
//0.页面依赖 end ---------------------------------------->

//1.获得路由id start ---------------------------------------->
const route = useRoute();
const articleId = parseInt(route.params.id);
const targetSegment = getRoutePath(1);
const targetSegment1 = getRoutePath(2);
const targetSegment2 = getRoutePath(3);
const supply_num = ref(1)
const buy_num = ref(1)
const supply_buy = ref(1)

//1.1 获得当前的路由id
let routeId;
let routeType;
let navTitle = ref('')//二级导航标题
let navCid = ref('')//二级导航id
//通过导航路径反向查询导航id
const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': targetSegment + '/' + targetSegment1 + '/' + targetSegment2,
    },
});
console.log("getRouteId", getRouteId);

if (getRouteId.code == 200) {
    navTitle.value = getRouteId.data.alias
    navCid.value = getRouteId.data.category_id
} else {
    console.log("获得路由id出错！", getRouteId.message)
}
//1.2 获取二级栏目
let parent_name = ref('');//父级名称
let parent_id = ref('');//父级id
let parent_pinyin = ref('');//父级拼音
const getRoutePName = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': targetSegment + '/' + targetSegment1,
    },
});
console.log("getRoutePName", getRoutePName);

if (getRoutePName.code == 200) {
    routeId = getRoutePName.data.category_id
    parent_id.value = getRoutePName.data.category_id
    parent_name.value = getRoutePName.data.alias
    routeType = getRoutePName.data.type
} else {
    console.log("获得路由id出错！", getRoutePName.message)
}
//1.3 获取一级栏目
let p_parent_name = ref('');//父级名称
let p_parent_id = ref('');//父级id
let p_parent_pinyin = ref('');//父级拼音
const getRoutePName_parent = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': targetSegment,
    },
});
console.log("getRoutePName_parent", getRoutePName_parent);

if (getRoutePName_parent.code == 200) {
    p_parent_id.value = getRoutePName_parent.data.category_id
    p_parent_name.value = getRoutePName_parent.data.alias
    // p_parent_pinyin.value = getRoutePName_parent.data.aLIas_pinyin
} else {
    console.log("获得路由id出错！", getRoutePName_parent.message)
}
//1.4 获取某个栏目
const getParentId = await requestDataPromise('/web/getOneWebsiteCategory', {
    method: 'GET',
    query: {
        'catid': parent_id.value,
    },
});
console.log("getParentId", getParentId);

if (getParentId.code == 200) {
    parent_pinyin.value = getParentId.data.aLIas_pinyin
} else {
    console.log("获得路由id出错！", getParentId.message)
}

//1.5是否展示有效期
const getValidityTime = (shopData) => {
    if (shopData.islong == 1) {
        return "无期限"
    } else {
        if (shopData.validity) {
            return shopData.validity.split(' ')[0];
        }
    }
}
//1.获得路由id end ---------------------------------------->

//2.获得模块数据 start ---------------------------------------->
const pageData1 = ref([])//点击排行
const pageData2 = ref([])//最新商机
const pageData3 = ref([])//供应商品
const pageData4 = ref([])//求购商品

//创建请求数据json
let getJson = [
    { "level": "3,0,8" },//点击排行
    { "level": "4,0,8" },//最新商机
    { "level": "5,0,6" },//供应商品
    { "level": "6,0,6" },//求购商品
]
let jsonString = JSON.stringify(getJson)

//获取所有数据
async function getPageAllData() {
    const mkdata = await requestDataPromise('/web/getWebsiteshop', {
        method: 'GET',
        query: {
            'id': jsonString,
            'catid': 713,
        },
    });
    if (mkdata.code == 200) {
        //点击排行
        pageData1.value = mkdata.data.goods[0];
        //最新商机
        pageData2.value = mkdata.data.goods[1];
        //供应商品
        pageData3.value = mkdata.data.goods[2];
        //求购商品
        pageData4.value = mkdata.data.goods[3];
    } else {
        ElMessage.error(mkdata.message)
    }
}
getPageAllData();

//2.获得模块数据 end ---------------------------------------->


//4.新闻详情 start ---------------------------------------->
//4.1 资讯详情
const newsDetail = ref({})
const routeNewsTtitle = ref("");
//4.2 发布日期
const time = ref("");
//4.3 路径
const routLevelTitle = ref("");
const routLevelId = ref("");
//4.4 是否展示投票
const articleChoice = ref(false);
//4.5 获取详情
let shopImg = ref('')
let shopType = ref(1)
let seoTitle;
let seoDescription;
let seoKeywords;
const mkdata = await requestDataPromise('/web/getWebsiteshopInfo', {
    method: 'GET',
    query: {
        'id': articleId
    },
});
if (mkdata.code == 200) {
    //获取内容
    newsDetail.value = mkdata.data;
    shopType.value = mkdata.data.type_id
    //获取路径
    routLevelTitle.value = newsDetail.value.cat_name;
    routLevelId.value = newsDetail.value.category_id;
    shopImg.value = mkdata.data.imgurl[0]
    //获取发布时间
    if (newsDetail.value.updated_at) {
        time.value = newsDetail.value.updated_at.split(' ')[0];
    }
    //修正标题长度
    if (newsDetail.value.name.length >= 20) {
        routeNewsTtitle.value = newsDetail.value.name.substr(0, 20) + "...";
    } else {
        routeNewsTtitle.value = newsDetail.value.name
    }
    seoTitle = newsDetail.value.name;
    seoDescription = newsDetail.value.description;
    seoKeywords = newsDetail.value.keyword;
} else {
    // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    // console.log("错误位置：获取详情内容")
    // console.log("后端错误反馈：", mkdata.message)
    // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
}
//4.新闻详情 end ---------------------------------------->

//5.设置seo信息 start---------------------------------------->
const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
    method: 'GET',
    query: {
        'catid': parent_id.value
    },
});
if (setData.code == 200) {
    let seoSuffix = setData.data.suffix;
    let seoName = setData.data.website_name;
    useSeoMeta({
        title: seoTitle + "_" + seoName + "_" + seoSuffix,
        meta: [
            { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
            { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
        ]
    });
} else {
    console.log("设置频道页SEO出错！", setData.message)
}
//5.设置seo信息 end---------------------------------------->

//8.页面图片放大 start---------------------------------------->
const previewVisible = ref(false)
const selectedImage = ref(' ')

const openPreview = (event) => {
    if (event.target.tagName === 'IMG') {
        selectedImage.value = event.target.src;
        previewVisible.value = true;
    }
}
const closePreview = () => {
    previewVisible.value = false;
}
//8.页面图片放大 end---------------------------------------->



const pageData_1 = ref([])
let routeId_1;
//通过导航路径反向查询导航id
const getRouteId_1 = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': targetSegment ,
    },
});

if (getRouteId_1.code == 200) {
    routeId_1 = getRouteId_1.data.category_id
     
    
} else {
    console.log("获得路由id出错！", getRouteId_1.message)
}
//4.1 获取所有导航1
 try {
    const navigateData_1 = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'placeid': 1,
            'pid': routeId_1,
            'num': 8,
            'type': 1
        },
    });
     
     
    if (navigateData_1.code == 200) {
        // 遍历可用的导航池放到页面中
        for (let index in navigateData_1.data) {
            let data = {
                title: navigateData_1.data[index].name,
                cid: navigateData_1.data[index].category_id,
                children_count: navigateData_1.data[index].children_count,
                alias: navigateData_1.data[index].alias,
                aLIas_pinyin: targetSegment + "/" + navigateData_1.data[index].aLIas_pinyin,
                children: navigateData_1.data[index].children,
                type: navigateData_1.data[index].type,
                pinyin: navigateData_1.data[index].aLIas_pinyin,
                data: [],
                data1: [],
                data2: [],
                data3: [],
                data4: [],
                category_id1: "",
                category_id2: "",
                category_id3: "",
                category_id4: "",
                title1: "",
                title2: "",
                title3: "",
                title4: ""
            };
            if (navigateData_1.data[index].is_url == 1) {
                // 处理 URL 的逻辑
            } else {
                if (navigateData_1.data[index].type == 2) {
                } else if (navigateData_1.data[index].type == 1) {
                }
                //每个页面最多8个模块
                pageData_1.value.push(data);
            }
        }
        // console.log("导航池11111goods", goodsData.value);
        // console.log("导航池11111newsData", newsData.value);

        //导航池加载完毕，开始申请模块数据
        let getJson = [
            // { "parent": routeId + ",0,0", "child": newsData.value[0].cid + ",5,9" },//模块1 
            // { "parent": routeId + ",0,0", "child": newsData.value[1].cid + ",1,6" },//模块2
            // { "parent": routeId + ",0,0", "child": newsData.value[2].cid + ",1,6" },//模块3
            // { "parent": routeId + ",0,0", "child": newsData.value[3].cid + ",1,6" },//模块4
        ]
        for (let i = 0; i < newsData.value.length; i++) {
            if (i == 0) {
                getJson.push({ "parent": routeId + ",0,0", "child": newsData.value[0].cid + ",3,9" })
            } else if (i == 1) {
                getJson.push({ "parent": routeId + ",0,0", "child": newsData.value[1].cid + ",1,2" })
            } else if (i == 2) {
                getJson.push({ "parent": routeId + ",0,0", "child": newsData.value[2].cid + ",1,6" })
            } else if (i == 3) {
                getJson.push({ "parent": routeId + ",0,0", "child": newsData.value[3].cid + ",2,4" })
            }
        }
        let jsonString = JSON.stringify(getJson);
        if (newsData.value.length > 0) {
            getPageAllData(jsonString);
        }


        let goodsJson = [
            // { "catid": goodsData.value[0].cid + ",0,12" },//模块1
            // { "catid": goodsData.value[1].cid + ",0,4" },//模块2
            // { "catid": goodsData.value[2].cid + ",0,4" },//模块3
        ]
        for (let i = 0; i < goodsData.value.length; i++) {
            if (i == 0) {
                goodsJson.push({ "catid": goodsData.value[0].cid + ",0,12" });
            } else if (i == 1) {
                goodsJson.push({ "catid": goodsData.value[1].cid + ",0,4" });
            } else if (i == 2) {
                goodsJson.push({ "catid": goodsData.value[2].cid + ",0,4" });
            }
        }
        let goodsJsonString = JSON.stringify(goodsJson);
        getPageGoodsAllData(goodsJsonString);

    } else {
        console.log("错误：渲染8个模块环节出错，请检查是否存在没有数据的模块！")
    }
} catch (error) {
    console.log("错误：导航池渲染执行接口出错！请检查频道页渲染的模块数据是否完整！")
}


 // 延迟器-2个导航的定位
    const delayTimer_2 = ref(null);
    onMounted(() => {
        delayTimer_2.value = setTimeout(() => {

            let the_1_index = ref(null);
            if(targetSegment1){
                pageData_1.value.forEach((item, index) => {

                    if(item.pinyin == targetSegment1){

                        the_1_index.value = index;
                    }
                })
                 
                if(the_1_index.value != null){
                    document.querySelectorAll('.phone_nav_in .phone_nav_a')[the_1_index.value].classList.add("router-link-active","router-link-exact-active") 
                }

            }



        }, 999);

    })


</script>


<style lang="less" scoped>
@import url('@/assets/css/shop/goodsDetail.less');
@import url('@/assets/css/shop/goodsDetail1.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*/

            .goods{width:100%;margin-bottom:0px;}
            .index_main{width:100%;margin-bottom:0px;}
 
            .index_out_1_left{
                width:100%;float:none;
            }
            .breadcrumb_box{

                 height:22px;width:100%;margin:10px auto;
                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
                width:92%;
                font-size:14px;
                color:#666;  
                
                *{
                    font-size:14px;
                     
                    display:inline ;
                    color:#666;  
                    line-height:22px;height:22px;
                    margin-right:5px;
                }

            } 

            .index_2{width:92%;margin:0px auto 0px;}
            .index_2_img{width:auto;max-width:100%;height:302px;margin:0px auto 0px;float:none;display:block;border-radius:8px;}
            
            .index_2_h4{font-size:16px;line-height:26px;margin-top:11px;border:0px;padding-bottom:0px;}

            .index_2_title{font-size:14px;margin-right:10px;}

            .index_2_right{width:100%;margin:0px auto 0px;float:none;
                
                    .index_2_li{margin-bottom:20px;width:49%; }
                    .index_2_li:nth-of-type(odd){float:left;}
                    .index_2_li:nth-of-type(even){float:right;}
                    
                    .index_2_li:nth-of-type(5){width:100%; }
                    
            
                    
                    .index_2_li .index_2_li_label{line-height:18px;height:18px;font-size:14px;
                                        min-width:auto;margin-right:8px;}
                    .index_2_li .index_2_li_text{line-height:18px;height:18px;font-size:14px;flex:1;
                                word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
                    }
                    .index_2_li:nth-of-type(5) .index_2_li_text{ height:auto;
                        
                                word-wrap: break-word;
                                overflow-wrap: break-word;
                                white-space: pre-wrap;
                                word-break: break-all;
                    } 
             } 
          

             .index_2_left{width:100%;margin:0px auto 0px;float:none;
                
                .index_2_li{margin-bottom:20px;width:49%; }
                .index_2_li:nth-of-type(odd){float:left;}
                .index_2_li:nth-of-type(even){float:right;}
                
                .index_2_li:nth-of-type(-n+2){width:100%;}
                

                .index_2_li .index_2_li_label{line-height:18px;height:18px;font-size:14px;
                                    min-width:auto;margin-right:8px;}
                .index_2_li .index_2_li_text{line-height:18px;font-size:14px;flex:1;
                            
                            word-wrap: break-word;
                            overflow-wrap: break-word;
                            white-space: pre-wrap;
                            word-break: break-all;
                }
                .index_2_li:nth-of-type(n+3) .index_2_li_text{ height:18px;
                    word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
                } 
            
            }
            
             .index_3{width:92%;margin:0px auto 0px;}

            .phone_box_1_head{

                    width:100%;margin:0px auto 0px;
                    height:50px;line-height:50px;
                    background:#fff;border-bottom:1px solid #E6E6E6;
                    
                    a{ 
                        float:left;height:50px;line-height:50px;margin:0;position:relative;
                        color:#333;font-size:15px; font-weight:bold;box-sizing:border-box;
                        position:relative;padding-left:30px;
                    }

                    a.a_choice_only{
                        color:#255590;
                    }

                    a:nth-child(1){
                         background: url(@/public/shop/01.png) no-repeat left center;
                        background-size: 8px 12px;
                        padding-left:15px;
                    }

            }

            .phone_box_1{

                     margin:0px auto 0px;    
                
                    .phone_box_1_text *,.phone_box_1_text{
                            font-size:16px!important;line-height:26px!important;margin-top:15px!important;
                    }
                    
                    .phone_box_1_text /deep/img{
                         max-width:100%;  
                    }

            }


            .phone_box_2{

                    margin:0px auto 0px;    
                 
                    .phone_box_2_text{
                            margin-top:15px;
                            p{
                                display:block;font-size:16px;line-height:26px;margin-top:5px;
                             
                            }
                    }

                    .phone_box_2_li{
                        display:flex;margin-bottom:10px;
                    }
                    .phone_box_2_li_label{
                        line-height:24px;height:24px;font-size:16px;
                                 margin-right:8px;
                    }
                    .phone_box_2_li_text{
                        line-height:24px;font-size:16px;flex:1;
                        word-wrap: break-word;
                        overflow-wrap: break-word;
                        white-space: pre-wrap;
                        word-break: break-all;
                         
                    }

            }


            .phone_3_box{

                width:94%;margin:30px auto 30px;border:solid 1px #ddd;  min-height:498px;

                .phone_head{height:33px;background:#f8f8f8;border-bottom:solid 1px #ddd;}
                .phone_head_a{float:left;height:100%;line-height:33px;font-size:14px;font-weight:bold;
                                color:#255590;margin-left:10px;}
                .phone_img_ul{margin:15px auto 0px;width:96%;}
                .phone_img_li{width:49%;margin-bottom:15px;}
                .phone_img_li:nth-of-type(odd){float:left;}
                .phone_img_li:nth-of-type(even){float:right;}
                
                .phone_img_li_a{display:block;width:100%;}
                .phone_img_li_img_box{width:100%;}
                .phone_img_li_img{display:block;width:100%;height:44vw;}
                .phone_img_li_dot2{text-align:center;height:10vw;line-height:5vw;
                                    color:#333;font-size:4vw;width:100%;
                                    margin-top:6px;
                                }
            }

            .phone_4_box{

                width:94%;margin:30px auto 30px;border:solid 1px #ddd;  min-height:670px;

                .phone_head{height:33px;background:#f8f8f8;border-bottom:solid 1px #ddd;}
                .phone_head_a{float:left;height:100%;line-height:33px;font-size:14px;font-weight:bold;
                                color:#255590;margin-left:10px;}
                .phone_img_ul{margin:15px auto 0px;width:96%;}
                .phone_img_li{width:49%;margin-bottom:15px;}
                .phone_img_li:nth-of-type(odd){float:left;}
                .phone_img_li:nth-of-type(even){float:right;}
                
                .phone_img_li_a{display:block;width:100%;}
                .phone_img_li_img_box{width:100%;}
                .phone_img_li_img{display:block;width:100%;height:44vw;}
                .phone_img_li_dot2{text-align:center;height:10vw;line-height:5vw;
                                    color:#333;font-size:4vw;width:100%;
                                    margin-top:6px;
                                }
            }

        
            .phone_box_5{
                // 图片展示
                     margin:0px auto 0px;    

                    .phone_box_5_img_ul{
                        img{
                           display:block;     
                            margin-top:15px;
                            width:100%;
                        }
                    }
 
            }


            .phone_nav_1{ 
                    width:100%; box-sizing:border-box;background:#fafafa; 
                    margin:10px auto;height:33px;

                    .phone_nav_in{ width:92%;margin:0px auto;
                        overflow-x:auto;overflow-y:hidden; 
                        word-break: keep-all; white-space: nowrap;    
                        line-height:33px;
                            height:33px;
                    }
                    .phone_nav_in::-webkit-scrollbar{height:0px;}

    
                    .phone_nav_a{display:inline-block;line-height:33px;height:33px;
                        color:#333;font-size:14px;margin:0px 10px;
                    }
                    .phone_nav_a:nth-of-type(1){margin-left:0px;}

            }
            .phone_nav_a.router-link-active{
                color:#255590;
            }

            .shop_3_right{display:none;}
            .phone_none{display:none;}
    }
</style>