sports-merchant-minapp/src/subPack/PersonnelView/index.vue

<template>
  <view>
    <wd-tabs v-model="tab" swipeable sticky @change="handleChange">
      <block v-for="(item, idx) in tabList" :key="idx">
        <wd-tab :title="item.title">
          <view class="bg-#F6F6F6 px32rpx pt-24rpx bottom-safe-area" v-if="data">
            <view class="p24rpx box-border bg-white mb24rpx rounded-32rpx" v-for="it in data" :key="it.id">
              <view class="flex items-center justify-between">
                <view class="font-semibold text-32rpx text-#222222">{{
                  it.useUserName
                }}</view>
                <commonbtn bg-color="#0074FF" v-if="it.verifyStatus == 0 && it.orPostpone != 1">未核销</commonbtn>
                <commonbtn bg-color="rgba(0,0,0,0.3)" v-if="it.verifyStatus == 1">已核销</commonbtn>
                <commonbtn bg-color="#FB5B5B" v-if="it.orPostpone == 1">延课</commonbtn>
              </view>
              <view class="flex items-center justify-between text-28rpx mt24rpx">
                <view class="text-[rgb(0,0,0,0.3)]">手机号码</view>
                <view>{{ it.useUserPhone }}</view>
              </view>
              <view class="text-[rgb(0,0,0,0.3)] mt24rpx"> 人脸照片 </view>
              <view class="mt24rpx">
                <image :src="it.useUserImage" class="w-160rpx h-160rpx rounded-32rpx" />
              </view>
              <view class="mt24rpx flex items-center justify-between" v-if="it.orPostpone == 1">
                <view class="text-28rpx text-[rgb(0,0,0,0.3)]">延课原因</view>
                <view>{{ it.postponeReason }}</view>
              </view>
            </view>
          </view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
</template>

<script setup lang="ts">
const tab = ref(0);
const tabList = ref([
  { title: "全部" },
  { title: "延课(2)" },
  { title: "已核销(12)" },
  { title: "未核销(12)" },
]);
const coursePriceRulesId = ref();
onLoad(async (query: any) => {
  coursePriceRulesId.value = query.id;
  tabList.value[1].title = `延课(${query.postponeNum})`;
  tabList.value[2].title = `已核销(${query.writtenOffNum})`;
  tabList.value[3].title = `未核销(${query.unwrittenOffNum})`;
  await getList({ coursePriceRulesId: query.id });
});
const { data, send: getList } = useRequest(
  (data) =>
    Apis.app.courseQueryUsers({
      data,
    }),
  { immediate: false },
);
function handleChange(e: { index: number }) {
  console.log(e, '菜单标签');

  const { index } = e;
  getList({
    coursePriceRulesId: coursePriceRulesId.value,
    verifyStatus: index == 2 ? 1 : index == 3 ? 0 : null,
    orPostpone: index === 3 ? 0 : (index != 1 ? null : index),
  });
}
onReachBottom(() => {
  console.log("页面触底");
});
</script>

<style scoped></style>
<route lang="json">{
  "name": "personnelView",
  "style": {
    "navigationBarTitleText": "人员查看"
  }
}</route>