personnel_management_mobile/pages/home/businessList.vue

<template>
  <!-- backBtn+logoutBtn 开启顶部两个按钮 -->
  <Container backBtn logoutBtn @handleBack="goBack">
    <template #main>
      <view class="wrap">
        <view class="list-card">
          <view class="item" v-for="(item, idx) in businessList" :key="idx">
            <view class="left">
              <text class="dot">◆</text>
              <text class="title-text">{{ item.itemName }}</text>
            </view>
            <view class="btn-box">
              <view class="btn-guide" @click="openGuide(item)">办事指南</view>
              <view class="btn-take" @click="toTakeNum(item)">取号</view>
            </view>
          </view>
          <view class="empty" v-if="isEmpty === false"> 暂无事项 </view>
        </view>
      </view>
    </template>
  </Container>
</template>

<script>
import Container from '@/components/container/container.vue'
import { getBusinessList, getHistoryList, takeNumber } from '@/api/ticket.js'

export default {
  components: {
    Container
  },
  data() {
    return {
      titleName: '',
      source: '',
      subjectId: '',
      deptId: '',
      businessList: [],
      isEmpty: null
    }
  },
  computed: {
    idcard() {
      return uni.getStorageSync('idcard') || ''
    }
  },
  onLoad(options) {
    this.source = options.source || ''
    this.subjectId = options.subjectId || ''
    this.deptId = options.deptId || ''
    this.titleName = options.titleName || options.subjectName || options.deptName || ''
    this.fetchList()
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 根据 source 调用不同接口
    async fetchList() {
      let res = null
      try {
        switch (this.source) {
          case 'history':
            // 历史取号
            if (!this.idcard) {
              console.warn('历史取号缺少身份证号')
              return
            }
            res = await getHistoryList({
              applicantIdCard: this.idcard
            })
            break
          case 'business':
            // 业务取号（全部事项）
            res = await getBusinessList({
              status: 1
            })
            break
          case 'subject':
          default:
            // 主题取号 / 部门取号（兼容无 source 的旧跳转）
            const params = {
              status: 1
            }
            if (this.subjectId) {
              params.subjectId = this.subjectId
            } else if (this.deptId) {
              params.deptId = this.deptId
            } else {
              // 兼容默认：无筛选查全部
            }
            res = await getBusinessList(params)
            break
        }
        if (res && res.success && res.data) {
          this.businessList = res.data.records || []
          this.isEmpty = this.businessList.length > 0 ? true : false
        }
      } catch (e) {
        console.error('获取列表失败', e)
      }
    },

    // 获取事项 ID（历史记录用 itemId，事项列表用 id）
    getItemId(item) {
      return item.itemId || item.id
    },

    // 点击取号
    async toTakeNum(row) {
      if (!this.idcard) {
        uni.showToast({
          title: '请先刷身份证',
          icon: 'none'
        })
        return
      }
      try {
        const res = await takeNumber({
          applicantIdCard: this.idcard,
          itemId: this.getItemId(row)
        })
        if (res.success) {
          uni.showToast({
            title: '取号成功',
            icon: 'none'
          })
        }
      } catch (e) {
        console.error('取号失败', e)
      }
    },

    // 办事指南
    openGuide(item) {
      const id = this.getItemId(item)
      uni.navigateTo({
        url: `/pages/home/guide?id=${id}&itemName=${item.itemName}`
      })
    }
  }
}
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 100%;
  padding: 15vh 5vw 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.list-card {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 75vh;
  background: #fff;
  border-radius: 5vh;
  padding: 3vh 5vw;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2vh 0;
  border-bottom: 0.1vh solid rgba(188, 200, 209, 1);
}

.item:first-child {
  padding-top: 0;
}

.item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.left {
  display: flex;
  align-items: flex-start;
  width: 68%;
}

.dot {
  color: #3688ff;
  font-size: 1.6vw;
  margin-right: 1.5vw;
}

.title-text {
  font-size: 1.6vw;
  color: rgba(51, 51, 51, 1);
  line-height: 1.5;
}

.btn-box {
  display: flex;
  gap: 1.5vw;
}

.btn-guide {
  background: #28c068;
  color: #fff;
  font-size: 1.6vw;
  padding: 1.2vh 3vw;
  border-radius: 99px;
}

.btn-take {
  background: #367bfa;
  color: #fff;
  font-size: 1.6vw;
  padding: 1.2vh 3vw;
  border-radius: 99px;
}

.empty {
  text-align: center;
  font-size: 1.6vw;
  color: #999;
  padding: 10vh 0;
}
</style>