console
new Vue({
el: "#container",
data: {
contdats: [{
changeMoney: "1.00",
leftMoney: "2.00",
memo: "tessssssst",
addTime: "2019-02-12 14:19:48"
},
{
changeMoney: "1000.00",
leftMoney: "200.00",
memo: "tessdfadfasdfat",
addTime: "2019-02-13 12:19:48"
},
{
changeMoney: "1000.00",
leftMoney: "200.00",
memo: "tessdfadfasdfat",
addTime: "2019-02-13 12:19:48"
},
{
changeMoney: "1.00",
leftMoney: "2.00",
memo: "tessdfadfasdfat",
addTime: "2019-02-13 11:19:48"
},
{
changeMoney: "1.00",
leftMoney: "2.00",
memo: "tesadfasdfasdfst",
addTime: "2019-03-14 17:19:48"
},
{
changeMoney: "1.00",
leftMoney: "2.00",
memo: "tesadfasdfasdfst",
addTime: "2019-01-15 17:19:48"
},
{
changeMoney: "100.00",
leftMoney: "1002.00",
memo: "我是这条数据",
addTime: "2019-03-05 11:19:48"
},
{
changeMoney: "1.00",
leftMoney: "2.00",
memo: "tesadfasdfasdfst",
addTime: "2019-02-17 17:19:48"
}]
},
computed: {
newcontdats: function() {
let temp = {};
let end = [];
let self = this;
let list = this.contdats;
for (let i = 0; i < list.length; i++) {
let a = list[i];
if (!temp[self.showYearMonthv(a.addTime)]) {
end.push({
addTime: self.showYearMonthv(a.addTime),
data: [a]
});
temp[self.showYearMonthv(a.addTime)] = a;
} else {
for (let j = 0; j < end.length; j++) {
let b = end[j];
if (b.addTime == self.showYearMonthv(a.addTime)) {
b.data.push(a);
break;
}
}
}
};
return end;
}
},
filters: {
filterday: function(value) {
var day = value.substr(8, 2);
if (day.substr(0, 1) == 0) {
day = day.substr(1, 1);
}
return day;
},
filterdweek: function(value) {
var year = value.substr(0, 4);
var m = value.substr(5, 2);
if (m.substr(0.1) == 0) {
m = m.substr(1.1);
}
var month = m - 1;
var day = value.substr(8, 2);
if (day.substr(0, 1) == 0) {
day = day.substr(1, 1);
}
var date = new Date(year, month, day);
var week = date.getDay();
var wk = 0;
switch (week) {
case 0:
wk = "周末";
break;
case 1:
wk = "周一";
break;
case 2:
wk = "周二";
break;
case 3:
wk = "周三";
break;
case 4:
wk = "周四";
break;
case 5:
wk = "周五";
break;
case 6:
wk = "周六";
break;
}
return wk;
}
},
methods: {
newdays: function(oldVal) {
let temp = {};
let end = [];
let self = this;
let list = oldVal;
for (let i = 0; i < list.length; i++) {
let a = list[i];
if (!temp[a.addTime.substr(8, 2)]) {
end.push({
addTime: a.addTime.substr(8, 2),
data: [a]
});
temp[a.addTime.substr(8, 2)] = a;
} else {
for (let j = 0; j < end.length; j++) {
let b = end[j];
if (b.addTime == a.addTime.substr(8, 2)) {
b.data.push(a);
break;
}
}
}
};
console.log(JSON.stringify(end));
return end;
},
//显示年月
showYearMonthv: function(datetime) {
var year = datetime.substr(0, 4);
var month = datetime.substr(5, 2);
if (month.substr(0, 1) == 0) {
month = month.substr(1, 1);
}
return year + "年" + month + "月";
},
//显示周
showDayv: function(datetime) {
var self = this;
var day = datetime.substr(8, 2);
var date = self.getDatev(datetime);
var week = date.getDay();
var wk = 0;
switch (week) {
case 0:
wk = "周末";
break;
case 1:
wk = "周一";
break;
case 2:
wk = "周二";
break;
case 3:
wk = "周三";
break;
case 4:
wk = "周四";
break;
case 5:
wk = "周五";
break;
case 6:
wk = "周六";
break;
}
var html = "<dt>" + day + '</dt><dd class="aui-font-size-12 color-gray9">' + wk + "</dd>";
return html;
},
//创建时间
getDatev: function(datetime) {
var year = datetime.substr(0, 4);
var m = datetime.substr(5, 2);
if (m.substr(0.1) == 0) {
m = m.substr(1.1);
}
var month = m - 1;
var day = datetime.substr(8, 2);
if (day.substr(0, 1) == 0) {
day = day.substr(1, 1);
}
var date = new Date(year, month, day);
return date;
}
}
});
<div id="container">
<div class="aui-margin-t-10 back-write " v-for="contdat in newcontdats">
<h2 class="aui-padded-15 color-gray9 aui-font-size-14 aui-border-b">
{{ contdat.addTime}}
</h2>
<div class="aui-border-b aui-border-t balan-section" v-for="cotd in newdays(contdat.data)">
<dl class="balan-dl" v-for="cottd in cotd.data">
<dt>
{{cottd.addTime |filterday}}
</dt>
<dd class="aui-font-size-12 color-gray9">
{{cottd.addTime |filterdweek}}
</dd>
</dl>
<ul class="aui-border-l balan-right-ul">
<li class="aui-border-b aui-padded-10" v-for="cottd in cotd.data">
<p class="aui-font-size-16 color-black">
{{ cottd.memo }}
<span class="aui-pull-right">
{{ cottd.changeMoney }}
</span>
</p>
</li>
</ul>
</div>
</div>
</div>
.balan-section {
position: relative;
}
.balan-dl {
width: 15%;
text-align: center;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
height: 2rem;
}
.aui-border-l {
border-left: 1px solid #dddddd;
}
.aui-border-b {
border-bottom: 1px solid #dddddd;
}
.aui-border-t {
border-top: 1px solid #dddddd;
}
.balan-right-ul {
margin-left: 15%;
line-height: 1.1rem;
}
body {
background-color: #fff;
}
.aui-pull-right {
float: right !important;
}