You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
347 lines
9.2 KiB
347 lines
9.2 KiB
2 years ago
|
<template>
|
||
|
|
<view style="min-height: 100vh;background-color: #F3F3F3;">
|
||
|
|
<u-sticky>
|
||
|
|
<view style="background-color: #3A71FF;height: 90px;">
|
||
|
|
<image :src="applet+'/back.png'" style="width: 20px;height: 20px;margin-top: 55px;margin-left: 10px;"
|
||
|
|
@tap="close"></image>
|
||
|
|
<view style="text-align: center;color: #fff;position: absolute;top: 49px;left: 40%;font-size: 17px;">
|
||
|
|
打卡详情</view>
|
||
|
|
</view>
|
||
|
|
</u-sticky>
|
||
|
|
<view style="padding: 10px 10px;" v-for="(item,index) in talk">
|
||
|
|
<view>
|
||
|
|
<text style="margin-left: 4%;">{{item.sigindate}}</text>
|
||
|
|
</view>
|
||
|
|
<uni-list class="custom-list">
|
||
|
|
<u-card class="custom-card" v-for="(cItem,index_) in item.data" @click="previewOpen(cItem.picUrl)"
|
||
|
|
:show-foot="false" :show-head="false">
|
||
|
|
<view slot="body" class="u-body-item" style="display: flex;flex-wrap:nowrap;">
|
||
|
|
<view>
|
||
|
|
<u-image :src="cItem.picUrl" width="60" height="80" mode="aspectFill" :lazy-load="true"></u-image>
|
||
|
|
</view>
|
||
|
|
<view slot="body" style="margin-left: 20px;line-height: 28px;">
|
||
|
|
<view class="u-body-title">姓名：</view><view class="u-body-item-desc">{{cItem.realName}}</view>
|
||
|
|
<view class="u-body-title">打卡时间：</view><view class="u-body-item-desc">{{cItem.time}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</u-card>
|
||
|
|
</uni-list>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- <view class="container">
|
||
|
|
<view class="set_box" v-for="(item,index) in talk" :key="index">
|
||
|
|
<view class="set_time">
|
||
|
|
<view>{{item.sigindate}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="set-1">
|
||
|
|
<view class="set-2">
|
||
|
|
<view class="tlak_o" v-for="(cItem,index_) in item.data">
|
||
|
|
<view class="user like_">
|
||
|
|
<view class="user_say like_o">
|
||
|
|
<view class="user_head like_h">
|
||
|
|
<text class="doc_name name_">{{cItem.realName}}</text><text
|
||
|
|
class="doc_time time_">{{cItem.time}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="user_talk like_talk">
|
||
|
|
<view class="like_img" v-if="cItem.picUrl">
|
||
|
|
<image :src="cItem.picUrl" @click="previewOpen(cItem.picUrl)"></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view> -->
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
formatterDateTime
|
||
|
|
} from "@/common/utils.js"
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
applet:this.$url.data.applet,
|
||
|
|
talk:[],
|
||
|
|
query:{
|
||
|
|
unitId:'',
|
||
|
|
siginDateStart:'',
|
||
|
|
siginDateEnd:''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(e) {
|
||
|
|
this.query.unitId = e.unitId
|
||
|
|
this.query.siginDateEnd = e.date
|
||
|
|
this.query.siginDateStart = this.handleDate(e.date,'3')
|
||
|
|
this.loadData()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
loadData(){
|
||
|
|
this.$http.get("/fire-customer/sign/record/signListByUnitId",this.query,{}).then(res =>{
|
||
|
|
var dd = res.data
|
||
|
|
for(let i=0;i<res.data.length;i++){
|
||
|
|
dd[i].data = JSON.parse(dd[i].signdata.value);
|
||
|
|
dd[i].data = dd[i].data.filter( u => u.isShow);
|
||
|
|
}
|
||
|
|
this.talk = dd
|
||
|
|
})
|
||
|
|
},
|
||
|
|
handleDate(date, day){
|
||
|
|
var d = new Date(date);
|
||
|
|
d = d.valueOf();
|
||
|
|
d = d - day * 24 * 60 * 60 * 1000;
|
||
|
|
return formatterDateTime(new Date(d), 'Y-M-D');
|
||
|
|
},
|
||
|
|
previewOpen(e) {
|
||
|
|
uni.previewImage({
|
||
|
|
urls: [e]
|
||
|
|
})
|
||
|
|
},
|
||
|
|
close() {
|
||
|
|
uni.navigateBack()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.CBlue {
|
||
|
|
background-image: linear-gradient(#7cc9ff,#1771d7);
|
||
|
|
box-shadow: 0 8px 8px #b0d2f3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.module {
|
||
|
|
overflow: hidden;
|
||
|
|
margin: 20upx auto;
|
||
|
|
width: 260upx;
|
||
|
|
height: 260upx;
|
||
|
|
border-radius: 50%;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.module .text {
|
||
|
|
font-size: 20px;
|
||
|
|
margin: 80upx auto 10upx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-list {
|
||
|
|
background: #f1f1f4;
|
||
|
|
|
||
|
|
.custom-card {
|
||
|
|
//margin: 12rpx 24rpx !important;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.card-nav {
|
||
|
|
position: absolute;
|
||
|
|
float: right;
|
||
|
|
top: 40%;
|
||
|
|
right: 35rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.u-body-title {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333;
|
||
|
|
font-weight: 550;
|
||
|
|
padding: 8rpx 0;
|
||
|
|
width: 36%;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-body-item {
|
||
|
|
padding: 0rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-body-item-desc {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #555;
|
||
|
|
padding: 8rpx;
|
||
|
|
float: left;
|
||
|
|
font-weight: 0;
|
||
|
|
width: 60%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-body-item image {
|
||
|
|
width: 160rpx;
|
||
|
|
flex: 0 0 160rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
margin-left: 0rpx;
|
||
|
|
margin-right: 12rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-margin-right-12 {
|
||
|
|
margin-right: 12rpx;
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
// .container{
|
||
|
|
// padding: 10px;
|
||
|
|
// }
|
||
|
|
// .set_box {
|
||
|
|
// width: 100%;
|
||
|
|
// height: 100%;
|
||
|
|
// display: flex;
|
||
|
|
// flex-direction: row;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// /* 左侧时间 */
|
||
|
|
// .set_time {
|
||
|
|
// width: 26%;
|
||
|
|
// position: relative;
|
||
|
|
|
||
|
|
// view {
|
||
|
|
// width: 120%;
|
||
|
|
// position: absolute;
|
||
|
|
// margin-top: 60upx;
|
||
|
|
// right: -40rpx;
|
||
|
|
// color: #999999;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// }
|
||
|
|
|
||
|
|
|
||
|
|
// /* 右侧内容 */
|
||
|
|
|
||
|
|
|
||
|
|
// .set-1 {
|
||
|
|
// width: 90%;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .set-2 {
|
||
|
|
// min-height: 300upx;
|
||
|
|
// border-radius: 10upx;
|
||
|
|
// width: 84%;
|
||
|
|
// margin-left: 100upx;
|
||
|
|
// margin-top: 60upx;
|
||
|
|
// padding-right: 10rpx;
|
||
|
|
// position: relative;
|
||
|
|
|
||
|
|
// .tlak_o {
|
||
|
|
// width: 100%;
|
||
|
|
// min-height: 300upx;
|
||
|
|
|
||
|
|
// .like_ {
|
||
|
|
// width: 100%;
|
||
|
|
// min-height: 100rpx;
|
||
|
|
|
||
|
|
// .like_o {
|
||
|
|
// width: 100%;
|
||
|
|
// height: 100%;
|
||
|
|
|
||
|
|
// .like_h {
|
||
|
|
// color: #999999;
|
||
|
|
|
||
|
|
// .name_ {
|
||
|
|
// margin-right: 20rpx;
|
||
|
|
// font-size: 32rpx;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .time_ {
|
||
|
|
// font-size: 24rpx;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .like_talk {
|
||
|
|
// width: 95%;
|
||
|
|
// min-height: 100rpx;
|
||
|
|
// margin: 0 30rpx;
|
||
|
|
|
||
|
|
// text {
|
||
|
|
// color: #333333;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .like_img {
|
||
|
|
// width: 100%;
|
||
|
|
// min-height: 100rpx;
|
||
|
|
// display: flex;
|
||
|
|
// justify-content: flex-start;
|
||
|
|
// flex-wrap: wrap;
|
||
|
|
|
||
|
|
// image {
|
||
|
|
// width: 30%;
|
||
|
|
// height: 180rpx;
|
||
|
|
// margin-bottom: 20rpx;
|
||
|
|
// margin-right: 2%;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .set-2::after {
|
||
|
|
// content: '';
|
||
|
|
// /* 必须存在如果没有图标就留空 */
|
||
|
|
// top: -20upx;
|
||
|
|
// /* 定位 距离*/
|
||
|
|
// border-left: #c6c6c6 1px solid;
|
||
|
|
// /* 横线颜色 */
|
||
|
|
// left: -44upx;
|
||
|
|
// /* 定位 距离*/
|
||
|
|
// height: 120%;
|
||
|
|
// /* 高度 */
|
||
|
|
// position: absolute;
|
||
|
|
// /* 定位 */
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .set-2::before {
|
||
|
|
// content: "\e64d";
|
||
|
|
// /* 必须存在如果没有图标就留空 */
|
||
|
|
// color: #c6c6c6;
|
||
|
|
// /* 设置颜色 */
|
||
|
|
// position: absolute;
|
||
|
|
// /* 定位 */
|
||
|
|
// left: -70upx;
|
||
|
|
// top: -20upx;
|
||
|
|
// /* 移动到左边 */
|
||
|
|
// font-weight: bold;
|
||
|
|
// /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
|
||
|
|
// font-family: "iconfont" !important;
|
||
|
|
// /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
|
||
|
|
// font-size: 54upx;
|
||
|
|
// /* 图标大小 */
|
||
|
|
// font-style: normal;
|
||
|
|
// /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
|
||
|
|
// -webkit-font-smoothing: antialiased;
|
||
|
|
// /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
|
||
|
|
// -moz-osx-font-smoothing: grayscale;
|
||
|
|
// /* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
|
||
|
|
// }
|
||
|
|
|
||
|
|
// @font-face {
|
||
|
|
// font-family: "iconfont";
|
||
|
|
// src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395');
|
||
|
|
// /* IE9 */
|
||
|
|
// src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395#iefix') format('embedded-opentype'),
|
||
|
|
// /* IE6-IE8 */
|
||
|
|
// url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOIAAsAAAAAB8QAAAM7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqCRIIjATYCJAMUCwwABCAFhG0HZhvNBsiemjwJqJERRCC3tX4YOM4iqNbCnr29uw8wKGBUsUAKqDyCjY5HcEzCALron1wr8wDk8hKBFpIc5yaXfWZJoIBIQkF1KlvVqWuFfZ3c/CBw0p8fcMJJsQY6uIuEMk8188LgXgfHTJceiXlrm0tGajTgaMCz2T6yyf5BXh+Ef9BdxMSIS9cTaKmvYGbzFhRXA1sZ2C0QO7cRAdhadnmkNTSEqufYLM4qNdKx9AJn+M/Hb2OiQVIWwL6rNufIIP1bj29voaZspAiK/byITqLAaEAmdvX6d7KQ+dEstCw2tjQL0FJDkvZald8e//3y+WglCIaW0E/e5R8vERWvuTWY5RYy3/ywXBtKXBEF395EBN++FCQ8V5CWsmEt4CBgHMz1Ad8rde7s2LbD7oUhT3l+eWHbhxwOB+LFrfkVL7I3FIAWdpdWvfHiYt8FltYWdzy1Pz/WfPhQ/elT7efPvUJiVlRsIj8+18X3az7+5Wb48vVrbnvo7OndVe1cPc55k2ebWG7OmMgYX01bT3vJnNlJWtemes0mn3vI/PJl80NQQqVErfcH/Ys5Fy3evrVoyyZNDLSq/cp5EyYsKTbb69bD/+5fmPs/cFwxG9ABoCNdTY+AKrwdi2npHk0Xu4vMH/Q7Wl+4+Yftkv83kMHXTiVutOlsnh68ZYPZit+hmDmRSxVwlDnvxvI8WOq3gz4VCy3xE8Id/d7H2GV2M6Ghi4ak1gcKDYORGTsaSq2Mg0rDTGhplLyTW+mEsRC5BUYadyC0dwpJWw+h0N53ZMb+glJX/6DSPgpoaUN4nLOVobGtZdYuJHAkQ7EbqiVqwMjF7UVrJSKKTmCmitNrETOpUzAiNLxZykMGxPY4wNRBIjnHEDOqh7nOzZBOR6GRUQ2SeKiKc2NiWBju+6JQieqBvbkYRMAhMkjUDVKTUAaYzufsW99fCSEUOgI20rMQr4UwJurloQihwmcg8/SGWT3v8hKTDkQkjsMgjKH0oFzHi+hgnoKM/VtpIBIulGpF1ihRmDcLz9WHnm/Uv0BZNAD40zJSFJGjjEq77dsEg1ahKoF2qbupYvP0KNS2e69WbmucSNZAOpEa5XpUagAAAA==') format('woff2'),
|
||
|
|
// url('//at.alicdn.com/t/font_1337773_f06f5a7las.woff?t=1565581133395') format('woff'),
|
||
|
|
// url('//at.alicdn.com/t/font_1337773_f06f5a7las.ttf?t=1565581133395') format('truetype'),
|
||
|
|
// /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||
|
|
// url('//at.alicdn.com/t/font_1337773_f06f5a7las.svg?t=1565581133395#iconfont') format('svg');
|
||
|
|
// /* iOS 4.1- */
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .iconfont {
|
||
|
|
// font-family: "iconfont" !important;
|
||
|
|
// font-size: 16px;
|
||
|
|
// font-style: normal;
|
||
|
|
// -webkit-font-smoothing: antialiased;
|
||
|
|
// -moz-osx-font-smoothing: grayscale;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .icon-yuandian:before {
|
||
|
|
// content: "\e64d";
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .icon-dingweiweizhi:before {
|
||
|
|
// content: "\e619";
|
||
|
|
// }
|
||
|
|
</style>
|