hookehuyr

feat: 添加网页视图页面并集成到首页

新增 webview 页面用于显示外部网页内容,支持通过页面参数传递 URL。在首页中将“计划书”按钮的跳转逻辑修改为打开 webview 页面并传递特定 URL,以替代原有的内部页面跳转。这允许应用内直接加载外部网页内容,提升功能灵活性。
......@@ -8,6 +8,7 @@
const pages = [
'pages/index/index',
'pages/search/index',
'pages/webview/index',
'pages/auth/index',
'pages/onboarding/index',
'pages/family-office/index',
......
......@@ -74,7 +74,7 @@
<nut-button
color="#2563EB"
class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0"
@tap="go('/pages/plan/index')"
@tap="openWebView('https://https://oa-dev.onwall.cn/f/custom_form/front/#/')"
>
计划书
</nut-button>
......@@ -107,7 +107,7 @@
<nut-button
color="#2563EB"
class="flex-1 !h-[64rpx] !rounded-[16rpx] !text-[26rpx] !m-0"
@tap="go('/pages/plan/index')"
@tap="openWebView('https://https://oa-dev.onwall.cn/f/custom_form/front/#/')"
>
计划书
</nut-button>
......@@ -208,6 +208,13 @@ const handleGridNav = (item) => {
go(item.route);
};
// Open webview with URL
const openWebView = (url) => {
go('/pages/webview/index', {
url: encodeURIComponent(url)
});
};
useShareAppMessage(() => {
return {
title: '臻奇智荟圈',
......
export default {
navigationBarTitleText: '网页',
enablePullDownRefresh: false,
disableScroll: true,
// 小程序中需要配置以下属性
navigationStyle: 'custom' // 使用自定义导航栏,配合 NavHeader 组件
}
<template>
<view class="webview-container">
<!-- Navigation Header -->
<NavHeader title="计划书" />
<!-- WebView Content -->
<web-view :src="url" class="webview-content" />
</view>
</template>
<script setup>
import { ref } from 'vue'
import { useLoad } from '@tarojs/taro'
import NavHeader from '@/components/NavHeader.vue'
/**
* WebView Page
* @description 用于显示外部网页内容的页面
*/
const url = ref('')
useLoad((options) => {
// 从页面参数中获取 URL,如果没有则使用默认值
url.value = decodeURIComponent(options.url || 'https://www.google.com')
console.log('WebView URL:', url.value)
})
</script>
<script>
export default {
name: 'WebViewIndex'
}
</script>
<style lang="less" scoped>
.webview-container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
.webview-content {
flex: 1;
width: 100%;
}
</style>