index.html.vue 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696
  1. <template>
  2. <HomePageHead></HomePageHead>
  3. <HomePageNavigation></HomePageNavigation>
  4. <div class="adPlace">
  5. <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
  6. </div>
  7. <HomeSecondaryHeading :titleData="pageData" :pinyinid="routeId"></HomeSecondaryHeading>
  8. <section class="index_1 clearfix index_main">
  9. <!-- 最新 -->
  10. <div class="img_ul_1 clearfix">
  11. <NuxtLink class="img_li_1" :href="getLinkPathDetail(item)" :title="item.title"
  12. v-for="(item, index) in newest" :key="index">
  13. <img class="img_li_1_photo" :src="item.imgurl" :title="item.title" :alt="item.title">
  14. </NuxtLink>
  15. </div>
  16. <!-- 推荐 -->
  17. <div class="ul_1 clearfix">
  18. <NuxtLink class="ul_1_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  19. v-for="(item, index) in recommend" :key="index">
  20. {{ item.title }}
  21. </NuxtLink>
  22. </div>
  23. </section>
  24. <main class="index_main clearfix">
  25. <div class="index_left">
  26. <!-- 第一部分 -->
  27. <div class="index_2 clearfix">
  28. <div class="index_2_head clearfix">
  29. <NuxtLink class="index_2_head_a" :class="{ 'index_2_head_a_only': tabsData1 == 1 }"
  30. @mouseenter="tabsData1 = 1" :href="getLinkPath(pageData[0])" v-if="pageData[0]"
  31. :title="pageData[0].alias">
  32. {{ pageData[0].alias }}
  33. </NuxtLink>
  34. <span class="index_2_head_a">/ </span>
  35. <NuxtLink class="index_2_head_a" :class="{ 'index_2_head_a_only': tabsData1 == 2 }"
  36. @mouseenter="tabsData1 = 2" :href="getLinkPath(pageData[1])" v-if="pageData[1]"
  37. :title="pageData[1].alias">
  38. {{ pageData[1].alias }}
  39. </NuxtLink>
  40. </div>
  41. <div class="index_2_in clearfix" v-if="tabsData1 === 1">
  42. <div class="ul_2 clearfix">
  43. <NuxtLink class="ul_2_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  44. v-for="(item, index) in pageData[0].data2" :key="index">
  45. {{ item.title }}
  46. </NuxtLink>
  47. </div>
  48. <div class="img_ul_2 clearfix">
  49. <div class="img_li_2" v-for="(item, index) in pageData[0].data" :key="index">
  50. <NuxtLink class="img_li_2_a" :href="getLinkPathDetail(item)" :title="item.title">
  51. <img class="img_li_2_a_photo" :src="item.imgurl" :title="item.title" :alt="item.title">
  52. <div class="img_li_2_dot1 dot1">{{ item.title }}</div>
  53. </NuxtLink>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="index_2_in clearfix" v-if="tabsData1 === 2">
  58. <div class="ul_2 clearfix">
  59. <NuxtLink class="ul_2_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  60. v-for="(item, index) in pageData[1].data2" :key="index">
  61. {{ item.title }}
  62. </NuxtLink>
  63. </div>
  64. <div class="img_ul_2 clearfix">
  65. <div class="img_li_2" v-for="(item, index) in pageData[1].data" :key="index">
  66. <NuxtLink class="img_li_2_a" :href="getLinkPathDetail(item)" :title="item.title">
  67. <img class="img_li_2_a_photo" :src="item.imgurl" :title="item.title" :alt="item.title">
  68. <div class="img_li_2_dot1 dot1">{{ item.title }}</div>
  69. </NuxtLink>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. <!-- 第二部分 -->
  75. <div class="index_3 clearfix">
  76. <div class="index_3_head clearfix">
  77. <NuxtLink class="index_3_head_a" :class="{ 'index_3_head_a_only': tabsData2 == 1 }"
  78. :href="getLinkPath(pageData[2])" @mouseenter="tabsData2 = 1" v-if="pageData[2]"
  79. :title="pageData[2].alias">
  80. {{ pageData[2].alias }}
  81. </NuxtLink>
  82. <span class="index_3_head_a">/ </span>
  83. <NuxtLink class="index_3_head_a" :class="{ 'index_3_head_a_only': tabsData2 == 2 }"
  84. :href="getLinkPath(pageData[3])" @mouseenter="tabsData2 = 2" v-if="pageData[3]"
  85. :title="pageData[3].alias">
  86. {{ pageData[3].alias }}
  87. </NuxtLink>
  88. </div>
  89. <div class="index_3_in clearfix" v-if="tabsData2 == 1">
  90. <div class="ul_3 clearfix">
  91. <NuxtLink class="ul_3_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  92. v-for="(item, index) in pageData[2].data2" :key="index">
  93. {{ item.title }}
  94. </NuxtLink>
  95. </div>
  96. <div class="img_ul_3 clearfix">
  97. <div class="img_li_3" v-for="(item, index) in pageData[2].data" :key="index">
  98. <NuxtLink class="img_li_3_a" :href="getLinkPathDetail(item)" :title="item.title">
  99. <img class="img_li_3_a_photo" :src="item.imgurl" :title="item.title" :alt="item.title">
  100. <div class="img_li_3_dot1 dot1">{{ item.title }}</div>
  101. </NuxtLink>
  102. </div>
  103. </div>
  104. </div>
  105. <div class="index_3_in clearfix" v-if="tabsData2 == 2">
  106. <div class="ul_3 clearfix">
  107. <NuxtLink class="ul_3_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  108. v-for="(item, index) in pageData[3].data2" :key="index">
  109. {{ item.title }}
  110. </NuxtLink>
  111. </div>
  112. <div class="img_ul_3 clearfix">
  113. <div class="img_li_3" v-for="(item, index) in pageData[3].data" :key="index">
  114. <NuxtLink class="img_li_3_a" :href="getLinkPathDetail(item)" :title="item.title">
  115. <img class="img_li_3_a_photo" :src="item.imgurl" :title="item.title" :alt="item.title">
  116. <div class="img_li_3_dot1 dot1">{{ item.title }}</div>
  117. </NuxtLink>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. <!-- 第三部分 -->
  123. <div class="index_4 clearfix">
  124. <div class="index_4_head clearfix">
  125. <NuxtLink class="index_4_head_a" :class="{ 'index_4_head_a_only': tabsData3 == 1 }"
  126. :href="getLinkPath(pageData[4])" @mouseenter="tabsData3 = 1" v-if="pageData[4]"
  127. :title="pageData[4].alias">
  128. {{ pageData[4].alias }}
  129. </NuxtLink>
  130. <span class="index_4_head_a">/ </span>
  131. <NuxtLink class="index_4_head_a" :class="{ 'index_4_head_a_only': tabsData3 == 2 }"
  132. :href="getLinkPath(pageData[5])" @mouseenter="tabsData3 = 2" v-if="pageData[5]"
  133. :title="pageData[5].alias">
  134. {{ pageData[5].alias }}
  135. </NuxtLink>
  136. </div>
  137. <div class="index_4_in clearfix" v-if="tabsData3 == 1">
  138. <div class="ul_4 clearfix">
  139. <Nuxtlink class="ul_4_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  140. v-for="(item, index) in pageData[4].data2" :key="index">
  141. {{ item.title }}
  142. </Nuxtlink>
  143. </div>
  144. <div class="img_ul_4 clearfix">
  145. <div class="img_li_4" v-for="(item, index) in pageData[4].data" :key="index">
  146. <NuxtLink class="img_li_4_a" :href="getLinkPathDetail(item)" :title="item.title">
  147. <img class="img_li_4_a_photo" :src="item.imgurl" :title="item.title" :alt="item.title">
  148. <div class="img_li_4_dot1 dot1">{{ item.title }}</div>
  149. </NuxtLink>
  150. </div>
  151. </div>
  152. </div>
  153. <div class="index_4_in clearfix" v-if="tabsData3 == 2">
  154. <div class="ul_4 clearfix">
  155. <Nuxtlink class="ul_4_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  156. v-for="(item, index) in pageData[5].data2" :key="index">
  157. {{ item.title }}
  158. </Nuxtlink>
  159. </div>
  160. <div class="img_ul_4 clearfix">
  161. <div class="img_li_4" v-for="(item, index) in pageData[5].data" :key="index">
  162. <NuxtLink class="img_li_4_a" :href="getLinkPathDetail(item)" :title="item.title">
  163. <img class="img_li_4_a_photo" :src="item.imgurl" :title="item.title" :alt="item.title">
  164. <div class="img_li_4_dot1 dot1">{{ item.title }}</div>
  165. </NuxtLink>
  166. </div>
  167. </div>
  168. </div>
  169. </div>
  170. <!-- 第四部分 -->
  171. <div class="index_5 clearfix">
  172. <div class="index_5_head clearfix">
  173. <NuxtLink class="index_5_head_a" :class="{ 'index_5_head_a_only': tabsData4 == 1 }"
  174. :href="getLinkPath(pageData[6])" @mouseenter="tabsData4 = 1" v-if="pageData[6]"
  175. :title="pageData[6].alias">
  176. {{ pageData[6].alias }}
  177. </NuxtLink>
  178. <span class="index_5_head_a">/ </span>
  179. <NuxtLink class="index_5_head_a" :class="{ 'index_5_head_a_only': tabsData4 == 2 }"
  180. :href="getLinkPath(pageData[7])" @mouseenter="tabsData4 = 2" v-if="pageData[7]"
  181. :title="pageData[7].alias">
  182. {{ pageData[7].alias }}
  183. </NuxtLink>
  184. </div>
  185. <div class="index_5_in clearfix" v-if="tabsData4 == 1">
  186. <div class="ul_5 clearfix">
  187. <NuxtLink class="ul_5_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  188. v-for="(item, index) in pageData[6].data2" :key="index">
  189. {{ item.title }}
  190. </NuxtLink>
  191. </div>
  192. <div class="img_ul_5 clearfix">
  193. <div class="img_li_5" v-for="(item, index) in pageData[6].data" :key="index">
  194. <NuxtLink class="img_li_5_a" :href="getLinkPathDetail(item)" :title="item.title">
  195. <img class="img_li_5_a_photo" :src="item.imgurl" :title="item.title" :alt="item.title">
  196. <div class="img_li_5_dot1 dot1">{{ item.title }}</div>
  197. </NuxtLink>
  198. </div>
  199. </div>
  200. </div>
  201. <div class="index_5_in clearfix" v-if="tabsData4 == 2">
  202. <div class="ul_5 clearfix">
  203. <NuxtLink class="ul_5_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  204. v-for="(item, index) in pageData[7].data2" :key="index">
  205. {{ item.title }}
  206. </NuxtLink>
  207. </div>
  208. <div class="img_ul_5 clearfix">
  209. <div class="img_li_5" v-for="(item, index) in pageData[7].data" :key="index">
  210. <NuxtLink class="img_li_5_a" :href="getLinkPathDetail(item)" :title="item.title">
  211. <img class="img_li_5_a_photo" :src="item.imgurl" :title="item.title" :alt="item.title">
  212. <div class="img_li_5_dot1 dot1">{{ item.title }}</div>
  213. </NuxtLink>
  214. </div>
  215. </div>
  216. </div>
  217. </div>
  218. <!-- 第五部分 -->
  219. <div class="index_5 clearfix">
  220. <div class="index_5_head clearfix">
  221. <NuxtLink class="index_5_head_a" :class="{ 'index_5_head_a_only': tabsData5 == 1 }"
  222. :href="getLinkPath(pageData[8])" @mouseenter="tabsData5 = 1" v-if="pageData[8]"
  223. :title="pageData[8].alias">
  224. {{ pageData[8].alias }}
  225. </NuxtLink>
  226. <span class="index_5_head_a" v-if="pageData[9]">/ </span>
  227. <NuxtLink class="index_5_head_a" :class="{ 'index_5_head_a_only': tabsData5 == 2 }"
  228. :href="getLinkPath(pageData[9])" @mouseenter="tabsData5 = 2" v-if="pageData[9]"
  229. :title="pageData[9].alias">
  230. {{ pageData[9].alias }}
  231. </NuxtLink>
  232. </div>
  233. <div class="index_5_in clearfix" v-if="tabsData5 == 1">
  234. <div class="ul_5 clearfix">
  235. <NuxtLink class="ul_5_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  236. v-for="(item, index) in pageData[8].data2" :key="index">
  237. {{ item.title }}
  238. </NuxtLink>
  239. </div>
  240. <div class="img_ul_5 clearfix">
  241. <div class="img_li_5" v-for="(item, index) in pageData[8].data" :key="index">
  242. <NuxtLink class="img_li_5_a" :href="getLinkPathDetail(item)" :title="item.title">
  243. <img class="img_li_5_a_photo" :src="item.imgurl" :title="item.title" :alt="item.title">
  244. <div class="img_li_5_dot1 dot1">{{ item.title }}</div>
  245. </NuxtLink>
  246. </div>
  247. </div>
  248. </div>
  249. <div class="index_5_in clearfix" v-if="tabsData5 == 2">
  250. <div class="ul_5 clearfix">
  251. <NuxtLink class="ul_5_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  252. v-for="(item, index) in pageData[9].data2" :key="index">
  253. {{ item.title }}
  254. </NuxtLink>
  255. </div>
  256. <div class="img_ul_5 clearfix">
  257. <div class="img_li_5" v-for="(item, index) in pageData[9].data" :key="index">
  258. <NuxtLink class="img_li_5_a" :href="getLinkPathDetail(item)" :title="item.title">
  259. <img class="img_li_5_a_photo" :src="item.imgurl" :title="item.title" :alt="item.title">
  260. <div class="img_li_5_dot1 dot1">{{ item.title }}</div>
  261. </NuxtLink>
  262. </div>
  263. </div>
  264. </div>
  265. </div>
  266. </div>
  267. <aside class="index_aside clearfix">
  268. <!-- 最新资讯 -->
  269. <div class="clearfix">
  270. <div class="index_aside_head_1 clearfix">
  271. <span class="index_aside_head_1_a" title="最新资讯">
  272. 最新资讯
  273. </span>
  274. </div>
  275. <div class="index_aside_img_ul_1 clearfix">
  276. <div class="index_aside_img_li_1 clearfix" v-for="(item, index) in hotNewsListdata1" :key="index">
  277. <NuxtLink class="index_aside_img_li_1_a" :href="getLinkPathDetail(item)" :title="item.title"
  278. :target="item.islink == 1 ? '_blank' : '_self'">
  279. <div class="index_aside_img_li_1_a_img_box">
  280. <img class="" :src="item.imgurl" :title="item.title" :alt="item.title">
  281. </div>
  282. <div class="index_aside_img_li_1_dot3 dot3">{{ item.title }}</div>
  283. </NuxtLink>
  284. </div>
  285. </div>
  286. <div class="index_aside_ul_1 clearfix">
  287. <NuxtLink class="index_aside_ul_1_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  288. v-for="(item, index) in hotNewsListdata2" :key="index">
  289. {{ item.title }}
  290. </NuxtLink>
  291. </div>
  292. </div>
  293. <!-- 热点精选 -->
  294. <div class="">
  295. <div class="index_aside_head_2 clearfix">
  296. <span class="index_aside_head_2_a" title="热点精选">
  297. 热点精选
  298. </span>
  299. </div>
  300. <div class="index_aside_img_ul_2 clearfix">
  301. <div class="index_aside_img_li_2 clearfix" v-for="(item, index) in hotNewsList_img" :key="index">
  302. <NuxtLink class="index_aside_img_li_2_a" :href="getLinkPathDetail(item)" :title="item.title">
  303. <div class="index_aside_img_li_2_a_img_box">
  304. <img class="" :src="item.imgurl" :title="item.title" :alt="item.title">
  305. </div>
  306. <div class="index_aside_img_li_2_dot3 dot3">{{ item.title }}</div>
  307. </NuxtLink>
  308. </div>
  309. </div>
  310. <div class="index_aside_ul_2 clearfix">
  311. <NuxtLink class="index_aside_ul_2_a dot1" :href="getLinkPathDetail(item)" :title="item.title"
  312. v-for="(item, index) in hotNewsList_text" :key="index">
  313. {{ item.title }}
  314. </NuxtLink>
  315. </div>
  316. </div>
  317. <!-- 加盟连锁 -->
  318. </aside>
  319. <HomeAdvertising :imgurl="adImg2"></HomeAdvertising>
  320. </main>
  321. <HomeFoot></HomeFoot>
  322. </template>
  323. <script setup>
  324. //0.加载页面依赖 start ---------------------------------------->
  325. import { ref, onMounted } from 'vue';
  326. import { ElMessage } from 'element-plus';
  327. import { NuxtLink } from '#components';
  328. //0.加载页面依赖 end ---------------------------------------->
  329. //1.获得路由id start ---------------------------------------->
  330. const targetSegment = getRoutePath(1);
  331. //1.1 获得当前的路由id
  332. let routeId;
  333. //通过导航路径反向查询导航id
  334. const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
  335. method: 'GET',
  336. query: {
  337. 'pinyin': targetSegment,
  338. },
  339. });
  340. if (getRouteId.code == 200) {
  341. routeId = getRouteId.data.category_id
  342. } else {
  343. console.log("获得路由id出错!", getRouteId.message)
  344. }
  345. //1.获得路由id end ---------------------------------------->
  346. //2.选项卡 start ---------------------------------------->
  347. const tabsData1 = ref(1)
  348. const tabsData2 = ref(1)
  349. const tabsData3 = ref(1)
  350. const tabsData4 = ref(1)
  351. const tabsData5 = ref(1)
  352. //2.选项卡 end ---------------------------------------->
  353. //3.广告 start ---------------------------------------->
  354. let adImg1 = ref({})
  355. let adImg2 = ref({})
  356. let adImg3 = ref({})
  357. let adImg4 = ref({})
  358. onMounted(async () => {
  359. //从客户端获取行政职能部门 加快打开速度
  360. const { $webUrl, $CwebUrl } = useNuxtApp();
  361. //广告1
  362. let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nzgxw_category_0001`
  363. const responseAd1 = await fetch(url, {
  364. headers: {
  365. 'Content-Type': 'application/json',
  366. 'Userurl': $CwebUrl,
  367. 'Origin': $CwebUrl
  368. }
  369. });
  370. const resultAd1 = await responseAd1.json();
  371. adImg1.value = resultAd1.data[0];
  372. //广告2
  373. let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nzgxw_category_0002`
  374. const responseAd2 = await fetch(url2, {
  375. headers: {
  376. 'Content-Type': 'application/json',
  377. 'Userurl': $CwebUrl,
  378. 'Origin': $CwebUrl
  379. }
  380. });
  381. const resultAd2 = await responseAd2.json();
  382. adImg2.value = resultAd2.data[0];
  383. //广告3
  384. let url3 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nzgxw_category_0003`
  385. const responseAd3 = await fetch(url3, {
  386. headers: {
  387. 'Content-Type': 'application/json',
  388. 'Userurl': $CwebUrl,
  389. 'Origin': $CwebUrl
  390. }
  391. });
  392. const resultAd3 = await responseAd3.json();
  393. adImg3.value = resultAd3.data[0];
  394. //广告4
  395. let url4 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=nzgxw_category_0004`
  396. const responseAd4 = await fetch(url4, {
  397. headers: {
  398. 'Content-Type': 'application/json',
  399. 'Userurl': $CwebUrl,
  400. 'Origin': $CwebUrl
  401. }
  402. });
  403. const resultAd4 = await responseAd4.json();
  404. adImg4.value = resultAd4.data[0];
  405. })
  406. //3.广告 end ---------------------------------------->
  407. //4.页面数据 start ---------------------------------------->
  408. const pageData = ref([
  409. //示例:
  410. // {
  411. // id: 1,
  412. // title: "", //该导航的标题
  413. // data: [], //数据1
  414. // data1: [], //数据2
  415. // data2: [], //数据3
  416. // data3: [], //数据4
  417. // data4: [], //数据5
  418. // category_id1: "", //子导航id1
  419. // category_id2: "",
  420. // category_id3: "",
  421. // category_id4: "",
  422. // title1: "", //子导航标题1
  423. // title2: "",
  424. // title3: "",
  425. // title4: "",
  426. // cid: "" //该导航的id
  427. // },
  428. ])
  429. //4.1 获取所有导航
  430. try {
  431. const navigateData = await requestDataPromise('/web/getWebsiteModelCategory', {
  432. method: 'GET',
  433. query: {
  434. 'placeid': 1,
  435. 'pid': routeId,
  436. 'num': 20
  437. },
  438. });
  439. if (navigateData.code == 200) {
  440. // 遍历可用的导航池放到页面中
  441. for (let index in navigateData.data) {
  442. let data = {
  443. title: navigateData.data[index].name,
  444. cid: navigateData.data[index].category_id,
  445. children_count: navigateData.data[index].children_count,
  446. alias: navigateData.data[index].alias,
  447. aLIas_pinyin: targetSegment + "/" + navigateData.data[index].aLIas_pinyin,
  448. data: [],
  449. data1: [],
  450. data2: [],
  451. data3: [],
  452. data4: [],
  453. category_id1: "",
  454. category_id2: "",
  455. category_id3: "",
  456. category_id4: "",
  457. title1: "",
  458. title2: "",
  459. title3: "",
  460. title4: ""
  461. };
  462. if (navigateData.data[index].is_url == 1) {
  463. // 处理 URL 的逻辑
  464. } else {
  465. //每个页面最多8个模块
  466. pageData.value.push(data);
  467. }
  468. }
  469. //导航池加载完毕,开始申请模块数据
  470. let getJson = []
  471. for (let i = 0; i < pageData.value.length; i++) {
  472. if (i == 0) {
  473. getJson.push({ "id": pageData.value[i].cid + ",2,10" });
  474. } else if (i == 1) {
  475. getJson.push({ "id": pageData.value[i].cid + ",2,10" });
  476. } else if (i == 2) {
  477. getJson.push({ "id": pageData.value[i].cid + ",2,10" });
  478. } else if (i == 3) {
  479. getJson.push({ "id": pageData.value[i].cid + ",2,10" });
  480. } else if (i == 4) {
  481. getJson.push({ "id": pageData.value[i].cid + ",2,10" });
  482. } else if (i == 5) {
  483. getJson.push({ "id": pageData.value[i].cid + ",2,10" });
  484. } else if (i == 6) {
  485. getJson.push({ "id": pageData.value[i].cid + ",2,10" });
  486. } else if (i == 7) {
  487. getJson.push({ "id": pageData.value[i].cid + ",2,10" });
  488. } else if (i == 8) {
  489. getJson.push({ "id": pageData.value[i].cid + ",2,10" });
  490. } else if (i == 9) {
  491. getJson.push({ "id": pageData.value[i].cid + ",2,10" });
  492. }
  493. }
  494. let jsonString = JSON.stringify(getJson);
  495. getPageAllData(jsonString);
  496. let getJson1 = [
  497. { "level": "2,6,0" },
  498. { "level": "1,0,10" },
  499. ]
  500. let jsonString1 = JSON.stringify(getJson1);
  501. getPageHotData(jsonString1);
  502. } else {
  503. console.log("错误:渲染8个模块环节出错,请检查是否存在没有数据的模块!")
  504. }
  505. } catch (error) {
  506. console.log("错误:导航池渲染执行接口出错!请检查频道页渲染的模块数据是否完整!")
  507. }
  508. // 获取所有模块数据
  509. async function getPageAllData(jsonString) {
  510. const mkdata = await requestDataPromise('/web/getWebsiteProject', {
  511. method: 'GET',
  512. query: {
  513. 'id': jsonString
  514. },
  515. });
  516. console.log('mkdata', mkdata.data)
  517. if (mkdata.code == 200) {
  518. if (mkdata.data.length > 0) {
  519. //模块1 顶部大图和列表
  520. pageData.value[0].data = mkdata.data[0].img_num;
  521. pageData.value[0].data2 = mkdata.data[0].text_num;
  522. }
  523. if (mkdata.data.length > 1) {
  524. //模块2
  525. pageData.value[1].data = mkdata.data[1].img_num;
  526. pageData.value[1].data2 = mkdata.data[1].text_num;
  527. }
  528. if (mkdata.data.length > 2) {
  529. pageData.value[2].data = mkdata.data[2].img_num;
  530. pageData.value[2].data2 = mkdata.data[2].text_num;
  531. }
  532. if (mkdata.data.length > 3) {
  533. pageData.value[3].data = mkdata.data[3].img_num;
  534. pageData.value[3].data2 = mkdata.data[3].text_num;
  535. }
  536. if (mkdata.data.length > 4) {
  537. pageData.value[4].data = mkdata.data[4].img_num;
  538. pageData.value[4].data2 = mkdata.data[4].text_num;
  539. }
  540. if (mkdata.data.length > 5) {
  541. pageData.value[5].data = mkdata.data[5].img_num;
  542. pageData.value[5].data2 = mkdata.data[5].text_num;
  543. }
  544. if (mkdata.data.length > 6) {
  545. pageData.value[6].data = mkdata.data[6].img_num;
  546. pageData.value[6].data2 = mkdata.data[6].text_num;
  547. }
  548. if (mkdata.data.length > 7) {
  549. pageData.value[7].data = mkdata.data[7].img_num;
  550. pageData.value[7].data2 = mkdata.data[7].text_num;
  551. }
  552. if (mkdata.data.length > 8) {
  553. pageData.value[8].data = mkdata.data[8].img_num;
  554. pageData.value[8].data2 = mkdata.data[8].text_num;
  555. }
  556. if (mkdata.data.length > 9) {
  557. pageData.value[9].data = mkdata.data[9].img_num;
  558. pageData.value[9].data2 = mkdata.data[9].text_num;
  559. }
  560. } else {
  561. ElMessage.error(mkdata.message)
  562. }
  563. }
  564. // 获取最新模块数据
  565. let newest = ref([]);
  566. let recommend = ref([]);
  567. async function getPageHotData(jsonString1) {
  568. const mkdata = await requestDataPromise('/web/getWebsiteProject', {
  569. method: 'GET',
  570. query: {
  571. 'id': jsonString1
  572. },
  573. });
  574. console.log('mkdata_HotData', mkdata.data)
  575. if (mkdata.code == 200) {
  576. if (mkdata.data.length > 0) {
  577. newest.value = mkdata.data[0].img_num;
  578. recommend.value = mkdata.data[1].text_num;
  579. }
  580. } else {
  581. ElMessage.error(mkdata.message)
  582. }
  583. }
  584. //4.页面数据 end ---------------------------------------->
  585. // 5.获取最新资讯和热点精选 start---------------------------------->
  586. // 5.1 最新资讯
  587. const hotNewsListdata1 = ref([])
  588. const hotNewsListdata2 = ref([])
  589. async function getPageData() {
  590. const mkdata = await requestDataPromise('/web/getWebsiteArticlett', {
  591. method: 'GET',
  592. query: {
  593. 'imgnum': 2,
  594. 'textnum': 4,
  595. 'placeid': 0,
  596. 'level': 4,
  597. 'id': 0,
  598. },
  599. });
  600. console.log('mkdata1111111', mkdata.data);
  601. if (mkdata.code == 200) {
  602. hotNewsListdata1.value = mkdata.data.img;
  603. hotNewsListdata2.value = mkdata.data.text;
  604. } else {
  605. console.log("错误位置:获取最新资讯")
  606. }
  607. }
  608. getPageData();
  609. // 5.2 热点精选
  610. const hotNewsList_img = ref([])
  611. const hotNewsList_text = ref([])
  612. async function getPageData2() {
  613. const mkdata = await requestDataPromise('/web/getWebsiteArticlett', {
  614. method: 'GET',
  615. query: {
  616. 'imgnum': 2,
  617. 'textnum': 4,
  618. 'level': 5,
  619. 'placeid': 0,
  620. 'id': 0
  621. },
  622. });
  623. console.log('mkdata111111222222', mkdata.data);
  624. if (mkdata.code == 200) {
  625. hotNewsList_img.value = mkdata.data.img;
  626. hotNewsList_text.value = mkdata.data.text;
  627. } else {
  628. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  629. console.log("错误位置:获取热点精选")
  630. console.log("后端错误反馈:", mkdata.message)
  631. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  632. }
  633. }
  634. getPageData2();
  635. // 5.获取最新资讯和热点精选 end---------------------------------->
  636. //6.设置seo信息 start---------------------------------------->
  637. const setData = await requestDataPromise('/web/getWebsiteCategoryHead', {
  638. method: 'GET',
  639. query: {
  640. 'catid': routeId
  641. },
  642. });
  643. if (setData.code == 200) {
  644. let seoTitle = setData.data.seo_title;
  645. let seoDescription = setData.data.seo_description;
  646. let seoKeywords = setData.data.seo_keywords;
  647. let seoSuffix = setData.data.suffix;
  648. let seoName = setData.data.website_name;
  649. useSeoMeta({
  650. title: seoTitle + "_" + seoSuffix,
  651. meta: [
  652. { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
  653. { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 }
  654. ]
  655. });
  656. } else {
  657. console.log("设置频道页SEO出错!", setData.message)
  658. }
  659. //6.设置seo信息 end---------------------------------------->
  660. </script>
  661. <style lang="less" scoped>
  662. @import url(@/assets/css/project/class.less);
  663. </style>