sailun
/
sailun-shop


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634
							<!DOCTYPE html>
<html>

<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;
        padding: 0 15px;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: #F4F5F6;
        margin-right: 10px;
        margin-top: 5px;
    }

    .nav-search-img {
        width: 16px;
        height: 16px;
    }

    .nav-search-text {
        font-size: 13px;
        color: #666666;
        margin: 0 5px 0 10px;
    }

    .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: 2.5rem;
    }

    .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;
        z-index: 1000;
    }

    .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" tapmode onclick="closeWin()"> <span
                        class="aui-iconfont aui-icon-left" style="color: #333333"></span> </a>
                <div class="aui-title" id="aui-title">
                    我的订单
                </div>
                <div class="nav-search-box aui-pull-right" v-on:click="onJumpToSearch">
                    <img class="nav-search-img" src="./image/049.png" />
                    <div class="nav-search-text">搜索</div>
                </div>
            </div>
        </header>

        <van-tabs v-model="active" @change="onTabChange" color="#009DFE" :before-change="beforeChange"
            swipe-threshold="6">
            <van-tab v-for="(title, index) in tabTitles" :key="index" type="line" :title="title">
            </van-tab>
        </van-tabs>
        <!-- 全部 -->
        <div class="box-main mescroll-touch-y mescroll" v-show="active === 0 && currentList.length > 0" id="mescroll0">
            <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="box-main mescroll-touch-y mescroll" v-show="active === 1 && currentList.length > 0" id="mescroll1">
            <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-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>

                        </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-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>
                    </div>
                    <div class="placeholder-footer"></div>
                </div>
            </div>
        </div>

        <!-- 待确认 -->
        <div class="box-main mescroll-touch-y mescroll" v-show="active === 2 && currentList.length > 0" id="mescroll2">
            <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-offline-box">
                                <div class="footer-btn-box" v-if="item.type === 2">
                                    <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-btn-box" v-if="item.type === 2">
                                <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="box-main mescroll-touch-y mescroll" v-show="active === 3 && currentList.length > 0" id="mescroll3">
            <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-offline-box">
                                <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>

                        </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-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>
                    </div>
                    <div class="placeholder-footer"></div>
                </div>
            </div>
        </div>

        <!-- 已完成 -->
        <div class="box-main mescroll-touch-y mescroll" v-show="active === 4 && currentList.length > 0" id="mescroll4">
            <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-offline-box">
                                <div class="footer-btn-box" v-if="item.type === 4">
                                    <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-btn-box" v-if="item.type === 4">
                                <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="box-main mescroll-touch-y mescroll" v-if="active === 5 && currentList.length > 0" id="mescroll5">
            <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 === 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 === 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" 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);
        // var headerPos = $api.offset(header);
        // var body_h = $api.offset($api.dom('body')).h;
        // api.openFrame({
        //     name: 'myOrderList_body',
        //     url: 'myOrderList_body.html',
        //     bounces: false,
        //     vScrollBarEnabled: false,
        //     hScrollBarEnabled: false,
        //     rect: {
        //         x: 0,
        //         y: headerPos.h,
        //         w: 'auto',
        //         h: 'auto'
        //     },
        //     bgColor: '#f5f5f5',
        // });
        new Vue({
            el: '#app',
            data: {
                active: 0,
                tabTitles: ['全部', '待支付', '待确认', '待收货', '已完成', '已取消'],
                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: 1,
                            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: 2,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56'
                            }],
                        }, {
                            type: 5,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '已取消',
                            isOnline: 1,
                            id: 3,
                            cancelInfo: '因代理商库存不足，此订单已被驳回~',
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56',
                                isBk: true,
                            }],
                        }, {
                            type: 2,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '等待付款',
                            isOnline: 0,
                            id: 4,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56'
                            }],
                        }
                    ], [
                        // {
                        //     type: 1,
                        //     orderNum: '202103021045545730',
                        //     agentAuditStatusName: '等待付款',
                        //     isOnline: 1,
                        //     id: '1345687',
                        //     bizOrderInfoDtoList: [{
                        //         maktx: '195/65R15 91V SH56 BGSL',
                        //         spec: '195/65R15',
                        //         pattern: 'SH56'
                        //     }],
                        // }, {
                        //     type: 1,
                        //     orderNum: '202103021045545730',
                        //     agentAuditStatusName: '等待付款',
                        //     isOnline: 1,
                        //     id: '1345643',
                        //     bizOrderInfoDtoList: [{
                        //         maktx: '195/65R15 91V SH56 BGSL',
                        //         spec: '195/65R15',
                        //         pattern: 'SH56'
                        //     }],
                        // }
                    ], [
                        {
                            type: 2,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '等待确认',
                            isOnline: 1,
                            id: 3,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56'
                            }],
                        }, {
                            type: 2,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '等待确认',
                            isOnline: 0,
                            id: 4,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56'
                            }],
                        }, {
                            type: 2,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '等待处理',
                            isOnline: 0,
                            id: 3,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56'
                            }],
                        }
                    ], [
                        {
                            type: 3,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '已入库',
                            isOnline: 1,
                            id: 5,
                            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: 5,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56'
                            }, {
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56'
                            }],
                        }
                    ], [
                        {
                            type: 4,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '已完成',
                            isOnline: 1,
                            id: 6,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56'
                            }],
                        }, {
                            type: 4,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '已完成',
                            isOnline: 0,
                            id: 6,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56'
                            }],
                        }
                    ], [
                        {
                            type: 5,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '已取消',
                            isOnline: 1,
                            id: 7,
                            cancelInfo: null,
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56',
                            }],
                        }, {
                            type: 5,
                            orderNum: '202103021045545730',
                            agentAuditStatusName: '代理商拒绝',
                            isOnline: 0,
                            id: 7,
                            cancelInfo: '因代理商库存不足，此订单已被订单驳回~',
                            bizOrderInfoDtoList: [{
                                maktx: '195/65R15 91V SH56 BGSL',
                                spec: '195/65R15',
                                pattern: 'SH56',
                            }],
                        }
                    ]
                ], // 测试数据
                loading: false,
                finished: false,
                refreshing: false,
                pages: [1, 1, 1, 1, 1, 1],
                totalPages: [1, 1, 1, 1, 1, 1],
                getOrdersU: 'getOrderListU',
                currentList: [],
                size: 10,
                isHudBgShow: false,
                isHudDriverShow: false,
                isHudCancelOrderShow: false,
                isHudCancelPayShow: false,
                isHudPayBgShow: false,
                isHudPayShow: false,
                alipayChecked: false,
                wechatChecked: false,
                shanfuChecked: false,
            },
            methods: {
                init: function () {
                    var _this = this;
                    this.userId = $api.getStorage('userid');
                    this.currentList = this.list[this.active];

                    this.getOrderList();
                    this.configDownAndPull('mescroll' + this.active, function (mescroll) {
                        _this.pages[_this.active] = 1;
                        _this.getOrderList(mescroll);
                    }, function (mescroll) {
                        if (_this.pages[_this.active] < _this.totalPages[_this.active]) {
                            _this.pages[_this.active] = _this.pages[_this.active] + 1;
                            _this.getOrderList(mescroll, 1);
                        } else {
                            mescroll.endSuccess(_this.size, false);
                        }
                    });
                },
                // 跳转到搜索页面
                onJumpToSearch: function () {
                    this.goWin('orderSearch', 'orderSearch.html');
                },
                // 获取订单列表
                getOrderList: function (mescroll) {
                    var data = {
                        "retailerId": this.userId,
                        "size": this.size,
                        "current": this.pages[this.active],
                        "url": "json",
                        "type": "body",
                    }
                    _this = this;
                    url = this.getOrdersU;
                    this.$post(url, data, function (ret) {
                        if (ret.code == 0 || ret.code == '0') {
                            console.log(JSON.stringify(ret.data));
                            // _this.totalPages[_this.active] = ret.data.pages;
                            // _this.list[_this.active] = _this.pages[_this.active] == 1 ? ret.data.records : _this.list[_this.active].concat(ret.data.records);
                            _this.currentList = _this.list[_this.active];
                            if (mescroll) {
                                mescroll.endSuccess(_this.size, true);
                            }
                        }
                    });
                },
                // 切换tab
                onTabChange: function (name, title) {
                    this.currentList = this.list[this.active];
                },

                // tab切换拦截
                beforeChange: function (index) {
                    console.log(index);
                    return true;
                },
                // 查看订单详情
                onOrderInfo: function (index) {
                    this.goWin('myOrderInfo', 'myOrderInfo_win.html', {
                        id: this.currentList[index].id,
                    });
                },
                // 取消订单
                onCancelOrder: function (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.getOrderList();
                },
                // 关闭司机信息提示框
                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>