fundplatform/fund-mobile/src/views/requirement/List.vue

<template>
  <div class="page requirement-list">
    <van-nav-bar title="需求工单" left-arrow @click-left="$router.back()" />
    
    <!-- 搜索栏 -->
    <div class="search-bar">
      <van-search v-model="searchText" placeholder="搜索需求标题" @search="handleSearch" />
    </div>
    
    <!-- 需求列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="requirement-card" v-for="item in list" :key="item.requirementId">
          <div class="requirement-header">
            <span class="requirement-title">{{ item.title }}</span>
            <van-tag :type="getStatusType(item.status)">{{ getStatusText(item.status) }}</van-tag>
          </div>
          <div class="requirement-info">
            <div class="info-item">
              <van-icon name="user-o" />
              <span>{{ item.customerName || '-' }}</span>
            </div>
            <div class="info-item">
              <van-icon name="todo-list-o" />
              <span>{{ item.projectName || '-' }}</span>
            </div>
          </div>
          <div class="requirement-detail">
            <div class="detail-item">
              <span class="label">优先级</span>
              <van-tag :type="getPriorityType(item.priority)">{{ getPriorityText(item.priority) }}</van-tag>
            </div>
            <div class="detail-item">
              <span class="label">创建时间</span>
              <span class="value">{{ item.createTime }}</span>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    
    <!-- 新增按钮 -->
    <div class="add-btn" @click="$router.push('/requirement/add')">
      <van-icon name="plus" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getRequirementList } from '@/api'

const searchText = ref('')
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const list = ref<any[]>([])
const pageNum = ref(1)
const pageSize = 10

const getStatusType = (status: string): 'primary' | 'success' | 'warning' | 'danger' | 'default' => {
  const map: Record<string, 'primary' | 'success' | 'warning' | 'danger' | 'default'> = {
    'pending': 'warning',
    'processing': 'primary',
    'completed': 'success',
    'cancelled': 'default'
  }
  return map[status] || 'default'
}

const getStatusText = (status: string) => {
  const map: Record<string, string> = {
    'pending': '待处理',
    'processing': '处理中',
    'completed': '已完成',
    'cancelled': '已取消'
  }
  return map[status] || status
}

const getPriorityType = (priority: string): 'primary' | 'success' | 'warning' | 'danger' | 'default' => {
  const map: Record<string, 'primary' | 'success' | 'warning' | 'danger' | 'default'> = {
    'high': 'danger',
    'medium': 'warning',
    'low': 'success'
  }
  return map[priority] || 'default'
}

const getPriorityText = (priority: string) => {
  const map: Record<string, string> = {
    'high': '高',
    'medium': '中',
    'low': '低'
  }
  return map[priority] || priority
}

const loadData = async () => {
  try {
    const res: any = await getRequirementList({
      pageNum: pageNum.value,
      pageSize,
      keyword: searchText.value || undefined
    })
    const records = res.data?.records || []
    if (pageNum.value === 1) {
      list.value = records
    } else {
      list.value.push(...records)
    }
    finished.value = records.length < pageSize
  } catch (e) {
    console.error(e)
    finished.value = true
  } finally {
    loading.value = false
    refreshing.value = false
  }
}

const onLoad = () => {
  pageNum.value++
  loadData()
}

const onRefresh = () => {
  pageNum.value = 1
  finished.value = false
  loadData()
}

const handleSearch = () => {
  pageNum.value = 1
  finished.value = false
  list.value = []
  loadData()
}
</script>

<style scoped>
.requirement-list {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80px;
}

.search-bar {
  background: #fff;
  padding: 8px 0;
}

.requirement-card {
  background: #fff;
  margin: 12px;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.requirement-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.requirement-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  flex: 1;
  margin-right: 8px;
  line-height: 1.4;
}

.requirement-info {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #666;
}

.requirement-detail {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-item .label {
  font-size: 12px;
  color: #999;
}

.detail-item .value {
  font-size: 12px;
  color: #666;
}

.add-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5856D6, #AF52DE);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(88, 86, 214, 0.4);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.add-btn:active {
  transform: scale(0.95);
}
</style>