| | |
| | | <up-tabs :list="tabList" @click="handleClick"></up-tabs> |
| | | </div> |
| | | |
| | | <div class="eventBox"> |
| | | <div class="eventItem" v-for="(item,index) in dataList" :key="index"> |
| | | <img :src="item.photo_url" alt="" @click="detailHandle(item)" /> |
| | | <div class="informationDisplay"> |
| | | <div class="itemTitle">{{item.event_name}}</div> |
| | | <div class="itemContent">{{formatDate(item.create_time) }}</div> |
| | | <scroll-view class="eventBox" scroll-y :lower-threshold="80" @scrolltolower="loadMore"> |
| | | <div class="eventList"> |
| | | <div class="eventItem" v-for="(item,index) in dataList" :key="index"> |
| | | <img :src="item.photo_url" alt="" @click="detailHandle(item)" /> |
| | | <div class="informationDisplay"> |
| | | <!-- <div class="itemTitle">{{item.event_name}}</div>--> |
| | | <div class="itemContent">{{formatDate(item.create_time) }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 加载提示 --> |
| | | <div class="loadingMore"> |
| | | <text v-if="loading">加载中...</text> |
| | | |
| | | </div> |
| | | </scroll-view> |
| | | </div> |
| | | |
| | | </div> |
| | |
| | | const userInfo = userStore.userInfo |
| | | const dataList = ref([]) |
| | | const currentTab=ref('all') |
| | | const loading = ref(false) |
| | | const hasMore = ref(true) |
| | | const tabList = ref([ |
| | | { |
| | | name: '全部工单', |
| | |
| | | badge: { |
| | | value: 1 |
| | | } |
| | | }, |
| | | } |
| | | |
| | | |
| | | ]) |
| | |
| | | const listParams = ref({ |
| | | status: null, |
| | | current: 1, |
| | | size: 9999, |
| | | size: 12, |
| | | source: 1, |
| | | department:'', |
| | | keyword:'' |
| | | |
| | | }) |
| | | const getDataList = () => { |
| | | if (loading.value || !hasMore.value) return |
| | | |
| | | loading.value = true |
| | | const params = { |
| | | current: 1, |
| | | size: 9999, |
| | | current: listParams.value.current, |
| | | size: listParams.value.size, |
| | | source: 1, |
| | | status:listParams.value.status, |
| | | event_name:listParams.value.keyword, |
| | |
| | | } |
| | | getList(params).then(res => { |
| | | |
| | | const response = res.data.data.records |
| | | dataList.value = response |
| | | const response = res.data.data |
| | | const records = response.records || [] |
| | | |
| | | // 根据当前页码决定是替换还是追加数据 |
| | | if (listParams.value.current === 1) { |
| | | dataList.value = records |
| | | } else { |
| | | dataList.value = [...dataList.value, ...records] |
| | | } |
| | | |
| | | // 判断是否还有更多数据 |
| | | if (records.length < listParams.value.size || response.current >= response.pages) { |
| | | hasMore.value = false |
| | | } else { |
| | | hasMore.value = true |
| | | } |
| | | }).finally(() => { |
| | | loading.value = false |
| | | }) |
| | | } |
| | | |
| | | |
| | | |
| | | // const getstatusCountData=()=>{ |
| | | // getstatusCount().then(res=>{ |
| | | // const response = res.data.data |
| | |
| | | const handleClick = (item) => { |
| | | currentTab.value = item.key |
| | | listParams.value.status = item.status |
| | | listParams.value.current = 1 |
| | | hasMore.value = true |
| | | dataList.value = [] |
| | | getDataList() |
| | | } |
| | | const loadMore = () => { |
| | | if (loading.value || !hasMore.value) return |
| | | listParams.value.current++ |
| | | getDataList() |
| | | } |
| | | |
| | | const detailHandle = (val) => { |
| | | uni.navigateTo({ |
| | | url: `/subPackages/workDetail/index?eventNum=${val.event_num}`, |
| | |
| | | } |
| | | const topMargin = getStatusBarHeight() |
| | | onShow(() => { |
| | | listParams.value.current = 1 |
| | | hasMore.value = true |
| | | dataList.value = [] |
| | | getDataList() |
| | | |
| | | }) |
| | | </script> |
| | | |
| | |
| | | flex-direction: column; |
| | | height: 100%; |
| | | box-sizing: border-box; |
| | | width: 100%; |
| | | overflow-x: hidden; |
| | | .searchTop { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | :deep(){ |
| | | |
| | | .u-tabs__wrapper__nav__line{ |
| | | width: 80rpx !important; |
| | | // width: 80rpx !important; |
| | | background: #1D6FE9 !important; |
| | | } |
| | | .u-badge { |
| | | background-color: #1d6fe9 !important; |
| | | margin-top: -17px !important; |
| | | margin-left: -5px !important; |
| | | } |
| | | } |
| | | |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | flex: 1; |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | } |
| | | .eventBox { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 20rpx; |
| | | padding: 20rpx 0; |
| | | overflow-y: auto; |
| | | overflow-x: hidden; |
| | | height: 0; |
| | | flex-grow: 1; |
| | | align-content: flex-start; |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .eventList { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 20rpx; |
| | | width: 100%; |
| | | box-sizing: border-box; |
| | | justify-content: space-between; |
| | | |
| | | .eventItem { |
| | | width: calc(50% - 10rpx); |
| | | background-color: #fff; |
| | | border-radius: 12rpx; |
| | | overflow: hidden; |
| | | position: relative; |
| | | box-sizing: border-box; |
| | | max-width: 100%; |
| | | |
| | | img { |
| | | width: 341rpx; |
| | | height: 196rpx; |
| | | width: 100%; |
| | | height: 208rpx; |
| | | border-radius: 12rpx; |
| | | overflow: hidden; |
| | | } |
| | | .informationDisplay{ |
| | | width: 100%; |
| | | position: absolute; |
| | | bottom: 3px; |
| | | background: rgba(11,11,11,0.35); |
| | | border-radius: 0rpx 0rpx 12rpx 12rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 10rpx 20rpx 10rpx 12rpx; |
| | | justify-content: flex-end; |
| | | padding: 10rpx 0rpx 10rpx 0rpx; |
| | | .itemTitle { |
| | | width: 144rpx; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 24rpx; |
| | | color: rgba(0,0,0,0.5); |
| | | color: #FFFFFF; |
| | | padding-right: 14rpx; |
| | | |
| | | } |
| | | } |
| | | |
| | | } |
| | | } |
| | | |
| | | .loadingMore { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | height: 80rpx; |
| | | font-size: 28rpx; |
| | | color: #999; |
| | | width: 100%; |
| | | } |
| | | } |
| | | </style> |