GBRSWN/CZKJ.GBRS2.WebMVC/Views/PriceAnnouncement/Index.cshtml

@model PriceAnnouncementIndexModel
@{
    var startTime = Model.StartTime.HasValue ? Model.StartTime.Value.ToString("yyyy-MM-dd") : null;
    var endTime = Model.EndTime.HasValue ? Model.EndTime.Value.ToString("yyyy-MM-dd") : null;
}
@section style{
    <link rel="stylesheet" href="@ConfigHelper.GetCDNPrefix()/assets/css/info.css">
    <link href="@ConfigHelper.GetCDNPrefix()/assets/css/rate.css" rel="stylesheet" />
    <link rel="stylesheet" href="@ConfigHelper.GetCDNPrefix()/assets/css/pikaday.css">
    <link rel="stylesheet" href="@ConfigHelper.GetCDNPrefix()/assets/plugins/page/paging.css">

    <style>
        .filterInp .d-close {
            position: absolute;
            right: 25px;
            top: 0;
            z-index: 10;
            padding: 0 5px;
            color: #b0b0b0;
        }

            .filterInp .d-close.d-hide {
                display: none;
            }
    </style>
}
<div class="banner">
    <img src="@Model.Banner.Image" alt="">
</div>
<div class="container info">
    <div class="row">
        <h2 class="title visible-xs-inline-block open-mask">
            价格公告
            <i></i>
        </h2>
        <div class="left">
            <h2 class="title close-mask">
                <em class="visible-xs-inline-block">
                    <img src="/assets/image/arrow-color-left.png" alt="">
                </em>价格公告
            </h2>
            <div class="ul-box">
                <ul>
                    <li>
                        <a href="/Article/Detail/123">利率查询</a>
                    </li>
                    <li class="cur">
                        <a href="javascript:void(0)">万能险结算利率公告</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right">
            <h2>万能险结算利率公告</h2>
            <!--dd  -->
            <div class="info-detail">
                <div class="subheadWrap ratefilter">
                    <label class="labelSele" for="">
                        <span>万能险种：</span>
                        <div class="filterInp filSelect">
                            <p class="filSeleKey" data-id="@Model.TypeId">@(Model.TypeId == 0 ? "全部" : Model.TypeList.FirstOrDefault(x => x.Id == Model.TypeId).Name)</p><i class="arraw"></i>
                            <ul class="filOption">
                                <li title="全部" data-id="0">全部</li>
                                @foreach (var item in Model.TypeList)
                                {
                                    <li title="@item.Name" data-id="@item.Id">@item.Name</li>
                                }
                            </ul>
                        </div>
                    </label>
                    <label for="">
                        <span>利率适用期：</span>
                        <div class="filterInp filDate">
                            <input type="text" id="date_start" readonly value="@(Model.StartTime.HasValue?Model.StartTime.Value.ToString("yyyy-MM-dd"):"")" date-start="@(Model.StartTime.HasValue?Model.StartTime.Value.ToString("yyyy-MM-dd"):"")"> <i class="arraw"></i>
                            <span class="d-close @(Model.StartTime.HasValue?"":"d-hide")" date-name="date-start">×</span>
                        </div>
                    </label>
                    <label for="">
                        <span style="margin:0 5px;">至</span>
                        <div class="filterInp filDate">
                            <input type="text" id="date_end" date-end="@(Model.EndTime.HasValue?Model.EndTime.Value.ToString("yyyy-MM-dd"):"")" readonly value="@(Model.EndTime.HasValue?Model.EndTime.Value.ToString("yyyy-MM-dd"):"")"><i class="arraw"></i>
                            <span class="d-close @(Model.EndTime.HasValue?"":"d-hide")" date-name="date-end">×</span>
                        </div>
                    </label>
                    <div>
                        <a class="filSubmit filterSubmit" href="javascript:void(0);">查询</a>
                        <a class="filSubmit hisSubmit" href="javascript:void(0);">查询历史</a>
                    </div>
                </div>
                <table border="1" cellspacing="0" class="subheadTab detailTab">
                    <tr>
                        <th>险种</th>
                        <th>年化利率(%)</th>
                        <th>日利率</th>
                        <th>适用日期</th>
                    </tr>
                    @foreach (var item in Model.List)
                    {
                        <tr>
                            <td title="@item.TypeName">
                                <span>@item.TypeName</span>
                            </td>
                            <td>
                                <span>@item.YearInterestRate</span>
                            </td>
                            <td>
                                <span>@item.DayInterestRate</span>
                            </td>
                            <td>
                                <span>@item.DateTime.ToString("yyyy年MM月")</span>
                            </td>
                        </tr>
                    }
                </table>
                <div class="pageDiv"></div>
            </div>
        </div>
    </div>
