style:填报信息

任超
Showing 3 changed files with 155 additions and 28 deletions
staticCss/yysq.css
staticJs/yysq.js
staticViews/tbxx.html
--- a/staticCss/yysq.css
View file @279128b
+++ b/staticCss/yysq.css
View file @279128b
@@ -201,7 +201,7 @@
 .acceptance_information {
    margin: 20px 0;
 }
-.acceptance_information h3 , .person_info h3, .data_upload h3{
+.acceptance_information h3 , .person_info h3, .data_upload h3, .obtaining_license h3{
    height: 16px;
    padding-left: 5px;
    border-left: 3px solid #0091FF;
@@ -304,3 +304,32 @@
 .record:hover {
    color: #0091FF;
 }
+.layui-form-radio>i:hover, .layui-form-radioed>i {
+    color: #0091FF!important;
+}
+/* -------------------领证方式----------------------- */
+.shipping_method {
+    display: none;
+}
+.item_inline {
+    font-size: 0;
+}
+.item_inline .layui-inline {
+    width: 50%;
+    font-size: 16px;
+    margin-right: 0!important;
+}
+.obtaining_license .layui-input-block h2{
+    display: inline-block;
+    color: rgb(133, 125, 125);
+    margin-right: 13px;
+}
+.ssq {
+    width: 92%;
+}
+.ssq .layui-inline  {
+    width: 29%;
+}
+.obtaining_license {
+    margin-top: 20px;
+}
\ No newline at end of file
--- a/staticJs/yysq.js
View file @279128b
+++ b/staticJs/yysq.js
View file @279128b
-    layui.use('element', function () {
+layui.use('element', function () {
    let element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
-    });
+});
-    addTabs('#wssq')
+addTabs('#wssq')
-    var data = {
+var data = {
    'progressList': [
        {
            stepName: "信息效验",
@@ -33,8 +33,8 @@
            stepState: 0
        }
    ],
-    }
+}
-    layui.use('laytpl', function () {
+layui.use('laytpl', function () {
    laytpl = layui.laytpl;
    var getTpl = document.getElementById('progress').innerHTML
        , view = document.getElementById('app_progress');
@@ -47,9 +47,9 @@
        //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
        element.init();
    });
-    });
+});
-    // form 表单
+// form 表单
-    layui.use('form', function () {
+layui.use('form', function () {
    var form = layui.form;
    form.on('select(typeId)', function (data) {
        console.log(data.value);
@@ -72,17 +72,17 @@
        })
        return false;
    });
-    })
+})
-    $('.radioInfo').click(function () {
+$('.radioInfo').click(function () {
    let index = $(this).attr("value")
    if (index == 2 || index == 3) {
        $('.add_form').show()
    } else {
        $('.add_form').hide()
    }
-    })
+})
-    // form 添加
+// form 添加
-    $('.add_form').click(function () {
+$('.add_form').click(function () {
    $('.layui-form').append(
        '<div class="layui-form-item">' +
        '<div class="layui-inline">' +
@@ -127,18 +127,50 @@
    $(document).on("click", ".layui-icon-reduce-circle", function (e) {
        $(this).parent().remove()
    })
-    })
+})
-    // 图片上传
+// 图片上传
-    // 询问笔录
+// 询问笔录
-    $('.record').click(function(event){
+$('.record').click(function (event) {
    event.stopPropagation();
    console.log('下载模板99')
-    })
+})
-    var flieList = [];  // 登记证书列表
+var flieList = [];  // 登记证书列表
-    var flieList1 = [];  // 房屋所有权证书列表
+var flieList1 = [];  // 房屋所有权证书列表
-    var flieList3 = [];  // 询问笔录
+var flieList3 = [];  // 询问笔录
-    $('.next_button a').click(function(){
+// 省市区
-        console.log(999, flieList,5689, flieList1,98999, flieList3)
+//config的设置是全局的
-        return false
+layui.config({
-    })
+    base: '../staticJs/'
+}).extend({ //设定模块别名
+    common: 'cityCommon'
+});
+$('.next_button a').click(function(){
+    console.log(1)
+})
+layui.use(['form', 'common'], function () {
+    var common = layui.common,
+        form = layui.form;
+    //三级地址联动
+    common.showCity('province', 'city', 'district');
+    //领证方式
+    form.on('radio(beshared)', function (data) {
+        if (data.value == 2) {
+            $('.shipping_method').show()
+            $('.submitButton').hide()
+        } else {
+            $('.shipping_method').hide()
+            $('.submitButton').show()
+        }
+    });
+    //区域选择
+    form.on('select(selectCity)', function (data) {
+        return false;
+    });
+    //监听提交
+    form.on('submit(submit1)', function (data) {
+        console.log(data.field)
+        return false;
+    });
+});
--- a/staticViews/tbxx.html
View file @279128b
+++ b/staticViews/tbxx.html
View file @279128b
@@ -175,13 +175,79 @@
            </div>
        </div>
        <!-- 领证方式 -->
+        <div class="obtaining_license">
+            <h3>领证方式</h3>
+            <form class="layui-form" action="" lay-filter="example">
+                <div class="layui-form-item">
+                    <label class="layui-form-label">领证方式</label>
+                    <div class="layui-input-block">
+                        <input type="radio" name="type" value="1" lay-filter="beshared" title="现场领证" checked="">
+                        <input type="radio" name="type" value="2" lay-filter="beshared" title="快递到家">
+                    </div>
+                </div>
+                <div class="shipping_method">
+                    <div class="layui-form-item item_inline">
+                        <div class="layui-inline">
+                            <label class="layui-form-label">收件人</label>
+                            <div class="layui-input-block">
+                                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入收件人"
+                                    class="layui-input">
+                            </div>
+                        </div>
+                        <div class="layui-inline">
+                            <label class="layui-form-label">手机号码</label>
+                            <div class="layui-input-block">
+                                <input type="tel" maxlength="11" name="title" lay-verify="title" autocomplete="off"
+                                    placeholder="请输入手机号码" class="layui-input">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-form-item">
+                        <label class="layui-form-label">所在地区</label>
+                        <div class="layui-input-block ssq">
+                            <h2>省</h2>
+                            <div class="layui-inline layui-select-default" style="margin-right: 10px;">
+                                <select name="province" class="Pselected" data-area="浙江省"" lay-filter="province">
+                                    <option value="">选择省</option>
+                                </select>
+                            </div>
+                            <h2>市</h2>
+                            <div class="layui-inline selected layui-select-default">
+                                <select name="city" class="Cselected" data-area="杭州市">
+                                    <option value="">选择市</option>
+                                </select>
+                            </div>
+                            <h2>区</h2>
+                            <div class="layui-inline selected layui-select-default">
+                                <select name="city" class="Cselected" data-area="西湖区" lay-filter="selectCity">
+                                    <option value="">选择区</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="layui-form-item layui-form-text">
+                        <label class="layui-form-label">详细地址</label>
+                        <div class="layui-input-block">
+                            <textarea placeholder="请输入详细地址" class="layui-textarea" name="desc"></textarea>
+                        </div>
+                    </div>
                    <div class="next_button">
+                        <button type="button" lay-submit="" lay-filter="submit1" class="layui-btn layui-btn-normal">
+                            <a>
+                                下一步
+                            </a>
+                        </button>
+                    </div>
+                </div>
+                <div class="next_button submitButton">
                    <button type="button" class="layui-btn layui-btn-normal">
                        <a href="./wshs.html">
                            下一步
                        </a>
                    </button>
                </div>
+            </form>
+        </div>
    </div>
 </body>
 <script type="text/javascript" src="../staticJs/common.js"></script>
@@ -190,6 +256,7 @@
 <script type="text/javascript" src="../staticJs/imageUpdate.js"></script>
 <script type="text/javascript" src="../staticJs/imageUpdate1.js"></script>
 <script type="text/javascript" src="../staticJs/imageUpdate3.js"></script>
+<script type="text/javascript" src="../staticJs/city-picker.js"></script>
 <script type="text/html" id="barDemo">
    <i class="layui-icon layui-icon-reduce-circle" lay-event="edit"></i>
 </script>
@@ -228,5 +295,4 @@
    {{#  } }} 
    {{#  }); }}
 </script>
 </html>
\ No newline at end of file