odf_new/odf-uniapp/pages/home/index.vue

<template>
  <view class="home-page">
    <view class="content">
      <!-- 顶部导航栏 -->
      <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
        <view class="nav-bar-inner">
          <image
            class="nav-icon"
            src="/static/images/ic_back.png"
            mode="aspectFit"
            @click="goBack"
          />
          <text class="nav-title">公司列表</text>
          <view class="nav-right">
            <image
              class="nav-icon"
              src="/static/images/ic_refresh.png"
              mode="aspectFit"
              @click="handleRefresh"
            />
            <image
              class="nav-icon nav-icon-ml"
              src="/static/images/ic_set.png"
              mode="aspectFit"
              @click="goSettings"
            />
          </view>
        </view>
      </view>

      <!-- 搜索入口栏 -->
      <view class="search-bar" @click="goSearch">
        <image class="search-icon" src="/static/images/ic_search.png" mode="aspectFit" />
        <text class="search-placeholder">请输入要搜索的备注内容</text>
      </view>

      <!-- 公司列表 -->
      <scroll-view class="company-list" scroll-y>
        <view
          class="company-card"
          v-for="item in companyList"
          :key="item.deptId"
          @click="goRegion(item)"
        >
          <text class="company-name">{{ item.deptName }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 版本更新弹窗 -->
    <update-dialog :visible="showUpdate" :downloadUrl="updateUrl" :forceUpdate="forceUpdate" @close="showUpdate = false" />
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import store from '@/store'
import { getCompanyList, getDictUnitType, getDictBusinessType, checkAppVersion } from '@/services/home'
import { APP_VERSION } from '@/services/api'
import updateDialog from '@/components/update-dialog.vue'

const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0
const companyList = ref([])
const showUpdate = ref(false)
const updateUrl = ref('')
const forceUpdate = ref(false)

async function loadCompanyList() {
  const res = await getCompanyList()
  if (res.code === 200) {
    companyList.value = res.data || []
  }
}

async function loadDictData() {
  const [unitRes, bizRes] = await Promise.all([
    getDictUnitType(),
    getDictBusinessType()
  ])
  if (unitRes.code === 200) {
    store.dictUnitTypes = unitRes.data || []
  }
  if (bizRes.code === 200) {
    store.dictBusinessTypes = bizRes.data || []
  }
}

async function loadVersionCheck() {
  const res = await checkAppVersion(APP_VERSION)
  if (res.code === 200 && res.data && res.data.needUpdate) {
    updateUrl.value = res.data.downloadUrl || ''
    forceUpdate.value = !!res.data.forceUpdate
    showUpdate.value = true
  }
}

function handleRefresh() {
  loadCompanyList()
}

function goBack() {
  uni.navigateBack({
    fail() {
      // H5下navigateBack失败时（如页面栈只有一层），回到portal
      uni.reLaunch({ url: '/pages/portal/index' })
    }
  })
}

function goSearch() {
  uni.navigateTo({ url: '/pages/search/index' })
}

function goSettings() {
  uni.navigateTo({ url: '/pages/settings/index' })
}

function goRegion(item) {
  uni.navigateTo({ url: '/pages/region/index?deptId=' + item.deptId })
}

onLoad(() => {
  loadCompanyList()
  loadDictData()
  loadVersionCheck()
})

onPullDownRefresh(() => {
  loadCompanyList().finally(() => {
    uni.stopPullDownRefresh()
  })
})
</script>

<style scoped>
.home-page {
  position: relative;
  min-height: 100vh;
  background-color: transparent;
}

.content {
  position: relative;
  z-index: 1;
}

.nav-bar {
  width: 100%;
}

.nav-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
}

.nav-icon {
  width: 44rpx;
  height: 44rpx;
}

.nav-right {
  display: flex;
  align-items: center;
}

.nav-icon-ml {
  margin-left: 24rpx;
}

.nav-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #fff;
}

.search-bar {
  display: flex;
  align-items: center;
  margin: 16rpx 24rpx;
  padding: 0 24rpx;
  height: 72rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 36rpx;
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 16rpx;
}

.search-placeholder {
  font-size: 26rpx;
  color: #999;
}

.company-list {
  padding: 16rpx 0;
  height: calc(100vh - 400rpx);
}

.company-card {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx;
  margin: 0 24rpx 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  border: 1rpx solid #e8e8e8;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

.company-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}
</style>