1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228 |
- <!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" 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>
- .box-main {
- position: relative;
- height: auto;
- }
- .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;
- }
- .footer-shifu-text {
- font-size: .28rem;
- color: #333333;
- margin-left: 2px;
- }
- .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-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 {
- font-size: .3rem;
- color: #333333;
- }
- .goods-info-num {
- margin-top: 5px;
- font-size: .25rem;
- color: #A9A9A9
- }
- .placeholder-footer {
- height: 1rem;
- }
- .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;
- }
- </style>
- <body>
- <div id="app" style="background-color: #f5f5f5;" v-cloak>
- <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, index) in item.bizOrderInfoDtoList">
- <div class="content-box">
- <div class="content-info-left">
- <div class="card-img">
- <img src="image/cart_goods.png" style="width:2rem;height:2rem">
- </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">{{item.isOnline === 1 ? '¥299.00' : '¥0.00'}}
- </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">总价¥398.00,使用奖励¥00.00</div>
- <div class="footer-shifu-text">实付款 ¥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, index) in item.bizOrderInfoDtoList">
- <div class="content-box">
- <div class="content-info-left">
- <div class="card-img">
- <img src="image/cart_goods.png" style="width:2rem;height:2rem">
- </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">{{item.isOnline === 1 ? '¥299.00' : '¥0.00'}}
- </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">总价¥398.00,使用奖励¥00.00</div>
- <div class="footer-shifu-text">实付款 ¥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, index) in item.bizOrderInfoDtoList">
- <div class="content-box">
- <div class="content-info-left">
- <div class="card-img">
- <img src="image/cart_goods.png" style="width:2rem;height:2rem">
- </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">{{item.isOnline === 1 ? '¥299.00' : '¥0.00'}}
- </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">总价¥398.00,使用奖励¥00.00</div>
- <div class="footer-shifu-text">实付款 ¥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, index) in item.bizOrderInfoDtoList">
- <div class="content-box">
- <div class="content-info-left">
- <div class="card-img">
- <img src="image/cart_goods.png" style="width:2rem;height:2rem">
- </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">{{item.isOnline === 1 ? '¥299.00' : '¥0.00'}}
- </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">总价¥398.00,使用奖励¥00.00</div>
- <div class="footer-shifu-text">实付款 ¥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, index) in item.bizOrderInfoDtoList">
- <div class="content-box">
- <div class="content-info-left">
- <div class="card-img">
- <img src="image/cart_goods.png" style="width:2rem;height:2rem">
- </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">{{item.isOnline === 1 ? '¥299.00' : '¥0.00'}}
- </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">总价¥398.00,使用奖励¥00.00</div>
- <div class="footer-shifu-text">实付款 ¥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, index) in item.bizOrderInfoDtoList">
- <div class="content-box">
- <div class="content-info-left">
- <div class="card-img">
- <img src="image/cart_goods.png" style="width:2rem;height:2rem">
- </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">{{item.isOnline === 1 ? '¥299.00' : '¥0.00'}}
- </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">总价¥398.00,使用奖励¥00.00</div>
- <div class="footer-shifu-text">实付款 ¥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">
- <img style="width: 30px; height: 30px;" src="./image/shouji.png" />
- <div class="driver-tel-text">13000000000</div>
- <div class="driver-tel-tag">点击拨打电话</div>
- </div>
- <div class="driver-num-box">
- <img style="width: 30px; height: 30px;" src="./image/chepai.png" />
- <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>
- </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">
- apiready = function () {
- new Vue({
- el: '#app',
- data: {
- active: 0,
- tabTitles: ['全部', '待支付', '待确认', '待收货', '已完成', '已取消'],
- list: [
- [
- {
- type: 4,
- orderNum: '202103021045545730',
- agentAuditStatusName: '已完成',
- isOnline: 1,
- bizOrderInfoDtoList: [{
- maktx: '195/65R15 91V SH56 BGSL',
- spec: '195/65R15',
- pattern: 'SH56'
- }],
- }, {
- type: 1,
- orderNum: '202103021045545730',
- agentAuditStatusName: '等待付款',
- isOnline: 1,
- bizOrderInfoDtoList: [{
- maktx: '195/65R15 91V SH56 BGSL',
- spec: '195/65R15',
- pattern: 'SH56'
- }],
- }, {
- type: 2,
- orderNum: '202103021045545730',
- agentAuditStatusName: '待入库',
- isOnline: 1,
- 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,
- bizOrderInfoDtoList: [{
- maktx: '195/65R15 91V SH56 BGSL',
- spec: '195/65R15',
- pattern: 'SH56'
- }],
- }, {
- type: 5,
- orderNum: '202103021045545730',
- agentAuditStatusName: '已取消',
- isOnline: 1,
- cancelInfo: '因代理商库存不足,此订单已被驳回~',
- bizOrderInfoDtoList: [{
- maktx: '195/65R15 91V SH56 BGSL',
- spec: '195/65R15',
- pattern: 'SH56'
- }],
- }, {
- type: 2,
- orderNum: '202103021045545730',
- agentAuditStatusName: '等待付款',
- isOnline: 0,
- bizOrderInfoDtoList: [{
- maktx: '195/65R15 91V SH56 BGSL',
- spec: '195/65R15',
- pattern: 'SH56'
- }],
- }
- ], [
- // {
- // type: 1,
- // orderNum: '202103021045545730',
- // agentAuditStatusName: '等待付款',
- // isOnline: 1,
- // bizOrderInfoDtoList: [{
- // maktx: '195/65R15 91V SH56 BGSL',
- // spec: '195/65R15',
- // pattern: 'SH56'
- // }],
- // }, {
- // type: 1,
- // orderNum: '202103021045545730',
- // agentAuditStatusName: '等待付款',
- // isOnline: 1,
- // bizOrderInfoDtoList: [{
- // maktx: '195/65R15 91V SH56 BGSL',
- // spec: '195/65R15',
- // pattern: 'SH56'
- // }],
- // }
- ], [
- {
- type: 2,
- orderNum: '202103021045545730',
- agentAuditStatusName: '等待确认',
- isOnline: 1,
- bizOrderInfoDtoList: [{
- maktx: '195/65R15 91V SH56 BGSL',
- spec: '195/65R15',
- pattern: 'SH56'
- }],
- }, {
- type: 2,
- orderNum: '202103021045545730',
- agentAuditStatusName: '等待确认',
- isOnline: 0,
- bizOrderInfoDtoList: [{
- maktx: '195/65R15 91V SH56 BGSL',
- spec: '195/65R15',
- pattern: 'SH56'
- }],
- }, {
- type: 2,
- orderNum: '202103021045545730',
- agentAuditStatusName: '等待处理',
- isOnline: 0,
- bizOrderInfoDtoList: [{
- maktx: '195/65R15 91V SH56 BGSL',
- spec: '195/65R15',
- pattern: 'SH56'
- }],
- }
- ], [
- {
- type: 3,
- orderNum: '202103021045545730',
- agentAuditStatusName: '已入库',
- isOnline: 1,
- 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,
- 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,
- bizOrderInfoDtoList: [{
- maktx: '195/65R15 91V SH56 BGSL',
- spec: '195/65R15',
- pattern: 'SH56'
- }],
- }, {
- type: 4,
- orderNum: '202103021045545730',
- agentAuditStatusName: '已完成',
- isOnline: 0,
- bizOrderInfoDtoList: [{
- maktx: '195/65R15 91V SH56 BGSL',
- spec: '195/65R15',
- pattern: 'SH56'
- }],
- }
- ], [
- {
- type: 5,
- orderNum: '202103021045545730',
- agentAuditStatusName: '已取消',
- isOnline: 1,
- cancelInfo: null,
- bizOrderInfoDtoList: [{
- maktx: '195/65R15 91V SH56 BGSL',
- spec: '195/65R15',
- pattern: 'SH56',
- }],
- }, {
- type: 5,
- orderNum: '202103021045545730',
- agentAuditStatusName: '代理商拒绝',
- isOnline: 0,
- 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,
- },
- 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);
- }
- });
- },
- // 获取订单列表
- 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);
- }
- }
- });
- },
- // 查看订单详情
- lookOrderInfo: function (index) {
- },
- // 切换tab
- onTabChange: function (name, title) {
- this.currentList = this.list[this.active];
- },
- // tab切换拦截
- beforeChange: function (index) {
- console.log(index);
- return true;
- },
- // 取消订单
- onCancelOrder: function (index) {
- console.log('cancel order ' + index);
- _this = this;
- this.isHudCancelOrderShow = true;
- this.isHudBgShow = true;
- },
- // 去支付
- onPayOrder: function (index) {
- console.log('pay order ' + index);
- },
- // 再次购买
- onBuyAgain: function (index) {
- console.log('buy again ' + index);
- },
- // 查看司机信息
- 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;
- }
- },
- },
- mounted: function () {
- this.init();
- }
- });
- };
- </script>
- </html>
|