1、目标效果

在这里插入图片描述

2、请求数据一般格式

在这里插入图片描述

3、将请求到的数据进行处理

（1）根据时间进行渲染，每一个时间中有多项，则需要进行两次v-for循环
（2）每一天的数据应是一个{日期: 当天学习数据数组}，因此将list设置为对象，键名为日期，具体的数据为数组
（3）这样写的结果是页面什么都不显示（我也不知道为什么），但是显示list已经是我们想要的数据结构

new Vue({
    el: '#app',
    data() {
        return {
            list: {}
        }
    },
    mounted: function () {
        this.init();
    },
    methods: {
        initData: function () {
            var that = this;
            // 发起请求
            request('/study_history', {}, function (ret) {
                // 将返回的
                ret.page_data.forEach(item => {
                    // 如果list中没有以当前项日期为键名的键值对，则创建这个键值对，并将当前项存入日期对应的数组中；如果已经存在以当前项日期为键名的键值对，则将当前项直接存入
                    if (that.list[item.add_time] == undefined) {
                        that.list[item.add_time] = []
                    }
                    that.list[item.add_time].push(item)
                })
            })
        }
    }
})

4、解决方案（使用计算属性）

（1）设置list为数组，直接将历史记录存入list
（2）利用计算属性将list中的数据进行重构

new Vue({
    el: '#app',
    data() {
        return {
            list: []
        }
    },
    mounted: function () {
        this.initData();
    },
    computed: {
        historyList() {
            var that = this
            var obj = {}
            that.list.forEach(item => {
                if (obj[item.add_time] == undefined) {
                    obj[item.add_time] = []
                }
                obj[item.add_time].push(item)
            })
            return obj
        }
    },
    methods: {
        initData: function () {
            var that = this;
            request('/study_history', {}, function (ret) {
                that.list = ret.page_data
            })
        }
    }
});

5、页面结构及样式

<div class="flex page-padding">
    <div class="box padl14">
       <div v-for="(value,key) in historyList" class="day marb14">
            <div class="font15 txt-deep-gray marb14 relative-container">
                {{key}}
                <div class="circle absolute-container"></div>
            </div>
            <div v-for="item in value" class="item mart15">
                <div class="font15 marb5">{{item.name}}</div>
                <div class="flex flex-item-center txt-gray font13">
                    <div class="marr20">共{{item.duration}}分钟</div>
                    <div>已学习<span class="txt-red">{{item.progress}}%</span></div>
                </div>
            </div>
        </div>
    </div>
</div>

.flex {
    display: flex;
}

.flex-item-center {
    align-items: center;
}

.page-padding {
    padding: 0 15px;
}

.font13 {
    font-size: 13px;
}

.font15 {
    font-size: 15px;
}

.txt-deep-gray {
    color: #aaa;
}

.txt-gray {
    color: #f5f5f5;
}

.txt-red {
    color: #F84129;
}

.padl14 {
    padding-left: 14px;
}

.mart15 {
    margin-top: 15px;
}

.marb5 {
    margin-bottom: 5px;
}

.marb14 {
    margin-bottom: 14px;
}

.absolute-container {
    position: absolute;
}

.relative-container {
    position: relative;
}

.box {
    margin-top: 30px;
    border-left: 1px solid #ccc;
}

.box .day {
    transform: translateY(-10px);
}

.box .circle {
    background: #fff;
    border: 1px solid ##F59689;
    width: 7px;
    height: 7px;
    top: 8px;
    left: -18px;
}