aiot-app/pages/hr/apply/list.vue

<template>
  <view class="page-no-tab">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="我的申请"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="goBack"
    ></uni-nav-bar>

    <view class="search-bar">
      <input
        ref="keywordInput"
        class="search-input"
        v-model="keyword"
        confirm-type="search"
        placeholder="搜索申请编号 / 标题"
        @confirm="onKeywordConfirm"
      />
      <text class="search-btn press" @click="onKeywordConfirm">搜索</text>
    </view>

    <view class="tabs">
      <view
        v-for="(t, index) in tabs"
        :key="t.value"
        class="tab press"
        :class="{ active: tabIndex === index }"
        @click="onTabChange(index)"
      >{{ t.label }}</view>
    </view>
    <view class="filter">
      <!-- 类型筛选：胶囊 + u-icon 箭头（原来的「⌄」字符基线不齐，看着是错位的） -->
      <view
        class="type-filter press"
        :class="{ 'is-active': !!typeFilter }"
        @click="chooseType"
      >
        <text class="type-filter-label">{{ typeFilterLabel }}</text>
        <u-icon name="arrow-down" :size="11" :color="typeFilter ? '#157a2c' : '#6f7782'" />
      </view>
      <text class="filter-tip">共 {{ total }} 条</text>
    </view>

    <view v-if="loading" class="empty"><view>◌</view><text>加载中…</text></view>
    <view v-else-if="list.length" class="list">
      <!-- 卡片模板抽到 components/hr/ApplyCard.vue（与「申请记录」共用） -->
      <apply-card
        v-for="item in list"
        :key="item.id"
        :row="item"
        :admin="adminMode"
        @detail="openItem(item)"
        @flow="openFlow(item)"
      />
      <view v-if="hasMore" class="load-more press" @click="loadList(false)">
        {{ loadingMore ? "加载中…" : "加载更多" }}
      </view>
      <view v-else class="load-more muted">没有更多了</view>
    </view>
    <view v-else class="empty"><view>□</view><text>{{ emptyText }}</text></view>

    <!-- 类型筛选：与其它选择器同款的底部滚轮 -->
    <u-picker
      :show="typePickerShow"
      :columns="[typePickerColumns]"
      title="申请类型"
      :item-height="56"
      :visible-item-count="5"
      confirm-color="#157a2c"
      cancel-color="#7d8794"
      @confirm="onTypeConfirm"
      @cancel="typePickerShow = false"
      @close="typePickerShow = false"
    ></u-picker>
  </view>
</template>

<script>
import { applicationListMixin } from "@/utils/hr/application-list";
import { back } from "@/utils/hr/router";
import ApplyCard from "@/components/hr/ApplyCard.vue";

export default {
  components: { ApplyCard },
  mixins: [applicationListMixin],
  data() {
    return {
      adminMode: false,
    };
  },
  onLoad() {
    this.loadList(true);
  },
  methods: {
    goBack() {
      back("/pages/index/index");
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/pages/hr/common-style.scss";

.search-bar {
  display: flex;
  align-items: center;
  padding: 18rpx 24rpx;
  background: #fff;
}
.search-input {
  flex: 1;
  height: 68rpx;
  padding: 0 24rpx;
  border-radius: 34rpx;
  background: #f4f6f8;
  font-size: 26rpx;
  color: #1f2329;
}
.search-btn {
  margin-left: 18rpx;
  font-size: 27rpx;
  color: #157a2c;
}
.tabs {
  height: 92rpx;
  display: flex;
  background: #fff;
  border-bottom: 1rpx solid #edf0f2;
}
.tab {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f7782;
  font-size: 27rpx;
}
.tab.active {
  color: #157a2c;
  font-weight: 500;
}
.tab.active:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 42rpx;
  height: 5rpx;
  border-radius: 3rpx;
  background: #157a2c;
}
.filter {
  height: 92rpx;
  padding: 0 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  font-size: 24rpx;
}
/* 类型筛选：做成胶囊按钮，箭头用 u-icon（比「⌄」字符对齐稳） */
.type-filter {
  display: flex;
  align-items: center;
  height: 58rpx;
  padding: 0 20rpx;
  border: 1rpx solid #e2e7ec;
  border-radius: 29rpx;
  background: #fff;
}
.type-filter-label {
  margin-right: 10rpx;
  color: #4b5563;
  font-size: 24rpx;
}
/* 已选类型时高亮，一眼看出当前有筛选 */
.type-filter.is-active {
  border-color: #a9d5b6;
  background: #f2faf0;
}
.type-filter.is-active .type-filter-label {
  color: #157a2c;
}
.filter-tip {
  color: #a0a7b0;
}
.list {
  padding: 24rpx;
}
/* 卡片样式已移入 components/hr/ApplyCard.vue（「我的申请」与「申请记录」共用一份）；
   这里只保留页面级的搜索 / 筛选 / 列表容器样式 */
.load-more {
  padding: 24rpx 0 40rpx;
  text-align: center;
  font-size: 24rpx;
  color: #157a2c;
}
.load-more.muted {
  color: #a0a7b0;
}
.empty {
  padding-top: 230rpx;
  text-align: center;
  color: #a0a7b0;
}
.empty view {
  font-size: 80rpx;
  color: #cfd4da;
}
.empty text {
  display: block;
  margin-top: 20rpx;
}
</style>