企业画像：贸易数据&出口数据

src/api/home.ts

@@ -47,3 +47,11 @@ export const getHotRecommendApi = () => {
     url: '/shop/advert/hotRecommend',
   })
 }
+// 移动端-首页接口
+export const configIndex = (data : { page : number, page_size : number }) => {
+  return request({
+    url: '/api/index/config',
+    method: 'POST',
+    data,
+  })
+}

src/api/portrait.ts

@@ -0,0 +1,47 @@
+import type { PageParams } from '@/types/global'
+import type { RootName } from '@/types/userCenter'
+import { request } from '@/utils/request'
+
+
+// 企业画像
+export const postCompanyDataThirdDataViewApi = (data : PageParams) => {
+  return request<RootName>({
+    method: 'POST',
+    url: '/company/CompanyDataThird/dataView',
+  })
+}
+// 出口数据
+export const postDataViewExportApi = (data : PageParams) => {
+  return request<RootName>({
+    method: 'POST',
+    url: '/company/CompanyDataThird/dataViewExport',
+  })
+}
+// 进口数据
+export const postDataViewImportApi = (data : PageParams) => {
+  return request<RootName>({
+    method: 'POST',
+    url: '/company/CompanyDataThird/dataViewImport',
+  })
+}
+// 贸易伙伴
+export const postDataViewPartnersApi = (data : PageParams) => {
+  return request<RootName>({
+    method: 'POST',
+    url: '/company/CompanyDataThird/dataViewPartners',
+  })
+}
+// 海关编码统计
+export const postDataViewHscodeApi = (data : PageParams) => {
+  return request<RootName>({
+    method: 'POST',
+    url: '/company/CompanyDataThird/dataViewHscode',
+  })
+}
+// 海贸区域
+export const postDataViewAreaApi = (data : PageParams) => {
+  return request<RootName>({
+    method: 'POST',
+    url: '/company/CompanyDataThird/dataViewArea',
+  })
+}

src/composables/common/useBackground.ts

@@ -0,0 +1,63 @@
+import { computed } from 'vue'
+
+export function useBackground() {
+  // 默认背景色
+  const defaultBackgroundColor = '#f1f1f1'
+  // 渐变色起始色
+  const gradientStartColor = '#C8E3FF'
+  // 渐变色结束色
+  const gradientEndColor = '#E8F4FF'
+
+  // 多端背景样式
+  const backgroundStyle = computed(() => {
+    // 默认样式
+    return {
+      background: defaultBackgroundColor,
+      minHeight: '100vh',
+      position: 'relative',
+    }
+  })
+
+  // 顶部渐变背景样式
+  const topGradientStyle = computed(() => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '470rpx',
+    background: getGradientBackground(),
+    zIndex: 1,
+  }))
+  const setTopGradientStyle = (startColor: string, endColor: string) => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '470rpx',
+    background: setGradientBackground(startColor, endColor),
+    zIndex: 1,
+  })
+
+  // 获取背景色值
+  const getBackgroundColor = () => defaultBackgroundColor
+
+  // 获取渐变背景色值
+  const getGradientBackground = () =>
+    `linear-gradient(180deg, 
+      #C8E3FF 0%, 
+      #E3ECF6 50%, 
+      #f1f1f1 100%)`
+//设置渐变背景色
+const setGradientBackground = (startColor: string, endColor: string) =>
+    `linear-gradient(180deg, 
+      ${startColor} 0%, 
+      ${endColor} 50%, 
+      #f1f1f1 100%)`
+  return {
+    backgroundStyle,
+    topGradientStyle,
+    getBackgroundColor,
+    getGradientBackground,
+	setTopGradientStyle
+  }
+}

src/composables/common/useDataFetch.ts