</div>
@section script{
    <script src="/assets/plugins/date/pikaday.js"></script>
    <script src="/assets/plugins/date/moment.js"></script>
    <script src="/assets/plugins/page/jquery.page.js"></script>
    <script>
        window.dataMark = "0$15231983314041342$$15231983721956102$";
        $('.filSelect').click(function (e) {
            if ($('.filOption').css('display') === "none") {
                $('.filOption').slideDown();
                $('.filSelect .arraw').addClass('arrawUp');
            } else {
                $('.filOption').slideUp();
                $('.filSelect .arraw').removeClass('arrawUp');
            }
            e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;　
        })
        $(document).on('click', function () {
            $('.filOption').slideUp();
        })
        $('.filOption li').click(function () {
            $('.filSeleKey').html($(this).html()).attr('data-id', $(this).attr('data-id'));
            $('.filSelect .arraw').removeClass('arrawUp');

        })

        $(function () {
            if ($('table tr th').length === 4) {
                $('table tr th').eq(0).css("width", "46%")
            }
        })
        //    日期
        var i18n = { // 本地化
            previousMonth: '上个月',
            nextMonth: '下个月',
            months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
            weekdaysShort: ['日', '一', '二', '三', '四', '五', '六']
        }
        // You can get and set dates with moment objects
        var picker = new Pikaday(
            {
                field: document.getElementById('date_start'),
                firstDay: 1,
                minDate: new Date(@Model.MinYear, 0, 1),
                maxDate: new Date(@Model.MaxYear, 12, 31),
                yearRange: [@Model.MinYear, @Model.MaxYear],
                i18n: i18n,
                onSelect: function (e) {
                    $('#date_start').attr('date-start', e.toJSON());
                    var date = $('#date_start').val(moment(this._d).format('YYYY-MM-DD') + ' ');
                    $('#date_start').siblings('.d-close').show();
                }
            });
        var picker2 = new Pikaday(
            {
                field: document.getElementById('date_end'),
                firstDay: 1,
               minDate: new Date(@Model.MinYear, 0, 1),
                maxDate: new Date(@Model.MaxYear, 12, 31),
                yearRange: [@Model.MinYear, @Model.MaxYear],
                i18n: i18n,
                onSelect: function (e) {
                    $('#date_end').attr('date-end', e.toJSON());
                    var date = $('#date_end').val(moment(this._d).format('YYYY-MM-DD') + ' ');
                    $('#date_end').siblings('.d-close').show();
                }
            });

        $('#date_end').val($('#date_end').attr('value'));
        $('#date_start').val($('#date_start').attr('value'));

        //日期清除
        $('.d-close').on('click',function(){
            $(this).siblings('input').val('').attr($(this).attr('date-name'), '');
            $(this).hide();
            return false;
        })


        // 点击查询
        $('.filterSubmit').click(function () {
             var start = $('#date_start').val();
            var end = $('#date_end').val();
            if (start > end) {
                alert('适用期结束时间需大于开始时间')
                return;
            }
                var productId= $('.filSeleKey').attr('data-id'),
                start= $('#date_start').attr('date-start'),
                end = $('#date_end').attr('date-end')
            window.location.href = "@Url.Action("Index","PriceAnnouncement")" + "?TypeId=" + productId + "&startTime=" + start + "&endTime=" + end ;
        })
    </script>

    <script>
        $(function () {
            $(".open-mask").click(function () {
                $(".left").addClass("showIn")
            })
            $(".close-mask").click(function () {
                $(".left").removeClass("showIn")
            })
            $(".ul-box a").has("i").on("click", function () {
                if ($(this).hasClass("cur")) {
                    $(this).removeClass("cur").siblings("ul").slideUp().find("a").removeClass("cur")
                        .siblings(
                            "ul").slideUp();
                } else {
                    $(this).addClass("cur").siblings("ul").slideDown();
                    $(this).closest("li").siblings("li").find("a").removeClass("cur").siblings("ul")
                        .slideUp();
                }
            });
            var data = {
                "title": "根节点",
                "children": [{
                    "title": "基本信息",
                    "children": [{
                        "title": "基本信息二级",
                        "children": [{
                            "title": "基本信息三级"
                        }]
                    }, {
                        "title": "基本信息二级"
                    }]
                }, {
                    "title": "临时信息"
                }, {
                    "title": "其他信息",
                    "children": [{
                        "title": "其他信息二级"
                    }]
                }]
            };
            var res = "";

            $(".ul-test").append(dataText(data));

            function dataText(item) {
                if (item.children && item.children.length > 0) {
                    for (var i = 0; i < item.children.length; i++) {
                        res += "<li><a>" + item.children[i].title + "</a>";
                        if (item.children[i].children && item.children[i].children.length > 0) {
                            res += "<i></i><ul>"
                        }
                        dataText(item.children[i]);
                        if (item.children[i].children && item.children[i].children.length > 0) {
                            res += "</ul>"
                        }
                        res += "</li>"
                    }
                }
                return res;
            }
        })
    </script>
    @*分页*@
    <script>
         //分页
            var pageSize =@(Model.PageSize);
            var rowsCount =@(Model.RowsCount);
            var pageIndex = @(Model.PageIndex);
            $(".pageDiv").createPage({
                pageCount: Math.ceil(rowsCount / pageSize), //总页数
                current: pageIndex, //当前页
                turndown: 'false',
                backFn: function (p) {
                    pageIndex = p;
                    location.href = "@Url.Action("Index", "PriceAnnouncement", new {typeId= Model.TypeId})&pageIndex=" + pageIndex + "&pageSize=" + pageSize +'&startTime=@startTime&endTime=@endTime';
                }
            });
    </script>
}