pms-app/pages/deviceUser/history/index.vue

<template>
  <z-paging class="page" ref="paging" v-model="dataList" @query="queryList">
    <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
    <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
    <view>
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <uni-row class="flex-wrap" style="padding: 10px">
          <uni-col :span="8">{{ $t('statusChange.deviceName') + ': ' }}</uni-col>
          <uni-col :span="16">{{ item.deviceName }}</uni-col>
          <uni-col :span="8" style="margin-top: 8px">{{ $t('statusChange.deviceCode') + ': ' }}</uni-col>
          <uni-col :span="16" style="margin-top: 8px">{{ item.deviceCode }}</uni-col>
          <uni-col :span="8" style="margin-top: 8px">{{ $t('statusChange.beforeLeader') + ': ' }}</uni-col>
          <uni-col :span="16" style="margin-top: 8px">{{ item.oldPersonNames }}</uni-col>
          <uni-col :span="8" style="margin-top: 8px">{{ $t('statusChange.afterLeader') + ': ' }}</uni-col>
          <uni-col :span="16" style="margin-top: 8px">{{ item.newPersonNames }}</uni-col>
          <uni-col :span="8" style="margin-top: 8px">{{ $t('statusChange.reason') + ': ' }}</uni-col>
          <uni-col :span="16" style="margin-top: 8px">{{ item.reason }}</uni-col>
          <uni-col :span="8" style="margin-top: 8px">{{ $t('statusChange.createUser') + ': ' }}</uni-col>
          <uni-col :span="16" style="margin-top: 8px">{{ item.creatorName }}</uni-col>
        </uni-row>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from "@dcloudio/uni-app"
import { getDeviceUserHistoryList } from "@/api/deviceUser";

const paging = ref(null)
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([])

const deviceId = ref('')
onLoad((params) => {
  deviceId.value = params.id
})

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
  getDeviceUserHistoryList({
    pageNo,
    pageSize,
    deviceId: deviceId.value,
  }).then(res => {
    // console.log('res', res)
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    paging.value.complete(res.data.list);
  }).catch(() => {
    // 如果请求失败写paging.value.complete(false);
    // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
    // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
    paging.value.complete(false);
  })
}
</script>

<style lang="scss" scoped>
.page {
  box-sizing: border-box;
  padding: 10px !important;
}

.search-row {
  height: 35px;
  position: fixed;
  left: 15px;
  width: calc(100% - 30px) !important;
  background: #F3F5F9;
  z-index: 10;

  .mini-btn {
    height: 35px;
    line-height: 35px;
    width: calc(100% - 10px);
    margin-left: 10px;
  }
}

.item {
  width: 100%;
  background: #FFFFFF;
  border-radius: 6px;
  margin-top: 10px;
  font-size: 14px;
}

.item-module {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  padding: 10px 15px 10px 10px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(270deg, #FFFFFF 0%, #8EBEFF 100%);

  &.tobeFilled {
    background: linear-gradient(270deg, #FFFFFF 0%, #FFF0F0 100%);
  }

  .module-status {
    // min-width: 60px;
    height: 23px;
    padding: 0 6px;
    background: #FFEBEB;
    border-radius: 3px;
    border: 1px solid #FFFFFF;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    color: #E7000D;
  }
}

.item-title-width {
  min-width: 70px;
}

.item-title-bg {
  background: linear-gradient( 270deg, #FFFFFF 0%, #8EBEFF 100%);
  border-radius: 6px 6px 0 0;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.item-title {
  font-size: 16px;
  color: #333333;
  flex: 1;
}

.item-status {
  padding: 4px 14px;
  background: #EBF5FF;
  border-radius: 3px;
  border: 1px solid #FFFFFF;
  color: #004098;
  font-size: 14px;
}

.item-button {
  background: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #004098;
  color: #004098;
  margin-right: 0;
}
</style>