企业画像：贸易数据&出口数据
This commit is contained in:
parent
25341584fa
commit
0d17baa9c9
@ -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,
|
||||
})
|
||||
}
|
||||
|
||||
47
src/api/portrait.ts
Normal file
47
src/api/portrait.ts
Normal file
@ -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',
|
||||
})
|
||||
}
|
||||
63
src/composables/common/useBackground.ts
Normal file
63
src/composables/common/useBackground.ts
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
124
src/composables/common/useDataFetch.ts
Normal file
124
src/composables/common/useDataFetch.ts
Normal file
@ -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,
|
||||
}
|
||||
}
|
||||
113
src/composables/common/useRefreshLoad.ts
Normal file
113
src/composables/common/useRefreshLoad.ts
Normal file
@ -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,
|
||||
}
|
||||
}
|
||||
142
src/composables/common/useSearch.ts
Normal file
142
src/composables/common/useSearch.ts
Normal file
@ -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,
|
||||
}
|
||||
}
|
||||
150
src/composables/useHomePage.ts
Normal file
150
src/composables/useHomePage.ts
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
@ -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"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
164
src/pagesEnterprise/pages/portrait/components/data-card.vue
Normal file
164
src/pagesEnterprise/pages/portrait/components/data-card.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
390
src/pagesEnterprise/pages/portrait/index.vue
Normal file
390
src/pagesEnterprise/pages/portrait/index.vue
Normal file
@ -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>
|
||||
9
src/types/home.d.ts
vendored
9
src/types/home.d.ts
vendored
@ -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 = {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user