求助

whepi-ui/templates/home/help.ftl

@@ -0,0 +1,64 @@
+<div class="page__bd">
+
+    <div class="weui-cells__group weui-cells__group_form">
+        <div class="weui-cells weui-cells_radio">
+            <label class="weui-cell weui-cell_active weui-check__label" for="x11">
+                <div class="weui-cell__bd">
+                    <p>已解决</p>
+                </div>
+                <div class="weui-cell__ft">
+                    <input type="radio" class="weui-check" name="radio1" id="x11">
+                    <span class="weui-icon-checked"></span>
+                </div>
+            </label>
+            <label class="weui-cell weui-cell_active weui-check__label" for="x12">
+
+                <div class="weui-cell__bd">
+                    <p>未解决</p>
+                </div>
+                <div class="weui-cell__ft">
+                    <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked">
+                    <span class="weui-icon-checked"></span>
+                </div>
+            </label>
+        </div>
+    </div>
+
+    <div>
+        <div>生活必须品求助</div>
+    </div>
+    <div class="weui-panel weui-panel_access">
+        <div class="weui-panel__bd">
+            <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
+                <div class="weui-media-box__bd">
+                    <div style="display: flex; flex-direction: row; justify-content: space-between;">
+                        <p class="weui-media-box__desc">1. &nbsp;&nbsp; 7-2-202发出</p>
+                        <p class="weui-media-box__desc">2020-02-02 14:30</p>
+                    </div>
+                    <div class="weui-cell ">
+                        <div class="weui-cell__bd">
+                            <textarea class="weui-textarea" rows="1" readonly placeholder="只读"></textarea>
+                            <div class="weui-textarea-counter"></div>
+                        </div>
+                    </div>
+                </div>
+            </a>
+            <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
+                <div class="weui-media-box__bd">
+                    <div style="display: flex; flex-direction: row; justify-content: space-between;">
+                        <p class="weui-media-box__desc">1. &nbsp;&nbsp; 7-2-202回复</p>
+                        <p class="weui-media-box__desc">2020-02-02 14:30</p>
+                    </div>
+                    <div class="weui-cell ">
+                        <div class="weui-cell__bd">
+                            <textarea class="weui-textarea" rows="1" readonly placeholder="只读"></textarea>
+                            <div class="weui-textarea-counter"></div>
+                        </div>
+                    </div>
+                </div>
+            </a>
+        </div>
+    </div>
+
+
+</div>

whepi-ui/templates/home/home.ftl

@@ -58,5 +58,7 @@ var userid = ${user};
 
     ribao_init();
     qiuzhu_init();
+    help();
+    family_init();
 })(jQuery);
 </script>

whepi-ui/templates/home/qiuzhu.ftl

@@ -10,74 +10,205 @@
         </div>
         <div class="weui-tab__panel">
             <div id="qz_nav1" class="weui-tab__bd-item qiu_zhu_weui_tab_bd_item_active">
-                <div class="weui-panel__bd">
-                    <div class="weui-media-box weui-media-box_text" id="title1">
-                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
-                    </div>
-                    <div class="weui-media-box weui-media-box_text" id="title2">
-                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
-                    </div>
+                <div id="notitle">
+                    <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="form" href="javascript:;">
+                        <div class="weui-cell__bd">
+                            <div class="weui-media-box weui-media-box_text" id="title">
+                                <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
+                            </div>
+                        </div>
+                        <div class="weui-cell__ft"></div>
+                    </a>
+                    <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="list" href="javascript:;">
+                        <div class="weui-cell__bd">
+                            <div class="weui-media-box weui-media-box_text" id="title">
+                                <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
+                            </div>
+                        </div>
+                        <div class="weui-cell__ft"></div>
+                    </a>
+                    <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="name" href="javascript:;">
+                        <div class="weui-cell__bd">
+                            <div class="weui-media-box weui-media-box_text" id="title2">
+                                <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
+                            </div>
+                        </div>
+                        <div class="weui-cell__ft"></div>
+                    </a>
+                    <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="age" href="javascript:;">
+                        <div class="weui-cell__bd">
+                            <div class="weui-media-box weui-media-box_text" id="title3">
+                                <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
+                            </div>
+                        </div>
+                        <div class="weui-cell__ft"></div>
+                    </a>
                 </div>
