sound-chain/pages/task/record.vue

<!-- 历史记录 -->
<template>
  <s-layout
    title="历史记录"
    navbar="inner"
	:bgStyle="state.page"
	:navbarStyle="state.navigationBar"
	opacityBgUi=""
	showBackButton
  >
	  <su-tabs
	    :list="tabMaps"
	    :scrollable="true"
	    @change="onTabsChange"
	    :current="state.currentTab"
	    :itemStyle="{
	  	  height:'56rpx',
	  	  width: '140rpx',
	  	  borderRadius: '20rpx',
	  	  lineHeight: '56rpx'
	    }"
	    :inactiveStyle="{
	  	  background: '#E6E6E6',
	  	  color: '#222222',
	  	  opacity: 0.5,
	    }"
	    :activeStyle="{
	  	  background: '#35E89A',
	  	  color: '#257652'
	    }"
	  />
	  <view class="task_cont">
		<scroll-view class="task_scroll" :scroll-y="true" @scrolltolower="scrolltolower">
		  <s-empty v-if="state.pagination.total === 0&&state.loadStatus!=='loading'" icon="/static/order-empty.png" text="暂无记录" />
		  <view v-else class="task_list">
			  <view class="task_item" v-for="item in state.pagination.list" @tap="onTaskDetail(item.id)" :key="item.id">
				  <view class="left">
					  <view class="title">
						  <view v-if="item.status!==10" class="status" :class="{'status0':item.status===0,'status1':item.status===1||item.status===2}">{{item.status===2?'已执行':(item.status===1?'执行中':(item.status===0?'待执行':'已失效'))}}</view>
						  <view class="name">{{item.name}} </view>
					  </view>
					  <view class="verbal">{{item.type.name}}</view>
					  <view class="time">{{formatDate(item.planTime,'YYYY-MM-DD HH:mm')}}</view>
				  </view>
				  <view class="right">详情 ></view>
			  </view>
		  </view>
		  <!-- 加载更多 -->
		  <uni-load-more
			v-if="state.pagination.total > 0"
			:status="state.loadStatus"
			:content-text="{
			  contentdown: '上拉加载更多',
			}"
			@tap="loadMore"
		  />
		</scroll-view>
	  </view>
  </s-layout>
</template>

<script setup>
  import _ from 'lodash-es'
  import $helper from '@/common/helper'
  import { formatDate } from '@/common/helper/utils'
  import { computed, reactive } from 'vue'
  import { onLoad, onPageScroll, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import taskApi from '@/common/api/member/task'
  import { resetPagination } from '@/common/helper/utils'
  import sheep from '@/common'
  const state = reactive({
	navigationBar: {},
    page: {
		backgroundColor: '#FAFAFA',
		backgroundImage: '/static/homeTopBg.png'
	},
	currentTab: 0, // 选中的 tabMaps 下标
	pagination: {
	  list: [],
	  total: 0,
	  page: 1,
	  pageCount: 10,
	},
  })
  const tabMaps = [
    {
      name: '全部',
    },
    {
      name: '已完成',
      value: 10,
    },
  ]
  
  onLoad(async (options) => {
    if (options.type) {
      state.currentTab = options.type
    }
    await getTaskList()
  })
  // 切换选项卡
  function onTabsChange(e) {
    if (state.currentTab === e.index) {
      return
    }
    // 重新加载
	resetPagination(state.pagination);
	state.currentTab = e.index;
	getTaskList()
  }
  // 订单详情
  function onTaskDetail(id) {
    sheep.$router.go('/pages/task/details', {
      id,
    })
  }
  // 获取订单列表
  async function getTaskList() {
    state.loadStatus = 'loading';
    let { code, data } = await taskApi.taskList({
      page: state.pagination.page,
      pageCount: state.pagination.pageCount,
      status: tabMaps[state.currentTab].value,
    })
    if (code !== 1) {
      return
    }
    state.pagination.list = _.concat(state.pagination.list, data.records);
    state.pagination.total = data.total;
    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
  }
  // 加载更多
  function loadMore() {
    if (state.loadStatus === 'noMore') {
      return
    }
    state.pagination.page++
    getTaskList()
  }
  
  // 上拉加载更多
  onReachBottom(() => {
    loadMore()
  })
  function scrolltolower(){
	  loadMore()
  }
  // 下拉刷新
  onPullDownRefresh(() => {
    resetPagination(state.pagination)
    getTaskList()
    setTimeout(function () {
      uni.stopPullDownRefresh()
    }, 800);
  })

  onPageScroll(() => {})
</script>

<style lang="scss" scoped>
	.task_cont{
		flex: 1;
		overflow: hidden;
		.task_scroll{
			height: 100%;
		}
	}
	.task_list{
		padding-top: 10rpx;
		.task_item{
			padding: 30rpx 30rpx 20rpx;
			width: 690rpx;
			height: 192rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			box-sizing: border-box;
			margin: 0 auto 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				.title{
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					.status{
						height: 40rpx;
						line-height: 40rpx;
						padding: 0 10rpx;
						border-radius: 10rpx;
						font-weight: 400;
						font-size: 20rpx;
						margin-right: 10rpx;
						white-space: nowrap;
						background: #E6E6E6;
						color: #999999;
					}
					.status0{
						background: #FFEFBA;
						color: #E28F48;
					}
					.status1{
						background: #A3FFD7;
						color: #26B978;
					}
					.status2{
						background: #E6E6E6;
						color: #999999;
					}
					.name{
						font-weight: bold;
						font-size: 32rpx;
						color: #222222;
						line-height: 48rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						width: 420rpx;
					}
				}
				.verbal{
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					margin-bottom: 10rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					width: 526rpx;
				}
				.time{
					font-weight: 400;
					font-size: 24rpx;
					color: #CCCCCC;
					line-height: 34rpx;
				}
			}
			.right{
				font-weight: 400;
				font-size: 28rpx;
				color: #35E89A;
				line-height: 80rpx;
				white-space: nowrap;
			}
		}
		
	}
</style>