feat: 更新广告页面和路由跳转逻辑

1. 添加了banner请求相关的类型定义和hooks
2. 更新了广告页面的路由跳转逻辑,支持传递code参数
3. 修改了相关组件的导入和使用方式
4. 更新了类型定义文件以支持新的功能
5. 优化了图片轮播组件的交互逻辑
This commit is contained in:
Huangzhe
2025-05-22 17:28:07 +08:00
parent 108a54305d
commit 0685c46500
9 changed files with 88 additions and 9 deletions

6
env.d.ts vendored
View File

@@ -4,3 +4,9 @@ declare module '*.vue' {
const component: DefineComponent<{}, {}, any>; const component: DefineComponent<{}, {}, any>;
export default component; export default component;
} }
interface Window {
ReactNativeWebView: {
postMessage: (message: string) => void;
};
}

View File

@@ -1,3 +1,4 @@
import type { BannerResponse } from '@/hooks/request/types/response';
import request from '@/utils/request'; import request from '@/utils/request';
/** /**
@@ -5,7 +6,7 @@ import request from '@/utils/request';
* @param source {1} * @param source {1}
*/ */
export function queryBannerList(source = 1) { export function queryBannerList(source = 1) {
return request<unknown>({ return request<BannerResponse>({
url: `/console/banner/query_banner_list`, url: `/console/banner/query_banner_list`,
params: { source } params: { source }
}); });

View File

@@ -0,0 +1,16 @@
import { queryBannerList } from '@/api/ad';
import type { AxiosResponse } from 'axios';
import { ref } from 'vue';
import type { BannerResponse } from './types/response';
function fetchBanners() {
const banners = ref<BannerItem[]>();
queryBannerList().then((response: AxiosResponse<BannerResponse>) => {
// console.log(response);
banners.value = response.data.data.banner_list;
});
return { banners };
}
export { fetchBanners };

20
src/hooks/request/types/banners.d.ts vendored Normal file
View File

@@ -0,0 +1,20 @@
interface BannerItem {
sort: number;
code: string;
title: string | null;
synopsis: string | null;
type: number;
characters: string | null;
url: string | null;
publish_time: string; // 可以使用 Date 类型,但原始数据是字符串格式
banner_address: string;
is_jump: number; // 假设是整数表示布尔值0 或 1
carousel_button_name: string | null;
file_address: string;
is_display_button: number; // 同上
button_name: string;
}
interface Banners {
banner_list: BannerItem[];
}

View File

@@ -7,3 +7,4 @@ export interface CDMResponse<T>{
} }
type HomeRecommendResponse = CDMResponse<HomeRecommend>; type HomeRecommendResponse = CDMResponse<HomeRecommend>;
type BannerResponse = CDMResponse<Banners>;

View File

@@ -13,6 +13,13 @@
<template #left> <template #left>
<van-icon name="left-long" class-prefix="mobilefont" size="18" style="color: #000" /> <van-icon name="left-long" class-prefix="mobilefont" size="18" style="color: #000" />
</template> </template>
<template #right>
<el-icon
class="nav-layout-right"
@click="route.meta.shareAction && route.meta.shareFunc()"
><RiShareForwardBoxFill
/></el-icon>
</template>
</van-nav-bar> </van-nav-bar>
</header> </header>
<!-- content --> <!-- content -->
@@ -23,12 +30,12 @@
</template> </template>
<script setup> <script setup>
import { RiShareForwardBoxFill } from 'vue-icons-plus/ri';
import { RouterView, useRoute } from 'vue-router'; import { RouterView, useRoute } from 'vue-router';
import appBridge from '@/assets/js/appBridge'; import appBridge from '@/assets/js/appBridge';
const route = useRoute(); const route = useRoute();
console.log(route.meta.pureBGC); console.log(route.meta.pureBGC);
// const router = useRouter();
function goBack() { function goBack() {
if (window.history.length > 1 && route.name !== 'home') { if (window.history.length > 1 && route.name !== 'home') {
@@ -63,6 +70,9 @@ const handlePopState = () => {
height: 100vh; height: 100vh;
background-color: theme.$nav-header-color; background-color: theme.$nav-header-color;
color: #333; color: #333;
.nav-layout-right {
}
} }
.redirect-body { .redirect-body {

View File

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router';
import layout from '@/layouts/index.vue'; import layout from '@/layouts/index.vue';
import Design from '@/views/Design/Index.vue'; import Design from '@/views/Design/Index.vue';
import Redirect from '@/layouts/redirect.vue'; import Redirect from '@/layouts/redirect.vue';
import type { title } from 'process';
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
@@ -111,11 +112,23 @@ const router = createRouter({
component: () => import('@/views/Survey/views/Analysis/Index.vue') component: () => import('@/views/Survey/views/Analysis/Index.vue')
}, },
{ {
path: '/ad', path: '/ad/:code',
name: 'ad', name: 'ad',
meta: { meta: {
pureBGC: true, pureBGC: true,
title: "伊调研123123" title: "伊调研",
shareAction : true,
shareFunc : () => {
if(window.ReactNativeWebView){
window.ReactNativeWebView.postMessage(JSON.stringify({
type: 'shareModal',
title: '分享标题',
description:'分享副标题',
thumbImageUrl:'https://logo.png',
webpageUrl: window.location.href
}));
}
}
}, },
component: () => import('@/views/AD/Index.vue') component: () => import('@/views/AD/Index.vue')
} }

View File

@@ -1,5 +1,15 @@
<script setup lang="ts"> <script setup lang="ts">
import { bannerInfo } from '@/views/AD/hooks/useAD'; import { fetchBanners } from '@/hooks/request/banner';
import { computed } from 'vue';
import { useRoute } from 'vue-router';
const { banners } = fetchBanners();
const route = useRoute();
const bannerInfo = computed(() => {
console.log(banners.value);
return banners.value?.find((item: any) => item.code === route.params.code);
});
</script> </script>
<template> <template>

View File

@@ -1,7 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { banners } from '@/views/Home/components/ImageSlider/hooks/useSlider';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { bannerInfo } from '@/views/AD/hooks/useAD'; import { bannerInfo } from '@/views/AD/hooks/useAD';
import { fetchBanners } from '@/hooks/request/banner';
const { banners } = fetchBanners();
const router = useRouter(); const router = useRouter();
// const defineBanners = defineModel('banners'); // const defineBanners = defineModel('banners');
@@ -12,7 +14,7 @@ const borderRadius = defineModel('borderRadius');
function handleBannerClick(banner: any) { function handleBannerClick(banner: any) {
// 把对应的信息给 AD 的 hooks // 把对应的信息给 AD 的 hooks
bannerInfo.value = banner; bannerInfo.value = banner;
router.push({ name: 'ad' }); router.push({ name: 'ad', params: { code: banner.code } });
} }
</script> </script>