@@ -0,0 +1,124 @@
+import { ref, computed, type Ref } from 'vue'
+
+export interface FetchOptions<T = any> {
+  // 是否立即执行
+  immediate?: boolean
+  // 是否显示加载状态
+  showLoading?: boolean
+  // 加载提示文字
+  loadingText?: string
+  // 是否显示错误提示
+  showError?: boolean
+  // 错误提示文字
+  errorText?: string
+  // 重试次数
+  retryCount?: number
+  // 重试延迟
+  retryDelay?: number
+}
+
+export interface FetchResult<T = any> {
+  data: Ref<T | null>
+  loading: Ref<boolean>
+  error: Ref<string | null>
+  execute: (...args: any[]) => Promise<T>
+  refresh: () => Promise<T>
+  reset: () => void
+}
+
+export function useDataFetch<T = any>(
+  fetchFn: (...args: any[]) => Promise<T>,
+  options: FetchOptions<T> = {},
+): FetchResult<T> {
+  const {
+    immediate = false,
+    showLoading = true,
+    loadingText = '加载中...',
+    showError = true,
+    errorText = '加载失败',
+    retryCount = 0,
+    retryDelay = 1000,
+  } = options
+
+  const data = ref<T | null>(null) as Ref<T | null>
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const retryTimes = ref(0)
+
+  // 是否正在重试
+  const isRetrying = computed(() => retryTimes.value > 0)
+
+  // 执行数据获取
+  const execute = async (...args: any[]): Promise<T> => {
+    if (loading.value) return data.value as T
+
+    loading.value = true
+    error.value = null
+
+    if (showLoading) {
+      uni.showLoading({
+        title: loadingText,
+        mask: true,
+      })
+    }
+
+    try {
+      const result = await fetchFn(...args)
+      data.value = result
+      retryTimes.value = 0
+      return result
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err)
+      error.value = errorMessage
+
+      if (showError) {
+        uni.showToast({
+          title: errorText,
+          icon: 'error',
+          duration: 2000,
+        })
+      }
+
+      // 重试逻辑
+      if (retryTimes.value < retryCount) {
+        retryTimes.value++
+        await new Promise((resolve) => setTimeout(resolve, retryDelay))
+        return execute(...args)
+      }
+
+      throw err
+    } finally {
+      loading.value = false
+      if (showLoading) {
+        uni.hideLoading()
+      }
+    }
+  }
+
+  // 刷新数据
+  const refresh = async (): Promise<T> => {
+    return execute()
+  }
+
+  // 重置状态
+  const reset = () => {
+    data.value = null
+    loading.value = false
+    error.value = null
+    retryTimes.value = 0
+  }
+
+  // 立即执行
+  if (immediate) {
+    execute()
+  }
+
+  return {
+    data,
+    loading,
+    error,
+    execute,
+    refresh,
+    reset,
+  }
+}

src/composables/common/useRefreshLoad.ts

