|
@@ -0,0 +1,586 @@
|
|
|
+<template>
|
|
|
+ <!-- 农村市场详情页 -->
|
|
|
+ <HomePageHead></HomePageHead>
|
|
|
+ <HomePageNavigation></HomePageNavigation>
|
|
|
+ <!-- 列表页广告一 -->
|
|
|
+ <HomeTopTen :imgurl="adImg1" v-if="adImg1"></HomeTopTen>
|
|
|
+ <div class="goods">
|
|
|
+ <main class="index_main" v-if="shopType == 1">
|
|
|
+ <section class="index_1 clearfix">
|
|
|
+ <div class="breadcrumb">
|
|
|
+ <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}/list-1.html`"> {{ parent_name }}
|
|
|
+ </NuxtLink>
|
|
|
+ </el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item>
|
|
|
+ {{ routeNewsTtitle }}
|
|
|
+ </el-breadcrumb-item>
|
|
|
+ </el-breadcrumb>
|
|
|
+ </div>
|
|
|
+ </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">
|
|
|
+ <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>
|
|
|
+ <!-- 选项卡2 -->
|
|
|
+ <section class="index_4 clearfix">
|
|
|
+ <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>
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <main class="index_main" v-if="shopType == 2">
|
|
|
+ <section class=" clearfix">
|
|
|
+ <div class="index_out_1_left clearfix">
|
|
|
+ <section class="index_1 clearfix">
|
|
|
+ <div class="breadcrumb">
|
|
|
+ <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>
|
|
|
+ {{ routeNewsTtitle }}
|
|
|
+ </el-breadcrumb-item>
|
|
|
+ </el-breadcrumb>
|
|
|
+ </div>
|
|
|
+ </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">
|
|
|
+ <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">
|
|
|
+ <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>
|
|
|
+ <!-- 选项卡2 -->
|
|
|
+ <section class="index_4 clearfix">
|
|
|
+ <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>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+ <!-- 列表页广告一 -->
|
|
|
+ <HomeTopTen :imgurl="adImg2" v-if="adImg2"></HomeTopTen>
|
|
|
+ <HomeFoot></HomeFoot>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+//0.页面依赖 start ---------------------------------------->
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
+import { ElBreadcrumb, ElBreadcrumbItem, ElMessage } 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': 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': 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;
|
|
|
+async function getPageData() {
|
|
|
+ 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 ---------->")
|
|
|
+ }
|
|
|
+}
|
|
|
+getPageData();
|
|
|
+//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---------------------------------------->
|
|
|
+
|
|
|
+
|
|
|
+//6.广告 start ---------------------------------------->
|
|
|
+let adImg1 = ref([]);
|
|
|
+let adImg2 = ref([]);
|
|
|
+onMounted(async () => {
|
|
|
+ const { $webUrl, $CwebUrl } = useNuxtApp();
|
|
|
+ //广告1
|
|
|
+ let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snscw_detail_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];
|
|
|
+ //广告2
|
|
|
+ let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snscw_detail_0002`
|
|
|
+ const responseAd2 = await fetch(url2, {
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
+ 'Userurl': $CwebUrl,
|
|
|
+ 'Origin': $CwebUrl
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const resultAd2 = await responseAd2.json();
|
|
|
+ adImg2.value = resultAd2.data[0];
|
|
|
+})
|
|
|
+//6.广告 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---------------------------------------->
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+@import url('@/assets/css/shop/goodsDetail.less');
|
|
|
+@import url('@/assets/css/shop/goodsDetail1.less');
|
|
|
+</style>
|