-
-
-            <#--<div class="weui-cells weui-cells_radio">&lt;#&ndash;单选&ndash;&gt;
-                <label class="weui-cell weui-check__label" for="x11">
-                    <div class="weui-cell__ft">
-                        <input type="radio" class="weui-check" name="radio1" id="x11">
-                        <span class="weui-icon-checked">已解决</span>
-                    </div>
-                </label>
-                <label>
-                    <div class="weui-cell__ft">
-                        <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked">
-                        <span class="weui-icon-checked">未解决</span>
-                    </div>
-                </label>
-            </div>-->
-
-                <div id="helpType">
+                <div id="titlteZs" style="display: none">
+                      <#include "/home/help.ftl" />
                 </div>
             </div>
 
+
+
+        <#--我的求助2-->
             <div id="qz_nav2" class="weui-tab__bd-item">
-                <div class="weui-btn-area">
-                    <a <#--id="btnQZ"--> class="weui-btn weui-btn_primary" href="#help">发起求助</a>
-                </div>
-                <div class="weui-cell weui-cell_active weui-cell_switch">
-                    <div class="weui-cell">
-                        <div class="weui-cell__bd">
-                            <input type="text" placeholder="搜素关键字"/>
+                <div id="notPlay">
+                    <div class="weui-btn-area">
+                        <a id="btnQZ" class="weui-btn weui-btn_primary" href="javascript:">发起求助</a>
+                    </div>
+                    <div class="weui-cell weui-cell_active weui-cell_switch">
+                        <div class="weui-cell">
+                            <div class="weui-cell__bd">
+                                <input type="text" placeholder="搜素关键字"/>
+                            </div>
+                        </div>
+                        <div class="weui-cell__ft">
+                            <input class="weui-switch" type="checkbox">
                         </div>
+                        <div class="weui-cell__bd">只显示未解决</div>
                     </div>
-                    <div class="weui-cell__ft">
-                        <input class="weui-switch" type="checkbox">
+                    <div id="family">
+                        <div class="weui-panel__bd">
+                        <#--<div>
+                            <div style="float: left">laug</div>
+                            <div style="float: right">——2018/01/03 16:20发出</div>
+                        </div>-->
+                            <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="form"
+                               href="javascript:;">
+                                <div class="weui-cell__bd">
+                                    <div class="weui-media-box weui-media-box_text" id="title">
+                                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。......</p>
+                                    </div>
+                                </div>
+                                <div class="weui-cell__ft"></div>
+                            </a>
+                            <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="form"
+                               href="javascript:;">
+                                <div class="weui-cell__bd">
+                                    <div class="weui-media-box weui-media-box_text" id="title">
+                                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。......</p>
+                                    </div>
+                                </div>
+                                <div class="weui-cell__ft"></div>
+                            </a>
+                            <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="form"
+                               href="javascript:;">
+                                <div class="weui-cell__bd">
+                                    <div class="weui-media-box weui-media-box_text" id="title">
+                                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。......</p>
+                                    </div>
+                                </div>
+                                <div class="weui-cell__ft"></div>
+                            </a>
+                            <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="form"
+                               href="javascript:;">
+                                <div class="weui-cell__bd">
+                                    <div class="weui-media-box weui-media-box_text" id="title">
+                                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。......</p>
+                                    </div>
+                                </div>
+                                <div class="weui-cell__ft"></div>
+                            </a>
+                            <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="form"
+                               href="javascript:;">
+                                <div class="weui-cell__bd">
+                                    <div class="weui-media-box weui-media-box_text" id="title">
+                                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。......</p>
+                                    </div>
+                                </div>
+                                <div class="weui-cell__ft"></div>
+                            </a>
+                            <a class="weui-cell weui-cell_active weui-cell_access js_item" data-id="form"
+                               href="javascript:;">
+                                <div class="weui-cell__bd">
+                                    <div class="weui-media-box weui-media-box_text" id="title">
+                                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。......</p>
+                                    </div>
+                                </div>
+                                <div class="weui-cell__ft"></div>
+                            </a>
+                        </div>
                     </div>
-                    <div class="weui-cell__bd">只显示未解决</div>
                 </div>
