qa-regulatory-gwj-app/pages/mine/promise/promise.vue

<template>
  <view class="page">
    <u-tabs
        lineWidth="336upx"
        :list="tabsList"
        itemStyle="height:80upx;padding-bottom:10upx;background-color: #fff;"
        @click="tabsClick"
    ></u-tabs>
    <view class="message_list">
      <u-list @scrolltolower="scrolltolower" v-if="list.length > 0">
        <u-list-item v-for="(item, index) in list" :key="index">
          <view class="message_item arrow" @click="fnNavigator(item)">
            <view class="message_flex">
              <view>
                <view class="fontstyle">被承诺人：{{ item.coverpeople }}</view>
                <view class="fontstyle">承诺人：{{ item.NAME }}</view>
                <view class="message_time">{{ item.SIGNTIME }}</view>
              </view>
              <view class="font0" v-if="TYPE === '2'">{{ item.ISREAD == '0' ? '待阅' : '已阅' }}</view>
            </view>
          </view>
        </u-list-item>
      </u-list>
      <empty v-else></empty>
    </view>
  </view>
</template>

<script>
import {getMyPromiseList, getReceivePromiseList} from "../../../api";

export default {
  data() {
    return {
      tabsList: [
        // {name: '我的承诺', id: '1'},
        {name: '发出承诺', id: '1'},
        {name: '接收承诺', id: '2'}
      ],
      TYPE: '1',
      pageSize: 10,
      currentPage: 1,
      totalPage: 0,
      list: [],
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo
    }
  },
  onShow(event) {
    this.resetList()
  },
  methods: {
    async fnGetMyPromiseList() {
      let resData = await getMyPromiseList({
        USER_ID: this.userInfo.USER_ID,
        showCount: this.pageSize,
        currentPage: this.currentPage,
      })
      this.list = [...this.list, ...resData.varList]
    },
    async fnGetReceivePromiseList() {
      let resData = await getReceivePromiseList({
        USER_ID: this.userInfo.USER_ID,
        showCount: this.pageSize,
        currentPage: this.currentPage,
      })
      this.list = [...this.list, ...resData.varList]
    },
    resetList() {
      this.pageSize = 10
      this.currentPage = 1
      this.list = []
      this.getData();
    },
    getData() {
      if (this.TYPE === '1') this.fnGetMyPromiseList()
      if (this.TYPE === '2') this.fnGetReceivePromiseList()
    },
    scrolltolower() {
      this.currentPage++;
      if (this.totalPage >= this.currentPage) this.getData();
    },
    tabsClick(e) {
      this.TYPE = e.id
      this.resetList()
    },
    fnNavigator(item) {
      uni.$u.route({
        url: 'pages/mine/promise/detail',
        params: {
          PROMISE_ID: item.PROMISE_ID,
          PROMISEPEOPLE_ID: item.PROMISEPEOPLE_ID,
          TYPE: this.TYPE
        }
      })
    }
  }
}
</script>

<style scoped>
.page {
  background-color: #f7f9ff;
  height: 100vh;
}
</style>