提交

src/api/index.js

@@ -46,7 +46,7 @@ export function hotRank(ori){
 }
 
 /**
- * 
+ * 检索新闻接口
  * @param {object} ori 
  * @returns 
  */
@@ -59,4 +59,38 @@ export function searchData(ori){
             Authorization: localStorage.getItem("token")
         }
     })
+}
+
+/**
+ * 获得新闻分类
+ * @param {object} ori 
+ * @returns 
+ */
+export function getClass(ori){
+    return ajax({
+        api: "/news/data/category",
+        data: ori.data,
+        method: 'GET',
+        headers: {
+            Authorization: localStorage.getItem("token")
+        }
+    })
+}
+
+/**
+ * h5商城接口
+ * @param {Object} ori 
+ * @returns 
+ */
+export function getH5Mall(ori) {
+    return ajax({
+        api: "/oridata.json",
+        data: ori.data,
+        base: "oss1",
+        type: "ajax",
+        method: 'GET',
+        headers: {
+            Authorization: localStorage.getItem("token")
+        }
+    })
 }

src/config/index.js

@@ -1,5 +1,6 @@
 export default {
     base:{
         origin: "https://open.sxtvs.net",
+        oss1: "https://cxzx.smcic.net/topic/tool/img/cache"
     }
 }

src/router/allMedia.js

@@ -55,6 +55,13 @@ export default [
             /* webpackChunkName: "convergence" */ '../view/allMedia/convergence.vue'
           ),
       },
+      {
+        path: 'h5mall',
+        component: () =>
+          import(
+            /* webpackChunkName: "h5mall" */ '../view/allMedia/H5Mall.vue'
+          ),
+      },
     ],
   },
 ];

src/utils/request.js

