实习笔记①

1
const loadData = async () => {
2
  if (finished.value) return
3

4
  try {
5
    const { rows = [], total = 0 } = await appointmentList(params)
6

7
    dataList.value.push(...rows)
8
    params.pageNum += 1
9
    finished.value = dataList.value.length >= total || rows.length < params.pageSize
10
  } catch (error) {
11
    console.error('加载换届任免信息失败', error)
12
  } finally {
13
    loading.value = false
14
    refreshing.value = false
15
  }
16
}

1
<div class="page">
2
  <div class="content">
3
    <van-pull-refresh v-model="refreshing" class="refresh-wrap" @refresh="onRefresh">
4
      <van-list v-model:loading="loading" :finished="finished" finished-text="已经到底了" :immediate-check="true" @load="loadData">
5
        <div class="list-wrap">
6
          <button v-for="item in dataList" :key="item.id" type="button" class="info-card" @click="goToDetail(item)">
7
            <div class="icon-wrapper" aria-hidden="true">
8
              <van-icon name="description" size="24" color="#1683ff" />
9
            </div>
10
            <div class="card-content">
11
              <div class="title">{{ item.title || '未命名换届任免信息' }}</div>
12
              <div class="subtitle" v-if="item.congressInfoId">第{{ item.congressInfoId }}次代表大会</div>
13
              <div class="session-tag">{{ formatSession(item.congressInfoId) }}</div>
14
              <div class="publish-date">发布日期：{{ formatDate(item.createTime) }}</div>
15
            </div>
16
          </button>
17
          <van-empty v-if="finished && dataList.length === 0" image="search" description="暂无任免信息" />
18
        </div>
19
      </van-list>
20
    </van-pull-refresh>
21
  </div>
22
  <div class="footer-space"></div>
23
</div>

1
.page {
2
  width: 100%;
3
  min-height: 100%;
4
  display: flex;
5
  flex-direction: column;
6
  overflow: hidden;
7
  background: #f4f7fd;
8
}
9

10
.content {
11
  flex: 1;
12
  overflow-y: auto;
13
  -webkit-overflow-scrolling: touch;
14
}
15

16
.footer-space {
17
  height: 66px;
18
  background: #fff;
19
}
20

21
.info-card {
22
  width: 100%;
23
  min-height: 124px;
24
  display: flex;
25
  align-items: flex-start;
26
  gap: 14px;
27
  margin: 0 0 14px;
28
  padding: 20px;
29
  border: 0;
30
  border-radius: 18px;
31
  background: #fff;
32
  box-shadow: 0 5px 14px rgba(50, 104, 170, 0.04);
33
  cursor: pointer;
34
  transition: opacity 0.15s ease, transform 0.15s ease;
35

36
  &:active {
37
    opacity: 0.88;
38
    transform: scale(0.99);
39
  }
40
}

1
.position-item {
2
  display: flex;
3
  border-radius: 12px;
4
  align-items: center;
5
  justify-content: space-between;
6
  padding: 18px 20px;
7
  margin-bottom: 12px;
8
  background: #fff;
9
  box-shadow: 0 5px 14px rgba(50, 104, 170, 0.04);
10
  transition: opacity 0.15s ease, transform 0.15s ease;
11

12
  &:last-child {
13
    margin-bottom: 0;
14
  }
15

16
  &:active {
17
    opacity: 0.88;
18
    transform: scale(0.99);
19
  }
20
}

1
const loadDetail = async () => {
2
  showLoadingToast({ message: '加载中...', forbidClick: true, duration: 0 })
3

4
  try {
5
    const res = await appointmentDetail(route.query.appointmentId)
6
    const detailData = res?.data || res
7

8
    if (res?.code === 200 && detailData) {
9
      Object.assign(detail, detailData)
10
      detail.content = safeHtml(detail.content)
11
    } else {
12
      showToast(res?.msg || '暂无数据')
13
    }
14
  } catch (error) {
15
    console.error('获取任免详情失败:', error)
16
    showToast('获取数据失败')
17
  } finally {
18
    closeToast()
19
  }
20
}

1
.detail-card {
2
  background: #fff;
3
  border-radius: 18px;
4
  padding: 20px;
5
  border: 1px solid rgba(0, 0, 0, 0.04);
6
}
7

8
.detail-title {
9
  font-size: 18px;
10
  font-weight: 700;
11
  color: #333;
12
  line-height: 1.5;
13
  margin-bottom: 12px;
14
  text-align: center;
15
}
16

17
.detail-date {
18
  font-size: 13px;
19
  color: #999;
20
  margin-bottom: 20px;
21
  padding-bottom: 12px;
22
  border-bottom: 1px solid #f4f5fa;
23
  text-align: center;
24
}
25

26
.detail-content {
27
  color: #333;
28
  font-size: 15px;
29
  line-height: 2;
30
}
31

32
.rich-text {
33
  :deep(p) {
34
    margin: 0 0 16px;
35
    line-height: 2;
36
  }
37

38
  :deep(ul),
39
  :deep(ol) {
40
    padding-left: 22px;
41
    margin: 16px 0;
42
  }
43

44
  :deep(img) {
45
    max-width: 100%;
46
    height: auto;
47
  }
48
}