sailun
/
sailun-shop


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300
							<!DOCTYPE html>
<html class="">
<!--STATUS OK-->

<head>
    <meta name="referrer" content="always" />
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <meta name="description" content="">
    <meta name="format-detection" content="telephone=no" />
    <!-- <link rel="stylesheet" type="text/css" href="css/vant-ui.css" /> -->
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-win.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
    <link rel="stylesheet" type="text/css" href="css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script src="js/vue.js"></script>
    <!-- <script src="js/vant-ui.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
    <script src="js/main.js"></script>
    <link rel="stylesheet" href="./mescroll/mescroll.min.css">
    <script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
    <title></title>
</head>

<style>
    .nav-search-box {
        height: 30px;
        border-radius: 15px;
        display: flex;
        justify-items: center;
        align-items: center;
        background-image: linear-gradient(to right, #00B9FB, #0099FF);
    }

    .nav-search-text {
        font-size: 13px;
        color: #ffffff;
        margin-left: 15px;
        margin-right: 5px;
    }

    .nav-search-input {
        margin-top: -10px;
    }

    .unsearch-box {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .history-box {
        width: 100%;
        background-color: #FFFFFF;
        padding: .2rem 0;
        display: flex;
        flex-direction: column;
    }

    .history-title-box {
        margin: 0 .2rem;
        display: flex;
        flex-direction: row;
        position: relative;
        align-items: center;
    }

    .history-title {
        font-size: .3rem;
        color: #333333;
        flex: 1;
    }

    .history-delete-img-box {
        width: .35rem;
        height: .35rem;
    }

    .history-items-box {
        margin: 0 .2rem;
        display: flex;
        flex-wrap: wrap;
        padding: .1rem 0;
        white-space: wrap;
    }

    .history-item {
        height: 30px;
        border-radius: 15px;
        display: flex;
        justify-items: center;
        align-items: center;
        background-color: #F4F5F6;
        margin: .15rem;
    }

    .history-item-text {
        font-size: .28rem;
        color: #666666;
        padding: 0 .2rem;
        white-space: nowrap;
    }

    .bk-box {
        width: 100%;
        padding: .2rem 0;
        display: flex;
        flex-direction: column;
    }

    .bk-title-box {
        margin: 0 .2rem;
        display: flex;
        flex-direction: row;
        position: relative;
        align-items: center;
    }

    .bk-title-left-box {
        flex: 1;
    }

    .bk-title-img {
        width: 79px;
        height: 20px;
    }

    .bk-more {
        font-size: .25rem;
        color: #999999;
    }

    .bk-goods-bg-box {
        margin: 0 .2rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .bk-goods-box {
        width: 32%;
        border-radius: .1rem;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .bk-goods-img-box {
        width: 100%;
        position: relative;
    }

    .bk-goods-title {
        margin: .1rem;
        font-size: .21rem;
    }

    .box-main {
        position: relative;
    }

    .card {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .card-list {
        width: 100%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        margin-top: .2rem;
        width: 7rem;
        border-radius: .2rem;
    }

    .card-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #F1F1F1;
        margin: 0 .2rem;
        padding: .3rem 0;
    }

    .header-orderNum-box {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .header-orderNum {
        font-size: .25rem;
        color: #333333;
    }

    .header-offline {
        font-size: .23rem;
        height: .32rem;
        ;
        border-radius: .16rem;
        padding: 0 .1rem;
        display: flex;
        align-items: center;
        border: 1px solid #A0CFFF;
        color: #4EB8FF;
        background-color: #F4FDFF;
        margin-left: .1rem;
    }

    .header-orderStatus {
        font-size: .3rem;
    }

    .orderStatus-normal {
        color: #999999;
    }

    .orderStatus-highlight {
        color: #F92500;
    }

    .card-footer {
        display: flex;
        flex-direction: column;
        margin: 0 .2rem;
        padding: .3rem 0;
    }

    .footer-desc-box {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin-bottom: .2rem;
    }

    .footer-total-text {
        font-size: .28rem;
        color: #A9A9A9;
        display: flex;
        align-items: flex-end;
    }

    .footer-shifu-text {
        font-size: .28rem;
        color: #333333;
        margin-left: 2px;
        display: flex;
        align-items: flex-end;
    }

    .footer-cancel-box {
        width: 100%;
        height: 0.75rem;
        border-radius: 0.375rem;
        background-color: #F4F5F6;
        padding: 0 .3rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-bottom: .2rem;
    }

    .footer-cancel-tag {
        font-size: .23rem;
        color: #333333;
        margin-right: .15rem;
    }

    .footer-cancel-text {
        font-size: .23rem;
        color: #666666;
    }

    .footer-offline-box {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .footer-btn-box {
        display: flex;
        flex: 1;
        flex-direction: row;
        justify-content: flex-end;
    }

    .footer-offline-text {
        font-size: .3rem;
        color: #A9A9A9;
    }

    .card-content {
        display: flex;
        flex-direction: column;
        margin: 0 .2rem;
        padding: .2rem 0;
    }

    .content-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .content-info-left {
        display: flex;
        flex-direction: row;
    }

    .content-img {
        position: relative;
        border-radius: .2rem;
    }

    .content-bk-tag {
        width: 41px;
        height: 13px;
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .content-goods-info {
        display: flex;
        flex-direction: column;
        margin-left: .2rem;
        flex: 1;
    }

    .goods-info-title {
        font-size: .3rem;
        color: #333333;
    }

    .goods-info-size {
        font-size: .25rem;
        color: #999999;
        margin-top: 5px;
    }

    .content-info-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: .3rem 0;
    }

    .goods-info-price-box {
        display: flex;
        align-items: flex-end;
    }

    .goods-info-price-tag {
        font-size: .23rem;
        color: #333333;
        margin-bottom: 1px;
    }

    .goods-info-price-text {
        font-size: .3rem;
        color: #333333;
    }

    .goods-info-num {
        margin-top: 5px;
        font-size: .25rem;
        color: #A9A9A9
    }

    .placeholder-footer {
        height: 2rem;
    }

    .mescroll-box {
        display: none;
    }

    .list-btn-normal {
        height: 0.68rem;
        border-radius: 0.34rem;
        border: 1px solid #009BFF;
        color: #009DFE;
        width: 2rem;
    }

    .list-btn-highlight {
        height: 0.68rem;
        border-radius: 0.34rem;
        color: #ffffff;
        background-image: linear-gradient(to right, #24BBFB, #0098FF);
        border: 1px solid #24BBFB;
        width: 2rem;
    }

    .list-btn-driver {
        height: 0.68rem;
        border-radius: 0.34rem;
        color: #ffffff;
        padding: 0 .3rem;
        border: 1px solid #b5b5b5;
        color: #888888;
    }

    .list-btn-cancel {
        height: 0.68rem;
        border-radius: 0.34rem;
        color: #ffffff;
        border: 1px solid #b5b5b5;
        color: #888888;
        width: 2rem;
    }

    .hud-bg {
        position: fixed;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.6);
        top: 0px;
        left: 0px;
    }

    .hud-cont-box {
        background-color: #ffffff;
        border-radius: .3rem;
        padding: .5rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 84%
    }

    .driver-title {
        font-size: .5rem;
        font-weight: bold;
        color: #000000;
        margin: .2rem 0;
    }

    .driver-userInfo-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: .2rem 0;
    }

    .driver-userInfo-avatar {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 50%;
    }

    .driver-userInfo-name {
        font-size: .4rem;
        color: #333333;
        margin-left: .2rem;
    }

    .driver-contact-box {
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        justify-content: center;
        margin: .2rem .2rem;
    }

    .driver-tel-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: .3rem .2rem;
        border-bottom: 1px solid #f1f1f1;
    }

    .driver-tel-text {
        font-size: .3rem;
        color: #666666;
        margin: 0 .2rem;
    }

    .driver-tel-tag {
        font-size: .25rem;
        color: #999999;
    }

    .driver-num-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: .3rem .2rem;
        border-bottom: 1px solid #f1f1f1;
    }

    .driver-num-text {
        font-size: .3rem;
        color: #666666;
        margin-left: .2rem;
    }

    .driver-close {
        height: 0.84rem;
        border-radius: 0.42rem;
        color: #ffffff;
        background-image: linear-gradient(#0099FF, #00B9FB);
        width: 3rem;
        margin: .3rem 0 .2rem 0;
    }

    .cancel-order-title {
        font-size: .35rem;
        color: #333333;
        margin: .2rem 0;
    }

    .cancel-order-btn-box {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: .2rem .2rem;
    }

    .cancel-order-cancel {
        height: 0.74rem;
        border-radius: 0.37rem;
        border: 1px solid #009BFF;
        color: #009DFE;
        width: 2.5rem;
    }

    .cancel-order-sure {
        height: 0.8rem;
        border-radius: 0.4rem;
        color: #ffffff;
        background-image: linear-gradient(#0099FF, #00B9FB);
        border: 1px solid #00B9FB;
        width: 2.5rem;
        margin-left: .2rem;
    }

    .noOrder-box {
        margin: 2rem auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .noOrder-img {
        width: 3.5rem;
        height: 3.5rem;
    }

    .noOrder-text {
        font-size: .35rem;
        color: #666666;
        margin-top: .2rem;
    }

    .pay-hud-bg {
        position: fixed;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.6);
        top: 0px;
        left: 0px;
        z-index: 900;
    }

    .hud-pay-cont-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .pay-hud-cancel-btn {
        width: 86%;
        margin-top: .2rem;
        margin-bottom: .4rem;
        background-color: #999999;
        color: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0);
        border-radius: .2rem;
        height: .84rem;
        font-size: .32rem;
    }

    .pay-hud-pay-btn {
        width: 86%;
        margin: .2rem 0;
        background-image: linear-gradient(to right, #0099FF, #00B9FB);
        color: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0);
        border-radius: .2rem;
        height: .84rem;
        font-size: .32rem;
    }

    .pay-hud-cont-box {
        width: 86%;
        margin: .2rem 0;
        background-color: #ffffff;
        border-radius: .3rem;
        padding: .4rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }

    .pay-hud-cont-title {
        position: relative;
        font-size: .35rem;
        color: #333333;
        margin-top: .2rem;
    }

    .pay-hud-cont-downtime-box {
        position: relative;
        margin: .3rem;
        padding: .4rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: .15rem;
        background-color: #F4F5F6;
        width: 90%;
    }

    .pay-hud-cont-price-box {
        display: flex;
        align-items: flex-end;
    }

    .pay-hud-cont-price-tag {
        font-size: .3rem;
        color: #333333;
    }

    .pay-hud-cont-price-symbol {
        font-size: .28rem;
        color: #FB2200;
    }

    .pay-hud-cont-price-text {
        font-size: .35rem;
        color: #FB2200;
    }

    .pay-hud-cont-price-desc {
        font-size: .25rem;
        color: #888888;
    }

    .pay-hud-cont-pay-type-tag {
        font-size: .28rem;
        color: #999999;
        width: 90%;
        margin: .1rem 0;
    }

    .pay-hud-cont-pay-type-box {
        padding: .2rem 0;
        margin: 0 .3rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 90%;
    }

    .pay-hud-cont-pay-type-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex: 1;
    }

    .pay-hud-cont-pay-type-text {
        margin-left: .2rem;
        font-size: .32rem;
        color: #333333;
    }
</style>

<body>
    <div id="app" style="background-color: #F5F5F5" v-cloak>
        <!-- 导航栏 -->
        <header class="aui-bar aui-bar-nav" id="aui-header" style="background-color:#ffffff !important;color: #333333">
            <div>
                <a class="aui-btn aui-btn-info aui-pull-left" style="margin-top: 5px;" tapmode onclick="closeWin()">
                    <span class="aui-iconfont aui-icon-left" style="color: #333333"></span> </a>
                <van-search class="nav-search-input" v-model="value" show-action shape="round" clear-trigger="always"
                    placeholder="请输入商品名/订单号" @search="onSearch">
                    <template #action>
                        <div class="nav-search-box aui-pull-right" @click="onSearch">
                            <div class="nav-search-text">搜索</div>
                        </div>
                    </template>
                </van-search>
            </div>
        </header>

        <div class="unsearch-box" v-if="isShowUnsearch">
            <div class="history-box" v-show="history.length > 0">
                <div class="history-title-box">
                    <div class="history-title">历史搜索</div>
                    <div class="history-delete-img-box">
                        <img style="width: 100%; height: 100%" src="./image/icon_search_del.png" v-on:click="onClear" />
                    </div>
                </div>
                <div class="history-items-box">
                    <div class="history-item" v-for="(item, index) in history" :key="index"
                        v-on:click="onHistory(index)">
                        <div class="history-item-text">{{item}}</div>
                    </div>
                </div>
            </div>

            <div class="bk-box">
                <div class="bk-title-box">
                    <div class="bk-title-left-box">
                        <img class="bk-title-img" src="./image//icon_search_bk.png" />
                    </div>
                    <div class="bk-more" v-on:click="onBKMore">更多></div>
                </div>
                <div class="bk-goods-bg-box">
                    <div class="bk-goods-box" v-for="(item, index) in bkGoods" :key="index"
                        v-on:click='onBKGoods(index)'>
                        <div class="bk-goods-img-box">
                            <img style="width: 100%" src="./image/cart_goods.png" />
                        </div>
                        <div class="bk-goods-title">{{item.goodsName}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="box-main mescroll-touch-y mescroll" v-else v-show="currentList.length > 0" id="mescroll">
            <div class="card-main">
                <div class="card" id="orderList">
                    <div class="card-list" v-for="(item, index) in currentList" :key="index">
                        <!-- 订单号 状态 -->
                        <div class="card-header">
                            <div class="header-orderNum-box">
                                <div class="header-orderNum">订单号 {{item.orderNum}}</div>
                                <div class="header-offline" v-if="item.isOnline === 0">线下支付</div>
                            </div>

                            <div v-if="item.type === 1" class="header-orderStatus orderStatus-highlight">
                                {{item.agentAuditStatusName}}</div>
                            <div v-else class="header-orderStatus orderStatus-normal">{{item.agentAuditStatusName}}
                            </div>
                        </div>
                        <!-- 商品信息 -->
                        <div class="card-content" v-for="(cont, i) in item.bizOrderInfoDtoList"
                            v-on:click="onOrderInfo(index)">
                            <div class="content-box">
                                <div class="content-info-left">
                                    <div class="content-img">
                                        <img src="image/cart_goods.png" style="width:2rem;height:2rem" />
                                        <img v-show="cont.isBk" class="content-bk-tag"
                                            src="image/icon_baokuancuxiao.png" />
                                    </div>
                                    <div class="content-goods-info">
                                        <div class="goods-info-title">{{cont.maktx}}</div>
                                        <div class="goods-info-size">{{cont.spec}} {{cont.pattern}}</div>
                                    </div>
                                </div>
                                <div class="content-info-right">
                                    <div class="goods-info-price-box">
                                        <div class="goods-info-price-tag">￥</div>
                                        <div class="goods-info-price-text">{{item.isOnline === 1 ? '299.00' : '0.00'}}
                                        </div>
                                    </div>
                                    <div class="goods-info-num">x2</div>
                                </div>
                            </div>
                        </div>
                        <!-- 根据不同状态，布局不同 -->
                        <div class="card-footer" v-if="item.isOnline === 0">
                            <div class="footer-cancel-box" v-if="item.type === 5 && item.cancelInfo != null">
                                <div class="footer-cancel-tag">拒绝原因</div>
                                <div class="footer-cancel-text">{{item.cancelInfo}}</div>
                            </div>
                            <div class="footer-offline-box">
                                <div class="footer-btn-box" v-if="item.type === 1">
                                    <van-button class="list-btn-cancel" size="normal" @click="onCancelOrder(index)">取消订单
                                    </van-button>
                                </div>
                                <div class="footer-btn-box" v-if="item.type === 2 || item.type === 4">
                                    <van-button class="list-btn-normal" size="normal" @click="onBuyAgain(index)">再次购买
                                    </van-button>
                                </div>
                                <div class="footer-btn-box" v-if="item.type === 3">
                                    <van-button size="normal" class="list-btn-driver" @click="onCheckDriver(index)">
                                        查看司机信息
                                    </van-button>
                                    <van-button class="list-btn-normal" size="normal" style="margin-left: .2rem;"
                                        @click="onBuyAgain(index)">再次购买</van-button>
                                </div>
                                <div class="footer-btn-box" v-if="item.type === 5">
                                    <van-button class="list-btn-normal" size="normal" @click="onBuyAgain(index)">再次购买
                                    </van-button>
                                </div>
                            </div>

                        </div>
                        <div v-else class="card-footer">
                            <div class="footer-desc-box">
                                <div class="footer-total-text">总价<div style="font-size: .21rem; margin-bottom: 1px;">￥
                                    </div>398.00,使用奖励<div style="font-size: .21rem; margin-bottom: 1px;">￥</div>00.00
                                </div>
                                <div class="footer-shifu-text">实付款 <div style="font-size: .21rem; margin-bottom: 1px;">￥
                                    </div>598.00</div>
                            </div>
                            <div class="footer-cancel-box" v-if="item.type === 5 && item.cancelInfo != null">
                                <div class="footer-cancel-tag">拒绝原因</div>
                                <div class="footer-cancel-text">{{item.cancelInfo}}</div>
                            </div>
                            <div class="footer-btn-box" v-if="item.type === 1">
                                <van-button class="list-btn-cancel" size="normal" @click="onCancelOrder(index)">取消订单
                                </van-button>
                                <van-button class="list-btn-highlight" size="normal" style="margin-left: .2rem;"
                                    @click="onPayOrder(index)">去支付</van-button>
                            </div>
                            <div class="footer-btn-box" v-if="item.type === 2 || item.type === 4">
                                <van-button class="list-btn-normal" size="normal" @click="onBuyAgain(index)">再次购买
                                </van-button>
                            </div>
                            <div class="footer-btn-box" v-if="item.type === 3">
                                <van-button size="normal" class="list-btn-driver" @click="onCheckDriver(index)">查看司机信息
                                </van-button>
                                <van-button class="list-btn-normal" size="normal" style="margin-left: .2rem;"
                                    @click="onBuyAgain(index)">再次购买</van-button>
                            </div>
                            <div class="footer-btn-box" v-if="item.type === 5">
                                <van-button class="list-btn-normal" size="normal" @click="onBuyAgain(index)">再次购买
                                </van-button>
                            </div>
                        </div>
                    </div>
                    <div class="placeholder-footer"></div>
                </div>
            </div>
        </div>

        <div class="noOrder-box" v-show="currentList.length == 0 && !isShowUnsearch" style="text-align:center">
            <img class="noOrder-img" src="./image/noOrder.png" />
            <div class="noOrder-text">您还没有相关订单</div>
        </div>

        <div class="hud-bg" v-if="isHudBgShow">
            <!-- 查看司机信息 -->
            <div class="hud-cont-box" v-if="isHudDriverShow">
                <div class="driver-title">司机信息</div>
                <div class="driver-userInfo-box">
                    <img class="driver-userInfo-avatar" src="./image/siji_avatar_default.png" />
                    <div class="driver-userInfo-name">流川枫</div>
                </div>
                <div class="driver-contact-box">
                    <div class="driver-tel-box" v-on:click="onDialNumber">
                        <div
                            style="width:28px; height: 26px; display: flex; justify-content: center; align-items: center;">
                            <img style="width: 21px; height: 26px;" src="./image/shouji.png" />
                        </div>
                        <div class="driver-tel-text">13000000000</div>
                        <div class="driver-tel-tag">点击拨打电话</div>
                    </div>
                    <div class="driver-num-box">
                        <div
                            style="width:28px; height: 26px; display: flex; justify-content: center; align-items: center;">
                            <img style="width: 28px; height: 23px;" src="./image/chepai.png" />
                        </div>
                        <div class="driver-num-text">鲁B12345</div>
                    </div>
                </div>
                <van-button class="driver-close" size="normal" @click="onClickCloseDriverHud">关闭</van-button>
            </div>
            <!-- 取消订单 -->
            <div class="hud-cont-box" v-if="isHudCancelOrderShow">
                <div class="cancel-order-title">确定要取消订单？</div>
                <div class="cancel-order-btn-box">
                    <van-button class="cancel-order-cancel" @click="onClickCancelAlert(1)" size="normal">取消</van-button>
                    <van-button class="cancel-order-sure" @click="onClickCancelAlert(2)" size="normal">确定</van-button>
                </div>
            </div>
            <!-- 取消支付 -->
            <div class="hud-cont-box" v-if="isHudCancelPayShow">
                <div class="cancel-order-title">确定要放弃付款吗？</div>
                <div class="cancel-order-btn-box">
                    <van-button class="cancel-order-cancel" @click="onClickCancelPayAlert(1)" size="normal">放弃
                    </van-button>
                    <van-button class="cancel-order-sure" @click="onClickCancelPayAlert(2)" size="normal">继续付款
                    </van-button>
                </div>
            </div>
        </div>

        <div class="pay-hud-bg" v-if="isHudPayBgShow">
            <!-- 支付 -->
            <div class="hud-pay-cont-box" v-if="isHudPayShow">
                <div class="pay-hud-cont-box">
                    <div style="width: 24px; height: 24px; position: absolute; top: .3rem; left: .3rem;"
                        v-on:click="onClosePayAlert">
                        <img style="width: 100%; height: 100%" src="./image/icon_close.png" />
                    </div>
                    <div class="pay-hud-cont-title">收款方：工厂自营店</div>
                    <div class="pay-hud-cont-downtime-box">
                        <div class="pay-hud-cont-price-box">
                            <div class="pay-hud-cont-price-tag">金额：</div>
                            <div class="pay-hud-cont-price-symbol">¥</div>
                            <div class="pay-hud-cont-price-text">240.00</div>
                        </div>
                        <div class="pay-hud-cont-price-desc">请在0小时30分内完成支付</div>
                    </div>
                    <div class="pay-hud-cont-pay-type-tag">请选择支付方式</div>
                    <div class="pay-hud-cont-pay-type-box">
                        <div class="pay-hud-cont-pay-type-left">
                            <div style="width: 35px; height: 35px">
                                <img style="width: 100%; height: 100%" src="./image/icon_pay_alipay.png" />
                            </div>
                            <div class="pay-hud-cont-pay-type-text">支付宝</div>
                        </div>
                        <van-checkbox v-model="alipayChecked" icon-size="24px" @click="onChoosePayType(1)">
                        </van-checkbox>
                    </div>
                    <div class="pay-hud-cont-pay-type-box">
                        <div class="pay-hud-cont-pay-type-left">
                            <div style="width: 35px; height: 32px">
                                <img style="width: 100%; height: 100%" src="./image/icon_pay_wechat.png" />
                            </div>
                            <div class="pay-hud-cont-pay-type-text">微信支付</div>
                        </div>
                        <van-checkbox v-model="wechatChecked" icon-size="24px" @click="onChoosePayType(2)">
                        </van-checkbox>
                    </div>
                    <div class="pay-hud-cont-pay-type-box">
                        <div class="pay-hud-cont-pay-type-left">
                            <div style="width: 35px; height: 35px">
                                <img style="width: 100%; height: 100%" src="./image/icon_pay_shanfu.png" />
                            </div>
                            <div class="pay-hud-cont-pay-type-text">云闪付</div>
                        </div>
                        <van-checkbox v-model="shanfuChecked" icon-size="24px" @click="onChoosePayType(3)">
                        </van-checkbox>
                    </div>
                </div>
                <van-button class="pay-hud-pay-btn" @click="onClickPayCancelPay(1)">支付</van-button>
                <van-button class="pay-hud-cancel-btn" @click="onClickPayCancelPay(2)">取消</van-button>
            </div>
        </div>
    </div>
</body>
<link rel="stylesheet" href="./mescroll/mescroll.min.css">
<script type="text/javascript" src="./js/qrcode.min.js"></script>
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<script type="text/javascript" src="./mescroll/mescroll.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/httpRequest.js"></script>
<script type="text/javascript" src="../script/vue_plugins.js"></script>
<script type="text/javascript">
    function closeWin() {
        api.closeWin({});
    }
    apiready = function () {
        api.parseTapmode();
        var header = $api.byId('aui-header');
        $api.fixStatusBar(header);
        new Vue({
            el: '#app',
            data: {
                value: '',
                list: [
                    [
                        {
                            type: 4,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '已完成',
                            isOnline: 1,
                            id: 0,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56',
                                isBk: false,
                            }],
                        }, {
                            type: 1,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '等待付款',
                            isOnline: 1,
                            id: 1,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56',
                                isBk: false,
                            }],
                        }, {
                            type: 2,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '待入库',
                            isOnline: 1,
                            id: 2,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56',
                                isBk: true,
                            }, {
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56',
                                isBk: true,
                            }],
                        }, {
                            type: 3,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '入库中',
                            isOnline: 0,
                            id: 3,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56'
                            }],
                        }, {
                            type: 5,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '已取消',
                            isOnline: 1,
                            id: 4,
                            cancelInfo: '因代理商库存不足，此订单已被驳回~',
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56',
                                isBk: true,
                            }],
                        }, {
                            type: 2,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '等待付款',
                            isOnline: 0,
                            id: 5,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56'
                            }],
                        }
                    ],
                    [
                        {
                            type: 2,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '待入库',
                            isOnline: 1,
                            id: 6,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56'
                            }, {
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56'
                            }],
                        }, {
                            type: 3,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '入库中',
                            isOnline: 0,
                            id: 7,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56'
                            }],
                        }
                    ],
                    []
                ],
                mescroll: '',
                history: [],
                bkGoods: [
                    {
                        goodsPic: './image/cart_goods.png',
                        goodsName: '赛轮轮胎 205/60R16 SH0808',
                    }, {
                        goodsPic: './image/cart_goods.png',
                        goodsName: '赛轮轮胎 205/60R16 SH0808',
                    }, {
                        goodsPic: './image/cart_goods.png',
                        goodsName: '赛轮轮胎 205/60R16 SH0808',
                    }
                ],
                current: 0,
                count: 0,
                currentList: [],
                isShowUnsearch: true,
                loading: false,
                finished: false,
                refreshing: false,
                isHudBgShow: false,
                isHudDriverShow: false,
                isHudCancelOrderShow: false,
                isHudCancelPayShow: false,
                isHudPayBgShow: false,
                isHudPayShow: false,
                alipayChecked: false,
                wechatChecked: false,
                shanfuChecked: false,
            },
            methods: {
                init: function () {
                    this.userId = $api.getStorage('userid');
                    var _this = this;
                    // 取出缓存的搜索历史
                    if (typeof ($api.getStorage('search_keyword')) != undefined) {
                        this.history = $api.getStorage('search_keyword');
                    }
                },
                // 点击搜索
                onSearch: function () {
                    _this = this;
                    if (this.value.length == 0) {
                        this.showToast("请输入商品名/订单号");
                    } else {
                        // TODO: 搜索网络请求
                        this.isShowUnsearch = false;
                        if (this.count % 3 == 0) {
                            this.current = 0;
                        } else if (this.count % 3 == 1) {
                            this.current = 1;
                        } else {
                            this.current = 2;
                        }
                        setTimeout(() => {
                            _this.byId('mescroll').scrollTo(0, 0);
                        }, 100);
                        this.currentList = this.list[this.current];
                        this.count++;
                        // 存储搜索关键字 
                        if (this.history.indexOf(this.value) > -1) {

                        } else {
                            if (this.history.length >= 15) {
                                this.history = this.history.slice(0, 15);
                            }
                            this.history.unshift(this.value);
                            $api.setStorage('search_keyword', this.history);
                        }
                    }
                },
                // 清空搜索历史
                onClear: function () {
                    this.history = [];
                    $api.setStorage('search_keyword', this.history);
                },
                // 点击历史搜索条目
                onHistory: function (index) {
                    this.value = this.history[index];
                },
                // 点击爆款促销商品
                onBKGoods: function (index) {

                },
                // 点击爆款促销更多
                onBKMore: function () {

                },
                getOrderSearchList: function () {

                },
                // 点击查看订单详情
                onOrderInfo: function (index) {
                    this.goWin('myOrderInfo', 'myOrderInfo_win.html', {
                        id: this.currentList[index].id,
                    });
                },
                // 取消订单
                onCancelOrder: function (index) {
                    console.log('cancel order ' + index);
                    _this = this;
                    this.isHudCancelOrderShow = true;
                    this.isHudBgShow = true;
                },
                // 去支付
                onPayOrder: function (index) {
                    this.isHudPayShow = true;
                    this.isHudPayBgShow = true;
                },
                // 再次购买
                onBuyAgain: function (index) {
                    this.goWin("product", "product.html");
                },
                // 查看司机信息
                onCheckDriver: function (index) {
                    this.isHudDriverShow = true;
                    this.isHudBgShow = true;
                },
                // 下拉刷新
                onRefresh: function () {
                    // 清空列表数据
                    this.finished = false;

                    // 重新加载数据
                    // 将 loading 设置为 true，表示处于加载状态
                    this.loading = true;
                    this.getOrderSearchList();
                },
                // 关闭司机信息提示框
                onClickCloseDriverHud: function () {
                    this.isHudDriverShow = false;
                    this.isHudBgShow = false;
                },
                // 拨打司机电话
                onDialNumber: function () {
                    console.log('拨打电话');
                    api.call({
                        type: 'tel_prompt',
                        number: '10086'
                    });
                },
                // 点击取消订单alert按钮 1 取消(关闭alert) 2 确定
                onClickCancelAlert: function (index) {
                    if (index === 1) {  // 取消按钮
                        this.isHudCancelOrderShow = false;
                        this.isHudBgShow = false;
                    }
                    if (index === 2) {  // 确定按钮
                        // TODO 网络请求
                        this.isHudCancelOrderShow = false;
                        this.isHudBgShow = false;
                    }
                },
                // 点击取消支付
                onClickPayCancelPay: function (index) {
                    if (index === 1) {
                        // 支付
                    }
                    if (index === 2) {
                        // 取消支付
                        this.isHudCancelPayShow = true;
                        this.isHudBgShow = true;
                    }
                },
                // 点击左上角关闭 取消支付
                onClosePayAlert: function () {
                    this.isHudCancelPayShow = true;
                    this.isHudBgShow = true;
                },
                // 点击支付方式
                onChoosePayType: function (type) {
                    // this.alipayChecked = this.wechatChecked = this.shanfuChecked = false;
                    // if (type == 1) {    // 支付宝
                    //     this.alipayChecked = true;
                    // } else if (type == 2) { // 微信支付
                    //     this.wechatChecked = true;
                    // } else if (type == 3) { // 云闪付
                    //     this.shanfuChecked = true;
                    // }
                },
                // 取消付款确认框
                onClickCancelPayAlert: function (index) {
                    // 1: 放弃；2：继续付款
                    if (index == 1) {
                        this.isHudCancelPayShow = false;
                        this.isHudBgShow = false;
                        this.isHudPayShow = false;
                        this.isHudPayBgShow = false;
                    } else if (index == 2) {
                        this.isHudCancelPayShow = false;
                        this.isHudBgShow = false;
                    }
                },
            },
            mounted: function () {
                this.init();
            }
        });
    };
</script>

</html>