index.vue 1.77 KB
<template>
  <web-view v-if="preview_url" :src="preview_url" />
  <view v-else class="tab-webview-page">
    <view class="empty-card">
      <text class="empty-title">暂未配置资讯地址</text>
      <text class="empty-desc">
        当前资讯页已经改成 WebView 承接模式,请先检查底部导航配置接口是否返回了可用地址。
      </text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro, { useLoad } from '@tarojs/taro'
import { useTabbarStore } from '@/stores/tabbar'

const tabbarStore = useTabbarStore()
const preview_url = ref('')
const default_page_title = '资讯'

const initPage = async () => {
  await tabbarStore.ensureLoaded()

  const currentTab = tabbarStore.getTabItem('message')
  preview_url.value = currentTab?.webview_url || ''

  Taro.setNavigationBarTitle({
    title: currentTab?.webview_title || currentTab?.title || default_page_title,
  })

  if (!preview_url.value) {
    Taro.showToast({
      title: '暂未配置资讯地址',
      icon: 'none',
    })
  }
}

useLoad(() => {
  initPage()
})
</script>

<style lang="less">
.tab-webview-page {
  min-height: 100vh;
  padding: 32rpx 24rpx;
  box-sizing: border-box;
  background:
    radial-gradient(circle at top right, rgba(166, 121, 57, 0.16), transparent 30%),
    linear-gradient(180deg, #fffaf3 0%, #f6f7fb 100%);
}

.empty-card {
  background: rgba(255, 255, 255, 0.94);
  border: 2rpx solid rgba(166, 121, 57, 0.08);
  border-radius: 28rpx;
  padding: 32rpx;
  box-sizing: border-box;
  box-shadow: 0 20rpx 60rpx rgba(15, 23, 42, 0.06);
}

.empty-title {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  color: #111827;
}

.empty-desc {
  display: block;
  margin-top: 16rpx;
  font-size: 26rpx;
  line-height: 1.7;
  color: #6b7280;
}
</style>