123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- <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>
|