4 changed files with 363 additions and 3 deletions
@ -0,0 +1,347 @@ |
|||||
|
<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> |
||||
Loading…
Reference in new issue