tianyunperfect
/
web-base--


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
    <script src="https://web.tianyunperfect.cn/util.js"></script>
    <title>历史 URL 列表</title>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="https://api.map.baidu.com/api?v=2.0&ak=WMYeXwq7z0VcaiUXTuYTGPZsm8Selmfd"></script>
    <style>
        .container {
            width: 500px;
            height: 50px;
            margin: 20px auto;
        }
        .parent {
            width: 100%;
            height: 42px;
            top: 4px;
            position: relative;
        }

        .parent > input:first-of-type {
            /*输入框高度设置为40px, border占据2px，总高度为42px*/
            width: 380px;
            height: 40px;
            border: 1px solid #ccc;
            font-size: 16px;
            outline: none;
        }

        .parent > input:first-of-type:focus {
            border: 1px solid #317ef3;
            padding-left: 10px;
        }

        .parent > input:last-of-type {
            /*button按钮border并不占据外围大小，设置高度42px*/
            width: 100px;
            height: 44px;
            position: absolute;
            background: #317ef3;
            border: 1px solid #317ef3;
            color: #fff;
            font-size: 16px;
            outline: none;
        }
    </style>
</head>
<body>
<div id="tby">
    <div class="container">
        <form action="" class="parent">
            <input type="text" v-model="msg">
            <input type="button" value="搜索" @click="search">
        </form>
    </div>
    <table>
        <thead>
        <tr>
            <td>id</td>
            <td>时间</td>
            <td>网址</td>
            <td>url</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in list">
            <td>{{item.id}}</td>
            <td>{{new Date(item.create_time).format("yyyy-MM-dd hh:mm:ss")}}</td>
            <td>
                <a :href="item.url"
                   target="_blank">{{item.title}}</a>
            </td>
            <td>{{item.url}}</td>
        </tr>
        </tbody>
    </table>
    <!-- 分页按钮 -->
    <div class="page-icon">
        <button class="firstPage" @click="first_click">第一页</button>
        <button class="beforePage" @click="prev_click">上一页</button>
        <button>第<input v-model="page" @change="choose_page" type="text" value="1"/>页</button>
        <button class="nextPage" @click="next_click">下一页</button>
    </div>


</div>


<script>

    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            }
        }
        return fmt;
    }

    const scrollElement = (el) => {
        document.querySelector(el).scrollIntoView({behavior: 'smooth'});
    }

    let _this = new Vue({
        el: '#tby',
        data: {
            page: 1,
            size: 30,
            msg: "",
            list: []
        },
        mounted: function () {
            this.search();
        },
        methods: {
            first_click: function () {
                this.page = 1;
                this.search();
            },
            prev_click: function () {
                this.page -= 1;
                this.search();
            },
            choose_page: function () {
                this.search();
            },
            next_click: function () {
                this.page += 1;
                this.search();
            },
            getParam: function () {
                let obj = {};
                obj['title'] = this.msg;
                obj['page'] = this.page;
                obj['size'] = this.size;
                return obj;
            },
            search: function () {
                axios.get("https://api.tianyunperfect.cn/web_history/search", {params: this.getParam()}).then(res => {
                    if (res.data.code === 1) {
                        _this.list = res.data.data.list;
                    }
                });
            }
        }
    });


</script>
</body>
</html>