-                <div class="weui-panel__bd">
-                <#--<div>
-                    <div style="float: left">laug</div>
-                    <div style="float: right">——2018/01/03 16:20发出</div>
-                </div>-->
-                    <div class="weui-media-box weui-media-box_text">
-                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
+                <div id="play" style="display: none" class="weui-panel__bd"><#--发起求助的展示界面-->
+                    <div class="weui-cells__group weui-cells__group_form">
+                        <div class="weui-cells weui-cells_form">
+                            <div class="weui-cell weui-cell_active" id="js_cell">
+                                <div class="weui-cell__hd"><label class="weui-label">标题</label></div>
+                                <div class="weui-cell__bd weui-flex">
+                                    <input id="js_input" class="weui-input" autofocus="" type="text"
+                                           placeholder="输入求助标题" maxlength="20">
+                                <#-- <button id="js_input_clear" class="weui-btn_reset weui-btn_icon weui-btn_input-clear">
+                                     <i class="weui-icon-clear"></i>
+                                 </button>-->
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <div class="weui-media-box weui-media-box_text">
-                    <#--<h4 class="weui-media-box__title">标题二</h4>-->
-                        <p class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</p>
+                    <div class="weui-form__control-area">
+                        <div class="weui-cells__group weui-cells__group_form">
+                            <div class="weui-cells weui-cells_checkbox">
+                                <label class="weui-cell weui-cell_active weui-check__label" for="s11">
+                                    <div class="weui-cell__hd">
+                                        <input type="checkbox" class="weui-check" name="checkbox1" id="s11">
+                                        <i class="weui-icon-checked"></i>
+                                    </div>
+                                    <div class="weui-cell__bd">
+                                        <p>居委会</p>
+                                    </div>
+                                </label>
+                                <label class="weui-cell weui-cell_active weui-check__label" for="s12">
+                                    <div class="weui-cell__hd">
+                                        <input type="checkbox" name="checkbox2" class="weui-check" id="s12">
+                                        <i class="weui-icon-checked"></i>
+                                    </div>
+                                    <div class="weui-cell__bd">
+                                        <p>业委会</p>
+                                    </div>
+                                </label>
+                                <label class="weui-cell weui-cell_active weui-check__label" for="s13">
+                                    <div class="weui-cell__hd">
+                                        <input type="checkbox" name="checkbox3" class="weui-check" id="s13">
+                                        <i class="weui-icon-checked"></i>
+                                    </div>
+                                    <div class="weui-cell__bd">
+                                        <p>物业</p>
+                                    </div>
+                                </label>
+                                <label class="weui-cell weui-cell_active weui-check__label" for="s14">
+                                    <div class="weui-cell__hd">
+                                        <input type="checkbox" name="checkbox4" class="weui-check" id="s14">
+                                        <i class="weui-icon-checked"></i>
+                                    </div>
+                                    <div class="weui-cell__bd">
+                                        <p>志愿者</p>
+                                    </div>
+                                </label>
+                            <#--<a href="javascript:void(0);" class="weui-cell weui-cell_active weui-cell_link">
+                                <div class="weui-cell__bd">添加更多</div>
+                            </a>-->
+                            </div>
+                        </div>
+                        <div class="weui-cells weui-cells_form">
+                            <div class="weui-cell ">
+                                <div class="weui-cell__bd">
+                                    <textarea class="weui-textarea" placeholder="请输入求助内容" rows="3"></textarea>
+                                    <div class="weui-textarea-counter"><span>0</span>/200</div>
+                                </div>
+                            </div>
+                            <div class="weui-btn-area">
+                                <a class="weui-btn weui-btn_primary" href="javascript:">发起求助</a>
+                            </div>
+                        </div>
                     </div>
+
+                </div>
+                <div id="familyDisplay" style="display: none">
+                     <#include "/home/help.ftl" />
                 </div>
             </div>
         </div>
     </div>
-
-
-<#-- <div class="weui-btn-area">
-     <a id="btnQZ" class="weui-btn weui-btn_primary" href="javascript:">发起求助</a>
- </div>-->
 </div>
-<#include "/home/frag.foot.ftl" />
-
-<script type="text/javascript">
 
-</script>

whepi-ui/templates/home/qiuzhu.js

@@ -1,5 +1,36 @@
 function qiuzhu_init() {
   $('#btnQZ').on('click', function () {
-    alert("求助");
+    $("#notPlay").toggle();
+    /*点击隐藏*/
+    /*展示*/
+    $('#play')[0].style.display = '';
   });
 }
+
+function help() {
+  $('#qz_nav1').on('click', function () {
+    if ($('#titlteZs')[0].style.display == 'none') {
+      $('#notitle').toggle();
+      $('#titlteZs')[0].style.display = '';
+    } else {
+      $('#notitle')[0].style.display = '';
+      $('#titlteZs')[0].style.display = 'none';
+    }
+  })
+}
+
+function family_init() {
+  /*$('#family').on('click',function () {
+    $('#familyDisplay')[0].style.display == '';
+    alert($('#familyDisplay')[0].style.display == 'none')
+    if($('#familyDisplay')[0].style.display == 'none'){
+      $('#notPlay').toggle();
+
+    }else{
+      $('#familyDisplay')[0].style.display == '';
+      $('#notPlay')[0].style.display == 'none';
+    }
+
+
+  })*/
+}