tjy-uniapp/src/pages/aboutSystem/index.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '关于系统',
  },
}
</route>

<template>
  <view class="about-container">
    <!-- 头部 Logo 区域 -->
    <view class="header-card">
      <view class="logo-container">
        <image class="logo" src="/static/images/logo.png" mode="aspectFit" />
      </view>
      <text class="app-name">广州特检检务通 v{{ appVersion }}</text>
    </view>

    <!-- 版本更新列表 -->
    <view class="version-card">
      <view class="card-header">
        <text class="card-title">版本更新</text>
      </view>

      <view v-if="loading" class="loading-container">
        <text class="loading-text">加载中...</text>
      </view>

      <scroll-view v-else-if="updateList.length > 0" class="version-list" scroll-y>
        <view
          v-for="(item, index) in updateList"
          :key="item.id || item.version"
          class="version-item"
          @click="showVersionDetail(item)"
        >
          <view class="version-item-content">
            <view class="version-item-left">
              <text class="version-number">v{{ item.versionName || item.version }}</text>
              <view class="version-info-row">
                <text class="version-info">更新时间：{{ formatDateTime(item.publishTime) }}</text>
                <text class="version-info">文件大小：{{ formatFileSize(item.fileSize) }}</text>
              </view>
            </view>
            <text class="version-arrow">></text>
          </view>
          <view v-if="index < updateList.length - 1" class="version-divider" />
        </view>
      </scroll-view>

      <view v-else class="empty-container">
        <text class="empty-text">暂无版本更新记录</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getUpdateHistoryApi } from '@/api/version'
import { formatFileSize } from '@/utils/fileServices'
import { getTime } from '@/utils/index'

interface UpdateInfo {
  id?: string
  version?: string
  versionName?: string
  publishTime?: string
  fileSize?: number | string
  downloadUrl?: string
  download_url?: string
  [key: string]: any
}

const appVersion = ref('1.0.0')
const updateList = ref<UpdateInfo[]>([])
const loading = ref(false)

// 获取版本更新历史
const fetchUpdateHistory = async () => {
  try {
    loading.value = true
    console.log('开始获取版本更新历史...')
    const response: any = await getUpdateHistoryApi()
    console.log('API 响应:', response)

    if (response?.data?.list?.length > 0) {
      console.log('版本历史数据:', response.data.list)
      updateList.value = response.data.list
    }
  } catch (error) {
    console.error('获取版本更新历史失败:', error)
    uni.showToast({
      title: '获取版本历史失败',
      icon: 'none',
      duration: 2000,
    })
  } finally {
    loading.value = false
  }
}

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '未知时间'
  try {
    const date = getTime(dateTime)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    return `${year}-${month}-${day} ${hours}:${minutes}`
  } catch (error) {
    return dateTime
  }
}

// 显示版本详情
const showVersionDetail = (item: UpdateInfo) => {
  try {
    const dataJson = encodeURIComponent(JSON.stringify(item))
    uni.navigateTo({
      url: `/pages/aboutSystem/updateDetail?data=${dataJson}`,
    })
  } catch (error) {
    console.error('跳转更新详情页面失败:', error)
    uni.showToast({
      title: '跳转失败',
      icon: 'none',
      duration: 2000,
    })
  }
}

onMounted(() => {
  // 获取应用版本
  try {
    const app = uni.getAppBaseInfo()
    appVersion.value = app.version || '1.0.0'
  } catch (e) {
    appVersion.value = '1.0.0'
  }

  fetchUpdateHistory()
})
</script>

<style lang="scss" scoped>
.about-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 16px;
  background-color: #ededed;
}

.header-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  margin-bottom: 16px;
  background-color: #ffffff;
  border-radius: 4px;
}

.logo-container {
  margin-bottom: 15px;
}

.logo {
  width: 120px;
  height: 120px;
}

.app-name {
  font-size: 18px;
  font-weight: 500;
  color: #081f50;
}

.version-card {
  flex: 1;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
}

.card-header {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.version-list {
  height: 100%;
}

.version-item {
  background-color: #fff;
}

.version-item-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

.version-item-left {
  flex: 1;
}

.version-number {
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.version-info-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
}

.version-info {
  font-size: 14px;
  line-height: 20px;
  color: #666;
}

.version-arrow {
  font-size: 16px;
  font-weight: bold;
  color: #ccc;
}

.version-divider {
  height: 1px;
  margin-left: 16px;
  background-color: #f0f0f0;
}

.loading-container,
.empty-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.loading-text,
.empty-text {
  font-size: 14px;
  color: #999;
}
</style>