<template>
|
<view class="container">
|
<u-top-tips ref="uTips"></u-top-tips>
|
<view class="tabs">
|
<u-tabs-swiper ref="uTabs" :list="tabsList" :current="current" :is-scroll="false" swiperWidth="750"
|
@change="tabsChange">
|
</u-tabs-swiper>
|
</view>
|
<view class="swiper-item">
|
<scroll-view scroll-y :style="{ height: useHeight, width: '100%' }" @scrolltolower="scrolltolower">
|
<view class="onveMain">
|
<view class="once" v-for="(item, index) in taskinfoList" :key="index">
|
<view class="onve-left">
|
<!-- <view class="o-l-img">
|
<image src="" mode=""></image>
|
</view> -->
|
<view class="o-l-main">
|
<view class="o-l-m-up">
|
{{item.title}}
|
</view>
|
<view class="o-l-m-center">
|
<u-icon name="order" color="#d0d0d0" size="28"></u-icon>
|
状态：{{item.state == 0?'待开始':item.state == 1?'正在进行':'已完成'}}
|
</view>
|
<view class="o-l-m-center">
|
<u-icon name="volume" color="#d0d0d0" size="28"></u-icon>
|
时间：{{item.startTime}}
|
</view>
|
</view>
|
</view>
|
<view class="onve-right">
|
<u-button class='greens' size="mini" v-if="current == 0">开始任务</u-button>
|
<u-button class='greens' size="mini" v-if="current == 1">完成任务</u-button>
|
<u-button class='o-r-down' plain type="error" size="mini" v-if="current == 1">事件上报
|
</u-button>
|
</view>
|
</view>
|
|
</view>
|
<u-divider>没有更多了</u-divider>
|
</scroll-view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import {
|
getList
|
} from "@/api/taskinfo/list.js";
|
export default {
|
data() {
|
return {
|
useHeight: "87vh",
|
current: 0, // tabs组件的current值，表示当前活动的tab选项
|
tabsList: [{
|
id: 0,
|
name: "待开始",
|
}, {
|
id: 1,
|
name: "正在进行",
|
}, {
|
id: 2,
|
name: "已完成",
|
}],
|
page: {
|
pageSize: 6,
|
currentPage: 1,
|
total: 0
|
},
|
query: {
|
state: 0,
|
toUserId: this.$store.state.userInfo.user_id //获取当前登录用户id
|
},
|
taskinfoList: null
|
}
|
},
|
created() {
|
this.getList()
|
},
|
methods: {
|
// tabs通知swiper切换
|
tabsChange(index) {
|
this.current = index;
|
this.query.state = this.current;
|
this.page.currentPage = 1
|
this.getList();
|
},
|
getList() {
|
// 获取任务列表API
|
getList(this.page.currentPage, this.page.pageSize, this.query).then(res => {
|
const data = res.data;
|
this.page.total = data.total;
|
this.taskinfoList = data.records;
|
})
|
},
|
// 下一页任务
|
scrolltolower() {
|
this.page.currentPage += 1
|
// 获取任务列表API
|
getList(this.page.currentPage, this.page.pageSize, this.query).then(res => {
|
const data = res.data;
|
this.page.total = data.total;
|
this.taskinfoList = this.taskinfoList.concat(data.records)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
page {
|
height: 100% !important;
|
width: 100% !important;
|
overflow: hidden !important;
|
}
|
|
.swiper-item {
|
flex: 1;
|
}
|
|
.onveMain {
|
width: 100%;
|
height: auto;
|
}
|
|
.once {
|
width: calc(100% - 10px);
|
height: 100px;
|
border: 1px solid #d0d0d0;
|
padding: 8px;
|
box-sizing: border-box;
|
margin: 5px;
|
border-radius: 8px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.onve-left {
|
width: 75%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.o-l-img {
|
width: 80px;
|
height: 80px;
|
background-color: #d0d0d0;
|
margin-right: 5px;
|
border-radius: 7px;
|
|
image {
|
width: 100%;
|
height: 100%;
|
border-radius: 7px;
|
}
|
}
|
|
.o-l-main {
|
width: 100%;
|
height: 80px;
|
display: flex;
|
// align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
|
.o-l-m-up {
|
height: 30px;
|
font-size: 16px;
|
}
|
}
|
}
|
|
.onve-right {
|
width: 25%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
|
.o-r-down {
|
margin-top: 4px;
|
}
|
}
|
|
}
|
|
.orange {
|
color: #FF7B15;
|
}
|
|
.green {
|
color: #00e713;
|
}
|
|
.greens {
|
color: #18a655 !important;
|
}
|
|
.blues {
|
color: #2680F0 !important;
|
}
|
|
.Cation {
|
display: inline-block;
|
position: absolute;
|
left: -35px;
|
|
&::after {
|
content: "";
|
}
|
}
|
|
.notCation {
|
color: #18a655;
|
}
|
</style>
|
