<template>
<div class="record">
<van-tabs type="card" custom-class="rec-tabs" nav-class="rec-tabs-nav" tab-class="rec-tab" tab-active-class="rec-tab-active" @change="onChange">
<van-tab title="今天" name="today">
<div class="tab-inner">
<coolui-scroll class="demo" :scrollOption="scroll" @refresh="refresh" @loadMore="loadMore">
<!-- <view class="list-inner" slot="inner">
<view class="item" v-for="(item, index) in list" :key="index">
第{{item + 1}}条内容
</view>
</view> -->
<!-- 循环内容 -->
<div class="record-inner" @click="gotoViolation(item.recordId)" v-if="todayRecord" v-for="(item, index) in todayRecord" :key="index">
<van-cell-group>
<van-cell :title="title[item.trashType]" title-class="record-title" custom-class="record-first">
<span class="tag" :class="className[item.status]">{{ status[item.status] }}</span>
</van-cell>
<van-cell :border="false">
<view slot="title" class="record-date-wrap">
<van-icon :name="config.url + '/static/images/ico-date.png'"/>
<span class="record-date">{{ item.createTime }}</span>
</view>
</van-cell>
<van-cell custom-class="record-last">
<view slot="title">
<van-icon :name="config.url + '/static/images/ico-local.png'"/>
<span class="record-community">{{ item.estateName }}</span><span class="record-point">{{ item.pointName }}点位</span>
</view>
</van-cell>
</van-cell-group>
</div>
<!-- 循环内容 end -->
</coolui-scroll>
</div>
</van-tab>
<van-tab title="历史记录" name="histroy">
<div class="tab-inner">
<coolui-scroll class="demoH" :scrollOption="scrollH" @refresh="refreshH" @loadMore="loadMoreH">
<!-- <view class="list-inner" slot="inner">
<view class="item" v-for="(item, index) in list" :key="index">
第{{item + 1}}条内容
</view>
</view> -->
<view class="list-inner" slot="inner">
<!-- 循环内容 -->
<div class="record-inner" @click="gotoViolation(item.recordId)" v-for="(item, index) in histroyRecord" :key="index">
<van-cell-group>
<van-cell :title="title[item.trashType]" title-class="record-title" custom-class="record-first">
<span class="tag" :class="className[item.status]">{{ status[item.status] }}</span>
</van-cell>
<van-cell :border="false">
<view slot="title" class="record-date-wrap">
<van-icon :name="config.url + '/static/images/ico-date.png'"/>
<span class="record-date">{{ item.createTime }}</span>
</view>
</van-cell>
<van-cell custom-class="record-last">
<view slot="title">
<van-icon :name="config.url + '/static/images/ico-local.png'"/>
<span class="record-community">{{ item.estateName }}</span><span class="record-point">{{ item.pointName }}点位</span>
</view>
</van-cell>
</van-cell-group>
</div>
<!-- 循环内容 end -->
</view>
</coolui-scroll>
</div>
</van-tab>
</van-tabs>
</div>
</template>
<script>
import {
getDeliRecord
} from '@/api'
import {
getStorageSync,
showToast
} from '@/api/wechat'
import { handleError } from '@/utils'
export default {
props: {
flag: {
type: Boolean,
default: true
}
},
data() {
return {
config: this.CONFIG,
openId: null,
temp: null,
todayRecord: null,
histroyRecord: null,
title: {
1: '厨余垃圾',
2: '其他垃圾'
},
status: {
0: '正常',
2: '违规',
3: '待提高'
},
className: {
0: 'success',
2: 'fail',
3: 'warn'
},
// coolui-scroll 配置
list: [], // 测试字段
scroll: {
// 设置分页信息
pagination: {
page: 1,
totalPage: 20,
limit: 5,
length: 100
},
// 设置数据为空时的图片
empty: {
img: 'http://coolui.coolwl.cn/assets/mescroll-empty.png'
},
// 设置下拉刷新
refresh: {
type: 'default',
style: 'black',
background: '#000'
},
// 设置上拉加载
loadmore: {
type: 'default',
icon: 'http://upload-images.jianshu.io/upload_images/5726812-95bd7570a25bd4ee.gif',
background: '#f2f2f2',
// backgroundImage: 'http://coolui.coolwl.cn/assets/bg.jpg',
title: {
show: true,
text: '加载中',
color: '#999',
shadow: 5
}
}
},
scrollH: {
// 设置分页信息
pagination: {
page: 1,
totalPage: 20,
limit: 5,
length: 100
},
// 设置数据为空时的图片
empty: {
img: 'http://coolui.coolwl.cn/assets/mescroll-empty.png'
},
// 设置下拉刷新
refresh: {
type: 'default',
style: 'black',
background: '#000'
},
// 设置上拉加载
loadmore: {
type: 'default',
icon: 'http://upload-images.jianshu.io/upload_images/5726812-95bd7570a25bd4ee.gif',
background: '#f2f2f2',
// backgroundImage: 'http://coolui.coolwl.cn/assets/bg.jpg',
title: {
show: true,
text: '加载中',
color: '#999',
shadow: 5
}
}
}
}
},
created() {
this.openId = getStorageSync('openId')
this.openId = 'oN5wB5b5lqb7dpetlQb6zgVSOhc0'
},
mounted() {
this.init()
},
methods: {
init() {
this.getTodayRecord(1)
},
onChange(event) {
// console.log(event)
if (event.mp.detail.index === 0) {
this.getTodayRecord(1)
} else {
this.getHistroyRecord(1)
}
},
getTodayRecord(pageSize) {
var record = {
openId: this.openId,
dataType: 't',
pageNum: 5,
pageSize: pageSize
}
this.getDeliRecord(record, 'todayRecord')
},
getHistroyRecord(pageSize) {
var record = {
openId: this.openId,
dataType: 'h',
pageNum: 5,
pageSize: pageSize
}
this.getDeliRecord(record, 'histroyRecord')
},
getDeliRecord(record, which) {
getDeliRecord(record).then(res => {
if (handleError(res)) {
// console.log(res.data)
// console.log(res.data.data)
if (!res.data.data) {
showToast(res.data.msg)
return
}
this[which] = res.data.data
}
})
},
gotoViolation(recordId) {
const query = { recordId: recordId }
this.$router.push({
path: '/pages/violation/main',
query
})
},
// 加载数据
getData(type) {
var that = this
// 可走后台接口
if (type === 'refresh') {
// 刷新时执行
// 设置页数1
var scroll = that.scroll
scroll.pagination.page = 1
setTimeout(function () {
that.getTodayRecord(1)
that.scroll = scroll
}, 300)
} else {
// 加载时执行
// 设置页数+1
var _scroll = that.scroll
_scroll.pagination.page = _scroll.pagination.page + 1
if (_scroll.pagination.page <= that.scroll.pagination.totalPage) {
that.getTodayRecord(_scroll.pagination.page)
that.scroll = _scroll
}
that.selectComponent('.demo').loadEnd()
}
},
// 下拉 刷新 页数设置1
refresh() {
this.getData('refresh')
},
// 上拉 加载 页数设置+1
loadMore() {
this.getData('loadMore')
},
// 自定义下拉刷新时执行 插槽下拉 返回的下拉进度p
refreshPulling(e) {
// p = e.detail.p
},
// 加载历史数据
getDataH(type) {
var that = this
// 可走后台接口
if (type === 'refresh') {
// 刷新时执行
// 设置页数1
var scrollH = that.scrollH
scrollH.pagination.page = 1
setTimeout(function () {
that.getHistroyRecord(1)
// that.list = [1, 2, 3, 4, 5]
that.scrollH = scrollH
}, 300)
} else {
// 加载时执行
// 设置页数+1
var _scrollH = that.scrollH
_scrollH.pagination.page = _scrollH.pagination.page + 1
if (_scrollH.pagination.page <= that.scrollH.pagination.totalPage) {
that.getHistroyRecord(_scrollH.pagination.page)
// that.list = that.list.concat([1, 2, 3, 4, 5])
that.scrollH = _scrollH
}
that.selectComponent('.demoH').loadEnd()
}
},
// 下拉 刷新 页数设置1
refreshH() {
this.getDataH('refresh')
},
// 上拉 加载 页数设置+1
loadMoreH() {
this.getDataH('loadMore')
}
}
}
</script>
<style lang="scss">
.van-tabs__scroll {
margin: 0 !important;
background: none !important;
}
.van-tabs__content {
margin-top: 14px;
}
.rec-tabs{
margin-top: 14px;
height: 170px !important;
line-height: 170px !important;
}
.rec-tabs-nav {
margin-bottom: 14px !important;
border-color: #f98839 !important;
}
.rec-tab {
border-right-color: #f98839 !important;
color: #f98839 !important;
}
.rec-tab-active {
background-color: #f98839 !important;
color: #fff !important;
}
.record-first {
border-radius: 4px 4px 0 0;
}
.record-last {
border-radius: 0 0 4px 4px;
}
.record-title {
font-size: 16px;
font-weight: bold;
}
</style>
<style lang="scss" scoped>
.record {
padding: 0 16px 10px;
height: 100vh;
.tab-inner {
height: calc(100vh - 44px);
}
.record-inner {
margin-bottom: 10px;
.tag {
font-size: 12px;
color: #ffffff;
width: 50px;
height: 24px;
line-height: 24px;
display: inline-block;
text-align: center;
background-size: 100% 100% !important;
&.warn {
background-image: url($url + '/static/images/btn-warn.png');
}
&.success {
background-image: url($url + '/static/images/btn-success.png');
}
&.fail {
background-image: url($url + '/static/images/btn-fail.png');
}
}
.record-date-wrap {
display: flex;
align-items: center;
}
.record-date, .record-community, .record-point {
margin-left: 12px;
color: #999999;
font-size: 14px;
}
}
}
</style>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent