tj.html 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  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;margin: 10px"><a href="{:url('tjExport',['id'=>$info['id']])}">导出</a></div>
  74. <h2 class="main-title">{$info['title']}</h2>
  75. <div class="main-desc">
  76. {$info['description']}
  77. </div>
  78. <form id="myform">
  79. <input type="hidden" name="id" value="{$info['id']}">
  80. <div class="page-bd" id="vueapp">
  81. <div v-for="(item,index) in question" :key="index">
  82. <div v-if="item.required" class="weui-cells__title weui-start"> {{index + 1}} . {{item.title}}</div>
  83. <div v-if="!item.required" class="weui-cells__title"> {{index + 1}} . {{item.title}}</div>
  84. <div v-if="item.remark" class="weui-cells__title" style="text-indent: 30px;">{{item.remark}}</div>
  85. <div class="weui-form" v-if="item.type === 'radio'">
  86. <div v-for="(item2,index2) in item.answer" :key="index" class="weui-form-li">
  87. <input class="weui-form-checkbox" type="radio">
  88. <label :for="`f${item2.id}`"><i class="weui-icon-radio"></i>
  89. <div class="weui-form-text"><p>{{item2.text}}({{item2.count}})({{item2.count1}})</p></div>
  90. </label>
  91. </div>
  92. </div>
  93. <div class="weui-form" v-if="item.type === 'checkbox'">
  94. <div v-for="(item2,index2) in item.answer" :key="index" class="weui-form-li">
  95. <input class="weui-form-checkbox" disabled type="checkbox">
  96. <label :for="`f${item2.id}`"><i class="weui-icon-checkbox"></i>
  97. <div class="weui-form-text"><p>{{item2.text}}({{item2.count}})({{item2.count1}})</p></div>
  98. </label>
  99. </div>
  100. </div>
  101. <div class="weui-form" v-if="item.type === 'text'||item.type === 'textarea'">
  102. <div class="weui-form-li">
  103. 共{{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>
  104. </div>
  105. </div>
  106. <div class="weui-form" v-if="item.type === 'star'">
  107. <div class="weui-form-li">
  108. <div>
  109. <span>{{item.star_min_text}}</span>
  110. <span style="float: right;">{{item.star_max_text}}</span>
  111. </div>
  112. <table border="0">
  113. <tr>
  114. <td v-for="(item2,index2) in item.answer" :key="index2">
  115. <input class="weui-form-checkbox" disabled type="radio">
  116. <label :for="`star${index2}`">
  117. <i class="weui-icon-radio"></i>
  118. <div class="weui-form-text">
  119. <p>{{item2.text}}({{item2.count}})({{item2.count1}})</p>
  120. </div>
  121. </label>
  122. </td>
  123. </tr>
  124. </table>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. </form>
  130. </div>
  131. <script src="/static/jquery-1.11.3.min.js"></script>
  132. <script src="/static/layer3.2.0/layer.js"></script>
  133. <script type="text/javascript" src="/static/vuejs/require.js"></script>
  134. <script src="/admin/js/common.js"></script>
  135. <script>
  136. var question = {:json_encode($info['questions'])};
  137. console.log(question);
  138. require.config({
  139. urlArgs: "ver=1.0_0",
  140. paths:{
  141. "vue":'/static/vuejs/vue.min2'
  142. },
  143. shim:{
  144. 'vue':{
  145. exports:'vue'
  146. }
  147. }
  148. });
  149. require(['vue'],function(Vue,draggable){
  150. var vm = new Vue({
  151. el: '#vueapp',
  152. data: {
  153. question: question
  154. },
  155. computed: {
  156. resoptions: function () {
  157. return JSON.parse(JSON.stringify(this.question));
  158. }
  159. },
  160. watch: {
  161. resoptions: function (newval, oldval) {
  162. this.formatData();
  163. },
  164. },
  165. created: function () {
  166. // this.question.forEach((item) => {
  167. // const info = item;
  168. // });
  169. this.formatData();
  170. },
  171. methods: {
  172. formatData(){
  173. console.log(this.question);
  174. },
  175. }
  176. })
  177. });
  178. </script>
  179. </body>
  180. </html>