|
|
@@ -1,190 +1,65 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <view class="tabs" style="width: 420rpx;margin: 0rpx auto;padding-top: 20rpx;">
|
|
|
- <scroll-view scroll-x class="nav" >
|
|
|
- <view class="flex text-center">
|
|
|
- <view style="border: 1rpx solid #59a5f0;padding:15rpx 20rpx;" class="flex-sub" :class="index==subsectionCurrent?'nav-checked':'nav-unchecked'" v-for="(item,index) in subsectionList" :key="index" @tap="subsectionChange(index)" >
|
|
|
- {{item.name}}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- <view style="height: 100%;">
|
|
|
- <swiper style="height: 100%;" :current="subsectionCurrent" @change="swiperChange"
|
|
|
- @animationfinish="animationfinish">
|
|
|
- <swiper-item >
|
|
|
- <scroll-view scroll-y style="height: 100%;">
|
|
|
- <view class="history">
|
|
|
- <u-time-line>
|
|
|
- <u-time-line-item nodeTop="2" v-for="(item,index) in dataList" :key="index">
|
|
|
- <template v-slot:node>
|
|
|
- <view class="u-node bg-white" >
|
|
|
- <u-icon name="clock-fill" color="#59a5f0" :size="28"></u-icon>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-slot:content>
|
|
|
- <view>
|
|
|
- <view class="">{{item.time}}</view>
|
|
|
- <view style="width: 636rpx;">
|
|
|
- <view class="content">
|
|
|
- <view class="flex justify-between">
|
|
|
- <view class="">
|
|
|
- <view class="nav-title">
|
|
|
- <text class="">人员姓名:</text>
|
|
|
- <text class="">{{item.name}}</text>
|
|
|
- </view>
|
|
|
- <view class="nav-title">
|
|
|
- <text >所属企业:</text>
|
|
|
- <text>{{item.enterpriseName}}</text>
|
|
|
- </view>
|
|
|
- <view class="nav-title">
|
|
|
- <text >开门设备:</text>
|
|
|
- <text>{{item.device}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="" v-if="item.faceImg">
|
|
|
- <image @click="preViewImg(item.faceImg)" :src="item.faceImg" style="width: 110rpx;height: 110rpx;border-radius: 10rpx;" mode=""></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="nav-title">
|
|
|
- <text >开门方式:</text>
|
|
|
- <text>{{item.openType}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </u-time-line-item>
|
|
|
- </u-time-line>
|
|
|
- </view>
|
|
|
- <u-divider height="80">到底了</u-divider>
|
|
|
- </scroll-view>
|
|
|
- </swiper-item>
|
|
|
- <swiper-item >
|
|
|
- <scroll-view scroll-y style="height: 100%;">
|
|
|
- <view class="history">
|
|
|
- <u-time-line>
|
|
|
- <u-time-line-item v-if="index==1" nodeTop="2" v-for="(item,index) in dataList" :key="index">
|
|
|
- <template v-slot:node>
|
|
|
- <view class="u-node bg-white" >
|
|
|
- <u-icon name="clock-fill" color="#59a5f0" :size="28"></u-icon>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-slot:content>
|
|
|
- <view>
|
|
|
- <view >{{item.time}}</view>
|
|
|
- <view style="width: 636rpx;">
|
|
|
- <view class="content">
|
|
|
- <view class="flex justify-between">
|
|
|
- <view class="">
|
|
|
- <view class="nav-title">
|
|
|
- <text class="">人员姓名:</text>
|
|
|
- <text class="">{{item.name}}</text>
|
|
|
- </view>
|
|
|
- <view class="nav-title">
|
|
|
- <text >所属企业:</text>
|
|
|
- <text>{{item.enterpriseName}}</text>
|
|
|
- </view>
|
|
|
- <view class="nav-title">
|
|
|
- <text >开门设备:</text>
|
|
|
- <text>{{item.device}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="" v-if="item.faceImg">
|
|
|
- <image @click="preViewImg(item.faceImg)" :src="item.faceImg" style="width: 110rpx;height: 110rpx;border-radius: 10rpx;" mode=""></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="nav-title">
|
|
|
- <text >开门方式:</text>
|
|
|
- <text>{{item.openType}}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </u-time-line-item>
|
|
|
- </u-time-line>
|
|
|
- </view>
|
|
|
- <u-divider height="80">到底了</u-divider>
|
|
|
- </scroll-view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
+ <view>
|
|
|
+ <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
|
|
|
+ <card :list="dataList"></card>
|
|
|
+ </mescroll-body>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
+ import card from "./comps/card.vue"
|
|
|
+ import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
|
|
|
export default {
|
|
|
+ mixins: [MescrollMixin],
|
|
|
components:{
|
|
|
-
|
|
|
+ card
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- dateShow:false,
|
|
|
+ loginType:'',
|
|
|
+ downOption: {
|
|
|
+ auto:false
|
|
|
+ },
|
|
|
dataList:[],
|
|
|
- subsectionCurrent:0,
|
|
|
- swiperCurrent:0,
|
|
|
- subsectionList:[
|
|
|
- {
|
|
|
- name: '全部记录'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '迟到记录'
|
|
|
- }
|
|
|
- ]
|
|
|
-
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
- this.fetchStaticData()
|
|
|
+ this.loginType=this.$cache.get('loginType')
|
|
|
},
|
|
|
methods: {
|
|
|
- subsectionChange(index){
|
|
|
- this.subsectionCurrent=index
|
|
|
+ downCallback(){
|
|
|
+ setTimeout(()=>{
|
|
|
+ uni.showToast({title:"刷新成功",icon:"none"})
|
|
|
+ this.mescroll.resetUpScroll();
|
|
|
+ },1500)
|
|
|
},
|
|
|
- swiperChange(e) {
|
|
|
- uni.pageScrollTo({
|
|
|
- scrollTop: 0,
|
|
|
- duration: 0
|
|
|
- });
|
|
|
- this.subsectionCurrent = e.detail.current
|
|
|
- },
|
|
|
- animationfinish({detail: { current }}) {
|
|
|
- this.swiperCurrent = current;
|
|
|
- this.subsectionCurrent = current;
|
|
|
- },
|
|
|
- preViewImg(img){
|
|
|
- let urls=[img]
|
|
|
- uni.previewImage({
|
|
|
- urls:urls
|
|
|
- })
|
|
|
- },
|
|
|
- fetchStaticData(){
|
|
|
- this.dataList=[
|
|
|
- {
|
|
|
- name:'张文祥',
|
|
|
- enterpriseName:'宁夏新金凰印刷有限公司',
|
|
|
- device:'园区大门',
|
|
|
- openType:'小程序一键开门',
|
|
|
- time:'2020-12-19 17:02:45'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'张文祥',
|
|
|
- enterpriseName:'宁夏新金凰印刷有限公司',
|
|
|
- device:'园区大门',
|
|
|
- openType:'面部识别开门',
|
|
|
- faceImg:'http://139.9.103.171:1888/miniofile/cyzhyc/adcb07fe-d31c-4fdf-80cd-d35385936814-template.png',
|
|
|
- time:'2020-12-19 17:02:45'
|
|
|
- },
|
|
|
- {
|
|
|
- name:'张文祥',
|
|
|
- enterpriseName:'宁夏新金凰印刷有限公司',
|
|
|
- device:'园区大门',
|
|
|
- openType:'小程序一键开门',
|
|
|
- time:'2020-12-19 17:02:45'
|
|
|
- },
|
|
|
- ]
|
|
|
+ upCallback(mescroll){
|
|
|
+ let params={
|
|
|
+ current:mescroll.num,
|
|
|
+ size:mescroll.size,
|
|
|
+ }
|
|
|
+ if (this.loginType==this.$loginType.AGENCY) {
|
|
|
+ //管理员
|
|
|
+ params.tenantId=this.$cache.get('agencyTenantId')
|
|
|
+ }else if (this.loginType==this.$loginType.STAFF) {
|
|
|
+ //员工
|
|
|
+ params.userId=this.$cache.get('userId')
|
|
|
+ }else if (this.loginType==this.$loginType.ENTERPRISE) {
|
|
|
+ //企业
|
|
|
+ params.enterpriseId=this.$cache.get('enterpriseId')
|
|
|
+ }
|
|
|
+ try{
|
|
|
+ this.$api.accessrecord.page(params).then(res=>{
|
|
|
+ let data=res.data.records
|
|
|
+ this.mescroll.endBySize(data.length, res.total)
|
|
|
+ if (mescroll.num==1) this.dataList=[]
|
|
|
+ this.dataList=this.dataList.concat(data)
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.mescroll.endBySize(data.length, res.total)
|
|
|
+ },20)
|
|
|
+ })
|
|
|
+ }catch(e){
|
|
|
+ this.mescroll.endErr();
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -194,85 +69,4 @@
|
|
|
page{
|
|
|
background-color: #FFFFFF;
|
|
|
}
|
|
|
-.nav .cu-item {
|
|
|
- height: 70rpx;
|
|
|
- display: inline-block;
|
|
|
- line-height: 70rpx;
|
|
|
- margin: 0 10rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.nav-title {
|
|
|
- font-size: 28upx;
|
|
|
- font-weight: 300;
|
|
|
- padding-top: 20rpx;
|
|
|
-}
|
|
|
-.history{
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 40rpx 20rpx 20rpx 50rpx;
|
|
|
-}
|
|
|
-.content{
|
|
|
- box-shadow: 0 8rpx 10rpx rgba(234, 234, 234, 0.5),8rpx 0rpx 10rpx rgba(234, 234, 234,.5),-8rpx 0rpx 10rpx rgba(234, 234, 234,.5);
|
|
|
- background-color: #FFFFFF;
|
|
|
- padding: 20rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin: 20rpx 0;
|
|
|
-}
|
|
|
-
|
|
|
-.nav-checked{
|
|
|
- background-color: #59a5f0;
|
|
|
- color: #FFFFFF;
|
|
|
- font-weight: 800;
|
|
|
-}
|
|
|
-
|
|
|
-.nav-unchecked{
|
|
|
- background-color: #FFFFFF;
|
|
|
- color: #59a5f0;
|
|
|
-}
|
|
|
-
|
|
|
-.text-checked{
|
|
|
- font-weight: 800;
|
|
|
- background-color: #FFFFFF;
|
|
|
- color: #2f7ff5;
|
|
|
- font-size: 800;
|
|
|
-}
|
|
|
-view{
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-.container {
|
|
|
- height: calc(100vh);
|
|
|
- padding: 120rpx 0rpx 0rpx;
|
|
|
- .tabs {
|
|
|
- height: 120rpx;
|
|
|
- position: fixed;
|
|
|
- top: 0rpx;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- width: 100%;
|
|
|
- z-index: 3;
|
|
|
- }
|
|
|
-}
|
|
|
- .scroll-view {
|
|
|
- height: 150rpx;
|
|
|
- white-space: nowrap;
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- top: -30rpx;
|
|
|
- }
|
|
|
- .scroll-view-item {
|
|
|
- color: #FFFFFF;
|
|
|
- background-image: linear-gradient(to right, #2f7ff5, #2f7ff5);
|
|
|
- display: inline-block;
|
|
|
- text-align: left;
|
|
|
- padding: 20rpx 40rpx;
|
|
|
- margin:0 8rpx;
|
|
|
- width:24%;
|
|
|
- border-radius: 12rpx;
|
|
|
- }
|
|
|
- .scroll-view-item:first-child{
|
|
|
- margin-left: 30rpx;
|
|
|
- }
|
|
|
- .scroll-view-item:last-child{
|
|
|
- margin-right: 30rpx;
|
|
|
- }
|
|
|
-</style>
|
|
|
+</style>
|