@@ -0,0 +1,113 @@
+import { ref, computed, nextTick } from 'vue'
+
+export interface RefreshLoadOptions {
+  // 刷新成功提示
+  showRefreshSuccess?: boolean
+  // 加载失败提示
+  showLoadError?: boolean
+}
+
+export function useRefreshLoad(options: RefreshLoadOptions = {}) {
+  const { showRefreshSuccess = true, showLoadError = true } = options
+
+  // 响应式状态
+  const isRefreshing = ref(false)
+  const isLoading = ref(false)
+  const hasMore = ref(true)
+  const currentPage = ref(1)
+
+  // 下拉刷新处理
+  const handleRefresh = async (refreshCallback?: () => Promise<void>) => {
+    if (isRefreshing.value) return
+
+    isRefreshing.value = true
+    currentPage.value = 1
+    hasMore.value = true
+
+    try {
+      if (refreshCallback) {
+        await refreshCallback()
+      }
+
+      if (showRefreshSuccess) {
+        uni.showToast({
+          title: '刷新成功',
+          icon: 'success',
+          duration: 1500,
+        })
+      }
+    } catch (error) {
+      console.error('刷新失败:', error)
+      if (showLoadError) {
+        uni.showToast({
+          title: '刷新失败',
+          icon: 'error',
+          duration: 1500,
+        })
+      }
+    } finally {
+      isRefreshing.value = false
+      // 停止下拉刷新动画
+      uni.stopPullDownRefresh()
+    }
+  }
+
+  // 上拉加载处理
+  const handleLoadMore = async (loadMoreCallback?: () => Promise<void>) => {
+    if (isLoading.value || !hasMore.value) return
+
+    isLoading.value = true
+    currentPage.value++
+
+    try {
+      if (loadMoreCallback) {
+        await loadMoreCallback()
+      }
+    } catch (error) {
+      console.error('加载失败:', error)
+      currentPage.value-- // 回退页码
+      if (showLoadError) {
+        uni.showToast({
+          title: '加载失败',
+          icon: 'error',
+          duration: 1500,
+        })
+      }
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  // 重置状态
+  const resetState = () => {
+    isRefreshing.value = false
+    isLoading.value = false
+    hasMore.value = true
+    currentPage.value = 1
+  }
+
+  // 设置加载状态
+  const setLoadingState = (loading: boolean) => {
+    isLoading.value = loading
+  }
+
+  // 设置是否有更多数据
+  const setHasMore = (hasMoreData: boolean) => {
+    hasMore.value = hasMoreData
+  }
+
+  return {
+    // 状态
+    isRefreshing,
+    isLoading,
+    hasMore,
+    currentPage,
+
+    // 方法
+    handleRefresh,
+    handleLoadMore,
+    resetState,
+    setLoadingState,
+    setHasMore,
+  }
+}

src/composables/common/useSearch.ts

@@ -0,0 +1,142 @@
+import { ref } from 'vue'
+
+export interface SearchOptions {
+  debounceTime?: number
+  minLength?: number
+  maxHistoryCount?: number
+}
+
+export function useSearch(options: SearchOptions = {}) {
+  const { debounceTime = 300, minLength = 1, maxHistoryCount = 10 } = options
+
+  const isSearching = ref(false)
+  const searchHistory = ref<string[]>([])
+  const searchTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+
+  // 搜索处理
+  const handleSearch = (keyword: string) => {
+    const searchText = keyword.trim()
+
+    if (searchText.length < minLength) {
+      uni.showToast({
+        title: `请输入至少${minLength}个字符`,
+        icon: 'none',
+        duration: 1500,
+      })
+      return
+    }
+
+    // 添加到搜索历史
+    addToHistory(searchText)
+
+    // 执行搜索
+    performSearch(searchText)
+  }
+
+  // 执行搜索
+  const performSearch = async (keyword: string) => {
+    isSearching.value = true
+
+    try {
+      // 这里可以调用搜索API
+      console.log('执行搜索:', keyword)
+
+      // 模拟搜索延迟
+      await new Promise((resolve) => setTimeout(resolve, 500))
+
+      // 搜索成功回调
+      // uni.showToast({
+      //   title: '搜索完成',
+      //   icon: 'success',
+      //   duration: 1000,
+      // })
+    } catch (error) {
+      console.error('搜索失败:', error)
+      uni.showToast({
+        title: '搜索失败',
+        icon: 'error',
+        duration: 1500,
+      })
+    } finally {
+      isSearching.value = false
+    }
+  }
+
+  // 添加到搜索历史
+  const addToHistory = (keyword: string) => {
+    console.log('addToHistory', keyword)
+    if (!keyword.trim()) return
+
+    // 移除重复项
+    const index = searchHistory.value.indexOf(keyword)
+    if (index > -1) {
+      searchHistory.value.splice(index, 1)
+    }
+
+    // 添加到开头
+    searchHistory.value.unshift(keyword)
+
+    // 限制历史记录数量
+    if (searchHistory.value.length > maxHistoryCount) {
+      searchHistory.value = searchHistory.value.slice(0, maxHistoryCount)
+    }
+
+    // 保存到本地存储
+    saveSearchHistory()
+  }
+
+  // 清空搜索历史
+  const clearSearchHistory = () => {
+    searchHistory.value = []
+    saveSearchHistory()
+  }
+
+  // 保存搜索历史到本地
+  const saveSearchHistory = () => {
+    try {
+      uni.setStorageSync('searchHistory', searchHistory.value)
+    } catch (error) {
+      console.error('保存搜索历史失败:', error)
+    }
+  }
+
+  // 从本地加载搜索历史
+  const loadSearchHistory = () => {
+    try {
+      const history = uni.getStorageSync('searchHistory')
+      if (history && Array.isArray(history)) {
+        searchHistory.value = history
+      }
+    } catch (error) {
+      console.error('加载搜索历史失败:', error)
+    }
+  }
+
+  // 防抖搜索
+  const debounceSearch = (callback: () => void) => {
+    if (searchTimer.value) {
+      clearTimeout(searchTimer.value)
+    }
+
+    searchTimer.value = setTimeout(() => {
+      callback()
+    }, debounceTime)
+  }
+
+  // 初始化时加载搜索历史
+  loadSearchHistory()
+
+  return {
+    // 状态
+    isSearching,
+    searchHistory,
+
+    // 方法
+    handleSearch,
+    performSearch,
+    addToHistory,
+    clearSearchHistory,
+    debounceSearch,
+    loadSearchHistory,
+  }
+}

src/composables/useHomePage.ts

@@ -0,0 +1,150 @@
+import { ref } from 'vue'
+import { useBackground } from './common/useBackground'
+import { useRefreshLoad } from './common/useRefreshLoad'
+import { useDataFetch } from './common/useDataFetch'
+import { getBannerApi, getHotRecommendApi, getNoticeBartApi, configIndex } from '@/api/home'
+import { getTopCategoryApi } from '@/api/catogory'
+import type { bannerItem, noticeBarItem } from '@/types/home'
+
+export function useHomePage() {
+  // ==================== 使用其他 composables ====================
+  const { backgroundStyle, topGradientStyle } = useBackground()
+
+  const {
+    isRefreshing,
+    isLoading,
+    hasMore,
+    currentPage,
+    handleRefresh,
+    handleLoadMore,
+    resetState,
+  } = useRefreshLoad({
+    showRefreshSuccess: true,
+    showLoadError: true,
+  })
+	const  homeData = ref({})
+  // ==================== 页面数据 ====================
+  const bannerList = ref<bannerItem[]>([
+    {
+      id: 1,
+      image: '/static/images/home/banner1.png',
+      jump: true,
+      goods_id: '1',
+    },
+    {
+      id: 2,
+      image: '/static/images/home/banner1.png',
+      jump: true,
+      goods_id: '2',
+    },
+    {
+      id: 3,
+      image: '/static/images/home/banner1.png',
+      jump: true,
+      goods_id: '3',
+    },
+  ])
+  // const noticeBarList = ref<noticeBarItem[]>([
+  //   {
+  //     id: 1,
+  //     title: '智慧',
+  //     content: '公告公告公告公告公告',
+  //   },
+  // ])
+  const noticeBarList = ref<string[]>([
+    '公告公告公告公告公告1111111',
+    '智慧关务系统升级通知',
+    '保税物流服务优化公告',
+    '海关政策更新提醒',
+    '新功能上线通知',
+  ])
+  const categoryList = ref<any[]>([])
+  const hotRecommendList = ref<any[]>([])
+
+  // ==================== 数据获取 ====================
+  const { execute: fetchHomeIndex } = useDataFetch(configIndex, {
+    immediate: false,
+    showLoading: false,
+    showError: false,
+  })
+
+  const { execute: fetchBanners } = useDataFetch(getBannerApi, {
+    immediate: false,
+    showLoading: false,
+    showError: false,
+  })
+
+  const { execute: fetchNotices } = useDataFetch(getNoticeBartApi, {
+    immediate: false,
+    showLoading: false,
+    showError: false,
+  })
+
+  const { execute: fetchCategories } = useDataFetch(getTopCategoryApi, {
+    immediate: false,
+    showLoading: false,
+    showError: false,
+  })
+
+  const { execute: fetchHotRecommend } = useDataFetch(getHotRecommendApi, {
+    immediate: false,
+    showLoading: false,
+    showError: false,
+  })
+
+  // ==================== 页面初始化 ====================
+  const initPage = async () => {
+    try {
+      await Promise.all([fetchHomeIndex().then(res=>{
+		  if(res.code == 1){
+			  homeData.value = res.data
+        console.log(homeData.value)
+		  }
+	  })])
+      // 在这里赋值或者获取接口返回的数据
+    } catch (error) {
+      console.error('页面初始化失败:', error)
+    }
+  }
+
+  // ==================== 刷新处理 ====================
+  const onRefresh = async () => {
+    await handleRefresh(async () => {
+      await initPage()
+    })
+  }
+
+  // ==================== 加载更多处理 ====================
+  const onLoadMore = async () => {
+    await handleLoadMore(async () => {
+      // 这里可以加载更多数据
+      console.log('加载更多数据')
+    })
+  }
+
+  // ==================== 返回数据和方法 ====================
+  return {
+    // 背景样式
+    backgroundStyle,
+    topGradientStyle,
+
+    // 页面状态
+    isRefreshing,
+    isLoading,
+    hasMore,
+    currentPage,
+
+    // 页面数据
+    bannerList,
+    noticeBarList,
+    categoryList,
+    hotRecommendList,
+
+    // 页面方法
+    initPage,
+    onRefresh,
+    onLoadMore,
+    resetState,
+	homeData
+  }
+}

src/pages.json

@@ -359,6 +359,18 @@
           // #endif
         }
       }]
+    },
+    {
+      "root": "pagesEnterprise",
+      "pages": [{
+        "path": "pages/portrait/index",
+        "style": {
+          "navigationBarTitleText": "企业画像",
+          // #ifdef WEB
+          "navigationStyle": "custom"
+          // #endif
+        }
+      }]
     }
   ],
   "preloadRule": {
@@ -376,7 +388,7 @@
     },
     "pages/my/userCenter": {
       "network": "all",
-      "packages": ["pagesMember", "pagesOrder"]
+      "packages": ["pagesMember", "pagesOrder","pagesEnterprise"]
     }
   }
 }

src/pagesEnterprise/pages/portrait/components/data-card.vue

@@ -0,0 +1,164 @@
+<template>
+  <view class="content">
+    <!-- 头部 -->
+    <view class="content-item">
+      <view class="content-item-top">
+        <view class="content-item-top-title">{{data.name}}</view>
+        <view class="content-item-top-tip">
+          <text>查看更多</text>
+          <!-- <image :src="imgUrl"></image> -->
+        </view>
+      </view>
+      <view class="content-date">{{data.date}}</view>
+    </view>
+
+    <!-- 底部自定义内容区域 -->
+    <view class="content-bottom">
+      <view class="content-bottom-item">
+        <text class="content-bottom-item-lable">供应商</text>
+        <view class="content-bottom-item-value">
+          <view class="content-bottom-item-value-info">
+            {{data.company_sell_area}}
+          </view>
+          <text>{{data.company_sell}}</text>
+        </view>
+      </view>
+      <view class="content-bottom-item">
+        <text class="content-bottom-item-lable">采购商</text>
+        <view class="content-bottom-item-value">
+          <view class="content-bottom-item-value-info">
+            {{data.company_buy_area}}
+          </view>
+          <text>{{data.company_buy}}</text>
+        </view>
+      </view>
+      <view class="content-bottom-item">
+        <text class="content-bottom-item-lable">起运港</text>
+        <text class="content-bottom-item-value">{{data.company_sell_area}}</text>
+      </view>
+      <view class="content-bottom-item">
+        <text class="content-bottom-item-lable">目的港</text>
+        <text class="content-bottom-item-value">{{data.company_sell_area}}</text>
+      </view>
+      <view class="content-bottom-item content-bottom-last">
+        <text class="content-bottom-item-lable">产品描述</text>
+        <text class="content-bottom-item-value">{{data.remarks}}</text>
+      </view>
+    </view>
+
+  </view>
+</template>
+
+<script setup>
+  import {
+    defineProps
+  } from 'vue'
+
+  // 接收父组件传递的标题
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  })
+</script>
+
+<style lang="scss" scoped>
+  .content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-top: 20rpx;
+    color: #333333;
+    font-size: 28rpx;
+    font-weight: 600;
+    background: #E9F3FF;
+    border-radius: 24rpx;
+    padding: 30rpx;
+
+    &-item {
+      width: 100%;
+      border-bottom: 1rpx solid #C6E0FF;
+      height: 120rpx;
+
+      &-top {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        &-tip {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-size: 24rpx;
+          color: #666;
+          font-weight: 400;
+
+          image {
+            width: 24rpx;
+            height: 24rpx;
+            margin-left: 10rpx;
+          }
+        }
+      }
+    }
+
+    &-date {
+      color: #666;
+      font-weight: 400;
+      margin: 10rpx 0;
+    }
+
+    &-bottom {
+      margin-top: 20rpx;
+      font-weight: 500;
+      font-size: 24rpx;
+
+      &-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10rpx 0;
+
+        &-lable {
+          color: #666;
+        }
+
+        &-value {
+          display: flex;
+          align-items: center;
+          justify-content: end;
+          width: 80%;
+
+          &-info {
+            background: #85BCFF;
+            border-radius: 30rpx;
+            padding: 0 10rpx;
+            color: #0052B5;
+            margin-right: 10rpx;
+            font-size: 18rpx;
+          }
+        }
+
+
+      }
+
+      &-last {
+        align-items: flex-start;
+        height: 80rpx;
+
+        .content-bottom-item-value {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+  }
+</style>

src/pagesEnterprise/pages/portrait/components/market-title.vue

@@ -0,0 +1,66 @@
+<template>
+  <view class="content">
+    <!-- 左侧标题区域 -->
+    <view class="content-left">
+      <view class="content-bar"></view>
+      <text>{{ title }}</text>
+    </view>
+
+    <!-- 右侧自定义内容区域 -->
+    <view class="content-right">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script setup>
+  import {
+    defineProps
+  } from 'vue'
+
+  // 接收父组件传递的标题
+  const props = defineProps({
+    title: {
+      type: String,
+      required: true, // 标题为必填项
+      default: '' // 默认值
+    }
+  })
+</script>
+
+<style lang="scss" scoped>
+  .content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 20rpx;
+    color: #333333;
+    font-size: 28rpx;
+    font-weight: 600;
+
+    &-left {
+      display: flex;
+      align-items: center;
+    }
+
+    &-right {
+      display: flex;
+      align-items: center;
+      font-size: 24rpx;
+      color: #666666;
+
+      image {
+        width: 15rpx;
+        height: 13rpx;
+        margin-left: 10rpx;
+      }
+    }
+
+    &-bar {
+      width: 8rpx;
+      height: 30rpx;
+      margin-right: 10rpx;
+      background: linear-gradient(to bottom, #1975C3, #fff);
+    }
+  }
+</style>

src/pagesEnterprise/pages/portrait/index.vue

@@ -0,0 +1,390 @@
+<template>
+  <view class="portrait-page" :style="backgroundStyle">
+    <view :style="topGradientStyle"></view>
+    <view class="portrait-page-contain">
+      <!-- 搜索 -->
+      <wd-search v-model="searchValue" :placeholder-left="placeholderLeft" cancel-txt="搜索" placeholder="请输入企业名称" />
+      <!--企业卡片 -->
+      <view class="portrait-card">
+        <view class="portrait-card-title">
+          <view class="portrait-card-title-circle"></view>
+          {{company.company_name}}
+        </view>
+        <view class="portrait-card-info">
+          <view class="portrait-card-info-item">
+            <view class="portrait-card-info-item-label">联系人：</view>
+            <view class="portrait-card-info-item-value">{{company.company_contact}}</view>
+          </view>
+          <view class="portrait-card-info-item">
+            <view class="portrait-card-info-item-label">联系电话：</view>
+            <view class="portrait-card-info-item-value">{{company.company_mobile}}</view>
+          </view>
+          <view class="portrait-card-info-item">
+            <view class="portrait-card-info-item-label">邮箱：</view>
+            <view class="portrait-card-info-item-value">{{company.company_email}}</view>
+          </view>
+          <view class="portrait-card-info-item">
+            <view class="portrait-card-info-item-label">地址：</view>
+            <view class="portrait-card-info-item-value">{{company.company_address}}</view>
+          </view>
+        </view>
+      </view>
+      <!-- tab -->
+      <wd-tabs v-model="tabChange" @change="tabIndex">
+        <block v-for="(item,index) in tabList" :key="item">
+          <wd-tab :title="item">
+            <!-- 贸易数据 -->
+            <view class="content-trade" v-if="item=='贸易数据'">
+              <MarketTitle title='市场趋势分析'>
+                <view class="content-right">
+                  <text>2025年</text>
+                  <image :src="imgsUrl.lower_img"></image>
+                </view>
+              </MarketTitle>
+              <view class="content-trade-stat">
+                <view v-for="(item,index) in tradeData.market_analysis_board" :key="index"
+                  @click="handleStatClick(index)" class="content-trade-stat-item"
+                  :class="{ 'content-trade-stat-item-active': activeIndex === index }">
+                  <text class="content-trade-stat-value">{{item.value}}</text>
+                  <text class="content-trade-stat-label">{{item.name}}</text>
+                </view>
+              </view>
+              <!-- 图表 -->
+              <qiun-data-charts type="column" :opts="tradeOpts" :chartData="tradeCharts" class="trade-charts" />
+              <MarketTitle title='近三个月'></MarketTitle>
+              <wd-table :data="tradeDataList" :stripe="true" rowHeight="10" class="table">
+                <wd-table-col v-for="(column, index) in tableColumns" :key="index" :prop="column.prop"
+                  :label="column.label" :width="index==0?100:80" align="center" ellipsis="true"></wd-table-col>
+              </wd-table>
+            </view>
+            <!-- 出口数据 -->
+            <view class="content-trade" v-if="item=='出口数据'">
+              <MarketTitle title='出口数据分析'>
+                <view class="content-right">
+                  <wd-search v-model="exportSeach" :placeholder-left="placeholderLeft" cancel-txt=" "
+                    placeholder="请搜索" />
+                </view>
+              </MarketTitle>
+              <block v-for="(item,index) in exportData" :key="index">
+                <DataCard :data="item"></DataCard>
+              </block>
+
+            </view>
+          </wd-tab>
+        </block>
+      </wd-tabs>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useHomePage } from '@/composables/useHomePage'
+  import { postCompanyDataThirdDataViewApi, postDataViewExportApi } from '@/api/portrait'
+  import { onLoad } from '@dcloudio/uni-app'
+  import MarketTitle from './components/market-title.vue'
+  import DataCard from './components/data-card.vue'
+  const {
+    backgroundStyle,
+    topGradientStyle
+  } = useHomePage()
+  // 图片数据
+  const imgsUrl = ref({})
+  // 搜索值
+  const searchValue = ref('')
+  // tab选中
+  const tabChange = ref()
+  // tabl列表
+  const tabList = ref(["贸易数据", "出口数据", "贸易伙伴", "HS编码", "出口产品"])
+  // 请求参数
+  const params = {
+    page: 1,
+    page_size: 10
+  }
+  // 贸易数据
+  const tradeData = ref({})
+  // 企业信息
+  const company = ref({})
+  // 记录当前统计信息选中的索引（-1表示未选中）
+  const activeIndex = ref(-1);
+  // 贸易数据图表
+  const tradeCharts = ref({
+    categories: [],
+    series: []
+  })
+  // 市场趋势分析图表opt配置
+  const tradeOpts = ref({
+    color: ["#A2D2FF"],
+    padding: [15, 15, 0, 5],
+    dataLabel: false,//数据文案
+    legend: {
+      show: false
+    },
+    extra: {
+      column: {
+        type: "group",
+        width: 23,
+        activeBgColor: "#000000",
+        seriesGap: 5,
+        linearOpacity: 1,
+        barBorderCircle: true
+      },
+
+    },
+    yAxis: {
+      data: [
+        {
+          min: 0,
+          axisLine: false
+        }
+      ]
+    }
+  })
+  // 近三月数据
+  const tradeDataList = ref([])
+  // 表格列配置
+  const tableColumns = ref([])
+  // 出口数据搜索
+  const exportSeach = ref('')
+  // 出口数据内容
+  const exportData = ref({})
+  // 搜索框设置
+  const placeholderLeft = ref(true)
+  onLoad(() => {
+    getCompanyDataThirdDataView()
+    getDataViewExport()
+  })
+  // tab函数
+  const tabIndex = (index) => {
+    if (index == 1) {
+      getDataViewExport()
+    }
+  }
+  // 企业画像
+  const getCompanyDataThirdDataView = () => {
+    postCompanyDataThirdDataViewApi(params).then(res => {
+      if (res.code == 1) {
+        tradeData.value = res.data
+        // 图片数据
+        imgsUrl.value = res.data.other
+        // 市场趋势数据处理
+        company.value = res.data.company
+        tradeCharts.value.categories = res.data.market_analysis_charts.name
+        let charts = res.data.market_analysis_charts.charts
+        let chartsObj = {
+          name: res.data.market_analysis_charts.title,
+          data: res.data.market_analysis_charts.value
+        }
+        tradeCharts.value.series[0] = chartsObj
+        // 近三月数据处理
+        let originalData = res.data.market_analysis_list
+        tradeDataList.value = originalData.list.map(item => {
+          return {
+            [originalData.name[0]]: item[0],  // 最近日期
+            [originalData.name[1]]: item[1],  // 交易次数
+            [originalData.name[2]]: item[2],  // 交易笔数
+            [originalData.name[3]]: item[3]   // 交易重量
+          };
+        })
+        extractTableColumns(tradeDataList.value)
+      }
+    })
+  }
+  // 点击统计信息
+  const handleStatClick = (index) => {
+    activeIndex.value = index;
+  }
+  // 提取表格列信息
+  const extractTableColumns = (data) => {
+    if (data.length > 0) {
+      // 获取第一个对象的所有键
+      const keys = Object.keys(data[0]);
+      // 转换为表格列配置
+      tableColumns.value = keys.map(key => ({
+        prop: key,
+        // 这里直接用键作为label，也可以根据需要进行格式化
+        label: key
+      }))
+    }
+  }
+
+  // 出口数据请求
+  const getDataViewExport = () => {
+    postDataViewExportApi(params).then(res => {
+      if (res.code == 1) {
+        exportData.value = res.data
+      }
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep .portrait-page {
+    width: 100%;
+    position: relative;
+    min-height: 100vh;
+    overflow-y: hidden;
+    padding: 0 30rpx;
+    // 底部状态栏一般建议预留60rpx-100rpx，具体根据实际底部栏高度调整
+    padding-bottom: 60rpx;
+    background: #FFFFFF !important;
+
+    &-contain {
+      position: relative;
+      z-index: 1;
+      padding-top: 32rpx;
+    }
+  }
+
+  // 头部搜索框
+  .wd-search {
+    background-color: #E9F3FF;
+    height: 80rpx;
+    border-radius: 24rpx;
+  }
+
+  ::v-deep .wd-search__block {
+    background-color: #E9F3FF;
+  }
+
+  ::v-deep .wd-search__cancel {
+    color: #0478F4;
+    font-size: 28rpx;
+  }
+
+  // 企业卡片
+  .portrait-card {
+    width: 100%;
+    height: 280rpx;
+    margin-top: 30rpx;
+    background: linear-gradient(to bottom, #1975C3, #85BCFF);
+    border-radius: 20rpx;
+    padding: 30rpx;
+    color: #fff;
+
+    &-title {
+      display: flex;
+      align-items: center;
+      font-size: 28rpx;
+      font-weight: 600;
+
+      &-circle {
+        width: 30rpx;
+        height: 30rpx;
+        background: #FFFFFF;
+        border-radius: 50%;
+        margin-right: 10rpx;
+
+      }
+    }
+
+    &-info {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      padding-bottom: 30rpx;
+
+      &-item {
+        display: flex;
+        align-items: center;
+        font-size: 24rpx;
+        margin-top: 10rpx;
+
+        &-label {
+          width: 120rpx;
+        }
+
+        &-value {
+          flex: 1;
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  ::v-deep .is-active {
+    color: #0478F4;
+  }
+
+  .content-right {
+    display: flex;
+    align-items: center;
+    font-size: 24rpx;
+    color: #666666;
+
+    image {
+      width: 15rpx;
+      height: 13rpx;
+      margin-left: 10rpx;
+    }
+
+    .wd-search {
+      width: 400rpx;
+      height: 50rpx;
+    }
+
+    ::v-deep .wd-search__cover {
+      background: none;
+      box-sizing: border-box;
+    }
+
+    ::v-deep .wd-search__input {
+      height: 20rpx;
+    }
+  }
+
+  .content-trade {
+    &-stat {
+      display: flex;
+      justify-content: space-between;
+      margin: 30rpx 0;
+
+      &-item {
+        width: 200rpx;
+        height: 100rpx;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: 24rpx;
+        color: #333333;
+        background-color: #EEEEEE;
+        border-radius: 10px;
+      }
+
+      &-item-active {
+        background-color: #B9C3FF;
+        color: #1159C0;
+        border: 1px solid #1159C0;
+      }
+
+      &-value {
+        font-size: 28rpx;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .trade-charts {
+    height: 360rpx;
+  }
+
+  ::v-deep .is-border {
+    border-right: none !important;
+  }
+
+  ::v-deep .wd-table__cell {
+    background-color: #F8F8F8 !important;
+    min-height: 80rpx !important;
+  }
+
+  ::v-deep .is-stripe {
+    background-color: #CCE6FF !important;
+  }
+
+  .table {
+    width: 100%;
+    margin-top: 30rpx;
+  }
+</style>

src/types/home.d.ts

@@ -24,6 +24,15 @@ export type bannerItem = {
   jump: boolean
   //跳转商品ID
   goods_id: string
+  linkurl:string
+  target:string
+}
+
+export type menuItem = {
+	background: string
+	img:string
+	name:string
+	url: string
 }
 
 export type categoryPanelItem = {