|
|
@@ -2,240 +2,233 @@
|
|
|
<view class="container">
|
|
|
<!-- 顶部搜索框区域 -->
|
|
|
<view class="search">
|
|
|
- <uni-search-bar bgColor="#fff" placeholder="请输入名字或院系" cancelButton="none" v-model="searchValue"
|
|
|
- @input="input">
|
|
|
- </uni-search-bar>
|
|
|
+ <uni-search-bar bgColor="#fff" placeholder="请输入名字或院系" cancelButton="none" v-model="searchValue" @input="input"></uni-search-bar>
|
|
|
</view>
|
|
|
|
|
|
<view class="list">
|
|
|
<!-- 分段器区域 -->
|
|
|
<view class="control">
|
|
|
- <uni-segmented-control :current="current" :values="items" styleType="text" @clickItem="onClickItem"
|
|
|
- activeColor="#0082FC"></uni-segmented-control>
|
|
|
+ <uni-segmented-control :current="current" :values="items" styleType="text" @clickItem="onClickItem" activeColor="#0082FC"></uni-segmented-control>
|
|
|
</view>
|
|
|
<!-- 列表区域 -->
|
|
|
<view class="listbox" v-if="list.length">
|
|
|
<!-- 每一个盒子区域 -->
|
|
|
<view class="item" v-for="item in list" :key="item.id" @click="handleGoStatDetail(item.userId)">
|
|
|
<view class="left">
|
|
|
- <img :src="item.headImage||'../static/imgs/headImage.png'">
|
|
|
+ <img mode="aspectFill" :src="item.headImage || '../static/imgs/headImage.png'" />
|
|
|
</view>
|
|
|
<view class="center">
|
|
|
<view class="name">
|
|
|
- {{item.name}}
|
|
|
+ {{ item.name }}
|
|
|
</view>
|
|
|
<view class="college">
|
|
|
- {{item.college?item.college:"南昌交通学院"}}
|
|
|
+ {{ item.college ? item.college : '南昌交通学院' }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="right">
|
|
|
- {{item.status==4?"正常":"缺卡"}}
|
|
|
+ {{ item.status == 4 ? '正常' : '缺卡' }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="listbox2" v-else>
|
|
|
- <img src="../static/imgs/nodata.png">
|
|
|
- <view class="info">
|
|
|
- 暂无数据
|
|
|
- </view>
|
|
|
+ <img src="../static/imgs/nodata.png" />
|
|
|
+ <view class="info">暂无数据</view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 总人数
|
|
|
- peopleTotal: 0,
|
|
|
- // 打卡失败人数
|
|
|
- failCount: 0,
|
|
|
- // 打卡成功人数
|
|
|
- successCount: 0,
|
|
|
- // 搜索框绑定值
|
|
|
- searchValue: "",
|
|
|
- // 分段器绑定数组
|
|
|
- items: ['打卡成功', '打卡失败'],
|
|
|
- // 当前分段器所在的索引
|
|
|
- current: 0,
|
|
|
- // 列表数组
|
|
|
- list: [],
|
|
|
- // 规则ID
|
|
|
- taskId: "",
|
|
|
- // 打卡状态 3代表失败 4代表成功
|
|
|
- status: 4,
|
|
|
- // 当前页
|
|
|
- page: 1,
|
|
|
- // 列表总条数
|
|
|
- total: 0
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(options) {
|
|
|
- let info = JSON.parse(options.info)
|
|
|
- // console.log(info);
|
|
|
- this.peopleTotal = info.peopleTotal
|
|
|
- this.failCount = info.failCount
|
|
|
- this.successCount = info.peopleTotal - info.failCount
|
|
|
- this.items[0] = `打卡成功（${this.successCount}/${this.peopleTotal}人）`
|
|
|
- this.items[1] = `打卡失败（${this.failCount}/${this.peopleTotal}人）`
|
|
|
- this.taskId = info.taskId
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 总人数
|
|
|
+ peopleTotal: 0,
|
|
|
+ // 打卡失败人数
|
|
|
+ failCount: 0,
|
|
|
+ // 打卡成功人数
|
|
|
+ successCount: 0,
|
|
|
+ // 搜索框绑定值
|
|
|
+ searchValue: '',
|
|
|
+ // 分段器绑定数组
|
|
|
+ items: ['打卡成功', '打卡失败'],
|
|
|
+ // 当前分段器所在的索引
|
|
|
+ current: 0,
|
|
|
+ // 列表数组
|
|
|
+ list: [],
|
|
|
+ // 规则ID
|
|
|
+ taskId: '',
|
|
|
+ // 打卡状态 3代表失败 4代表成功
|
|
|
+ status: 4,
|
|
|
+ // 当前页
|
|
|
+ page: 1,
|
|
|
+ // 列表总条数
|
|
|
+ total: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ let info = JSON.parse(options.info)
|
|
|
+ // console.log(info);
|
|
|
+ this.peopleTotal = info.peopleTotal
|
|
|
+ this.failCount = info.failCount
|
|
|
+ this.successCount = info.peopleTotal - info.failCount
|
|
|
+ this.items[0] = `打卡成功（${this.successCount}/${this.peopleTotal}人）`
|
|
|
+ this.items[1] = `打卡失败（${this.failCount}/${this.peopleTotal}人）`
|
|
|
+ this.taskId = info.taskId
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.list.length < this.total) {
|
|
|
+ this.page++
|
|
|
this.getData()
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: '没有更多数据了',
|
|
|
+ icon: 'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleGoStatDetail(id) {
|
|
|
+ // console.log(id);
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pagesClockIn/statDetail/statDetail?id=${id}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取列表数据
|
|
|
+ async getData() {
|
|
|
+ let res = await this.$myRequest_clockIn({
|
|
|
+ url: '/attendance/api/sign/check/in/rule',
|
|
|
+ data: {
|
|
|
+ name: this.searchValue,
|
|
|
+ page: this.page,
|
|
|
+ status: this.status,
|
|
|
+ taskId: this.taskId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // console.log(res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.total = res.data.total
|
|
|
+ this.list = [...this.list, ...res.data.list]
|
|
|
+ }
|
|
|
},
|
|
|
- onReachBottom() {
|
|
|
- if (this.list.length < this.total) {
|
|
|
- this.page++
|
|
|
- this.getData()
|
|
|
+ // 点击分段器回调
|
|
|
+ onClickItem(e) {
|
|
|
+ // console.log(e.currentIndex);
|
|
|
+ this.list = []
|
|
|
+ this.page = 1
|
|
|
+ if (e.currentIndex == 0) {
|
|
|
+ this.status = 4
|
|
|
} else {
|
|
|
- uni.showToast({
|
|
|
- title: "没有更多数据了",
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
+ this.status = 3
|
|
|
}
|
|
|
+ this.getData()
|
|
|
},
|
|
|
- methods: {
|
|
|
- handleGoStatDetail(id) {
|
|
|
- // console.log(id);
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pagesClockIn/statDetail/statDetail?id=${id}`
|
|
|
- })
|
|
|
- },
|
|
|
- // 获取列表数据
|
|
|
- async getData() {
|
|
|
- let res = await this.$myRequest_clockIn({
|
|
|
- url: "/attendance/api/sign/check/in/rule",
|
|
|
- data: {
|
|
|
- name: this.searchValue,
|
|
|
- page: this.page,
|
|
|
- status: this.status,
|
|
|
- taskId: this.taskId
|
|
|
- }
|
|
|
- })
|
|
|
- // console.log(res);
|
|
|
- if (res.code == 200) {
|
|
|
- this.total = res.data.total
|
|
|
- this.list = [...this.list, ...res.data.list]
|
|
|
- }
|
|
|
- },
|
|
|
- // 点击分段器回调
|
|
|
- onClickItem(e) {
|
|
|
- // console.log(e.currentIndex);
|
|
|
- this.list = []
|
|
|
- this.page = 1
|
|
|
- if (e.currentIndex == 0) {
|
|
|
- this.status = 4
|
|
|
- } else {
|
|
|
- this.status = 3
|
|
|
- }
|
|
|
- this.getData()
|
|
|
- },
|
|
|
- // 搜索框输入时的回调
|
|
|
- input() {
|
|
|
- this.list = []
|
|
|
- this.page = 1
|
|
|
- this.getData()
|
|
|
- },
|
|
|
+ // 搜索框输入时的回调
|
|
|
+ input() {
|
|
|
+ this.list = []
|
|
|
+ this.page = 1
|
|
|
+ this.getData()
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .container {
|
|
|
- padding-top: 20rpx;
|
|
|
- background-color: #F2F2F2;
|
|
|
+.container {
|
|
|
+ padding-top: 20rpx;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #f2f2f2;
|
|
|
+
|
|
|
+ .search {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ border-radius: 171rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .search {
|
|
|
- width: 750rpx;
|
|
|
- height: 90rpx;
|
|
|
- border-radius: 171rpx;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
+ .list {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ width: 750rpx;
|
|
|
+ background-color: #fff;
|
|
|
|
|
|
- .list {
|
|
|
- margin-top: 20rpx;
|
|
|
+ .control {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
width: 750rpx;
|
|
|
- min-height: 85vh;
|
|
|
- background-color: #fff;
|
|
|
+ height: 102rpx;
|
|
|
+ }
|
|
|
|
|
|
- .control {
|
|
|
+ .listbox {
|
|
|
+ .item {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- width: 750rpx;
|
|
|
- height: 102rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .listbox {
|
|
|
- .item {
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ height: 114rpx;
|
|
|
+ border-bottom: 1rpx solid #e5e5e5;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
- margin: 0 30rpx;
|
|
|
- height: 114rpx;
|
|
|
- border-bottom: 1rpx solid #E5E5E5;
|
|
|
- background-color: #fff;
|
|
|
-
|
|
|
- .left {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 70rpx;
|
|
|
- height: 70rpx;
|
|
|
- border-radius: 35rpx;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .center {
|
|
|
- flex: 5;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-evenly;
|
|
|
- margin-left: 10rpx;
|
|
|
- height: 90rpx;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 28rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .college {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #808080;
|
|
|
- }
|
|
|
+ img {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ border-radius: 35rpx;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ .center {
|
|
|
+ flex: 5;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ height: 90rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
+
|
|
|
+ .college {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #808080;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 28rpx;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .listbox2 {
|
|
|
- margin-top: 230rpx;
|
|
|
- text-align: center;
|
|
|
+ .listbox2 {
|
|
|
+ margin-top: 230rpx;
|
|
|
+ text-align: center;
|
|
|
|
|
|
- img {
|
|
|
- width: 480rpx;
|
|
|
- height: 508rpx;
|
|
|
- }
|
|
|
+ img {
|
|
|
+ width: 480rpx;
|
|
|
+ height: 508rpx;
|
|
|
+ }
|
|
|
|
|
|
- .info {
|
|
|
- color: #5792F0;
|
|
|
- }
|
|
|
+ .info {
|
|
|
+ color: #5792f0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- // 解决输入框不居中问题
|
|
|
- ::v-deep .uni-searchbar {
|
|
|
- padding: 10rpx;
|
|
|
- }
|
|
|
+// 解决输入框不居中问题
|
|
|
+::v-deep .uni-searchbar {
|
|
|
+ padding: 10rpx;
|
|
|
+}
|
|
|
</style>
|
