tj.html 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>{$info['title']}</title>
  8. <link rel="stylesheet" href="/static/mobile/css/weui.min.css">
  9. <link rel="stylesheet" href="/static/mobile/css/weuix.css">
  10. <style>
  11. body{
  12. background-color: #f2f2f2;
  13. }
  14. .main{
  15. margin: 0 auto;
  16. background-color: #ffffff;
  17. }
  18. .page-bd{
  19. padding-bottom: 30px;
  20. }
  21. .weui-form{
  22. padding-top: 0px;
  23. }
  24. .main-title{
  25. text-align: center;
  26. padding: 20px 0 10px 0;
  27. }
  28. .main-desc{
  29. text-indent: 30px;
  30. font-size: 15px;
  31. }
  32. @media only screen and (min-width: 750px){
  33. html {
  34. font-size: 16.6px !important;
  35. }
  36. }
  37. input, textarea {
  38. border: 1px solid #efefef !important;
  39. caret-color: #03aced !important;
  40. caret-color: var(--weui-BLUE) !important;
  41. }
  42. input:focus, textarea:focus {
  43. border: 1px solid #03aced !important;
  44. caret-color: #03aced !important;
  45. caret-color: var(--weui-BLUE) !important;
  46. }
  47. .weui-form-checkbox[type="radio"]:checked + label .weui-icon-radio {
  48. background-color: #03aced;
  49. border: 1px solid #03aced;
  50. }
  51. .weui-form-checkbox[type="checkbox"]:checked + label .weui-icon-checkbox {
  52. background-color: #03aced;
  53. border: 1px solid #03aced;
  54. }
  55. .weui-btn_primary {
  56. background-color: #03aced !important;
  57. /*background-color: var(--weui-BRAND);*/
  58. }
  59. .max-limit {
  60. color: rgba(0,0,0,.5);
  61. color: var(--weui-FG-1);
  62. font-size: 14px;
  63. line-height: 1.4;
  64. }
  65. .weui-input{
  66. padding: 5px;
  67. }
  68. </style>
  69. </head>
  70. <body>
  71. <div class="main">
  72. <div style="float: left;margin: 10px"><a href="{:url('index')}?option=3">返回上一页</a></div>
  73. <div style="float: right;padding-right: 50px;
  74. padding-top: 8px;"><a href="{:url('tjExport',['id'=>$info['id']])}">导出</a></div>
  75. <h2 class="main-title">{$info['title']}</h2>
  76. <div class="main-desc">
  77. {$info['description']}
  78. </div>
  79. <form id="myform">
  80. <input type="hidden" name="id" value="{$info['id']}">
  81. <div class="page-bd" id="vueapp">
  82. <div v-for="(item,index) in question" :key="index">
  83. <div v-if="item.required" class="weui-cells__title weui-start"> {{index + 1}} . {{item.title}}</div>
  84. <div v-if="!item.required" class="weui-cells__title"> {{index + 1}} . {{item.title}}</div>
  85. <div v-if="item.remark" class="weui-cells__title" style="text-indent: 30px;">{{item.remark}}</div>
  86. <div class="weui-form" v-if="item.type === 'radio'">
  87. <div v-for="(item2,index2) in item.answer" :key="index" class="weui-form-li">
  88. <input class="weui-form-checkbox" type="radio">
  89. <label :for="`f${item2.id}`"><i class="weui-icon-radio"></i>
  90. <div class="weui-form-text"><p>{{item2.text}}({{item2.count}})({{item2.count1}})</p></div>
  91. </label>
  92. </div>
  93. </div>
  94. <div class="weui-form" v-if="item.type === 'checkbox'">
  95. <div v-for="(item2,index2) in item.answer" :key="index" class="weui-form-li">
  96. <input class="weui-form-checkbox" disabled type="checkbox">
  97. <label :for="`f${item2.id}`"><i class="weui-icon-checkbox"></i>
  98. <div class="weui-form-text"><p>{{item2.text}}({{item2.count}})({{item2.count1}})</p></div>
  99. </label>
  100. </div>
  101. </div>
  102. <div class="weui-form" v-if="item.type === 'text'||item.type === 'textarea'">
  103. <div class="weui-form-li">
  104. 共{{item.answer}}条提交记录&nbsp; <a :url="`{:url('answer',['id'=>$info['id']],false,false)}/qid/${item.id}`" href="javascript:;" :data-title="`${item.title}`" onclick="layer_open(this,0)">查看</a>
  105. </div>
  106. </div>
  107. <div class="weui-form" v-if="item.type === 'star'">
  108. <div class="weui-form-li">
  109. <div>
  110. <span>{{item.star_min_text}}</span>
  111. <span style="float: right;">{{item.star_max_text}}</span>
  112. </div>
  113. <table border="0">
  114. <tr>
  115. <td v-for="(item2,index2) in item.answer" :key="index2">
  116. <input class="weui-form-checkbox" disabled type="radio">
  117. <label :for="`star${index2}`">
  118. <i class="weui-icon-radio"></i>
  119. <div class="weui-form-text">
  120. <p>{{item2.text}}({{item2.count}})({{item2.count1}})</p>
  121. </div>
  122. </label>
  123. </td>
  124. </tr>
  125. </table>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. </form>
  131. </div>
  132. <script src="/static/jquery-1.11.3.min.js"></script>
  133. <script src="/static/layer3.2.0/layer.js"></script>
  134. <script type="text/javascript" src="/static/vuejs/require.js"></script>
  135. <script src="/admin/js/common.js"></script>
  136. <script>
  137. var question = {:json_encode($info['questions'])};
  138. console.log(question);
  139. require.config({
  140. urlArgs: "ver=1.0_0",
  141. paths:{
  142. "vue":'/static/vuejs/vue.min2'
  143. },
  144. shim:{
  145. 'vue':{
  146. exports:'vue'
  147. }
  148. }
  149. });
  150. require(['vue'],function(Vue,draggable){
  151. var vm = new Vue({
  152. el: '#vueapp',
  153. data: {
  154. question: question
  155. },
  156. computed: {
  157. resoptions: function () {
  158. return JSON.parse(JSON.stringify(this.question));
  159. }
  160. },
  161. watch: {
  162. resoptions: function (newval, oldval) {
  163. this.formatData();
  164. },
  165. },
  166. created: function () {
  167. // this.question.forEach((item) => {
  168. // const info = item;
  169. // });
  170. this.formatData();
  171. },
  172. methods: {
  173. formatData(){
  174. console.log(this.question);
  175. },
  176. }
  177. })
  178. });
  179. </script>
  180. </body>
  181. </html>