267 lines
7.0 KiB
Vue
267 lines
7.0 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- <view class="bg-line" v-if="childrenslist.length > 0">
|
||
|
||
</view> -->
|
||
<view class="card-list" v-if="childrenslist.length > 0">
|
||
<view class="card-item" v-for="(item,index) in childrenslist" :key="index">
|
||
<view class="card-item-left">
|
||
<view class="card-item-left-line1">{{item.username}}</view>
|
||
<view class="card-item-left-line2">基本信息：{{item.sex+" "+item.age+"岁 "+item.birthday}}</view>
|
||
<view class="card-item-left-line3">身份证号：{{item.idCard == null ? '未填' : item.idCard}}</view>
|
||
<view class="card-item-left-line4">测试次数：{{item.recordCount+"次"}}</view>
|
||
<view class="card-item-left-line5">当前结果：{{item.lastRecordResult ? item.lastRecordResult : '无'}}
|
||
</view>
|
||
</view>
|
||
<view class="card-item-btn-del">
|
||
<u-icon name="trash" size="20" color="#FA3534"
|
||
@tap="userDelChildrenById(item.id,item.username)"></u-icon>
|
||
</view>
|
||
<view class="card-item-btn-edit">
|
||
<u-icon name="edit-pen" size="20" color="#1BD191" @tap="goUserEditChildren(item.id)"></u-icon>
|
||
</view>
|
||
<view class="card-item-btn-view" @click="viewTest(item.lastRecordId,item.recordCount)">
|
||
查看测试
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
|
||
<u-toast ref="uToast"></u-toast>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
childrenslist: []
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.userChildrenslist();
|
||
},
|
||
methods: {
|
||
viewTest(recordId, recordCount) {
|
||
if (!recordCount) {
|
||
return uni.showToast({
|
||
icon: 'error',
|
||
title: '尚未进行过测试'
|
||
})
|
||
}
|
||
uni.navigateTo({
|
||
url: `/tablePackage/pages/testRecord?recordId=${recordId}`
|
||
})
|
||
|
||
},
|
||
async userChildrenslist() {
|
||
const res = await this.$myRequest({
|
||
url: '/system/children/userChildrenslist'
|
||
})
|
||
for (let i = 0; i < res.data.rows.length; i++) {
|
||
|
||
res.data.rows[i].age = this.getCurrentAgeByBirthDate(res.data.rows[i].birthday)
|
||
}
|
||
this.childrenslist = res.data.rows
|
||
console.log(res);
|
||
},
|
||
userDelChildrenById(id, username) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认删除【' + username + '】？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
const res = this.$myRequest({
|
||
method: 'DELETE',
|
||
url: '/system/children/userDelChildrenById/' + id
|
||
})
|
||
this.$refs.uToast.show({
|
||
type: 'success',
|
||
message: '删除成功',
|
||
complete: () => {
|
||
this.userChildrenslist()
|
||
}
|
||
})
|
||
|
||
|
||
// console.log(res);
|
||
}
|
||
}
|
||
})
|
||
},
|
||
goUserEditChildren(id) {
|
||
uni.navigateTo({
|
||
url: "/minePackage/pages/BindChild?id=" + id
|
||
})
|
||
},
|
||
|
||
|
||
getCurrentAgeByBirthDate(strBirthday) {
|
||
// 将出生日期的字符串通过"-"分割成数组
|
||
const strBirthdayArr = strBirthday.split("-")
|
||
// 拿到出生日期的年
|
||
const birthYear = strBirthdayArr[0]
|
||
// 拿到出生日期的月
|
||
const birthMonth = strBirthdayArr[1]
|
||
// 拿到出生日期的日
|
||
const birthDay = strBirthdayArr[2]
|
||
// 创建一个时间对象
|
||
const d = new Date()
|
||
// 拿到当前时间的年
|
||
const nowYear = d.getFullYear()
|
||
// 拿到当前时间的月
|
||
const nowMonth = d.getMonth() + 1
|
||
// 拿到当前时间的日
|
||
const nowDay = d.getDate()
|
||
// 如果出生日期的年等于当前时间的年
|
||
if (nowYear === birthYear) return 0 // 返回周岁年龄 0,并终止函数执行
|
||
// 如果如果出生日期的年不等于于当前时间的年,则拿到年之差
|
||
const ageDiff = nowYear - birthYear; // 年之差
|
||
// 如果年之差是个负数,则表示用户输入的出生日期错误,晚于今天,返回 -1,并终止函数执行
|
||
if (ageDiff < 0) return -1 // 返回错误 -1,并终止函数执行
|
||
// 如果年之差是个正整数,但出生日期的月与当前时间的月不相等
|
||
if (nowMonth !== birthMonth) {
|
||
// 拿到出生日期的日与当前时间的月之差
|
||
const monthDiff = nowMonth - birthMonth; // 月之差
|
||
// 如果月之差是个负数,则年之差 - 1后得到周岁年龄,否则直接得到周岁年龄
|
||
return monthDiff < 0 ? ageDiff - 1 : ageDiff // 返回周岁年龄,并终止函数执行
|
||
}
|
||
// 如果出生日期的月与当前时间的月相等,则拿到出生日期的日与当前时间的日之差
|
||
const dayDiff = nowDay - birthDay;
|
||
// 如果日之差是个负数,则年之差 - 1得到周岁年龄,否则直接得到周岁年龄
|
||
return dayDiff < 0 ? ageDiff - 1 : ageDiff // 返回周岁年龄,并终止函数执行
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.card-list {
|
||
width: 100%;
|
||
position: fixed;
|
||
z-index: 2;
|
||
top: 100rpx;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
overflow-y: auto;
|
||
|
||
.card-item {
|
||
width: 90%;
|
||
height: 280rpx;
|
||
margin: 0 auto;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0rpx 4rpx 12rpx 0rpx #E4E4E4;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
|
||
.card-item-left {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin-left: 80rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
// justify-content: center;
|
||
|
||
.card-item-left-line1 {
|
||
width: 80%;
|
||
font-size: 38rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 10rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-item-left-line2,
|
||
.card-item-left-line3,
|
||
.card-item-left-line4,
|
||
.card-item-left-line5 {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
|
||
.card-item-btn-del {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
position: absolute;
|
||
right: 50rpx;
|
||
top: 10rpx;
|
||
border: 2rpx #FA3534 solid;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-item-btn-edit {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
position: absolute;
|
||
right: 50rpx;
|
||
top: 100rpx;
|
||
border: 2rpx #1BD191 solid;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-item-btn-view {
|
||
position: absolute;
|
||
right: 50rpx;
|
||
bottom: 40rpx;
|
||
background-color: #287BCE;
|
||
color: #fff;
|
||
border-radius: 10rpx;
|
||
padding: 10rpx 20rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.card-item::after {
|
||
content: "";
|
||
display: inline-block;
|
||
position: absolute;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
top: 15rpx;
|
||
left: 15rpx;
|
||
background-color: #287BCE;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
// .card-item::before {
|
||
// content: "";
|
||
// display: inline-block;
|
||
// position: absolute;
|
||
// width: 20rpx;
|
||
// height: 20rpx;
|
||
// bottom: 15rpx;
|
||
// left: 15rpx;
|
||
// background-color: #287BCE;
|
||
// border-radius: 50%;
|
||
// }
|
||
|
||
}
|
||
|
||
// .bg-line::before {
|
||
// content: "";
|
||
// position: absolute;
|
||
// z-index: 1;
|
||
// display: inline-block;
|
||
// left: calc(5% + 20rpx);
|
||
// top: 0rpx;
|
||
// bottom: 0rpx;
|
||
// width: 10rpx;
|
||
// background-color: #287BCE;
|
||
// }
|
||
</style> |