@@ -6,7 +6,7 @@ let loading = undefined;
 function ajax(longRange) {
   return new Promise((resolve, reject) => {
     var xhttp,
-      url = config.base.origin + longRange.api;
+      url = config.base[longRange.base || 'origin'] + longRange.api;
     if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
     else if (window.ActiveXObject)
       xhttp = new window.ActiveXObject('Microsoft.XMLHTTP');
@@ -40,13 +40,14 @@ function fetch(longRange) {
     const met = (longRange.method || 'GET').toUpperCase();
     const p = {
       method: met,
+    //   mode: 'no-cors',
       headers: headerFunc(longRange.headers),
     };
     if (met !== 'GET') p.body = bodyFunc(longRange.data);
     else longRange.api = longRange.api + bodyGetFunc(longRange.data);
 
     window
-      .fetch(config.base.origin + longRange.api, p)
+      .fetch(config.base[longRange.base || 'origin'] + longRange.api, p)
       .then(res => {
         const json = res.json();
         if (res.status !== 200) {
@@ -98,6 +99,7 @@ function bodyGetFunc(body = {}) {
     if (!Object.hasOwnProperty.call(body, key)) continue;
     search += key + '=' + body[key] + '&';
   }
+  if (search === '?') return '';
   return search;
 }
 
@@ -125,6 +127,6 @@ export default function (longRange) {
     text: 'Loading',
     background: 'rgba(0, 0, 0, 0.1)',
   });
-  if (window.fetch) return fetch(longRange);
+  if (longRange.type !== 'ajax' && window.fetch) return fetch(longRange);
   return ajax(longRange);
 }

src/view/allMedia/H5Mall.vue

@@ -0,0 +1,125 @@
+<template>
+  <el-scrollbar class="H5Mall">
+    <div class="search line">
+      <el-icon :size="25" class="searchIcon"><Search /></el-icon>
+      <input
+        class="searchinput"
+        type="text"
+        placeholder="请输入搜索内容"
+        v-model="searchText"
+      />
+    </div>
+    <div class="main">
+      <div class="item" v-for="item,index in list" :key="index">
+        <component :is="components[item.type]" :item="item"></component>
+        <div class="main_item" v-text="item.title"></div>
+        <div class="body">
+            <img style="width: 20px;float: left;" :src="defaultIcon" />
+            <span>
+                <img style="width: 20px;" :src="eyeIcon" />
+                <span style="vertical-align: middle;" v-text="item.hot"></span>
+            </span>
+        </div>
+      </div>
+    </div>
+  </el-scrollbar>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import defaultIcon from "../../assets/img/default_user.png";
+import eyeIcon from "../../assets/img/eye.png"
+import H5 from "./components/H5.vue";
+import LONGPAGE from "./components/LONGPAGE.vue";
+import POSTER from "./components/POSTER.vue";
+import { getH5Mall } from '../../api/index.js';
+
+const components = {
+    H5,
+    LONGPAGE,
+    POSTER
+}
+
+const searchText = ref('');
+const list = ref([]);
+
+getH5Mall({}).then(r => {
+  console.log(r.list);
+  list.value = r.list || [];
+});
+</script>
+
+<style scoped>
+.H5Mall {
+  padding: 1em;
+  height: 100%;
+}
+.searchinput {
+  outline: none;
+  border: none;
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+  display: block;
+  width: 100%;
+}
+.search {
+  width: 60%;
+  margin: 0 auto;
+  font-size: 0;
+  height: 40px;
+  line-height: 40px;
+  border-radius: 20px;
+  padding: 0 50px 0 20px;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--el-border-color);
+}
+
+.searchIcon {
+  position: absolute;
+  right: 15px;
+  top: 5px;
+  color: var(--el-border-color);
+}
+
+.main{
+    font-weight: 500;
+    margin-top: 1em;
+    padding: 1em 0 1em 1em;
+}
+
+.main .item {
+    display: inline-block;
+    width: 184px;
+    height: 343px;
+    transition: all .3s;
+    border-radius: 2px;
+    vertical-align: middle;
+    margin-right: 1em;
+    border-radius: 5px;
+}
+
+.main_item{
+    color: #666;
+    padding: 0 5px;
+    margin: 5px 0;
+    font-size: 14px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.main .item:hover{
+    box-shadow: var(--el-box-shadow);
+    margin-top: -15px;
+}
+
+.main .body{
+    padding: 0 5px;
+    text-align: right;
+}
+.main img{
+    vertical-align: middle;
+}
+</style>

src/view/allMedia/analysis.vue

@@ -90,11 +90,11 @@
         >
           <div
             class="listHead"
-            v-text="item.raw ? item.raw.title || '' : ''"
+            v-text="item ? item.title || '' : ''"
           ></div>
           <div
             class="listSubtitle"
-            v-html="item.raw ? item.raw.summary || '' : ''"
+            v-html="item ? item.summary || '' : ''"
           ></div>
           <el-row>
             <el-col :span="12" style="color: #9aa8c4">
@@ -139,7 +139,7 @@
 import dayjs from 'dayjs';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-import { hotRank, searchData } from '../../api/index';
+import { hotRank, searchData, getClass } from '../../api/index';
 
 import hotIcon from '../../assets/img/hot.png';
 
@@ -152,33 +152,13 @@ const searchActive = ref({
   classification: 0,
   time: 0,
 });
-const classification = [
+const classification = ref([
   {
     type: 'option',
     name: '全部',
     id: 0,
   },
-  {
-    type: 'option',
-    name: '综合',
-    id: 1,
-  },
-  {
-    type: 'option',
-    name: '国际',
-    id: 2,
-  },
-  {
-    type: 'option',
-    name: '时事',
-    id: 3,
-  },
-  {
-    type: 'option',
-    name: '教育',
-    id: 4,
-  },
-];
+]);
 const time = [
   {
     type: 'option',
@@ -235,6 +215,18 @@ let page = 1;
 let total = -1;
 let T = undefined;
 
+getClass({}).then(res => {
+  const li = res || [];
+  const l = [];
+  for (let i = 0; i < li.length; i++) {
+    const v = li[i];
+    l.push({
+      type: 'option',
+      name: v,
+    });
+  }
+  classification.value.push(...l);
+});
 hotRank({}).then(res => {
   listHot.value = res || [];
 });
@@ -251,7 +243,7 @@ const toDetail = item => {
 const getList = () => {
   const search = {
     category:
-      classification[searchActive.value.classification].name || undefined,
+      classification.value[searchActive.value.classification].name || undefined,
     city: undefined,
     keywords: searchText.value,
     page: page++,

src/view/allMedia/analysis_detail.vue

@@ -20,7 +20,7 @@ const raw = ref({});
 const D = JSON.parse(route.query.detail || '{}');
 console.log(D);
 detail.value = D.content || '';
-raw.value = D.raw || {};
+raw.value = D || {};
 </script>
 
 <style>

src/view/allMedia/components/H5.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="H5" @mousemove="move">
+    <el-image
+      class="outImage"
+      :src="hoversList[0].url"
+      :fit="hoversList[0].background_mode || 'fill'"
+    />
+    <div class="listImage inShow">
+      <el-image
+        class="inImage"
+        :style="isShowFunc(index)"
+        v-for="(item, index) in hoversList"
+        :key="item.url"
+        :src="item.url"
+        :fit="item.background_mode || 'fill'"
+      />
+      <el-progress class="inShow" :show-text="false" :percentage="percentage" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, ref } from 'vue';
+
+const props = defineProps({
+  item: {
+    type: Object, //参数类型
+    default: () => {
+      return {};
+    }, //默认值
+    required: true, //是否必须传递
+  },
+});
+
+const hoversList = ref([]);
+const percentage = ref(0);
+let pc_item = undefined;
+
+hoversList.value = props.item.hoversList || [];
+
+const move = e => {
+  if (pc_item) return;
+  pc_item = setTimeout(() => {
+    pc_item = clearTimeout(pc_item);
+    percentage.value = (e.offsetX / e.target.width) * 100;
+  }, 20);
+};
+
+const isShowFunc = index => {
+  const low = (index / hoversList.value.length) * 100;
+  const hie = ((index + 1) / hoversList.value.length) * 100;
+  if (percentage.value >= low && percentage.value < hie) return 'display:block';
+  else return 'display:none';
+};
+
+console.log(hoversList.value);
+</script>
+
+<style scoped>
+.H5,
+.H5 * {
+  width: 100%;
+}
+
+.listImage {
+  position: relative;
+}
+
+.inImage {
+  top: 0;
+  left: 0;
+  position: absolute;
+}
+</style>
+
+<style>
+.inShow,
+.item:hover .outImage {
+  display: none;
+}
+
+.item:hover .inShow {
+  display: block;
+}
+</style>

src/view/allMedia/components/LONGPAGE.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>3</div>
+</template>
+
+<script steup>
+</script>
+
+<style scoped>
+</style>

src/view/allMedia/components/POSTER.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>2</div>
+</template>
+
+<script steup>
+</script>
+
+<style scoped>
+</style>

src/view/allMedia/main.vue

@@ -44,6 +44,11 @@ const menu = ref([
     icon: require('../../assets/img/hj.png'),
     path: '/main_home/convergence',
   },
+  {
+    title: 'H5商城',
+    icon: require('../../assets/img/h5.png'),
+    path: '/main_home/H5Mall',
+  },
 ]);
 
 const selectMenuFunc = item => {