index_t.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <link rel="stylesheet" href="css/bootstrap.css">
  8. <script src="js/jquery-3.2.1.js"></script>
  9. <script src="js/bootstrap.js"></script>
  10. <script src="js/vue.js"></script>
  11. <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
  12. <script src="https://web.tianyunperfect.cn/simple/js/util.js"></script>
  13. <title>记梦模版</title>
  14. <script src="js/jquery.flexText.js"></script>
  15. <link rel="stylesheet" href="css/style.css">
  16. <style>
  17. body {
  18. /*padding-top: 70px;*/
  19. }
  20. </style>
  21. </head>
  22. <body class="container">
  23. <br>
  24. <div id="mydiv" data-spy="scroll" data-target="#navbar-example" data-offset="0">
  25. <form class="form-horizontal" role="form">
  26. <div class="form-group" id="time">
  27. <label for="dreamtime" class="col-sm-1 control-label">时间:</label>
  28. <div class="col-sm-2">
  29. <input type="date" class="form-control select" id="dreamtime" v-model="dream_time">
  30. </div>
  31. </div>
  32. <div class="form-group" id="method">
  33. <label for="dream_method" class="col-sm-1 control-label">方法:</label>
  34. <div class="col-sm-2">
  35. <input type="text" id="dream_method" class="form-control" v-model="dream_method" placeholder="回笼、暗示">
  36. </div>
  37. </div>
  38. <div class="form-group" id="type">
  39. <label class="col-sm-1 control-label">类型:</label>
  40. <div class="col-sm-1" v-for="(type, index) in ['普通梦','半明梦','清明梦']" :key="index">
  41. <label>
  42. <input type="radio" :name="type" :value="type" v-model="dream_type"> {{ type }}
  43. </label>
  44. </div>
  45. </div>
  46. <div class="form-group" id="name">
  47. <label for="dream_name" class="col-sm-1 control-label">梦名:</label>
  48. <div class="col-sm-2">
  49. <input type="text" id="dream_name" class="form-control" v-model="dream_name" placeholder="梦的名字">
  50. </div>
  51. </div>
  52. <div class="form-group" id="data">
  53. <label for="dream_data" class="col-sm-1 control-label">内容:</label>
  54. <div class="col-sm-11">
  55. <textarea id="dream_data" class="form-control" v-model="dream_data" v-on:input="change" placeholder="你梦见什么了?"> </textarea>
  56. </div>
  57. </div>
  58. <div class="form-group" id="all">
  59. <label for="" class="col-sm-1 control-label">结果:</label>
  60. <div class="col-sm-11">
  61. <div class="dreamall">
  62. <p>
  63. <b>时间:</b>{{ dream_time }} ;
  64. <b>梦名:</b>{{ dream_name }} ;
  65. <b>方法:</b>{{ dream_method }} ;
  66. <b>类型:</b>{{ dream_type }}
  67. <br>
  68. <b>内容:</b><br><span v-html="dreamdata_html">{{dreamdata_html}}</span>
  69. </p>
  70. </div>
  71. </div>
  72. </div>
  73. <button type="button" @click="send">发送</button>
  74. </form>
  75. </div>
  76. <script>
  77. function IsBig(m) {
  78. if (m < 10) {
  79. return "0" + m;
  80. } else {
  81. return m
  82. }
  83. }
  84. function getDate() {
  85. date = new Date();
  86. y = date.getFullYear();
  87. m = date.getMonth() + 1;
  88. d = date.getDate();
  89. m = IsBig(m)
  90. d = IsBig(d)
  91. return y + "-" + m + "-" + d
  92. }
  93. function gethtml(strContent) {
  94. strContent = String(strContent);
  95. strContent = strContent.replace(/\r\n/g, '<br/>'); //IE9、FF、chrome
  96. strContent = strContent.replace(/\n/g, '<br/>'); //IE7-8
  97. strContent = strContent.replace(/\s/g, ' '); //空格处理
  98. return strContent;
  99. }
  100. let app = new Vue({
  101. el: "#mydiv",
  102. data: {
  103. dream_time: getDate(),
  104. dream_method: "无",
  105. dream_type: "普通梦",
  106. dream_name: "",
  107. dream_data: "",
  108. dream_summary: "",
  109. dreamdata_html: "",
  110. dreamsummary_html: "",
  111. },
  112. computed: {},
  113. methods: {
  114. change: function () {
  115. this.dreamdata_html = gethtml(this.dream_data);
  116. this.dreamsummary_html = gethtml(this.dream_summary);
  117. },
  118. //发送梦境数据
  119. send: function () {
  120. let data = {
  121. content: `时间:${app.dream_time} ; 梦名:${app.dream_name} ; 方法:${app.dream_method} ; 类型:${app.dream_type}
  122. ${app.dream_data}
  123. #梦记`
  124. }
  125. let authStr = "bearer eyJhbGciOiJIUzI1NiIsImtpZCI6InYxIiwidHlwIjoiSldUIn0.eyJuYW1lIjoidGlhbnl1bnBlcmZlY3QiLCJpc3MiOiJtZW1vcyIsInN1YiI6IjEiLCJhdWQiOlsidXNlci5hY2Nlc3MtdG9rZW4iXSwiaWF0IjoxNzA5MTc5NTUyfQ.LFxWB4efya1sL7VoJ42xpXxbAip-udT_Kx2OwZ8Y3-E";
  126. let myHeaders = {
  127. 'Content-type': 'application/json',
  128. 'Authorization': authStr
  129. };
  130. requestUtil.async('https://memos.tianyunperfect.cn/api/v1/memo', 'post', data, myHeaders).then(res => {
  131. if (res['id']) {
  132. window.location.href = `https://memos.tianyunperfect.cn/m/${res['name']}`;
  133. }
  134. });
  135. }
  136. }
  137. });
  138. </script>
  139. <script>
  140. $(function () {
  141. $("#dream_data").flexText();
  142. $("#dream_summary").flexText();
  143. });
  144. </script>
  145. </body>
  146. </html>