<template> <view class="myShopTour-wrap"> <!-- 内容 --> <view class="myShopTour-con"> <view class="uTabs"><u-tabs-swiper ref="uTabs" :list="tabList" :active-color="$config('primaryColors')" name="dispName" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper></view> <swiper class="data-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish"> <swiper-item class="swiper-item" v-for="(tabs, index) in tabList" :key="index"> <scroll-view scroll-y class="scroll-con" @scrolltolower="onreachBottom"> <view class="record-con" :style="{'paddingTop': searchForm.beginDate ? '74upx' : ''}"> <!-- 筛选日期,近7天 --> <view v-show="searchForm.beginDate" class="alert-tips"> <text>创建时间:{{searchForm.beginDate}} 至 {{searchForm.endDate}}</text> </view> <view class="record-item" v-if="index==current" v-for="(item,sindex) in list" :key="item.id" @click="getDetails(item)"> <view class="item-head"> <text class="item-c-tit">{{item.storeName}}</text> <u-tag size="mini" mode="plain" shape="circle" class="item-c-type" :text="item.status | taskStatus" :type="item.status | statusCls" /> </view> <view class="item-main"> <text class="item-tit">创建时间:</text> <text class="item-val">{{item.startTime}}</text> </view> <view class="item-main"> <text class="item-tit">完成时间:</text> <text class="item-val">{{item.endTime ? item.endTime : '--'}}</text> </view> <view class="item-main" v-if="item.type!='POINT_INSPECTION'"> <text class="item-tit">巡店耗时:</text> <text class="item-val" v-if="item.spendTime">{{ item.spendTime | formatTime }}</text> <text class="item-val" v-else>--</text> </view> <view class="item-main"> <text class="item-tit">检查方式:</text> <text class="item-val">{{ item.typeDictValue }}</text> </view> <u-grid class="item-grid" :col="4" hover-class="none"> <u-grid-item> <text class="grid-num text-blue">{{item.totalTargetCount}}</text> <text class="grid-text">检查项</text> </u-grid-item> <u-grid-item> <text class="grid-num text-green">{{item.passTargetCount}}</text> <text class="grid-text">合格</text> </u-grid-item> <u-grid-item> <text class="grid-num text-red">{{item.notPassTargetCount}}</text> <text class="grid-text">不合格</text> </u-grid-item> <u-grid-item> <text class="grid-num text-yellow">{{item.notWorkTargetCount}}</text> <text class="grid-text">不适用</text> </u-grid-item> </u-grid> </view> </view> <u-empty style="padding-top: 10vh;height: auto;" :text="noDataText" img-width="120" v-if="list.length == 0 && status != 'loading'" mode="list"></u-empty> <view v-if="index==current" style="padding: 20upx;"> <u-loadmore bg-color="#f8f8f8" v-if="pageSize < total || status == 'loading'" :status="status" /> </view> </scroll-view> </swiper-item> </swiper> </view> <!-- 筛选弹框 --> <search-modal :visible="openScreen" :defaultParams="searchForm" @refresh="refresh" @close="openScreen=false"></search-modal> </view> </template> <script> import moment from "moment" import searchModal from './searchModal.vue' import wPicker from "@/components/w-picker/w-picker.vue" import { queryMyTask } from '@/api/task.js' export default { components: { wPicker, searchModal }, data() { return { tabList: [], // tab切换 类型 current: 0, // tabs组件的current值,表示当前活动的tab选项 swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的 pageNo: 1, // 当前页码 pageSize: 10, // 一页多少条 total: 0, // 总条数 status: 'loading', // 加载状态 noDataText: '暂无数据', // 列表数据为空时提示文字 list: [], // 数据列表 openScreen: false, // 是否打开筛选 searchForm: { // 查询条件 beginDate: '', // 创建时间默认筛选近7天 endDate: '', // 创建时间默认筛选近7天 sourceType: [], // 检查方式 storeName: '' // 门店名称 }, typeId: '', // 记录状态 // action:'swiperChange', // 操作类型,上划分页,或左右滑动 } }, filters: { // 任务类型 taskStatus(val){ let str = '' if(val == 'PENDING'){ str = '待处理' }else if(val == 'RUNNING'){ str = '进行中' }else if(val == 'FINISHED'){ str = '已完成' }else if(val == 'EXPIRED'){ str = '已过期' } return str }, // 状态颜色标记 statusCls(val){ let str = '' if(val == 'PENDING'){ str = 'error' }else if(val == 'RUNNING'){ str = 'primary' }else if(val == 'FINISHED'){ str = 'success' }else if(val == 'EXPIRED'){ str = 'warning' } return str }, // 巡店耗时 秒转时分 formatTime(s){ let time = '' if(moment.duration(s*1000).hours()){ time += moment.duration(s*1000).hours() + '时' } if(moment.duration(s*1000).minutes()){ time += moment.duration(s*1000).minutes() + '分' } if(moment.duration(s*1000).seconds()){ time += moment.duration(s*1000).seconds() + '秒' } return time } }, onLoad() { // 获取任务状态 对象深度克隆 this.tabList = this.$u.deepClone(this.$store.state.vuex_taskStatus) this.tabList.unshift({dispName: '全部', code: ''}) this.searchForm.beginDate = this.get7day(-6) this.searchForm.endDate = this.get7day(0) this.pageInit(1) }, methods: { // 获取查询参数 刷新列表 refresh(params){ this.searchForm = params this.list = [] this.total = 0 this.pageInit(1) }, // 查询列表 pageInit(pageNo){ if (pageNo) { this.pageNo = pageNo } let params = { pageNo: this.pageNo, pageSize: this.pageSize, beginDate: this.searchForm.beginDate ? this.searchForm.beginDate : '', endDate: this.searchForm.endDate ? this.searchForm.endDate : '', storeName: this.searchForm.storeName ? this.searchForm.storeName : '', typeList: this.searchForm.sourceType ? this.searchForm.sourceType : [], status: this.typeId == '' ? '' : this.typeId // 任务状态 } this.status = 'loading' queryMyTask(params).then(res => { console.log(res) if(res.status == 200){ if(this.pageNo>1){ this.list = this.list.concat(res.data.list || []) }else{ this.list = res.data.list || [] } this.total = res.data.count || 0 }else{ this.list = [] this.total = 0 this.noDataText = res.message || '暂无数据' } this.status = 'loadmore' }) }, // 查看详情 getDetails(item){ if(item.type == 'POINT_INSPECTION'){ // 点检任务 uni.navigateTo({ url: '/pages/spotCheckDetails/spotCheckDetails?taskId=' + item.id }) }else{ // 现场巡店、视频巡店 uni.navigateTo({ url: '/pages/shopTourDetails/shopTourDetails?taskId=' + item.id }) } }, // tabs通知swiper切换 tabsChange(index) { this.swiperCurrent = index }, swiperChange(e) { this.pageNo = 1 this.list = [] this.status = "loading" this.typeId = this.tabList[e.detail.current].code }, // swiper-item左右移动,通知tabs的滑块跟随移动 transition(e) { let dx = e.detail.dx this.$refs.uTabs.setDx(dx) }, // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态 // swiper滑动结束,分别设置tabs和swiper的状态 animationfinish(e) { let current = e.detail.current; if(current != this.current){ this.$refs.uTabs.setFinishCurrent(current) this.swiperCurrent = current this.current = current this.pageInit() } }, // scroll-view到底部加载更多 onreachBottom() { console.log('onreachBottom') if(this.list.length < this.total){ this.pageNo += 1 this.pageInit() }else{ uni.showToast({ title: '已经到底了', icon: 'none' }); this.status = "nomore" } }, // 打开筛选条件 onNavigationBarButtonTap(e) { this.openScreen = true }, // 获取近几天的数据 get7day(day){ let today = new Date() let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day today.setTime(targetday_milliseconds) //注意,这行是关键代码 let tYear = today.getFullYear() let tMonth = today.getMonth() let tDate = today.getDate() tMonth = this.doHandleMonth(tMonth + 1) tDate = this.doHandleMonth(tDate) return tYear + "-" + tMonth + "-" + tDate }, // 月份 doHandleMonth(month){ let m = month if(month.toString().length == 1){ m = "0" + month } return m }, } } </script> <style lang="scss"> page { background-color: #f8f8f8; height: 100vh; } .myShopTour-wrap { height: 100%; // 内容 .myShopTour-con{ .uTabs{ border-bottom: 1px solid #EEEEEE; box-shadow: 1px 1px 3px #eeeeee; } .data-list{ height: calc(100vh - 50px); .swiper-item{ height: 100%; width: 100%; overflow: hidden; .scroll-con{ height: 100%; width: 100%; overflow: auto; // 列表 .record-con{ position: relative; .alert-tips{ position: fixed; top: 0upx; left: 0; width: 100%; z-index: 3; padding: 20upx 30upx 10upx; background-color: #F8F8F8; border-bottom: 1px solid #EEEEEE; text{ display: block; font-size: 24upx; padding: 4upx 10upx; } } .record-item{ background-color: #fff; margin: 20upx 30upx 20upx; padding: 14upx 30upx 20upx; border-radius: 6upx; box-shadow: 1px 1px 3px #EEEEEE; .item-head{ display: flex; justify-content: space-between; align-items: center; padding: 10upx 0; .item-c-tit{ flex-grow: 1; padding-right: 18upx; font-weight: bold; } .item-c-type{ flex-shrink: 0; } } .item-main{ font-size: 26upx; line-height: 48upx; padding: 6upx 0; position: relative; .item-tit{ display: inline-block; position: absolute; left: 0; top: 8upx; } .item-val{ display: inline-block; padding-left: 150upx; } } .item-grid{ margin-top: 10upx; .text-blue{ color: #2979ff; } .text-green{ color: #19be6b; } .text-red{ color: #fa3534; } .text-yellow{ color: #ff9900; } .grid-num{ font-weight: bold; } .grid-text{ font-size: 26upx; padding-top: 10upx; color: #666; } } } } .loadmore{ padding:100upx 30upx; } } } } } .screenModel-wrap{ padding-bottom: 80upx; .condition-con{ padding: 20upx 30upx; .screen-module{ margin: 0 0 20upx; .screen-tit{ color: #464646; font-size: 26upx; } .screen-time-val{ font-size: 26upx; background-color: #f4f4f4; border-radius: 12upx; padding: 10upx 14upx; margin: 10upx 0; text-align: center; text{ display: inline-block; width: 85%; } .close-circle{ display: inline-block; padding-left: 3%; vertical-align: bottom; } } .screen-inp-val{ margin: 10upx 0; .screen-inp{ color: #464646; font-size: 26upx; } } } } .btns{ position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba(0,0,0,.025); .btn{ width: 40%; margin: 20upx 5%; padding: 30upx 0; } } } } </style>