all_user/huangguo_dhz
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整UI

Browse Source
This commit is contained in:
谢宇宁
2026-10-09 17:39:35 +07:00
parent 406b575139
commit cc37cc173a
21 changed files with 95 additions and 1155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+1 -23
View File
@@ -1,29 +1,7 @@
<template>
<div id="appView">
<router-view></router-view>
<!-- 登陆 -->
<login-com v-model="showLogin" @regist="showRegist= true" @forgotPasswordFn="showForgotPassword = true" />
<!-- 注册 -->
<regist-com v-model="showRegist" @login="showLogin = true" />
<!-- 忘记密码 -->
<forgot-password v-model="showForgotPassword" @login="showLogin = true" />
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import loginCom from '@/components/login/index.vue'
import registCom from '@/components/login/regist.vue'
import forgotPassword from '@/components/login/forgotPassword.vue'
import { eventBus } from "@/utils/eventBus";
const showLogin = ref(false)
const showRegist = ref(false)
const showForgotPassword = ref(false)
// 监听登陆
eventBus.on('SHOW_LOGIN', () => {
showLogin.value = true
})
</script>
<script setup lang="ts"></script>
<style scoped lang="scss"></style>
src/components/MobileBottom/index.vue
+2 -2
View File
@@ -8,7 +8,7 @@
:src="item.officialImg"
v-for="(item, index) in contactInfo"
:key="index"
@click="openPage(item.officialUrl)"
@click="openPage(OFFICIAL_TG_URL)"
/>
<!-- <lazyImg class="contactItem" :src="'cf230705/image/95/29p/5i/39/92cf6fd5189cedaf2e0756b98520b7cd.gif'" />
<lazyImg class="contactItem" :src="'cf230705/image/95/29p/5i/39/92cf6fd5189cedaf2e0756b98520b7cd.gif'" /> -->
@@ -34,7 +34,7 @@ import { useRouter } from 'vue-router';
import { useConfigStore } from '@/stores/config';
import { getAdItem } from '@/utils/getConfig';
import { AdType } from '@/enums/app';
import { jumpAdv } from '@/utils/index';
import { jumpAdv, OFFICIAL_TG_URL } from '@/utils/index';
const router = useRouter();
const configStore = useConfigStore();
const state = reactive({
src/components/MobileHeader/index.vue
-86
View File
@@ -1,91 +1,5 @@
<template>
<div class="mobileHeader">
<MobileAdvBanner
class="advBanner"
:list="state.advList"
v-if="showAdvBanner && state.advList && state.advList.length"
/>
<MobileTopOpt />
<div class="tabList">
<div class="tabItem" v-for="item in tabList" :key="item.id" @click="selectTab(item)">
{{ item.subModuleName }}
<span v-if="item.id == tid">✨</span>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, reactive, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useGlobalStore } from '@/stores/global';
import { useHomeStore } from '@/stores/home';
import { getAdItem } from '@/utils/getConfig';
import { AdType } from '@/enums/app';
const route = useRoute();
const globalStore = useGlobalStore();
const homeStore = useHomeStore();
const router = useRouter();
const state = reactive({
tabId: <any>'',
advList: <any>[],
});
const selectTab = (item: any) => {
router.push({ path: '/home', query: { tid: item.id, stype: item.showType, name: item.subModuleName } }).then(() => {
// location.reload();
});
};
const showAdvBanner = computed(() => {
return globalStore.showAdvBanner;
});
const tabList = computed(() => {
return homeStore.homeData;
});
const tid = computed(() => {
if (route.query.tid) {
return route.query.tid;
} else if (route.path == '/home') {
return homeStore.currTab.id;
}
// if (route.path == '/home' && !route.query.tid) {
// return homeStore.currTab.id;
// } else {
// }
// return homeStore.currTab.id;
});
const init = () => {
state.advList = getAdItem(AdType.HOMETOPBANNER);
// state.tabId = route.query.tid || tabList.value[0]?.id;
// console.log(route.query.tid, '++');
// console.log(tabList.value, '--');
};
init();
// nextTick(() => {
// state.tabId = route.query.tid || tabId;
// });
</script>
<style lang="scss" scoped>
.mobileHeader {
.advBanner {
width: 100%;
height: 70px;
}
.tabList {
width: 100%;
height: 44px;
padding-left: 16px;
box-sizing: border-box;
display: flex;
align-items: center;
overflow-x: auto;
background: #111319;
.tabItem {
margin-right: 20px;
flex-shrink: 0;
}
}
}
</style>
src/components/MobileTopOpt/index.vue
+8 -160
View File
@@ -1,83 +1,18 @@
<template>
<div class="advTopOpt">
<SvgIcon name="classification" class="classification" @click="showSidebar" />
<SvgIcon name="logo" class="logo" @click="jumpPage('/home')" />
<div class="searchBox" @click="jumpPage('/MobileSearch')">
<div class="placeholder">输入搜索的关键字</div>
<SvgIcon name="searchSvg" class="searchSvg" />
<div class="optGroup">
<SvgIcon name="business" class="business" @click="jumpPage('/mobileBusiness')" />
<div class="official" @click="jumpPage('/mobileConnectInfo')">联系官方</div>
</div>
<SvgIcon name="history" class="history" @click="jumpPage('/mobileHistory')" />
<SvgIcon name="business" class="business" @click="jumpPage('/mobileBusiness')" />
<div class="official" @click="jumpPage('/mobileConnectInfo')">联系官方</div>
<van-popup v-model:show="state.showNav" position="left" teleport="body" class="sidebarPop">
<div class="sidebarBox">
<div class="userBox">
<lazyImg class="userAvatar" round :src="state.userInfo.portrait" :key="state.userInfo.portrait" />
<div class="userName ellipsis">{{ useUserStore().userInfo.name }}</div>
</div>
<div
class="sidebarItem"
:class="{ activeSidebar: route.path == '/userHomepage' }"
@click="jumpPage('/userHomepage')"
>
我的账户
</div>
<div class="sidebarItem" :class="{ activeSidebar: route.path == '/mobileHistory' }" @click="jumpPage('/mobileHistory')">
观看历史
</div>
<div class="sidebarItem" :class="{ activeSidebar: route.path == '/collect' }" @click="jumpPage('/collect')">
我的收藏
</div>
<div class="sidebarLine"></div>
<div class="sidebarItem" @click="logout">
<div class="sidebarIcon">
<SvgIcon name="logOut" class="logOut" />
</div>
退出
</div>
</div>
</van-popup>
</div>
</template>
<script setup lang="ts">
import { jumpAdv } from '@/utils/index';
import { useGlobalStore } from '@/stores/global';
import { useUserStore } from '@/stores/user';
import { useRoute, useRouter } from 'vue-router';
import { reactive, nextTick } from 'vue';
import { eventBus } from "@/utils/eventBus";
import { clearnIndexDb } from '@/utils/indexDB';
import { useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
const globalStore = useGlobalStore();
const userStore = useUserStore();
const state = reactive({
showNav: false,
userInfo: <Types.User.UserInfoType>{},
});
nextTick(async () => {
/**
* 获取用户信息
*/
state.userInfo = userStore.userInfo;
});
const jumpPage = (path: string) => {
router.push(path);
};
const showSidebar = () => {
if (state.userInfo.account) {
state.showNav = true;
} else {
eventBus.emit('SHOW_LOGIN')
}
};
function logout() {
localStorage.clear()
sessionStorage.clear()
clearnIndexDb()
window.location.replace('/')
}
</script>
<style lang="scss" scoped>
.advTopOpt {
@@ -88,38 +23,14 @@ function logout() {
display: flex;
align-items: center;
justify-content: space-between;
.classification {
width: 17.3px;
height: 17.3px;
.optGroup {
display: flex;
align-items: center;
gap: 16px;
}
.logo {
width: 25.6px;
}
.searchBox {
width: 139px;
height: 28px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 3.089px;
background: rgba(255, 255, 255, 0.2);
padding: 0 8.17px;
.placeholder {
color: rgba(255, 255, 255, 0.4);
font-family: Arial;
font-size: 10.811px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-right: 6px;
}
.searchSvg {
width: 18.5px;
height: 18.5px;
margin-bottom: 4px;
}
}
.history,
.business {
width: 28px;
height: 28px;
@@ -141,67 +52,4 @@ function logout() {
border: 1.5px solid rgba(255, 255, 255, 0.6);
}
}
.sidebarPop {
.sidebarBox {
width: 270px;
height: 100vh;
background: #23252b;
.userBox {
width: 100%;
height: 88px;
padding: 0 24px;
box-sizing: border-box;
background: url('../../assets/images/png/userBoxBg.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
.userAvatar {
width: 48px;
height: 48px;
margin-right: 13px;
}
.userName {
color: #000;
font-family: 'PingFang SC';
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 18px; /* 100% */
width: 164px;
}
}
}
.sidebarItem {
height: 44px;
margin-top: 12px;
padding: 6.5px 0 0 16px;
box-sizing: border-box;
display: flex;
color: #ececec;
font-family: 'PingFang SC';
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
.sidebarIcon {
height: 22px;
display: flex;
align-items: center;
}
.logOut {
width: 17px;
height: 17px;
margin-right: 8px;
}
}
.activeSidebar {
color: #ffc303;
}
.sidebarLine {
margin-left: 16px;
width: 100%;
height: 1px;
background: #2d2f34;
}
}
</style>
src/components/pcFooter/index.vue
+2 -2
View File
@@ -5,7 +5,7 @@
<div class="box1">
<div class="left" @click="jumpPage('/publishingAddress')">地址发布</div>
<div class="flex-vcenter">
<DecryptImg class="img" v-for="(item, index) in contactInfo" :key="index" :src="item.officialImg" @click="openPage(item.officialUrl)"/>
<DecryptImg class="img" v-for="(item, index) in contactInfo" :key="index" :src="item.officialImg" @click="openPage(OFFICIAL_TG_URL)"/>
</div>
</div>
<div class="line"></div>
@@ -26,7 +26,7 @@
</template>
<script setup lang="ts">
import { getAdItem } from '@/utils/getConfig'
import { jumpAdv } from '@/utils/index';
import { jumpAdv, OFFICIAL_TG_URL } from '@/utils/index';
import { useRouter } from 'vue-router';
import { computed } from 'vue';
import { useConfigStore } from '@/stores/config';
src/enums/app.ts
-11
View File
@@ -85,14 +85,3 @@ export enum LikeType {
LikeTypeAvComment = 'avcomment', //av解说
LikeTypeImage = 'image', //图文
}
export enum HistoryVideoType {
VIDEO = 'videos',
POST = 'post',
MOVIE = 'movies',
NOVEL = 'novels',
NEWCARTOON = 'newCartoon', //新漫画
NEWNOVELS = 'newNovels', //新小说
NEWAUDIOBOOK = 'newAudiobook', //新有声小说
NEWCOVER = 'newCover', //新美图
}
src/router/index.ts
-65
View File
@@ -3,7 +3,6 @@ import Home from '@/views/home/index.vue';
import pcRouter from './pcRouter';
import mobileRouter from './mobileRouter';
import MobilePrivacyPolicy from '@/views/mobile/privacyPolicy/index.vue';
import MobileSearch from '@/views/mobile/mobileSearch/index.vue';
const routes: RouteRecordRaw[] = [
{
@@ -24,14 +23,6 @@ const routes: RouteRecordRaw[] = [
title: '隐私政策',
},
},
{
path: '/mobileSearch',
name: 'mobileSearch',
component: MobileSearch,
meta: {
title: '搜索',
},
},
{
path: '/mobileConnectInfo',
name: 'mobileConnectInfo',
@@ -40,22 +31,6 @@ const routes: RouteRecordRaw[] = [
title: '联系官方',
},
},
{
path: '/sectionDetails',
name: 'sectionDetails',
component: () => import('@/views/mobile/sectionDetails/index.vue'),
meta: {
title: '专题详情',
},
},
{
path: '/videoDetails',
name: 'videoDetails',
component: () => import('@/views/mobile/videoDetails/index.vue'),
meta: {
title: '视频详情',
},
},
// {
// path: '/mobileClassification',
// name: 'mobileClassification',
@@ -72,14 +47,6 @@ const routes: RouteRecordRaw[] = [
title: '发布地址',
},
},
{
path: '/collect',
name: 'collect',
component: () => import('@/views/mobile/collect/index.vue'),
meta: {
title: '我的收藏',
},
},
{
path: '/mobileBusiness',
name: 'mobileBusiness',
@@ -88,38 +55,6 @@ const routes: RouteRecordRaw[] = [
title: '商务合作',
},
},
{
path: '/userHomepage',
name: 'userHomepage',
component: () => import('@/views/mobile/userHomepage/index.vue'),
meta: {
title: '用户主页',
},
},
{
path: '/userHomepage',
name: 'userHomepage',
component: () => import('@/views/mobile/userHomepage/index.vue'),
meta: {
title: '用户主页',
},
},
{
path: '/mobileHistory',
name: 'mobileHistory',
component: () => import('@/views/mobile/mobileHistory/index.vue'),
meta: {
title: '历史记录',
},
},
{
path: '/tagDetails',
name: 'tagDetails',
component: () => import('@/views/mobile/tagDetails/index.vue'),
meta: {
title: '历史记录',
},
},
];
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
src/router/pcRouter.ts
+1 -91
View File
@@ -1,16 +1,8 @@
import { RouteRecordRaw } from 'vue-router';
import Home from '@/views/pc/home/index.vue'
import moviePlay from '@/views/pc/moviePlay/index.vue'
import Mine from '@/views/pc/mine/index.vue'
import Contact from '@/views/pc/contact/index.vue'
import Search from '@/views/pc/search/index.vue'
import Privacy from '@/views/pc/privacy/index.vue'
import Welfare from '@/views/pc/welfare/index.vue'
import PageList from '@/views/pc/pageList/index.vue'
import Classification from '@/views/pc/classification/index.vue'
import PublishingAddress from '@/views/pc/publishingAddress/index.vue'
import ListOfTopics from '@/views/pc/listOfTopics/index.vue'
import TagPageList from '@/views/pc/tagPageList/index.vue'
import Business from '@/views/pc/business/index.vue'
// pc端路由
@@ -23,32 +15,6 @@ const pcRouter: RouteRecordRaw[] = [
title: "首页"
},
},
{
path: '/mine',
name: 'mine',
component: Mine,
redirect: { name: 'mine-history' },
children: [
{
path: 'history',
name: 'mine-history',
component: () => import('@/views/pc/mine/children/History.vue')
},
{
path: 'setting',
name: 'mine-setting',
component: () => import('@/views/pc/mine/children/Setting.vue')
},
{
path: 'likes',
name: 'mine-likes',
component: () => import('@/views/pc/mine/children/Likes.vue')
},
],
meta: {
title: "我的"
},
},
{
path: '/contact',
name: 'contact',
@@ -65,14 +31,6 @@ const pcRouter: RouteRecordRaw[] = [
title: "联系"
},
},
{
path: '/search',
name: 'search',
component: Search,
meta: {
title: "搜索"
},
},
{
path: '/privacy',
name: 'privacy',
@@ -82,61 +40,13 @@ const pcRouter: RouteRecordRaw[] = [
},
},
{
path: '/moviePlay',
name: 'moviePlay',
component: moviePlay,
meta: {
title: "视频详情"
},
},
{
path: '/welfare',
name: 'welfare',
component: Welfare,
meta: {
title: "福利"
},
},
{
path: '/pageList',
name: 'pageList',
component: PageList,
meta: {
title: "列表"
},
},
{
path: '/classification',
name: 'classification',
component: Classification,
meta: {
title: "分类"
},
},
{
path: '/publishingAddress',
name: 'publishingAddress',
component: PublishingAddress,
meta: {
title: "发布地址"
},
},
{
path: '/listOfTopics',
name: 'listOfTopics',
component: ListOfTopics,
meta: {
title: "专题详情"
},
},
{
path: '/tagPageList',
name: 'tagPageList',
component: TagPageList,
meta: {
title: "标签"
},
},
},
];
export default pcRouter;
src/stores/global.ts
-5
View File
@@ -7,7 +7,6 @@ export const useGlobalStore = defineStore({
return {
keepAliveList: <string[]>[], //需要缓存的页面
mainViewKeep: <string[]>[], // tab页缓存
showAdvBanner: true, // 是否显示首页顶部banner
currentShortTab: '', //短视频选择的tab
nineGridFirst: false, // 九宫格第一次
announcementFirst: false, // app公告第一次
@@ -230,10 +229,6 @@ export const useGlobalStore = defineStore({
saveMainViewKeep(mainViewKeep: string[]) {
this.mainViewKeep = mainViewKeep;
},
// 设置首页顶部banner状态
setShowAdvBanner(status: boolean) {
this.showAdvBanner = status;
},
// 设置九宫格为第一次
setNineGridFirst() {
this.nineGridFirst = true;
src/utils/getConfig.ts
+22
View File
@@ -21,6 +21,28 @@ export function getAdItem(type: AdType): Types.App.AdsInfoListItem[] {
return advList;
}
// 首页主题，对应后台广告位配置（位置ID -> 名称）
const HOME_AD_SECTIONS = [
{ position: 1, name: '热门应用' },
{ position: 2, name: '推荐' },
{ position: 3, name: '全部应用' },
];
export interface HomeAdSection {
position: number;
name: string;
list: Types.App.AdsInfoListItem[];
}
/**
* 获取首页主题及对应广告，没有配置广告的主题不返回
*/
export function getHomeAdSections(): HomeAdSection[] {
return HOME_AD_SECTIONS.map((section) => ({ ...section, list: getAdItem(section.position) })).filter(
(section) => section.list.length,
);
}
/**
* 获取资源地址(有声和文本小说)
*/
src/utils/index.ts
+3 -105
View File
@@ -1,21 +1,9 @@
/* eslint-disable @typescript-eslint/ban-types */
import moment from 'moment';
import router from '@/router/index';
import type { HistoryVideoType } from '../enums/app';
import AppApi from '@/service/app';
import { useConfigStore } from '@/stores/config';
import { useUserStore } from '@/stores/user';
import {
addData,
closeDB,
cursorGetDataByIndexAndPage,
deleteDB,
getDataByKey,
getDataCount,
openDB,
deleteAll,
} from '@/utils/indexDB';
/**
* @description 获取设备类型
* @returns {string} //设备类型
@@ -67,6 +55,9 @@ let debounceTimer: NodeJS.Timeout | null, throttleTimer: NodeJS.Timeout | null;
* @param delay
* @returns
*/
// 官方 TG 联系方式，所有联系方式入口统一跳转这里
export const OFFICIAL_TG_URL = 'https://t.me/jbd125';
export const debounce = (fn: Function, delay: number): Function => {
return (...args: unknown[]) => {
if (debounceTimer) {
@@ -354,96 +345,3 @@ export async function jumpAdv(item: any, type?: any) {
window.open(url);
}
/**
* 保存历史
* @param data 视频数据
* @param type videos 短视频 movies 长视频
*/
export async function addVideoHistory(data: any, type: HistoryVideoType) {
const infoData = JSON.parse(JSON.stringify(data));
infoData.saveTime = Date.now();
const db = await openDB('jhs_db', 1);
try {
const queryVideo = await getDataByKey(db, type, infoData.id);
if (queryVideo) {
deleteDB(db, type, infoData.id);
}
const count: any = await getDataCount(db, type, null);
if (count >= 50) {
const list: any = await cursorGetDataByIndexAndPage(db, type, 1, 1, 'next', 'saveTime');
const id = list[0].id;
deleteDB(db, type, id);
}
addData(db, type, infoData);
closeDB(db);
} catch (error) {
closeDB(db);
}
}
/**
* 删除历史记录
* @param data 视频数据
* @param type videos 短视频 movies 长视频
*/
export async function deletePost(id: string, type: HistoryVideoType) {
const db = await openDB('jhs_db', 1);
try {
deleteDB(db, type, id);
closeDB(db);
return { code: 200 };
} catch (error) {
closeDB(db);
return { code: 400 };
}
}
/**
* 删除历史记录
* @param type videos 短视频 movies 长视频
* @param ids 删除主键数组
*/
export async function delAllData(type: HistoryVideoType, list: any) {
const db = await openDB('jhs_db');
deleteAll(db, type, list);
closeDB(db);
}
/**
* 查询视频历史记录
* @param page 页码
* @param size 每次多少条
* @param type videos 短视频 movies 长视频
* @returns Array
*/
export async function queryHistoryVideo(page: any, size: any, type: HistoryVideoType) {
const db = await openDB('jhs_db');
const list = await cursorGetDataByIndexAndPage(db, type, page, size, 'prev', 'saveTime');
closeDB(db);
return list || [];
}
/**
* 查询总条数
* @param page 页码
* @param size 每次多少条
* @param type videos 短视频 movies 长视频
* @returns Array
*/
export async function queryHistoryTotal(type: HistoryVideoType) {
const db = await openDB('jhs_db');
const count: any = await getDataCount(db, type, null);
closeDB(db);
return count || [];
}
export async function getVideoHistoryByKey(id: any, type: HistoryVideoType) {
const db = await openDB('jhs_db', 1);
try {
const queryVideo = await getDataByKey(db, type, id);
closeDB(db);
return queryVideo;
} catch (error) {
closeDB(db);
return {};
}
}
src/views/home/index.vue
-3
View File
@@ -19,7 +19,6 @@ import { getDevType } from '@/utils';
import { getAdItem } from '@/utils/getConfig';
import { useRoute, useRouter } from 'vue-router';
import { AdType, SourceType } from '@/enums/app';
import { useHomeStore } from '@/stores/home';
import axios from 'axios';
import AppApi from '@/service/app';
import mobile from './../mobile/index.vue';
@@ -32,7 +31,6 @@ const appStore = useAppStore();
const userStore = useUserStore();
const configStore = useConfigStore();
const globalStore = useGlobalStore();
const homeStore = useHomeStore();
const state = reactive({
isCheckError: false, //是否选线失败
checkLineErrorNum: 0, //选线失败次数
@@ -274,7 +272,6 @@ const init = async () => {
}
}
}
homeStore.getHomeData();
queryContactInfo();
//获取配置信息
const configOk = await getConfig();
src/views/mobile/components/HomeItem.vue
+10 -150
View File
@@ -1,145 +1,30 @@
<template>
<div class="homeItem">
<van-notice-bar
class="homeNotice"
scrollable
background="#000"
color="#FFF"
:speed="60"
v-if="state.announceText && state.announceText.length"
>
<span v-for="(item, index) in state.announceText" :key="index">{{ item }}</span>
</van-notice-bar>
<BannerSwiper :list="state.bannerList" class="bannerSwiper" v-if="state.bannerList && state.bannerList.length" />
<MobileSwiper :list="state.rankList" v-if="state.rankList && state.rankList.length" class="rankSwiper" />
<div class="topicBox" v-for="(item, index) in state.topicsList" :key="item.sectionID">
<div class="topicBox" v-for="section in advSections" :key="section.position">
<div class="topicTitleBox">
<div class="topicTitle">{{ item.sectionName }}</div>
<div class="moreBtn" @click="jumpTopic(item)">
<SvgIcon name="moreIcon" class="moreIcon" />
<span>更多</span>
</div>
<div class="topicTitle">{{ section.name }}</div>
</div>
<div class="videoList">
<MobileVideoBox :videoInfo="i" v-for="i in item.allVideoInfo" :key="i.id" />
</div>
<div class="advIconList" v-if="state.advList.length">
<div class="advIconItem" v-for="(adv, i) in getSectionAdvs(index)" :key="i" @click="jumpAdv(adv)">
<div class="advIconList">
<div class="advIconItem" v-for="adv in section.list" :key="adv.id" @click="jumpAdv(adv)">
<lazyImg class="advIcon" :src="adv.cover" />
<div class="advName">{{ adv.title }}</div>
</div>
</div>
<!-- <AdvBanner class="advBanner" :advInfo="i" v-for="i in state.advList" :key="i.id" /> -->
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive, computed } from 'vue';
import { useGlobalStore } from '@/stores/global';
import { AdType } from '@/enums/app';
import { getAdItem } from '@/utils/getConfig';
import { getHomeAdSections } from '@/utils/getConfig';
import { jumpAdv } from '@/utils/index';
import { useRoute, useRouter } from 'vue-router';
import HomeApi from '@/service/home';
const route = useRoute();
const router = useRouter();
const props = defineProps({
tid: {
type: String,
required: true,
},
});
const globalStore = useGlobalStore();
const state = reactive({
bannerList: [],
announceText: '',
topicsList: <any>[],
rankList: <any>[],
advList: <any>[],
});
const queryList = async () => {
let req = {
id: props.tid,
data: {
pageNumber: 1,
pageSize: 10,
videoCount: 8,
},
};
let res: any = await HomeApi.getModuleList(req);
let allSection = res.allSection || [];
allSection.forEach((item: any) => {
if (item.showType == 2) {
state.bannerList = state.bannerList.concat(item.allVideoInfo || []);
} else {
state.topicsList = state.topicsList.concat(item || []);
}
// console.log(state.topicsList, '-=-==-');
});
};
const queryRanks = async () => {
let req = {
pageNumber: 1,
pageSize: 20,
};
let res: any = await HomeApi.getRangking(req);
state.rankList = res.videos || [];
console.log(state.rankList);
};
const getAnnounce = async () => {
let res: any = await HomeApi.getAnnounce();
state.announceText = res.announcement || [];
};
const jumpTopic = (item: any) => {
const queryData = {
tid: item.sectionID,
name: item.sectionName,
};
router.push({ path: '/sectionDetails', query: queryData }).then(() => {
// location.reload();
});
};
// 每个专区展示 ADV_ICON_COUNT 个小图标广告，广告不足时循环补齐
const ADV_ICON_COUNT = 5;
const getSectionAdvs = (sectionIndex: number) => {
const len = state.advList.length;
return Array.from({ length: ADV_ICON_COUNT }, (_, i) => state.advList[(sectionIndex * ADV_ICON_COUNT + i) % len]);
};
const init = () => {
state.advList = getAdItem(AdType.MOBILEHOMETOPIC);
queryList();
queryRanks();
getAnnounce();
};
init();
const advSections = getHomeAdSections();
</script>
<style scoped lang="scss">
.homeItem {
background: #000;
.homeNotice {
height: 31px;
padding: 0;
span {
margin-right: 60px;
}
}
.bannerSwiper {
height: 162px;
margin-bottom: 15px;
}
.rankSwiper {
margin-bottom: 24.36px;
}
.videoSwiper {
margin-bottom: 24.36px;
}
padding-top: 20px;
.topicBox {
padding: 0 16px;
box-sizing: border-box;
@@ -156,34 +41,12 @@ init();
line-height: 18px; /* 112.5% */
letter-spacing: 0.5px;
}
.moreBtn {
display: flex;
align-items: center;
justify-content: center;
.moreIcon {
margin-right: 3.43px;
width: 16px;
height: 16px;
}
span {
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 13.714px;
color: rgba(255, 255, 255, 0.4);
}
}
}
.videoList {
display: grid;
grid-template-columns: 1fr 1fr;
grid-row-gap: 16px;
grid-column-gap: 12px;
}
.advIconList {
margin-top: 24px;
display: flex;
display: grid;
grid-template-columns: repeat(5, 60px);
justify-content: space-between;
grid-row-gap: 16px;
.advIconItem {
width: 60px;
.advIcon {
@@ -210,7 +73,4 @@ init();
margin-bottom: 29px;
}
}
.showAdvBanner {
height: calc(100vh - 160px);
}
</style>
src/views/mobile/connectInfo/index.vue
+2 -1
View File
@@ -3,7 +3,7 @@
<MobileHeader class="header" />
<div class="contentBox">
<div class="subTitle">官方联系</div>
<div class="connectItem" v-for="(item, index) in contactInfo" :key="index" @click="openPage(item.officialUrl)">
<div class="connectItem" v-for="(item, index) in contactInfo" :key="index" @click="openPage(OFFICIAL_TG_URL)">
<lazyImg class="connectImg" :src="item.officialImg" />
<div class="infoBox">
<div class="conectName">{{ item.officialName }}</div>
@@ -18,6 +18,7 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { useConfigStore } from '@/stores/config';
import { OFFICIAL_TG_URL } from '@/utils/index';
const configStore = useConfigStore();
const contactInfo = computed(() => {
return configStore.contactInfo;
src/views/mobile/index.vue
+1 -29
View File
@@ -1,10 +1,7 @@
<template>
<div class="mobileHome overflow-y-auto">
<MobileHeader class="header" />
<HomeItem v-if="currTab?.showType == 1" :tid="currTab.id" />
<TopicDetails v-else-if="currTab?.showType == 2" :tid="currTab.id" :key="currTab.id" />
<Welfare v-else-if="currTab?.showType == 4" :tid="currTab.id" />
<Classification v-else-if="currTab?.showType == 5" :tid="currTab.id" :key="'calss' + currTab.id" />
<HomeItem />
<MobileBottom />
<!-- 弹窗广告 -->
@@ -36,16 +33,9 @@
<script lang="ts" setup>
import { reactive, computed } from 'vue';
import { useGlobalStore } from '@/stores/global';
import { useHomeStore } from '@/stores/home';
import { getAdItem } from '@/utils/getConfig';
import { AdType } from '@/enums/app';
import { useRoute } from 'vue-router';
import HomeItem from './components/HomeItem.vue';
import TopicDetails from './components/TopicDetails.vue';
import Welfare from './components/Welfare.vue';
import Classification from './components/Classification.vue';
const route = useRoute();
const homeStore = useHomeStore();
const globalStore = useGlobalStore();
// const showTip = computed(() => {
// return !globalStore.showTipFirst;
@@ -58,24 +48,6 @@ const state = reactive({
advList: <any>[],
});
const currTab = computed(() => {
if (route.query.tid) {
// let tabObj = homeStore.homeData.filter((i) => {
// return i.id == route.query.tid;
// });
const tabObj = {
id: route.query.tid,
showType: route.query.stype,
name: route.query.name,
};
return tabObj;
} else {
return homeStore.homeData[0];
}
// return route.query.tid ? homeStore.homeData[0];
});
const confirm = () => {
globalStore.setShowTipFirst();
};
src/views/mobile/mobileBusiness/index.vue
+2 -1
View File
@@ -7,7 +7,7 @@
class="connectItem"
v-for="(item, index) in state.contactInfo"
:key="index"
@click="openPage(item.officialUrl)"
@click="openPage(OFFICIAL_TG_URL)"
>
<lazyImg class="connectImg" :src="item.officialImg" />
<div class="conectName">{{ item.officialName }}：</div>
@@ -21,6 +21,7 @@
<script lang="ts" setup>
import { reactive } from 'vue';
import AppApi from '@/service/app';
import { OFFICIAL_TG_URL } from '@/utils/index';
const state = reactive({
contactInfo: <any>[],
});
src/views/pc/business/index.vue
+2 -1
View File
@@ -2,7 +2,7 @@
<div class="contact">
<div class="title">商务合作</div>
<div class="contact-list">
<div class="item" v-for="(item, index) in state.contactInfo" :key="index" @click="openPage(item.officialUrl)">
<div class="item" v-for="(item, index) in state.contactInfo" :key="index" @click="openPage(OFFICIAL_TG_URL)">
<lazyImg class="connectImg" :src="item.officialImg" />
<div class="text">
<p class="name">{{ item.officialName }}</p>
@@ -15,6 +15,7 @@
<script setup lang="ts">
import { reactive } from 'vue';
import AppApi from '@/service/app';
import { OFFICIAL_TG_URL } from '@/utils/index';
const state = reactive({
contactInfo: <any>[],
});
src/views/pc/contact/index.vue
+2 -1
View File
@@ -2,7 +2,7 @@
<div class="contact">
<div class="title">官方联系</div>
<div class="contact-list">
<div class="item" v-for="(item, index) in contactInfo" :key="index" @click="openPage(item.officialUrl)">
<div class="item" v-for="(item, index) in contactInfo" :key="index" @click="openPage(OFFICIAL_TG_URL)">
<lazyImg class="connectImg" :src="item.officialImg" />
<div class="text">
<p class="name">{{ item.officialName }}</p>
@@ -15,6 +15,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useConfigStore } from '@/stores/config';
import { OFFICIAL_TG_URL } from '@/utils/index';
const configStore = useConfigStore();
const contactInfo = computed(() => {
return configStore.contactInfo;
src/views/pc/home/content.vue
+33 -71
View File
@@ -1,53 +1,20 @@
<template>
<div class="content">
<div class="thematic" v-for="(item, index) in videoList" :key="index">
<div class="title">
{{ item.sectionName }}
<div class="more" @click="toListOfTopics(item)">
<img class="left-arrow" src="@/assets/images/pc/more.png" alt="">
更多
<div class="thematic" v-for="section in advSections" :key="section.position">
<div class="title">{{ section.name }}</div>
<div class="adv-icon-list">
<div class="adv-icon-item" v-for="adv in section.list" :key="adv.id" @click="jumpAdv(adv)">
<DecryptImg class="adv-icon" :src="adv.cover" />
<div class="adv-name">{{ adv.title }}</div>
</div>
</div>
<div class="card-list">
<movieCard :itemData="itemData" v-for="(itemData, i) in item.allVideoInfo" :key="i" />
</div>
<div class="adv-list-wrap" v-if="index % 2 === 1">
<DecryptImg v-for="(item, i) in renderAdvList(index)" class="adv" :src="item.cover" @click="jumpAdv(item)" :key="i"/>
</div>
</div>
</div>
</template>
</template>
<script setup lang="ts">
import { getAdItem } from '@/utils/getConfig';
import { getHomeAdSections } from '@/utils/getConfig';
import { jumpAdv } from '@/utils/index';
import { useRouter } from 'vue-router';
withDefaults(defineProps<{
videoList: Array<any>[]
}>(), {
videoList: () => []
})
const router = useRouter()
const toListOfTopics = (item: any) => {
router.push({
path: '/listOfTopics',
query: {
sectionid: item.sectionID,
name: item.sectionName,
page: 1
}
})
}
const renderAdvList = (index: number) => {
const list = getAdItem(3)
for (let j = 0; j < 10; j++) {
list.push(...list)
}
const i = Math.floor(index / 2 )
const startIndex = i * 2
const endindex = (i + 1) * 2
return list.slice(startIndex, endindex)
}
const advSections = getHomeAdSections();
</script>
<style lang="scss" scoped>
@media (min-width: 768px) {
@@ -65,39 +32,34 @@ const renderAdvList = (index: number) => {
padding-bottom: 28px;
padding-top: 50px;
box-sizing: content-box;
@include flexBetween;
.more {
@include flexBetween;
font-size: 18px;
font-weight: 400;
color: rgba(255, 255, 255, 0.4);
}
.adv-icon-list {
display: grid;
grid-template-columns: repeat(10, 120px);
justify-content: space-between;
row-gap: 32px;
.adv-icon-item {
width: 120px;
cursor: pointer;
img {
width: 24px;
height: 24px;
margin-right: 7px;
.adv-icon {
position: relative;
width: 120px;
height: 120px;
border-radius: 24px;
overflow: hidden;
}
.adv-name {
margin-top: 10px;
color: #fff;
font-size: 18px;
line-height: 24px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
.card-list {
display: flex;
flex-wrap: wrap;
column-gap: 24px;
row-gap: 36px;
}
}
.adv-list-wrap {
display: flex;
gap: 24px;
.adv {
margin-top: 30px;
width: 746px;
height: 146px;
border-radius: 8px;
overflow: hidden;
}
}
}
}
src/views/pc/home/index.vue
+2 -38
View File
@@ -1,42 +1,6 @@
<template>
<!-- 轮播 -->
<banner :swiperList="swiperList" :bannerList="bannerList" />
<content :videoList="videoList" v-if="videoList.length > 0" />
<content />
</template>
<script setup lang="ts" name="home">
import { ref, watchEffect } from 'vue'
import { useHomeStore } from '@/stores/home'
import banner from './banner.vue';
import content from './content.vue';
import HomeApi from '@/service/home';
const homeStore = useHomeStore()
const swiperList = ref([])
const videoList = ref([])
watchEffect(async() => {
const homeData = homeStore.homeData.find(item => item.showType === 1) || {}
if (homeData.id) {
const res: any = await HomeApi.getModuleList({
id: homeData.id,
data: {
pageNumber: 1,
pageSize: 10,
videoCount: 16,
moduleSort: homeData.moduleSort
}
})
getBannerList()
const allSection = res.allSection
swiperList.value = (allSection.find((item: any) => item.showType === 2) || {}).allVideoInfo || []
videoList.value = allSection.filter((item: any) => item.showType !== 2) || []
}
})
const bannerList = ref([])
const getBannerList = async () => {
const res: any = await HomeApi.getRangking({
pageNumber: 1,
pageSize: 10,
})
bannerList.value = res.videos
}
</script>
</script>
src/views/pc/index.vue
+2 -310
View File
@@ -1,58 +1,15 @@
<template>
<div id="home">
<div class="header-wrap-box">
<div class="adv-wrap" v-if="showHeaderAdv && getAdItem(1).length > 0">
<swiper loop :autoplay="{ delay: 5000, disableOnInteraction: false, pauseOnMouseEnter: true, }" :modules="[Autoplay]">
<swiper-slide class="adv" v-for="(item, index) in getAdItem(1)" :key="index" @click="jumpAdv(item)">
<DecryptImg class="banner-img" :src="item.cover" />
</swiper-slide>
</swiper>
<img @click="closeHeaderAdv" class="close-adv" src="@/assets/images/pc/adv_close.png" />
</div>
<div class="header-wrap">
<div class="flex-vcenter left-wrap">
<img @click="jumpPage('/home')" class="logo" src="@/assets/images/pc/logo.png" />
<div class="tab-list">
<span
class="item"
:class="{ active: activeIndex === index }"
@click="changeTab(item, index)"
v-for="(item, index) in homeStore.homeData"
:key="index">
{{ item.subModuleName }}
<span v-show="activeIndex === index">✨</span>
</span>
</div>
</div>
<div class="right-list">
<div class="search-box">
<input type="text" v-model="searchText" @keydown.enter="tosearch" placeholder="输入你搜索的关键字">
<div class="search-btn" @click="tosearch">
<img class="search" src="@/assets/images/pc/search.png" />
</div>
</div>
<div class="item history-box">
<div @click="toHistory" @mouseover="getHistoryList">
<img class="search" src="@/assets/images/pc/history.png" />
<p>观看历史</p>
</div>
<div class="history-list-box-wrap" v-if="historyList.length > 0">
<div class="history-list-box">
<img class="top-tip" src="@/assets/images/pc/history_bg.png" />
<div class="movie-list" @click="toMoivePlay(item.id)" v-for="(item, index) in historyList" :key="index">
<DecryptImg class="cover" :src="item.cover" :key="item.cover + Math.random()" />
<div class="described ellipsis2">{{ item.title }}</div>
</div>
<div class="more-btn" @click="toHistory">更多 <img src="@/assets/images/pc/left_arrow.png" alt=""></div>
</div>
</div>
</div>
<div class="item" @click="jumpPage('/business')">
<img class="search" src="@/assets/images/pc/business.png" />
<p>商务合作</p>
</div>
<DecryptImg @click="userHandle" class="avatar" v-if="userInfo?.portrait" :src="userInfo.portrait" :key="userInfo?.portrait" />
<img v-else @click="userHandle" class="avatar" src="@/assets/images/pc/avatar.png" />
<div class="official" @click="jumpPage('/contact')">联系官方</div>
</div>
</div>
@@ -66,33 +23,14 @@
</div>
</template>
<script setup lang="ts">
import { ref, watchEffect, computed, watch, onMounted } from 'vue'
import { jumpAdv } from '@/utils/index';
import { computed } from 'vue'
import { getAdItem } from '@/utils/getConfig'
import { Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/swiper.min.css';
import { useHomeStore } from '@/stores/home'
import { HistoryVideoType } from '@/enums/app';
import { queryHistoryVideo } from '@/utils';
import Mask from './mask.vue';
import { useRouter, useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { useGlobalStore } from '@/stores/global';
import { eventBus } from "@/utils/eventBus";
const globalStore = useGlobalStore();
const router = useRouter();
const route = useRoute()
const homeStore = useHomeStore()
const userInfo = computed(() => {
const data = localStorage.getItem('userInfo') || '{}'
if (data) {
return JSON.parse(data)
}
return data
})
const searchText = ref('')
const activeIndex = ref(0)
// const isShowAdvPopup = ref(false)
@@ -106,102 +44,10 @@ const isShowAdvPopup = computed(() => {
const closeHomePopupAdv = () => {
globalStore.setHomeAdvFirst();
};
watchEffect(() => {
if (['/home','/welfare', '/classification', '/pageList'].includes(route.path)) {
activeIndex.value = Number(route.query.index || 0)
} else {
activeIndex.value = -1
}
})
watch(() => route.path, (path) => {
if (path !== '/search') {
searchText.value = ''
}
})
const changeTab = (item: any, index: number) => {
activeIndex.value = index
if (item.showType === 2) {
router.push({
path: '/pageList',
query: {
index,
id: item.id,
name: item.subModuleName,
page: 1
}
})
}
if (item.showType === 1) {
router.push({
path: '/home',
query: {
index,
id: item.id,
}
})
}
if (item.showType === 4) {
router.push('/welfare?index=' + index)
}
if (item.showType === 5) {
router.push('/classification?index=' + index)
}
}
const tosearch = () => {
router.push({
path: '/search',
query: {
id: searchText.value,
page: 1
}
})
}
const jumpPage = (path: string) => {
router.push(path)
}
const showHeaderAdv = ref(true)
showHeaderAdv.value = !sessionStorage.getItem('HeaderAdv')
const closeHeaderAdv = () => {
sessionStorage.setItem('HeaderAdv', 'true')
showHeaderAdv.value = false
}
const userHandle = () => {
if (userInfo.value.account) {
router.push('/mine')
} else {
eventBus.emit('SHOW_LOGIN')
}
}
const historyList = ref([])
const getHistoryList = async () => {
const list: any = await queryHistoryVideo(1, 3, HistoryVideoType.VIDEO)
historyList.value = list
};
const toMoivePlay = (id: string) => {
router.push({
path: '/moviePlay',
query: {
vid: id,
page: 1
}
})
}
getHistoryList()
const toHistory = () => {
if (userInfo.value.account) {
router.push('/mine/history')
} else {
eventBus.emit('SHOW_LOGIN')
}
}
</script>
<style lang="scss" scoped>
@media (min-width: 768px) {
@@ -215,29 +61,6 @@ const toHistory = () => {
position: sticky;
top: 0;
z-index: 100;
.adv-wrap {
border: 1px solid #34363B;
background: #1A1C22;
width: 100%;
height: 100px;
position: relative;
.adv {
height: 100%;
width: max-content;
}
.banner-img {
width: 100%;
height: 100px;
}
.close-adv {
width: 50px;
height: 20px;
position: absolute;
top: 20px;
right: 200px;
z-index: 1;
}
}
}
.header-wrap {
width: 100%;
@@ -256,55 +79,6 @@ const toHistory = () => {
.logo:hover {
transform: scale(1.02);
}
.tab-list {
display: flex;
align-items: center;
color: #A3A4A7;
font-size: 16px;
font-weight: 400;
.item {
padding: 14px;
cursor: pointer;
white-space: nowrap;
}
.active {
color: #FFF;
font-size: 18px;
}
.item:hover {
color: #FFF;
}
}
.search-box {
width: 240px;
height: 36px;
padding: 10px 0 10px 12px;
box-sizing: border-box;
border-radius: 4px;
background: rgba(255, 255, 255, 0.20);
display: flex;
align-items: center;
input {
all: unset;
color: #fff;
flex: 1;
}
.search-btn {
cursor: pointer;
}
.search {
width: 24px;
height: 24px;
margin: 0 11px;
}
}
.right-list {
display: flex;
align-items: center;
@@ -326,19 +100,6 @@ const toHistory = () => {
color: #fff;
}
.avatar {
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
margin: 30px;
cursor: pointer;
transition: all 0.2s;
}
.avatar:hover {
transform: scale(1.1);
transition: all 0.2s;
}
.official {
width: 87px;
height: 36px;
@@ -356,75 +117,6 @@ const toHistory = () => {
}
}
.history-box {
position: relative;
.history-list-box-wrap {
width: 282px;
min-height: 100px;
position: absolute;
top: 45px;
transform: translateX(-50%);
left: 50%;
display: none;
}
.history-list-box {
width: 282px;
padding: 16px;
position: absolute;
left: 50%;
top: 60px;
transform: translateX(-50%);
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.25);
background: #1A1C22;
.top-tip {
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
}
.movie-list {
display: flex;
align-items: center;
margin-bottom: 16px;
}
.cover {
width: 110px;
height: 62px;
border-radius: 4px;
overflow: hidden;
margin-right: 8px;
}
.described {
width: 130px;
height: 44px;
text-align: left;
color: #A9A9AC;
font-size: 14px;
font-weight: 400;
line-height: 22px;
border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}
.more-btn {
@include flexCenter;
height: 44px;
color: #A9A9AC;
font-size: 14px;
font-weight: 400;
img {
width: 16px;
height: 16px;
}
}
}
}
.history-box:hover {
.history-list-box-wrap {
display: block;
}
}
:deep() {
.imgBox {
width: 474px !important;