<template>
<view style="position:relative;">
<view style="position:absolute;
width: 100%;
height: 40rpx;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
background-color: #272b31">
</view>
<view class="uni-list">
<view class="uni-list-left">
日期选择
</view>
<view class="uni-list-cell-db">
<picker mode="date" :value="start_date" :start="start_date" :end="other" @change="bindDateChange">
<view class="date">{
{
start_date}}</view>
</picker>
</view>
<view class="to">
至
</view>
<view class="uni-list-cell-db2">
<picker mode="date" :value="start_date" :start="start_date" @change="bindDateChange2">
<view class="date">{
{
other}}</view>
</picker>
</view>
</view>
<view class="reaserch" @click="rearch">
查询
</view>
<view class="uni-container">
<view v-for="(item, index) in itemList" :key="index">
<view class="i-div">
<view class="i-date">
<view class="i-date-1">
日期:
</view>
<view class="i-date-2">
{
{
item.createTime}}
</view>
<view class="a-i-image" v-if="item.eventScore===0">
<image style="width:140rpx;height:120rpx;" src="/static/images/banner/crash.png">
</view>
</view>
<view class="uni-box">
<!-- 名称 -->
<view class="i-div-two">
<view class="uni-name">{
{
item.eventName}}</view>
<view class="i-split">
</view>
<view class="i-detail" @click="detail(item.id,item.eventScore,item.tableNo)">
点击查看详情
</view>
</view>
<view class="i-div-two">
<!-- 分数 -->
<view class="i-score-taxt">
综合得分
</view>
<view class="i-score">
{
{
item.eventScore }}
</view>
</view>
<view class="i-div-three">
<view class="score-status-taxt">
成绩状态
</view>
<view class="score-status">
{
{
item.scoreStatus}}
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
listRules
} from "@/api/eventRules";
import config from '@/config'
import {
getToken
} from '@/utils/auth'
export default {
data() {
const currentDate = this.getDate({
format: true
})
return {
itemList: [],
start_date: currentDate,
end_date: currentDate,
other: '请输入'
}
},
onLoad() {
this.getList();
},
methods: {
getList() {
listRules().then(response => {
this.itemList = response.rows;
});
},
rearch(){
var queryParams = {
startDate : this.start_date,
endDate :this.end_date
}
listRules(queryParams).then(response => {
this.itemList = response.rows;
});
},
detail(id, eventScore, tableNo) {
this.$tab.navigateTo('/pages/work/eventRules/eventRulesDetail/eventRulesDetail?id=' + id + '&eventScore=' +
eventScore + '&tableNo=' + tableNo)
},
// 选择日期
bindDateChange: function(e) {
this.start_date = e.target.value
},
bindDateChange2: function(e) {
this.end_date = e.target.value;
this.other = this.end_date;
},
// 获取当前时间
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;;
day = day > 9 ? day : '0' + day;
return `${
year}-${
month}-${
day}`;
},
}
}
</script>
<style>
page {
background-color: #191c21;
}
.uni-container {
padding: 25% 5% 15% 5%;
margin-bottom: 100px;
}
.uni-box {
padding-bottom: 8%;
display: flex;
flex-direction: row;
align-items: center;
}
.i-div {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
width: 100%;
height: 130px;
background-color: #2d313a;
padding-bottom: 2%;
margin-bottom: 10%;
}
.i-div-two {
}
.i-div-three {
align-items: center;
}
.uni-group {
display: flex;
align-items: center;
}
.i-detail {
color: #6b6d70;
margin: 80rpx 65rpx;
letter-spacing: 2px
}
.uni-name {
font-size: 30rpx;
color: #b7bbc2;
margin: 45rpx 60rpx -50rpx;
letter-spacing: 2.5px
}
.i-score-taxt {
padding-left: 30rpx;
font-size: 12px;
color: #b7bbc2;
letter-spacing: 2px
}
.i-score {
padding-left: 60rpx;
font-size: 15px;
color: #fb4f0c;
}
.i-split {
position: absolute;
width: 230rpx;
height: 5rpx;
border-radius: 5rpx;
margin: 70rpx 40rpx;
background-color: rgb(255 255 255 / 30%)
}
.score-status-taxt {
padding-left: 55rpx;
font-size: 13px;
color: #b7bbc2;
letter-spacing: 2px
}
.score-status {
padding-left: 75rpx;
font-size: 13px;
color: #13e126;
letter-spacing: 2px;
align-items: center;
}
.score-status-not {
padding-left: 60rpx;
font-size: 13px;
color: red;
letter-spacing: 2px
}
.i-date {
padding-left: 50rpx;
padding-top: 20rpx;
display: flex;
align-items: center;
letter-spacing: 2px
}
.i-date-1 {
padding: 20rpx 20rpx 0 5rpx;
font-size: 12px;
color: #b7bbc2;
}
.i-date-2 {
padding: 25rpx 0rpx 0rpx 5rpx;
font-size: 12px;
color: #b7bbc2;
}
.a-i-image {
position: absolute;
padding: 10rpx 450rpx;
}
.uni-list {
position: absolute;
margin-left: 8%;
margin-top: 10%;
font-size: 12px;
color: #b7bbc2;
background-color: #26272a;
width: 500rpx;
height: 70rpx;
display: flex;
flex-direction: row;
}
.uni-list-left {
margin-left: 5%;
margin-top: 4%;
letter-spacing: 2px;
}
.uni-list-cell-db {
margin-left: 7%;
margin-top: 5%;
}
.uni-list-cell-db2 {
position: absolute;
margin-top: 5%;
margin-left: 72%;
}
.reaserch {
color: #b7bbc2;
margin-left: 80%;
margin-top: 10%;
font-size: 12px;
position: absolute;
width: 80rpx;
height: 70rpx;
display: flex;
background-color: #26272a;
align-items: center;
justify-content: center;
}
.to {
position: absolute;
margin-left: 62%;
margin-top: 4%;
width: 80rpx;
height: 70rpx;
}
</style>
时间区间查询,前端 后端实现
猜你喜欢
转载自blog.csdn.net/m0_56095048/article/details/129023629
今日推荐
周排行