master

分支 (1)

管理

管理

master

web-tour-front
/
orderList.html

<html>
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>订单列表 - </title>
    <link rel="stylesheet" type="text/css" href="./static/css/iconfont.css?v10.03">
    <link rel="stylesheet" href="./static/css/global.css?v10.03">
    <link rel="stylesheet" href="./static/css/style.css?v10.03">
    <style type="text/css">
        .el-date-editor{
            width: 271px !important;
        }
        /*----------- 浮层 -----------*/
        .hide{display: none;}
        .index-popup{position:absolute;z-index:205;background:#fff;width:600px}
        .index-popup-title{position:relative;height:50px;line-height:50px;color:#fff;background:#4f5f6f;font-size:16px;padding:0 15px;}
        .index-popup-close{position:absolute;right:15px;top:17px;width:16px;height:16px;background:url("https://img.haoqiao.com/website/images/index_close.gif") no-repeat;}
        .index-popup-close:hover{-moz-transform: rotate(180deg);-webkit-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);}
        .index-popup-btn-center{text-align:center;}
        .index-popup-btn{display:inline-block;width:140px;height:40px;line-height:40px;background:#4499ff;border-radius:3px;border:1px solid #4499ff;color:#fff;text-align:center;font-size:16px;cursor:pointer;margin-right:10px}
        .order-del-pop-cal-table{width:505px;margin:0 auto 20px;}
        .order-del-pop-cal-table td{height:50px;padding:0 10px;border:solid 1px #eee;}
        .order-del-pop-btn{margin-top:20px;padding:10px 0;border-top:solid 1px #ddd;font-size:14px;}
        .order-del-pop-btn .index-popup-btn{width:120px; font-size:16px;}
        .order-del-pop-btn.mw-120 .index-popup-btn{width:auto; min-width: 120px;}
        .order-del-pop-btn .order-del-pop-btn-cal{background:none;color: #4499ff;border: 1px solid #4499ff;}
        .order-del-pop-btn .order-del-pop-btn-cal:hover{background-color: #4499ff;color: #fff;border: 1px solid #4499ff;}
        .order-pay-popup{text-align:center;}
        .index-popup-want-icon-pay{display: inline-block;margin: 17px 0 7px;padding: 13px 0 13px 70px;width: 400px;text-align:left;background: url("https://img.haoqiao.com/website/images/new_tts/tk_ts_icon_new.svg") 0 center no-repeat;font-size: 16px;font-family: Helvetica, "Microsoft Yahei", "Hiragino Sans GB", "黑体", Arial, \5b8b\4f53;background-size: 50px;}
        #bg{position:absolute;z-index:101;top:0;left:0;background:#000;opacity:0.5;filter:alpha(opacity=50);}
        .refresh-input{color: #49f;background: #fff;height: 28px;line-height: 28px;width: 90px;text-align: center;border-radius: 2px;border: solid 1px #49f; cursor: pointer;display: inline-block;  }
        .refresh-input:hover{border:0;color:#fff;background:#5da7ff}

        .clear{clear: both;}
        /*选项卡*/
        .hotel-list-search-top{margin-top: 30px;position: relative;margin-bottom: 20px;padding: 0 20px;border-bottom: 1px solid #ececec;}
        .hotel-list-search-top ul{width: 100%;}
        .hotel-list-search-top ul li{float: left;padding: 0 20px;text-align: center;position: relative;height: 32px;line-height: 32px;font-size: 14px;}
        .hotel-list-search-top ul li a{color: #666;font-weight: bold;font-size: 16px;}
        .hotel-list-search-top ul li.current{border-bottom: 2px solid #4499ff;}
        .hotel-list-search-top ul li.current a{color: #4499ff;}
        .hotel-list-search-top ul li .pending-payment{display: block;background-color: #ff5256;position: absolute;font-size: 12px;color: #fff;top: -16px;left: 76px;height: 16px;line-height: 16px;padding: 0 2px;border-radius: 4px 4px 4px 0;/*transform: scale(0.8);*/z-index: 2;width: auto;white-space: nowrap;}
        .hotel-list-search-top ul li .pending-payment:before{box-sizing: content-box;width: 0px;height: 0px;position: absolute;top: 16px;left: 0px;padding: 0;border-bottom: 2px solid transparent;border-top: 2px solid #ff5256;border-left: 2px solid #ff5256;border-right: 2px solid transparent;display: block;content: "";}
        .hotel-list-search-top .remaining-amount{font-size: 12px;color:#666;padding: 0;position: relative;line-height: 34px;text-align: right;}
        .hotel-list-search-top .remaining-amount span{color: #ff5256;}
        .hotel-list-search-top .more-icon{display: inline-block;width: 15px;height: 15px;cursor: pointer;background: url(https://img.haoqiao.com/website/images/management/amount_more.svg) no-repeat;margin-top: -2px;vertical-align: middle;margin-left: 6px;}
        .hotel-list-search-top .more-icon:hover{background: url(https://img.haoqiao.com/website/images/management/amount_more_hover.svg) no-repeat;}
        .hotel-list-search-top .amount-more{display: none;padding: 14px;z-index: 1;top: 35px;-webkit-box-shadow: 0 0 12px 0 rgba(153,153,153,0.45);-moz-box-shadow: 0 0 12px 0 rgba(153,153,153,0.45);box-shadow: 0 0 12px 0 rgba(153,153,153,0.45);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;position: absolute;right: -10px;background: #fff;}
        .hotel-list-search-top .amount-more:before{display: block;content: '';width: 0;height: 0;font-size: 0;margin-left: -3px;position: absolute;top: -4px;right: 12px;border-style: solid;border-width: 6px;border-color: transparent transparent #fff #fff;-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-ms-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg);-webkit-box-shadow: -2px 2px 4px 0 rgba(153,153,153,0.15);-moz-box-shadow: -2px 2px 4px 0 rgba(153,153,153,0.15);box-shadow: -2px 2px 4px 0 rgba(153,153,153,0.15);  }
        .hotel-list-search-top .amount-more p{line-height: normal;text-align: left;height: 18px;line-height: 18px;width: auto;white-space: nowrap;}
        .hotel-list-search-top .amount-more p:before{content: '';display: inline-block;width: 6px;height:6px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;background-color: #c7c7cd;margin-right: 6px;}
        /*快速搜索*/
        .hotel-list-quick-search{height: auto;line-height: 36px;margin-bottom: 20px;position: relative;padding: 0 20px;}
        .hotel-list-quick-search ul{}
        .hotel-list-quick-search ul li{float: left;height: 36px;line-height: 36px;border: 1px solid #dddddd; padding: 0 14px; font-size: 14px;}
        .hotel-list-quick-search ul li:first-child,.hotel-list-quick-search ul li:nth-child(5){border-radius: 2px 0 0 2px;}
        .hotel-list-quick-search ul li:nth-child(3),.hotel-list-quick-search ul li:nth-child(6){border-radius: 0 2px 2px 0;}
        .hotel-list-quick-search ul li:nth-child(1),
        .hotel-list-quick-search ul li:nth-child(2),
        .hotel-list-quick-search ul li:nth-child(5){border-right: none;}
        .hotel-list-quick-search ul li.current{border-color: #4499ff;}
        .hotel-list-quick-search ul li a{color: #404040; display: inline-block;}
        .hotel-list-quick-search ul li.current{background-color: #EEF6FF;}
        .hotel-list-quick-search ul li:hover a{color: #4499ff;}
        .hotel-list-quick-search ul li.current a{color: #1971e0;}
        .hotel-list-quick-search ul li.row2-left + li{border-left: 1px solid #4499ff;}
        .hotel-list-quick-search ul li.row3-left + li{border-left: 1px solid #4499ff;}
        .hotel-list-quick-search ul li.row4-left + li{border-left: 1px solid #4499ff;}
        .hotel-list-quick-search ul li a span{color: #4499ff;margin-left:10px;}
        .hotel-list-quick-search ul li .current_check{ border-top: 20px solid #4499ff; border-left: 20px solid transparent; right: 0;}
        .hotel-list-quick-search ul li .current_check_icon{ display: inline-block; width: 10px; height: 10px; color: #fff; top:-30px; right: 2px;}
        /*批量操作*/
        .batch-operation{margin-bottom: 10px;padding: 0 20px;}
        .batch-operation span, .batch-operation div {display: inline-block;}
        .hover-show-wrap:hover .hover-show-el {display: block}
        .J_pay_delay_to_periodic.hover-show-wrap .hover-show-el { width: 500px; margin-top: -5px; top: 35px; left: -1px;z-index: 2; }
        .batch-operation .batch-btn{cursor: pointer;border: 1px solid #4499ff;color: #4499ff;font-size: 12px;padding: 0 10px;border-radius: 4px;margin-right: 10px;text-align: center;height: 28px;line-height: 28px;}
        .batch-operation .batch-btn:hover{color: #fff;background-color: #4499ff;}
        .batch-operation .check-notice{height: 26px;line-height: 26px;background-color: #eefff4;border: 1px solid #00b33d;color: #666;padding:0 10px;margin-right: 10px;font-size: 12px;}
        .batch-operation .check-notice:before{content: "";display: inline-block;width: 14px;height: 14px;background: url(https://img.haoqiao.com/website/images/management/booking_hotel_tips.svg) no-repeat;margin-right: 8px;vertical-align: middle;margin-top: -2px;}
        .batch-operation .check-notice span{color: #666;font-weight: bold;}
        .batch-operation .check-notice span.order-select-amount{color: #666;font-weight: normal;}
        .batch-operation .check-notice .select-cancel{cursor: pointer;font-weight: normal;margin-left: 46px;text-decoration: underline;}
        .batch-operation .check-notice .select-cancel:hover{color: #4499ff;text-decoration: underline;}
        .batch-operation .app-download{float: right;position: relative;border: 1px solid #ccc;padding: 4px 40px 5px 20px;margin-right: 15px;}
        .batch-operation .app-download .close {color: #ccc;line-height: 20px;text-align: center;height: 20px;width: 20px;font-size: 14px;padding: 1px;top: 3px;right: 3px;position: absolute;cursor: pointer;}
        .batch-operation .app-download .close::before {content: "\2716";}
        .child-mt10 > span:not(.app-download) { margin-top: 10px }
        /*确认提示框、toast提示框*/
        .toast-box{position: fixed;width: 100%;height: 100%;top: 0;left: 0;display: none;z-index: 99;}
        .toast-box .toast-con{display: inline-block;padding: 35px 50px 35px 50px;width: 300px;text-align: center;position: absolute;box-shadow: 0px 0px 18px 0px rgba(153,153,153,0.4);border-radius: 5px;background-color: #fff;font-size: 14px;color: #333333;}
        .toast-box .toast-con img{margin-right: 14px;vertical-align: middle;width: 30px;height: 30px;}
        /*列表*/
        .free-cancel-icon:before,.pay-cancel-icon:before,.not-cancel-icon:before{content: "";display: inline-block;width: 5px;height: 5px;border-radius: 50%;position: relative;top: -2px;margin-right: 4px;}
        .free-cancel-icon:before{background-color: #00b33d;}
        .pay-cancel-icon:before{background-color: #ff9900;}
        .not-cancel-icon:before{background-color: #ff5256;}
        .cancel-red{color: #ff5256}
        .can_delete td:nth-child(2) p,.can_delete td:nth-child(3) p,.can_delete td:nth-child(4) p,.can_delete td:nth-child(5) p,.can_delete td:nth-child(6) p,.can_delete td:nth-child(7) p,.can_delete td:nth-child(8) p,.can_delete td:nth-child(9) p,.can_delete td:nth-child(10) p,.can_delete td:nth-child(2) a,.can_delete td:nth-child(3) a,.can_delete td:nth-child(4) a,.can_delete td:nth-child(5) a,.can_delete td:nth-child(6) a,.can_delete td:nth-child(7) a,.can_delete td:nth-child(8) a,.can_delete td:nth-child(9) a{color: #d3d3d3 !important;}
        .can_delete .free-cancel-icon:before, .can_delete .pay-cancel-icon:before, .can_delete .not-cancel-icon:before{background-color: #d3d3d3;}
        .list-table {border: solid 1px #ddd;width: 100%;}
        .list-table tr:hover {background: #f9f9f9;}
        .list-table th {padding: 18px 6px;background: #f6f6f6;text-align: center;font-weight: 700;color: #333;}
        .list-table td {padding: 14px 12px;border: solid 1px #ddd;text-align: center;overflow: hidden;word-break: break-all;font-size: 12px;}
        .list-table td p{margin: 4px 0;font-size: 12px;}
        .width-3{width: 3%;}.width-7{width: 7%;}.width-8{width: 8%;}.width-9{width: 9%;}.width-10{width: 10%;}.width-11{width: 11%;}.width-12{width: 12%;}.width-13{width: 13%;}.width-14{width: 14%;}
        .list-table .fz-14{font-size: 14px;}
        .list-table .color-999{color:#999999;}
        /*重写操作按钮*/
        .list-table .confirm {display: inline-block;height:28px;line-height:28px;width:80px;border: 0;background: #49f;color: #fff;margin: 5px;text-align: center;border-radius: 4px;border: solid 1px #4499ff;cursor: pointer;padding:0;}
        .list-table .confirm:hover {background: #5da7ff;}
        .list-table .confirm_pay {display: inline-block;width:70px;height:18px;line-height:18px;background: #F90;padding: 5px;margin: 5px;border: 0;border-radius: 4px;color: #fff;text-align: center;cursor: pointer;}
        .list-table .confirm_pay:hover {background: #ffaf28;}
        .list-table .delay_to_periodic{display: inline-block;width:70px;min-height:18px;line-height:18px;background: #F90;padding: 5px;margin: 5px;border: 0;border-radius: 4px;cursor: pointer; color: #fff;text-align: center;}
        .list-table .delay_to_periodic_disabled{height:28px;line-height:28px;width:80px;color: #fff;text-align: center;border-radius: 4px;cursor: pointer;border: 0;background: #dddddd;padding: 0;display: inline-block;margin: 5px;}
        .list-table .delay_to_periodic:hover {background: #ffaf28;}
        /*重写复选框样式*/
        .list-table input[type="checkbox"]{position: relative;-webkit-appearance: none;vertical-align:middle;margin-top:0;background:#fff;border: 1px solid #999;border-radius: 3px;min-height: 12px;min-width: 12px;}
        .list-table input[type="checkbox"]:checked {background: #4499ff;border: 1px solid #4499ff;}
        .list-table input[type=checkbox]:checked:after{content: '';top: 1px;left: 1px;position: absolute;background: transparent;border: #fff solid 2px;border-top: none;border-right: none;height: 3px;width: 6px;-moz-transform: rotate(-52deg);-ms-transform: rotate(-52deg);-webkit-transform: rotate(-52deg);transform: rotate(-52deg);}

        .showText{color: #999;font-size: 12px;}
        .showText:hover{color: #4499ff;text-decoration: underline;}
        .arrow-down:after{margin-left: 6px;content: "";display: inline-block;background: url(https://img.haoqiao.com/website/images/details_search_down.svg) no-repeat;width: 10px;height: 5px;position: relative;top: -2px;}
        .arrow-up:after{margin-left: 6px;content: "";display: inline-block;background: url(https://img.haoqiao.com/website/images/details_search_up.svg) no-repeat;width: 10px;height: 5px;position: relative;top: -2px;}
        /*.search-li span{color:#999;}*/
        .search-li input {width: 272px;border: solid 1px #ddd;height: 32px;line-height: 32px;padding: 2px 10px;border-radius: 4px;vertical-align: middle;box-sizing: border-box;}
        .search-li select {width: 272px;border: solid 1px #ddd;height: 32px;line-height: 28px;padding: 2px 15px 2px 5px;border-radius: 4px;box-sizing: border-box;appearance:none;-moz-appearance:none;-webkit-appearance:none;background: url('https://img.haoqiao.com/website/images/index/up.svg') no-repeat scroll 254px center transparent;}
        .search-li select::-ms-expand { display: none; }
        /*搜索select下拉列表*/
        .search-select {display: inline-block;width: 270px;border: solid 1px #ddd;height: 32px;line-height: 32px;border-radius: 4px;position: relative;}
        .search-select .search-select-head{display: inline-block;width: 272px;height: 32px;line-height: 32px;padding: 0 20px 0 5px;cursor: pointer;box-sizing: border-box;}
        .search-select .search-select-head .select-title{color: #333;}
        .search-select .select-arrow-down:after{content: "";display: block;background: url(https://img.haoqiao.com/website/images/details_search_down.svg) no-repeat;position: absolute;top: 14px;right: 10px;width: 10px;height: 5px;}
        .search-select .select-arrow-up:after{content: "";display: block;background: url(https://img.haoqiao.com/website/images/details_search_up.svg) no-repeat;position: absolute;top: 14px;right: 10px;width: 10px;height: 5px;}
        .search-select .search-select-con{display:none;position: absolute;top: 33px;left:0;z-index:99;width: 272px;max-height: 300px;background: #fff;border-radius: 3px;overflow: auto;box-shadow: 0px 0 8px rgba(100, 100, 100, 0.5);}
        .search-select .search-select-con li{background: none;display: block;height: 36px;line-height: 36px;padding: 0 4px 0 10px;border-bottom: solid 1px #ececec;color: #333;cursor: pointer;font-size:14px;}
        .search-select .search-select-con li:hover{background: #eef6ff;}
        /*搜索按钮*/
        .search-btn input:nth-child(2){background-color: #4499ff;border: 1px solid #4499ff;}
        .search-btn input:nth-child(4){color:#666;border-color: #999;}
        .search-btn input:nth-child(3):hover{color:#fff;border: 1px solid #4499ff;}
        .search-btn input:nth-child(4):hover{color:#fff;border: 1px solid #4499ff;}
        /*日期搜索框*/
        .search-date{display: inline-block;width: 270px;border: solid 1px #ddd;height: 32px;border-radius: 4px;position: relative;}
        .search-date input{border: none;padding: 0;width:100px;height: 32px;line-height: 32px;text-align: center;}
        .search-date input:last-child{float: right;width: 130px;}
        .search-date:before{height: 16px;width: 15px;content: "";display: inline-block;background: url(https://img.haoqiao.com/website/images/search_new_icon.png) no-repeat;background-position: 0 -64px;vertical-align: middle;margin-left: 10px;}
        .search-date:after{content: "至";font-size: 14px;color:#999;position: absolute;margin-top: 5px;}
        /*返回顶部文字*/
        .returnTop{color: #999999;font-size: 12px;}
        .returnTop:hover{color:#4499ff;text-decoration: underline;}
        /*无数据*/
        .no-data{width: 100%;}
        .no-data .no-data-con{margin: 0 auto;text-align: center;width: 212px;}
        .no-data .no-data-con img{display: block;margin: 50px 0 20px;}
        .no-data .no-data-mark{font-size: 16px;color:#666666;}
        /*分页*/
        .page span, .page a{display: inline-block;border: 1px solid #ececec;height: 30px;line-height: 30px;margin-top: 15px;padding: 0 11px;border-radius: 4px;}
        .page span{color:#fff;background-color: #4499ff;border-color: #4499ff;}
        .page a:hover{color:#fff;background-color: #4499ff;border-color: #4499ff;}
        .page .total-page{border: none;color: #333;background: none;}

        .form-search-body:before{content: '';display: block;width: 100%;border-top: 1px solid #ececec;padding-top: 20px;}

        @media screen and (max-width: 1235px) {
            .hide-auto{display: none;}
        }
        .J_change_btn_tips{font-size:13px; right: 0; top:24px; width: 200px; text-align: left;}
        .J_change_btn_tips.triangle-up:before{ left: 72%; }
        #hotelist_bg{ width: 100%; height: 100%; z-index: 9999; top:20%;}
        .hotellist_bg_loading{ width: 270px; height: 64px; border-radius: 6px; border: 1px solid #EDEDED; background-color: #fff; margin:70px auto; font-weight: normal; padding-top:36px; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);}
        .hotellist_bg_loading img{ margin-right: 8px;}
        .hotellist_bg_loading span{ height: 28px; line-height: 28px; font-weight: normal;}
    </style>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body style="background:#fff;">
<!--主要部分-->
<div id="container" style="min-width: 1230px;">
    <!-- 选项卡 -->
    <!--<div class="hotel-list-search-top dif jcb">
        <ul class="dif aie J_search_tab" style="width: 800px;">
            &lt;!&ndash;全部&ndash;&gt;
            <li class="search-tab current"><a href="/admin/hotel_order_list">全部 <span>(5)</span></a></li>
            &lt;!&ndash;待提交&ndash;&gt;
            <li class="search-tab "><a href="/admin/hotel_order_list?tab_search=1">待提交 <span>(0)</span></a></li>
            &lt;!&ndash;预定成功&ndash;&gt;
            <li class="search-tab ">
                <a href="/admin/hotel_order_list?tab_search=2">预订成功 <span>(0)</span></a>
            </li>
            &lt;!&ndash;失败/取消/关闭&ndash;&gt;
            <li class="search-tab "><a href="/admin/hotel_order_list?tab_search=3">失败/取消/关闭 <span>(5)</span></a></li>
            &lt;!&ndash;已删除订单&ndash;&gt;
            <div class="clear"></div>
        </ul>
        &lt;!&ndash;剩余额度&ndash;&gt;
    </div>-->
    <!-- 快速搜索 -->
    <!--搜索主体-->
    <form method="get" action="" class="form-search-body noBorderTop" style="padding: 0 20px;border-bottom: 1px solid #ececec;margin: 0 0 30px;box-shadow: 0px 0px 0px hsla(0,0%,0%,0), 0px 0px 0px hsla(0,0%,0%,0), 0px 0px 0px hsla(0,0%,0%,0), 0px 3px 3px hsla(0,0%,0%,.1);-moz-box-shadow: 0px 0px 0px hsla(0,0%,0%,0), 0px 0px 0px hsla(0,0%,0%,0), 0px 0px 0px hsla(0,0%,0%,0), 0px 3px 3px hsla(0,0%,0%,.1);-webkit-box-shadow: 0px 0px 0px hsla(0,0%,0%,0), 0px 0px 0px hsla(0,0%,0%,0), 0px 0px 0px hsla(0,0%,0%,0), 0px 3px 3px hsla(0,0%,0%,.1);">
        <input type="hidden" name="search_style" id="search_style" value="1">
        <div class="app-control clearfix margin-bottom-24">
            <!--订单号-->
            <div class="search-li">
                <span>订单号</span>
                <input type="text" v-model="params.dist_order_sn">
            </div>
            <!--贵司单号-->
            <div class="search-li">
                <span>贵司单号</span>
                <input type="text" v-model="params.dis_self_sn">
            </div>
            <!--入住日期-->
            <div class="search-li">
                <span>入住日期</span>
                <div style="display:inline-block;">
                    <el-date-picker
                            v-model="inDate"
                            size="small"
                            @change="changeInDate"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>
            <!--隐藏部分-->
            <div class="showM">
                <!--免费取消截止日期-->
                <!--预订日期-->
                <div class="search-li">
                    <span>预订日期</span>
                    <div style="display:inline-block;">
                        <el-date-picker
                                size="small"
                                v-model="buyDate"
                                @change="changeBuyDate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
                <!--酒店名-->
                <div class="search-li">
                    <span>酒店名</span>
                    <input type="text" class="ui-autocomplete-input" v-model="params.hotel_name">
                </div>
                <!--订单状态-->
                <div class="search-li">
                    <span>订单状态</span>
                        <div style="display:inline-block;">
                            <el-select @change="fetchData" v-model="params.status">
                                <el-option value="" label="全部"></el-option>
                                <el-option value="0" label="待提交"></el-option>
                                <el-option value="1" label="已提交"></el-option>
                                <el-option value="2" label="带预付"></el-option>
                                <el-option value="3" label="已预付"></el-option>
                                <el-option value="4" label="已预付"></el-option>
                                <el-option value="5" label="已取消"></el-option>
                                <el-option value="6" label="已关闭"></el-option>
                                <el-option value="7" label="已完成"></el-option>
                            </el-select>
                        </div>
                </div>
                <!--联系人-->
                <div class="search-li">
                    <span>联系人</span>
                    <input type="text" v-model="params.contract_member">
                </div>
                <!--酒店确认号-->
                <div class="search-li">
                    <span>酒店确认号</span>
                    <input type="text" v-model="params.hotel_order_sn">
                </div>
                <!--手机号-->
                <div class="search-li">
                    <span>手机号</span>
                    <input type="text" v-model="params.contract_mobile">
                </div>
                <!--付款方式-->
                <div class="search-li">
                    <span>付款方式</span>
                    <div style="display:inline-block;">
                        <el-select @change="fetchData" v-model="params.pay_type">
                            <el-option value="0" label="全部"></el-option>
                            <el-option value="1" label="预付款支付"></el-option>
                            <el-option value="2" label="全款支付"></el-option>
                        </el-select>
                    </div>
                </div>
                <!--付款方式-->
            </div>
            <el-button type="primary" @click="fetchData">搜索</el-button>

        </div>
    </form>
    <!--批量操作-->
    <div class="batch-operation clearfix dif">
        <div class="fl child-mt10 flex-1">
        </div>
        <div class="fr ml10">
            <input type="button" class="refresh-input batch-btn mt10" value="刷新订单状态" @click="fetchData();">
        </div>
    </div>
    <!--数据部分-->
    <div id="tableData" style="padding: 0 20px;">
        <!-- 头部导航-->
        <!--table body-->
        <div class="tableBody" id="J_body">
            <el-table
                    :data="orderList"
                    border
                    fixed
                    size="small"
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="订单号/贵司单号/酒店确认号">
                    <template slot-scope="scope">
                        <!--{{scope.row.hotel_order_id}}/{{scope.row.dist_order_sn}}/{{scope.row.hotel_order_sn}}-->
                        {{scope.row.dist_order_sn}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="created_at"
                        label="下单时间">
                    <template slot-scope="scope">
                        {{scope.row.created_at.split(' ')[0]}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="hotel_name"
                        label="酒店名/房型">
                    <template slot-scope="scope">
                        {{scope.row.hotel_name}}/{{scope.row.room_type_name}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="operation_user"
                        label="入住人">
                </el-table-column>
                <el-table-column
                        label="入离日期">
                    <template slot-scope="scope">
                        {{scope.row.in_date}} 至 {{scope.row.out_date}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="addition_money"
                        label="订单/附加费用金额">
                    <template slot-scope="scope">
                        {{scope.row.amount}}/{{scope.row.addition_money}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="status_text"
                        label="订单状态">
                </el-table-column>
                <el-table-column
                        prop="operation_user"
                        label="支付方式/操作员">
                </el-table-column>
                <el-table-column
                        prop="address"
                        fixed="right"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button style="margin-left: 10px;" type="text" v-if="scope.row.status === 0" @click="confirmSubmit(scope.row)">确认提交</el-button>
                        <el-button type="text" v-if="scope.row.status === 0 || scope.row.status === 1" @click="cancelOrder(scope.row)">取消</el-button>
                        <el-button type="text" v-if="scope.row.status === 2" @click="confirmPayPre(scope.row)">确认已预付</el-button>
                        <el-button type="text" v-if="scope.row.status === 4" @click="currOrderId = scope.row.hotel_order_id;cancelText = '';dialogVisible = true">申请取消</el-button>
                        <el-button type="text">
                            <a target="_blank"
                               :href="'/order_detail.html?orderId='+ scope.row.hotel_order_id +'&hotel_id='+ scope.row.hotel_id">
                                查看详情
                            </a>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--确认提交(status=0)
        确认已预付(status=2)
        申请取消 (status=4或3)
        查看详情-->
        <el-dialog
                title="取消原因"
                :visible.sync="dialogVisible"
                width="30%">
            <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入取消原因"
                    v-model="cancelText">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="applyCancel" :disabled="!cancelText">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    <!--数据部分 end-->
</div>
<!--主要部分 end-->
<!--footer -->
<div id="J_footer" class="contFooter" style="height: 60px; line-height: 60px; margin-left: 20px; border-top: 1px solid rgb(221, 221, 221); width: 1400px;">
    <div class="relativeD dataFooter" style="margin-top: 0;padding-top: 0;">
    </div>
</div>
<!--footer end -->

<!--公共提示框-->
<div class="index-popup hide" id="confirm-box">
    <div class="index-popup-title">
        温馨提示        <a href="javascript:;" title="关闭" class="index-popup-close J_close_popup"></a>
    </div>
    <div class="index-popup-cont order-pay-popup">
        <div class="index-popup-want-icon-pay tips_info"></div>
        <div class="index-popup-btn-center order-del-pop-btn">
            <a href="javascript:;" class="index-popup-btn confirm-done">确定</a>
            <a href="javascript:;" class="index-popup-btn order-del-pop-btn-cal J_close_popup">取消</a>
            <input type="hidden" name="confirm_data" value="">
            <input type="hidden" name="confirm_cb" value="">
        </div>
    </div>
</div>

<div class="index-popup hide" id="confirm-delay-to-periodic-box">
    <div class="index-popup-title">
        支付确认        <a href="javascript:;" title="关闭" class="index-popup-close J_close_popup"></a>
    </div>
    <div class="index-popup-cont order-pay-popup">
        <div class="index-popup-want-icon-pay">
            <p>所选延后支付订单：<span id="check_order_num"></span>笔 <span id="check_order_currency"></span> <span id="check_order_amount"></span> 元</p>
            <p>是否将其转为周期结？</p>
        </div>
        <div class="index-popup-btn-center order-del-pop-btn mw-120">
            <a href="javascript:;" class="index-popup-btn J_confirm_delay_to_periodic">转为周期结</a>
            <a href="javascript:;" class="index-popup-btn order-del-pop-btn-cal J_close_popup">取消</a>
            <input type="hidden" name="order_id" value="">
        </div>
    </div>
</div>

<div id="bg"></div>
<input type="hidden" value="" id="J_dud" name="dud">
<input type="hidden" value="" id="J_token" name="token">

<!--toast提示框-->
<div class="toast-box">
    <div class="toast-con"></div>
</div>
<!--加载中-->
<div class="index-popup hide" id="loading-box" style="background: none;">
    <div id="hotelist_bg" class="">
        <div class="hotellist_bg_loading tac">
            <b class="dib">
                <img class="fl" src="https://img.haoqiao.com/website/images/hotel_list/hotel_list_loading.gif?v=v10.03">
                <span class="f14 t-666 dib fl">正在查询</span>
            </b>
        </div>
    </div>
</div>
<script type="text/javascript" src="./static/js/jquery.mini.js?v10.03"></script>
<link rel="stylesheet" href="./static/css/autocomplete.css?v10.03">
<link rel="stylesheet" type="text/css" href="./static/css/jquery-ui.css?v10.03">
<script type="text/javascript" src="./static/js/jquery-ui.js?v10.03"></script>
<script type="text/javascript" src="./static/js/main.js?v10.03"></script>
<script src="./js/lib/vue.js" type="text/javascript"></script>
<script src="./js/lib/moment.js" type="text/javascript"></script>
<script src="./js/lib/element-ui/index.js" type="text/javascript"></script>
<script src="./js/loginComponent.js" type="text/javascript"></script>
<script src="./static/js/orderList.js"></script>
</body>
</html>