cnbg_mp/src/pages-sub-packages/get-task/index.vue

<template>
  <view class="get-list">
    <view class="header">
      <view class="search">
        <uv-input
          placeholder="请输入内容"
          clearable
          border="surround"
          prefixIcon="search"
          prefixIconStyle="font-size: 32px;color: #909399"
          shape="circle"
          @input="searchValChange"
          :customStyle="customStyle"
          v-model="params.packageName"
        />
      </view>
      <view class="tabs">
        <view class="tab-l">
          <view class="tabs-item" @click="tabClick(1)">
            <text :class="params.selType === 1 ? 'active-tab' : ''">可领取({{ allTotal }})</text>
          </view>
          <view class="tabs-item" @click="tabClick(2)">
            <text :class="params.selType === 2 ? 'active-tab' : ''">已领取</text>
          </view>
        </view>
        <view class="tab-r">
          <view class="date" v-if="!dateStr.year || !dateStr.month" @click="showDatePicker">
            <text>日期</text>
            <uv-icon name="arrow-down-fill" color="#333" />
          </view>
          <view class="date" v-else>
            <text @click="showDatePicker">{{ dateStr.year + '年' + dateStr.month + '月' }}</text>
            <uv-icon name="close-circle" color="#333" @click="clearDate" />
          </view>
        </view>
      </view>
    </view>
    <view class="content" v-if="params.total != 0">
      <view v-show="params.selType === 1">
        <cardItem
          v-for="item in dataList"
          :key="item.id"
          :item="item"
          type="1"
          @getTaskClick="getTaskClick(item)"
        />
      </view>
      <view v-show="params.selType === 2">
        <cardItem v-for="item in dataList" :key="item.id" :item="item" type="2" />
      </view>
    </view>
    <noData v-else />
    <!-- 日期选择 -->
    <uv-datetime-picker
      ref="datetimePicker"
      v-model="dateValue"
      mode="year-month"
      @confirm="dateConfirm"
    />
  </view>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { ref, reactive } from 'vue'
import { onReachBottom, onShow } from '@dcloudio/uni-app'
import { getPackageList, receivePackage } from '@/service/modules/getTask'
import cardItem from './component/cardItem.vue'
import noData from '@/components/noData/index.vue'
import { debounce } from '@/utils/index'

class Params {
  total = -1
  current = 1
  size = 20
  selType = 1
  selDate = ''
  packageName = ''
}
const params = ref(new Params())

const resetParams = () => {
  params.value = new Params()
}
const dataList = ref<any[]>([])

const allTotal = ref(0)

async function getList() {
  uni.showLoading({
    title: '加载中...'
  })
  let res = await getPackageList(params.value)
  if (res.data) {
    params.value.total = res.data.total
    dataList.value = dataList.value.concat(res.data.records)
    // 当获取的是可领取的包
    if (params.value.selType === 1) {
      allTotal.value = res.data.total
    }
  }
  uni.hideLoading()
}

onShow(() => {
  dataList.value = []
  getList()
})

const customStyle = {
  background: '#f6f6f6',
  border: 'none',
  height: '60rpx'
}

// tab切换
const tabClick = (act: number) => {
  if (params.value.selType === act) return
  resetParams()
  dataList.value = []
  params.value.selType = act
  getList()
}

// 日期选择
const datetimePicker = ref()
const dateValue = ref(Number(new Date()))
const showDatePicker = () => datetimePicker.value.open()

const dateStr = reactive({
  year: '',
  month: ''
})

const clearDate = () => {
  dateStr.year = ''
  dateStr.month = ''
  dateValue.value = Number(new Date())
  params.value.selDate = ''
  params.value.current = 1
  dataList.value = []
  getList()
}
const dateConfirm = (e: any) => {
  const date = dayjs(e.value).format('YYYY-MM')
  params.value.selDate = date
  let arr = date.split('-')
  dateStr.year = arr[0]
  dateStr.month = arr[1]
  params.value.current = 1
  dataList.value = []
  getList()
}

const searchValChange = debounce(() => {
  params.value.current = 1
  dataList.value = []
  getList()
})

// 底部
onReachBottom(() => {
  if (dataList.value.length === params.value.total) return
  params.value.current++
  getList()
})

// 领取执行包
async function getTaskClick(item: any) {
  const res = await receivePackage(item.id)
  if (res.code === 0) {
    uni.showToast({
      title: '领取成功',
      icon: 'none',
      duration: 1000
    })
    setTimeout(() => {
      params.value.current = 1
      dataList.value = []
      getList()
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>
.get-list {
  min-height: 96vh;
  background-color: #fafafa;
  padding: 0 30rpx;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #fff;

    .search {
      padding: 0 30rpx;
    }

    .tabs {
      margin-top: 8rpx;
      height: 80rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tab-l {
        flex: 1;
        display: flex;
        justify-content: space-between;

        .tabs-item {
          flex: 1;
          text-align: center;
          color: #666;
          font-size: 28rpx;
          font-weight: 400;
          text {
            display: inline-block;
            &.active-tab {
              color: #333;
              font-weight: 600;
              position: relative;
              &::after {
                content: '';
                display: block;
                position: absolute;
                width: 50%;
                height: 6rpx;
                background-color: #6eb657;
                left: 50%;
                top: 50rpx;
                transform: translateX(-50%);
              }
            }
          }
        }
      }
      .tab-r {
        width: 240rpx;
        height: 40rpx;
        border-left: 2rpx solid #ebebeb;
        display: flex;
        align-items: center;
        justify-content: center;

        .date {
          display: flex;
          justify-content: center;
          align-items: center;
          text {
            margin-right: 10rpx;
            font-size: 28rpx;
            font-weight: 400;
          }
        }
      }
    }
  }

  .content {
    margin-top: 180rpx;
    padding-top: 24rpx;
  }
}
</style>