feat: 更新广告页面和路由跳转逻辑
1. 添加了banner请求相关的类型定义和hooks 2. 更新了广告页面的路由跳转逻辑,支持传递code参数 3. 修改了相关组件的导入和使用方式 4. 更新了类型定义文件以支持新的功能 5. 优化了图片轮播组件的交互逻辑
This commit is contained in:
6
env.d.ts
vendored
6
env.d.ts
vendored
@@ -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;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|||||||
@@ -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 }
|
||||||
});
|
});
|
||||||
|
|||||||
16
src/hooks/request/banner.ts
Normal file
16
src/hooks/request/banner.ts
Normal 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
20
src/hooks/request/types/banners.d.ts
vendored
Normal 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[];
|
||||||
|
}
|
||||||
1
src/hooks/request/types/response.d.ts
vendored
1
src/hooks/request/types/response.d.ts
vendored
@@ -7,3 +7,4 @@ export interface CDMResponse<T>{
|
|||||||
}
|
}
|
||||||
|
|
||||||
type HomeRecommendResponse = CDMResponse<HomeRecommend>;
|
type HomeRecommendResponse = CDMResponse<HomeRecommend>;
|
||||||
|
type BannerResponse = CDMResponse<Banners>;
|
||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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')
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user