326 lines
8.2 KiB
Vue
326 lines
8.2 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="header">
|
||
<view class="left-text">
|
||
<rudon-rowMenuDotDotDot style="color: #000;" :localdata="leftDropList" @change="leftDropAction($event)">
|
||
<text class="mall-filter-text">{{ leftDropName }}</text>
|
||
<u-icon name="arrow-down" color="#101010" size="12"></u-icon>
|
||
</rudon-rowMenuDotDotDot>
|
||
</view>
|
||
<view class="right-text">
|
||
|
||
<rudon-rowMenuDotDotDot style="color: #000;" :localdata="rightDropList"
|
||
@change="rightDropAction($event)">
|
||
<text class="mall-filter-text">{{rightDropName}}</text>
|
||
<u-icon name="arrow-down" color="#101010" size="12"></u-icon>
|
||
</rudon-rowMenuDotDotDot>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="card-list" v-if="recordlist.length > 0">
|
||
<view
|
||
:class="{'card-item':true,'card-item-green':index%3==0,'card-item-yellow':index%3==1,'card-item-purple':index%3==2}"
|
||
v-for="(item,index) in recordlist" :key="index">
|
||
<view class="card-item-left">
|
||
<view class="card-item-left-title">{{item.tableName}}</view>
|
||
<view class="card-item-left-name">姓名：{{item.username}}</view>
|
||
<view class="card-item-left-age">年龄：{{item.age}}岁</view>
|
||
<view class="card-item-left-date">测评日期：{{item.createTime.replace('T',' ').replace('.000+08:00','')}}
|
||
</view>
|
||
</view>
|
||
<view class="card-item-right">
|
||
<view class="answer" @click="recordDetail(item.recordId)">
|
||
作答详情
|
||
</view>
|
||
<view class="report" @click="viewTest(item.recordId)">
|
||
查看报告
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
recordlist: [],
|
||
leftDropName: "全部",
|
||
// 左边菜单内容
|
||
leftDropList: [{
|
||
value: '全部',
|
||
text: '全部'
|
||
}],
|
||
rightDropName: "全部",
|
||
// 左边菜单内容
|
||
rightDropList: [{
|
||
value: '全部',
|
||
text: '全部'
|
||
}],
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 5,
|
||
tableType: '',
|
||
username: ''
|
||
},
|
||
|
||
loading: '',
|
||
}
|
||
},
|
||
|
||
onLoad() {
|
||
this.getRecordList();
|
||
this.getDropList()
|
||
},
|
||
onReachBottom() {
|
||
if (this.loading == 'more') {
|
||
this.pageNum++;
|
||
this.getRecordList();
|
||
}
|
||
|
||
},
|
||
methods: {
|
||
viewTest(recordId) {
|
||
uni.navigateTo({
|
||
url: `/tablePackage/pages/testRecord?recordId=${recordId}`
|
||
})
|
||
},
|
||
recordDetail(recordId) {
|
||
uni.navigateTo({
|
||
url: `/minePackage/pages/recordDetail?recordId=${recordId}`
|
||
})
|
||
},
|
||
async getRecordList() {
|
||
const res = await this.$myRequest({
|
||
url: '/system/record/recordList',
|
||
data: this.queryParams
|
||
})
|
||
for (let i = 0; i < res.data.rows.length; i++) {
|
||
res.data.rows[i].age = this.getCurrentAgeByBirthDate(res.data.rows[i].birthday)
|
||
res.data.rows[i].tableName = JSON.parse(uni.getStorageSync(res.data.rows[i].tableType))
|
||
.tableInfo
|
||
.tableName;
|
||
}
|
||
|
||
if (res.data.rows.length >= this.pageSize) {
|
||
this.loading = 'more';
|
||
} else {
|
||
this.loading = 'noMore';
|
||
}
|
||
this.recordlist = this.recordlist.concat(res.data.rows);
|
||
|
||
},
|
||
|
||
async getDropList() {
|
||
const left = await this.$myRequest({
|
||
url: '/system/children/userChildrenslist'
|
||
})
|
||
|
||
for (let i = 0; i < left.data.rows.length; i++) {
|
||
this.leftDropList.push({
|
||
value: left.data.rows[i].username,
|
||
text: left.data.rows[i].username
|
||
})
|
||
}
|
||
const right = await this.$myRequest({
|
||
url: '/system/table/list'
|
||
})
|
||
|
||
for (let i = 0; i < right.data.rows.length; i++) {
|
||
this.rightDropList.push({
|
||
value: right.data.rows[i].tableAlias,
|
||
text: right.data.rows[i].tableName
|
||
})
|
||
}
|
||
},
|
||
|
||
leftDropAction(e) {
|
||
this.pageNum = 1
|
||
if (e === '') {
|
||
return
|
||
} else if (e == '全部') {
|
||
this.queryParams.username = ''
|
||
} else {
|
||
this.queryParams.username = e
|
||
}
|
||
this.recordlist = []
|
||
this.getRecordList()
|
||
this.leftDropName = e
|
||
},
|
||
rightDropAction(e) {
|
||
this.pageNum = 1
|
||
if (e === '') {
|
||
return
|
||
} else if (e == '全部') {
|
||
this.queryParams.tableType = ''
|
||
} else {
|
||
this.queryParams.tableType = e
|
||
}
|
||
this.recordlist = []
|
||
this.getRecordList()
|
||
// this.rightDropName = e
|
||
|
||
let rightRow = this.rightDropList.find(item => {
|
||
return item.value == e
|
||
})
|
||
console.log(rightRow);
|
||
this.rightDropName = rightRow.text
|
||
|
||
},
|
||
viewReport() {
|
||
uni.navigateTo({
|
||
url: "/homePackage/pages/testRecord"
|
||
})
|
||
},
|
||
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">
|
||
u-icon {
|
||
margin-top: 4rpx;
|
||
margin-left: 6rpx;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 80rpx;
|
||
font-size: 16px;
|
||
color: #101010;
|
||
|
||
.left-text,
|
||
.right-text {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 60rpx;
|
||
margin-right: 60rpx;
|
||
}
|
||
}
|
||
|
||
.card-list {
|
||
width: 100%;
|
||
|
||
.card-item {
|
||
position: relative;
|
||
width: 90%;
|
||
height: 220rpx;
|
||
margin: 0 auto;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: 0rpx 4rpx 12rpx 0rpx #E4E4E4;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.card-item-left {
|
||
margin-left: 50rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.card-item-left-title {
|
||
font-size: 38rpx;
|
||
font-weight: bold;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.card-item-left-name,
|
||
.card-item-left-age,
|
||
.card-item-left-date {
|
||
font-size: 24rpx;
|
||
margin-top: 5rpx;
|
||
}
|
||
}
|
||
|
||
.card-item-right {
|
||
margin-right: 50rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.answer,
|
||
.report {
|
||
color: #fff;
|
||
background-color: #FFA521;
|
||
border-radius: 10rpx;
|
||
padding: 10rpx 20rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.report {
|
||
background-color: #287CCE;
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-item::after {
|
||
content: "";
|
||
display: inline-block;
|
||
position: absolute;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
top: 15rpx;
|
||
left: 15rpx;
|
||
background-color: #0EBD8D;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.card-item-green::after {
|
||
background-color: #0EBD8D;
|
||
}
|
||
|
||
.card-item-yellow::after {
|
||
background-color: #FFA521;
|
||
}
|
||
|
||
.card-item-purple::after {
|
||
background-color: #6E67EA;
|
||
}
|
||
}
|
||
}
|
||
</style> |