tianyunperfect
/
web-base--


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
							<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

    <title>记梦模版</title>
    <script src="js/jquery.flexText.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            /*padding-top: 70px;*/
        }
    </style>
</head>

<body class="container">
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">记梦模版</a>
        </div>
        <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
            <ul class="nav navbar-nav">
                <li><a href="#time">时间</a></li>
                <li><a href="#method">方法</a></li>
                <li><a href="#type">类型</a></li>
                <li><a href="#name">梦名</a></li>
                <li><a href="#data">内容</a></li>
                <li><a href="#summary">总结</a></li>
            </ul>
        </div>
    </div>
</nav>
<div id="mydiv" data-spy="scroll" data-target="#navbar-example" data-offset="0">
    <form class="form-horizontal" role="form">
        <div class="form-group" id="time">
            <label for="dreamtime" class="col-sm-1 control-label">时间：</label>
            <div class="col-sm-2">
                <input type="date" class="form-control select" id="dreamtime" v-model="dream_time">
            </div>
        </div>
        <div class="form-group" id="method">
            <label for="dream_method" class="col-sm-1 control-label">方法：</label>
            <div class="col-sm-2">
                <input type="text" id="dream_method" class="form-control" v-model="dream_method" placeholder="回笼、暗示">
            </div>
        </div>
        <div class="form-group" id="type">
            <label class="col-sm-1 control-label">类型：</label>

            <div class="col-sm-1" v-for="(type, index) in ['普通梦','半明梦','清明梦']" :key="index">
                <label>
                    <input type="radio" :name="type" :value="type" v-model="dream_type"> {{ type }}
                </label>
            </div>
        </div>
        <div class="form-group" id="name">
            <label for="dream_name" class="col-sm-1 control-label">梦名：</label>
            <div class="col-sm-2">
                <input type="text" id="dream_name" class="form-control" v-model="dream_name" placeholder="梦的名字">
            </div>
        </div>

        <div class="form-group" id="data">
            <label for="dreamdata" class="col-sm-1 control-label">内容：</label>
            <div class="col-sm-11">
                <textarea id="dreamdata" class="form-control" v-model="dream_data" v-on:input="change" placeholder="你梦见什么了？"> </textarea>
            </div>
        </div>
        <div class="form-group" id="summary">
            <label for="dreamsummary" class="col-sm-1 control-label">总结：</label>
            <div class="col-sm-11">
                <textarea type="text" id="dreamsummary" class="form-control" v-model="dream_summary" v-on:input="change" placeholder="这次获得了什么经验？"></textarea>
            </div>
        </div>
        <div class="form-group" id="all">
            <label for="" class="col-sm-1 control-label">结果：</label>
            <div class="col-sm-11">
                <div class="dreamall">
                    <p>
                        <b>时间：</b>{{ dream_time }}
                        <br>
                        <b>方法：</b>{{ dream_method }}
                        <br>
                        <b>类型：</b>{{ dream_type }}
                        <br>
                        <b>梦名：</b>{{ dream_name }}
                        <br><br>
                        <b>内容：</b><br><span v-html="dreamdata_html">{{dreamdata_html}}</span>
                        <br><br>
                        <b>总结：</b><br><span v-html="dreamsummary_html">{{dreamsummary_html}}</span>
                    </p>
                </div>
            </div>
        </div>
        <button @click="send">发送</button>
    </form>
</div>
<script>
    function IsBig(m) {
        if (m < 10) {
            return "0" + m;
        } else {
            return m
        }
    }

    function getDate() {
        date = new Date();
        y = date.getFullYear();
        m = date.getMonth() + 1;
        d = date.getDate();
        m = IsBig(m)
        d = IsBig(d)
        return y + "-" + m + "-" + d
    }

    function gethtml(strContent) {
        strContent = String(strContent);
        strContent = strContent.replace(/\r\n/g, '<br/>'); //IE9、FF、chrome
        strContent = strContent.replace(/\n/g, '<br/>'); //IE7-8
        strContent = strContent.replace(/\s/g, ' '); //空格处理
        return strContent;
    }

    let app = new Vue({
        el: "#mydiv",
        data: {
            dream_time: getDate(),
            dream_method: "无",
            dream_type: "普通梦",
            dream_name: "",
            dream_data: "",
            dream_summary: "",
            dreamdata_html: "",
            dreamsummary_html: "",
        },
        computed: {},
        methods: {
            change: function () {
                this.dreamdata_html = gethtml(this.dream_data);
                this.dreamsummary_html = gethtml(this.dream_summary);
            },
            //发送梦境数据
            send: async function () {
                let res = await fetch('https://memos.tianyunperfect.cn/api/v1/memo?openId=043a086f-e0a3-4711-aa79-5c3cbe89f97c', {
                    method: 'POST', headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({
                        content: `时间:${app.dream_time}
                                方法:${app.dream_method}
                                类型:${app.dream_type}
                                梦名:${app.dream_name}

                                内容:
                                ${app.dream_data}
                                总结:
                                ${app.dream_summary}
                                #梦记`
                    })
                })

                let data = await res.json()
                if (data['id']) {
                    window.location.href = `https://memos.tianyunperfect.cn/m/${data['id']}`;
                }
                console.log(data)
            }

        }
    });
</script>
<script>
    $(function () {
        $("#dream_data").flexText();
        $("#dream_summary").flexText();


    });
</script>
</body>

</html>