12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529 |
- <!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>
- <title></title>
- </head>
- <style>
- .nav-bg {
- width: 150%;
- height: 100%;
- position: absolute;
- top: 0;
- left: -25%;
- background: linear-gradient(to right, #12A3F5, #0EB2FA);
- }
- .nav-back {
- position: fixed;
- z-index: 500;
- top: .9rem;
- left: .05rem;
- background-color: rgba(0, 0, 0, 0);
- border: none;
- }
- .box-main {
- width: 100%;
- height: 100%;
- position: relative;
- }
- .top-bg {
- width: 150%;
- position: absolute;
- background: linear-gradient(to right, #12A3F5, #0EB2FA);
- left: -25%;
- top: 0;
- border-bottom-left-radius: 50%;
- border-bottom-right-radius: 50%;
- }
- .top-bg-1 {
- height: 3rem;
- }
- .top-bg-2 {
- height: 6rem;
- }
- .info-box {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- position: relative;
- overflow-y: scroll;
- overflow-x: hidden;
- }
- .status-box {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- margin: 0 .2rem;
- margin-top: 1.8rem;
- }
- .status-title-box {
- display: flex;
- align-items: center;
- justify-content: center;
- color: #ffffff;
- }
- .status-title {
- font-size: .4rem;
- margin-left: .2rem;
- }
- .status-icon {
- width: .4rem;
- height: .4rem;
- }
- .status-desc-box {
- padding: .2rem 0;
- margin: 0 .2rem;
- color: rgba(255, 255, 255, 0.9);
- display: flex;
- justify-content: center;
- align-items: flex-end;
- }
- .status-desc-title {
- font-size: .32rem;
- }
- .status-desc-tag {
- font-size: .28rem;
- }
- .status-desc-downTime {
- font-size: .25rem;
- }
- /* 只有在待支付状态下才存在按钮 */
- .title-info-btn {
- background-color: #ffffff;
- width: 2.5rem;
- height: .7rem;
- border-radius: .35rem;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: .3rem;
- color: #12A3F5;
- margin: .2rem 0;
- }
- .bottom-bar {
- position: fixed;
- width: 100%;
- left: 0;
- bottom: 0;
- background-color: #ffffff;
- height: 1.2rem;
- display: flex;
- padding: .2rem;
- flex-direction: row;
- justify-content: flex-end;
- }
- .btn-normal {
- height: 0.68rem;
- border-radius: 0.34rem;
- border: 1px solid #009BFF;
- color: #009DFE;
- padding: 0 .3rem;
- margin-left: .2rem;
- }
- .btn-highlight {
- height: 0.68rem;
- border-radius: 0.34rem;
- color: #ffffff;
- background-image: linear-gradient(to right, #0098FF, #24BBFB);
- border: 1px solid #24BBFB;
- width: 2rem;
- margin-left: .2rem;
- }
- .btn-driver {
- height: 0.68rem;
- border-radius: 0.34rem;
- padding: 0 .3rem;
- border: 1px solid #009BFF;
- color: #009DFE;
- margin-left: .2rem;
- }
- .btn-cancel {
- height: 0.68rem;
- border-radius: 0.34rem;
- color: #ffffff;
- border: 1px solid #b5b5b5;
- color: #888888;
- width: 2rem;
- margin-left: .2rem;
- }
- .address-box {
- padding: .3rem .3rem;
- margin: 0 .2rem;
- margin-top: .5rem;
- background: #ffffff;
- border-radius: .2rem;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- }
- .address-icon-box {
- width: 43px;
- height: 44px;
- margin-right: .2rem
- }
- .address-arrow {
- width: 6px;
- height: 12px;
- margin-left: .2rem;
- }
- .address-info-box {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- flex: 1;
- }
- .address-info-name-box {
- display: flex;
- justify-content: center;
- }
- .address-info-name {
- font-size: .3rem;
- color: #333333;
- }
- .address-info-tel {
- font-size: .28rem;
- color: #555555;
- margin-left: .2rem;
- }
- .address-info-addr {
- font-size: .25rem;
- color: #444444;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 1;
- -webkit-box-orient: vertical;
- }
- .goods-box {
- padding: .3rem 0;
- margin: 0 .2rem;
- margin-top: .3rem;
- background: #ffffff;
- border-radius: .2rem;
- display: flex;
- flex-direction: column;
- }
- .goods-title-box {
- padding-bottom: .2rem;
- border-bottom: 2px solid #f1f1f1;
- margin: 0 .3rem;
- display: flex;
- align-items: center;
- }
- .goods-title-icon-box {
- width: 22px;
- height: 18px;
- }
- .goods-title-text {
- font-size: .32rem;
- color: #333333;
- margin: 0 .2rem;
- }
- .goods-cont-box {
- display: flex;
- align-items: center;
- margin: 0 .3rem;
- padding: .2rem 0;
- }
- .goods-cont-img-box {
- width: 2rem;
- height: 2rem;
- border-radius: .05rem;
- }
- .goods-cont-info-box {
- flex: 1;
- margin-left: .2rem;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- height: 2rem;
- justify-content: space-around;
- }
- .goods-cont-name {
- font-size: .3rem;
- color: #333333;
- }
- .goods-cont-size-box {
- display: flex;
- flex-direction: row;
- align-items: center;
- }
- .goods-cont-pattern {
- font-size: .23rem;
- color: #999999;
- margin-left: .3rem;
- }
- .goods-cont-size-num {
- font-size: .23rem;
- color: #999999;
- }
- .goods-cont-price {
- font-size: .35rem;
- color: #333333;
- display: flex;
- align-items: flex-end;
- }
- .order-pay-box {
- padding: .3rem 0;
- margin: 0 .2rem;
- margin-top: .3rem;
- background: #ffffff;
- border-radius: .2rem;
- display: flex;
- flex-direction: column;
- }
- .order-pay-title-box {
- padding-bottom: .2rem;
- margin: 0 .3rem;
- display: flex;
- align-items: center;
- }
- .order-title-icon-box {
- width: 22px;
- height: 24px;
- }
- .order-pay-title-text {
- font-size: .32rem;
- color: #333333;
- margin: 0 .2rem;
- }
- .order-pay-cont-box {
- display: flex;
- flex-direction: column;
- margin: 0 .3rem;
- padding: .2rem 0;
- }
- .order-cont-info-box {
- display: flex;
- align-items: center;
- padding: .1rem 0;
- }
- .order-cont-info-tag {
- font-size: .3rem;
- color: #a9a9a9;
- }
- .order-cont-info-text {
- font-size: .3rem;
- color: #333333;
- }
- .order-cont-info-space {
- padding: .3rem 0;
- }
- .order-cont-info-copy-box {
- height: .36rem;
- border-radius: .18rem;
- background-color: #F4F5F6;
- margin: 0 .2rem;
- }
- .order-cont-info-copy {
- margin: 0 .2rem;
- font-size: .25rem;
- color: #999999;
- }
- .order-cont-info-btn-box {
- margin: 0 .2rem;
- padding-top: .2rem;
- display: flex;
- justify-content: center;
- }
- .order-cont-info-btn {
- height: 0.6rem;
- border-radius: 0.3rem;
- color: #ffffff;
- border: 1px solid #b5b5b5;
- color: #888888;
- padding: 0 .3rem;
- }
- .pay-title-icon-box {
- width: 25px;
- height: 25px;
- }
- .pay-cont-info-box {
- display: flex;
- align-items: center;
- padding: .1rem 0;
- }
- .pay-cont-info-tag {
- font-size: .3rem;
- color: #a9a9a9;
- flex: 1;
- }
- .pay-cont-info-price {
- font-size: .32rem;
- color: #555555;
- }
- .pay-cont-info-pay-box {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- margin-top: .1rem;
- }
- .pay-cont-info-pay-tag {
- font-size: .3rem;
- color: #a9a9a9;
- }
- .pay-cont-info-pay-price-text {
- font-size: .32rem;
- color: #F93600;
- }
- .placeholder-footer {
- padding: .75rem 0;
- margin: 0 .3rem;
- }
- .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;
- }
- .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 class="nav-bg"></div>
- <div>
- <a class="aui-btn aui-btn-info aui-pull-left" tapmode onclick="closeWin()"> <span
- class="aui-iconfont aui-icon-left" style="color: #ffffff"></span> </a>
- </div>
- </header> -->
- <van-button class="nav-back" @click="closeWin">
- <img style="width: 16px; height: 16px;" src="./image/icon_back.png" />
- </van-button>
- <div class="box-main" v-show="orderInfo">
- <div class="info-box">
- <div v-if="orderInfo.type === 1 && orderInfo.isOnline === 1" class="top-bg top-bg-2"></div>
- <div v-else class="top-bg top-bg-1"></div>
- <div class="status-box" style="z-index: 100;">
- <div class="status-title-box">
- <img class="status-icon" :src="orderInfo.statusImg" />
- <div class="status-title">{{orderInfo.statusName}}</div>
- </div>
- <div class="status-desc-box" v-if="orderInfo.type === 1">
- <div class="status-desc-tag" v-show="orderInfo.isOnline === 1">需付款:</div>
- <div class="status-desc-title" v-show="orderInfo.isOnline === 1">
- ¥{{orderInfo.payInfo.goodsTotalPrice}}</div>
- <div class="status-desc-tag" style="margin-left: .4rem" v-show="orderInfo.isOnline === 1">剩余:
- </div>
- <div class="status-desc-tag" v-show="orderInfo.isOnline !== 1">剩余:</div>
- <div class="status-desc-downTime">{{orderInfo.downTime}}</div>
- </div>
- <div v-else class="status-desc-box">
- <div class="status-desc-title">{{orderInfo.statusDesc}}</div>
- </div>
- <van-button v-show="orderInfo.type === 1 && orderInfo.isOnline === 1" class="title-info-btn"
- @click="onPayOrder">去支付</van-button>
- </div>
- <!-- 地址 -->
- <div class="address-box" v-on:click="onAddress" style="z-index: 100;">
- <div class="address-icon-box">
- <img style="width: 100%; height: 100%" src="./image/icon_dizhi.png" />
- </div>
- <div class="address-info-box">
- <div class="address-info-name-box">
- <div class="address-info-name">{{orderInfo.address.name}}</div>
- <div class="address-info-tel">{{orderInfo.address.tel}}</div>
- </div>
- <div class="address-info-addr">{{orderInfo.address.addr}}</div>
- </div>
- <img class="address-arrow" src="./image/024.png" />
- </div>
- <!-- 商品信息 -->
- <div class="goods-box">
- <div class="goods-title-box" v-if="orderInfo.orderType === 1">
- <div class="goods-title-icon-box">
- <img style="width: 100%; height: 100%" src="./image/factory_logo.png" />
- </div>
- <div class="goods-title-text">工厂直营</div>
- </div>
- <div class="goods-title-box" v-else>
- <div class="goods-title-icon">
- <img style="width: 100%; height: 100%" src="./image/" />
- </div>
- <div class="goods-title-text">经销商专营店</div>
- </div>
- <div class="goods-cont-box" v-for="(item, index) in orderInfo.bizOrderInfoDtoList">
- <div class="goods-cont-img-box">
- <img style="width: 100%; height: 100%" src="./image/cart_goods.png" />
- </div>
- <div class="goods-cont-info-box">
- <div class="goods-cont-name">{{item.maktx}}</div>
- <div class="goods-cont-size-box">
- <div class="goods-cont-size-num">尺寸:{{item.size}}</div>
- <div class="goods-cont-pattern">花纹:{{item.pattern}}</div>
- </div>
- <div class="goods-cont-size-num">数量:{{item.num}}</div>
- <div class="goods-cont-price">
- <div style="font-size: .23rem; margin-bottom: 3px;">¥</div>{{item.price}}
- </div>
- </div>
- </div>
- </div>
- <!-- 订单信息 -->
- <div class="order-pay-box">
- <div class="order-pay-title-box">
- <div class="order-title-icon-box">
- <img style="width: 100%; height: 100%" src="./image/icon_dingdanxinxi.png" />
- </div>
- <div class="order-pay-title-text">订单信息</div>
- </div>
- <div class="order-pay-cont-box">
- <!-- 订单编号 -->
- <div class="order-cont-info-box ">
- <div class="order-cont-info-tag">订单编号:</div>
- <div class="order-cont-info-text">{{orderInfo.orderInfo.orderCode}}</div>
- <div class="order-cont-info-copy-box">
- <div class="order-cont-info-copy" v-on:click="onCopy(1)">复制</div>
- </div>
- </div>
- <div v-if="orderInfo.type !== 1 && !isOpenOrderInfo">
- <div class="order-cont-info-btn-box">
- <van-button class="order-cont-info-btn" icon="./image/icon_arrow_down.png"
- icon-position="right" size="small" @click="openOrderInfo(true)">展开完整信息
- </van-button>
- </div>
- </div>
- <div v-else>
- <!-- 下单时间 -->
- <div class="order-cont-info-box">
- <div class="order-cont-info-tag">下单时间:</div>
- <div class="order-cont-info-text">{{orderInfo.orderInfo.createTime}}</div>
- </div>
- <!-- 间距 -->
- <div class="order-cont-info-space"
- v-show="orderInfo.type !== 1 || orderInfo.isOnline === 0"></div>
- <!-- 付款时间 -->
- <div class="order-cont-info-box" v-show="orderInfo.orderInfo.payTime">
- <div class="order-cont-info-tag">付款时间:</div>
- <div class="order-cont-info-text">{{orderInfo.orderInfo.payTime}}</div>
- </div>
- <!-- 支付单号 -->
- <div class="order-cont-info-box" v-show="orderInfo.orderInfo.payCode">
- <div class="order-cont-info-tag">支付单号:</div>
- <div class="order-cont-info-text">{{orderInfo.orderInfo.payCode}}</div>
- <div class="order-cont-info-copy-box">
- <div class="order-cont-info-copy" v-on:click="onCopy(2)">复制</div>
- </div>
- </div>
- <!-- 付款方式 -->
- <div class="order-cont-info-box" v-show="orderInfo.orderInfo.payType">
- <div class="order-cont-info-tag">付款方式:</div>
- <div class="order-cont-info-text">{{orderInfo.orderInfo.payType}}</div>
- </div>
- <div class="order-cont-info-btn-box" v-show="orderInfo.type !== 1">
- <van-button class="order-cont-info-btn" icon="./image/icon_arrow_up.png"
- icon-position="right" size="small" @click="openOrderInfo(false)">收起</van-button>
- </div>
- </div>
- </div>
- </div>
- <!-- 支付信息 -->
- <div class="order-pay-box" v-if="orderInfo.isOnline === 1">
- <div class="order-pay-title-box">
- <div class="pay-title-icon-box">
- <img style="width: 100%; height: 100%" src="./image/icon_zhifuxinxi.png" />
- </div>
- <div class="order-pay-title-text">支付信息</div>
- </div>
- <div class="order-pay-cont-box">
- <div class="pay-cont-info-box">
- <div class="pay-cont-info-tag">商品总额</div>
- <div class="pay-cont-info-price">¥{{orderInfo.payInfo.goodsTotalPrice}}</div>
- </div>
- <div class="pay-cont-info-box">
- <div class="pay-cont-info-tag">使用奖励</div>
- <div class="pay-cont-info-price">-¥{{orderInfo.payInfo.rewardAmount}}</div>
- </div>
- <div class="pay-cont-info-pay-box">
- <div class="pay-cont-info-pay-tag">实付金额:</div>
- <div class="pay-cont-info-pay-price-text">¥{{orderInfo.payInfo.payPrice}}</div>
- </div>
- </div>
- </div>
- <div class="placeholder-footer"></div>
- </div>
- </div>
- <div class="bottom-bar" v-show="orderInfo">
- <van-button v-show="orderInfo.type === 1" class="btn-cancel" size="normal" @click="onCancelOrder">取消订单
- </van-button>
- <van-button v-show="orderInfo.type === 3" class="btn-normal" size="normal" @click="onCheckDriver">查看司机信息
- </van-button>
- <van-button v-show="orderInfo.type !== 1" class="btn-highlight" size="normal" @click="onBuyAgain">再次购买
- </van-button>
- <van-button v-show="orderInfo.type === 1 && orderInfo.isOnline === 1" class="btn-highlight" size="normal"
- @click="onPayOrder">去支付</van-button>
- </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="../script/aui-scroll.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 orderId = api.pageParam.id;
- new Vue({
- el: "#app",
- data: {
- // 等待付款、、等待收货、交易成功、已取消
- list: [
- {
- type: 1, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
- orderType: 1, // 测试数据 订单类型 1 工厂直营;2 经销商专营
- isOnline: 1, // 测试数据 是否为线上支付 1 线上;0 线下
- downTime: '23小时55分',
- statusDesc: '',
- statusImg: './image/icon_status_daiqueren.png',
- statusName: '等待付款',
- address: {
- name: '韩梅梅',
- tel: '13000000000',
- addr: '山东省青岛市市北区汇丰路山海郡 火炬路南区汇丰路山海郡 火炬路南',
- },
- orderInfo: {
- orderCode: '12132343434388888443',
- createTime: '2021-02-05 21:38:45',
- payTime: null,
- payCode: null,
- payType: null,
- },
- payInfo: {
- goodsTotalPrice: '963.52',
- rewardAmount: '0.00',
- payPrice: '963.52'
- },
- bizOrderInfoDtoList: [{
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }, {
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }],
- }, {
- type: 1, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
- orderType: 2, // 测试数据 订单类型 1 工厂直营;2 经销商专营
- isOnline: 0, // 测试数据 是否为线上支付 1 线上;0 线下
- downTime: '23小时55分',
- statusDesc: '',
- statusImg: './image/icon_status_daiqueren.png',
- statusName: '等待付款',
- address: {
- name: '韩梅梅',
- tel: '13000000000',
- addr: '山东省青岛市市北区汇丰路山海郡 火炬路南',
- },
- orderInfo: {
- orderCode: '12132343434388888443',
- createTime: '2021-02-05 21:38:45',
- payTime: null,
- payCode: null,
- payType: '线下支付',
- },
- payInfo: {
- goodsTotalPrice: null,
- rewardAmount: null,
- payPrice: null
- },
- bizOrderInfoDtoList: [{
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }, {
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }
- ],
- }, {
- type: 1, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
- orderType: 2, // 测试数据 订单类型 1 工厂直营;2 经销商专营
- isOnline: 1, // 测试数据 是否为线上支付 1 线上;0 线下
- downTime: '23小时55分',
- statusDesc: '',
- statusImg: './image/icon_status_daiqueren.png',
- statusName: '等待付款',
- address: {
- name: '韩梅梅',
- tel: '13000000000',
- addr: '山东省青岛市市北区汇丰路山海郡 火炬路南',
- },
- orderInfo: {
- orderCode: '12132343434388888443',
- createTime: '2021-02-05 21:38:45',
- payTime: null,
- payCode: null,
- payType: null,
- },
- payInfo: {
- goodsTotalPrice: '963.52',
- rewardAmount: '0.00',
- payPrice: '963.52'
- },
- bizOrderInfoDtoList: [{
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }, {
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }
- ],
- }, {
- type: 2, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
- orderType: 2, // 测试数据 订单类型 1 工厂直营;2 经销商专营
- isOnline: 0, // 测试数据 是否为线上支付 1 线上;0 线下
- downTime: '',
- statusDesc: '此订单待确认',
- statusImg: './image/icon_status_daiqueren.png',
- statusName: '待确认',
- address: {
- name: '韩梅梅',
- tel: '13000000000',
- addr: '山东省青岛市市北区汇丰路山海郡 火炬路南',
- },
- orderInfo: {
- orderCode: '12132343434388888443',
- createTime: '2021-02-05 21:38:45',
- payTime: null,
- payCode: null,
- payType: '线下支付',
- },
- payInfo: {
- goodsTotalPrice: null,
- rewardAmount: null,
- payPrice: null
- },
- bizOrderInfoDtoList: [{
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }, {
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }
- ],
- }, {
- type: 2, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
- orderType: 1, // 测试数据 订单类型 1 工厂直营;2 经销商专营
- isOnline: 1, // 测试数据 是否为线上支付 1 线上;0 线下
- downTime: '',
- statusDesc: '此订单待确认',
- statusImg: './image/icon_status_daiqueren.png',
- statusName: '待确认',
- address: {
- name: '韩梅梅',
- tel: '13000000000',
- addr: '山东省青岛市市北区汇丰路山海郡 火炬路南',
- },
- orderInfo: {
- orderCode: '12132343434388888443',
- createTime: '2021-02-05 21:38:45',
- payTime: '2021-02-05 21:40:45',
- payCode: '12132323243',
- payType: '微信支付',
- },
- payInfo: {
- goodsTotalPrice: '963.52',
- rewardAmount: '0.00',
- payPrice: '963.52'
- },
- bizOrderInfoDtoList: [{
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }, {
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }
- ],
- }, {
- type: 3, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
- orderType: 1, // 测试数据 订单类型 1 工厂直营;2 经销商专营
- isOnline: 1, // 测试数据 是否为线上支付 1 线上;0 线下
- downTime: '',
- statusDesc: '产品入库中',
- statusImg: './image/icon_status_shouhuo.png',
- statusName: '等待收货',
- address: {
- name: '韩梅梅',
- tel: '13000000000',
- addr: '山东省青岛市市北区汇丰路山海郡 火炬路南',
- },
- orderInfo: {
- orderCode: '12132343434388888443',
- createTime: '2021-02-05 21:38:45',
- payTime: '2021-02-05 21:40:45',
- payCode: '12132323243',
- payType: '微信支付',
- },
- payInfo: {
- goodsTotalPrice: '963.52',
- rewardAmount: '0.00',
- payPrice: '963.52'
- },
- bizOrderInfoDtoList: [{
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }, {
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }
- ],
- }, {
- type: 4, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
- orderType: 1, // 测试数据 订单类型 1 工厂直营;2 经销商专营
- isOnline: 1, // 测试数据 是否为线上支付 1 线上;0 线下
- downTime: '',
- statusDesc: '恭喜你完成交易啦~',
- statusImg: './image/icon_status_wancheng.png',
- statusName: '交易成功',
- address: {
- name: '韩梅梅',
- tel: '13000000000',
- addr: '山东省青岛市市北区汇丰路山海郡 火炬路南',
- },
- orderInfo: {
- orderCode: '12132343434388888443',
- createTime: '2021-02-05 21:38:45',
- payTime: '2021-02-05 21:40:45',
- payCode: '12132323243',
- payType: '微信支付',
- },
- payInfo: {
- goodsTotalPrice: '963.52',
- rewardAmount: '0.00',
- payPrice: '963.52'
- },
- bizOrderInfoDtoList: [{
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }, {
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }
- ],
- }, {
- type: 5, // 测试数据 1 待支付;2 待确认;3 待收货;4 已完成;5 已取消
- orderType: 1, // 测试数据 订单类型 1 工厂直营;2 经销商专营
- isOnline: 1, // 测试数据 是否为线上支付 1 线上;0 线下
- downTime: '',
- statusDesc: '超时未付款~',
- statusImg: './image/icon_status_quxiao.png',
- statusName: '已取消',
- address: {
- name: '韩梅梅',
- tel: '13000000000',
- addr: '山东省青岛市市北区汇丰路山海郡 火炬路南',
- },
- orderInfo: {
- orderCode: '12132343434388888443',
- createTime: '2021-02-05 21:38:45',
- payTime: '2021-02-05 21:40:45',
- payCode: '12132323243',
- payType: '微信支付',
- },
- payInfo: {
- goodsTotalPrice: '963.52',
- rewardAmount: '0.00',
- payPrice: '963.52'
- },
- bizOrderInfoDtoList: [{
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }, {
- maktx: '赛轮轮胎 205/60R16S H0808',
- spec: '195/65R15',
- pattern: 'SH56',
- size: '16寸',
- num: 2,
- price: '240.00',
- isBk: true,
- }
- ],
- }
- ], // 订单详情测试数据
- id: orderId,
- userId: '',
- getOrderInfoU: 'getOrderInfoU',
- orderInfo: null,
- isHudBgShow: false,
- isHudDriverShow: false,
- isHudCancelOrderShow: false,
- isOpenOrderInfo: false,
- isHudCancelPayShow: false,
- isHudPayBgShow: false,
- isHudPayShow: false,
- alipayChecked: false,
- wechatChecked: false,
- shanfuChecked: false,
- },
- methods: {
- init: function () {
- this.userId = $api.getStorage('userid');
- var _this = this;
- this.getOrderInfo();
- },
- closeWin: function () {
- api.closeWin({});
- },
- // 获取订单详情
- getOrderInfo: function () {
- var data = {
- "orderId": this.id,
- "url": "json",
- "type": "body"
- }
- _this = this;
- // url = this.getOrderInfoU;
- // this.$post(url, data, function (ret) {
- // if (ret.code == 0 || ret.code == '0') {
- // _this.list = ret.data == null ? {} : ret.data;
- // }
- // });
- this.orderInfo = this.list[this.id];
- console.log(JSON.stringify(this.orderInfo));
- },
- // 打开地址页
- onAddress: function () {
- this.goWin('address', 'address_win.html');
- },
- // 展开订单信息
- openOrderInfo: function (isOpen) {
- this.isOpenOrderInfo = isOpen;
- },
- // 复制订单号支付单号 1 订单号;2 支付单号
- onCopy: function (type) {
- if (type == 1 || type == 2) {
- _this = this;
- let clipboardCont = type == 1 ? this.orderInfo.orderInfo.orderCode : this.orderInfo.orderInfo.payCode;
- var clipBoard = api.require('clipBoard');
- clipBoard.set({
- value: clipboardCont
- }, function (ret, err) {
- if (ret) {
- _this.showToast('已复制到剪切板');
- } else {
- _this.showToast('复制失败');
- }
- });
- }
- },
- // 取消订单
- onCancelOrder: function () {
- _this = this;
- this.isHudCancelOrderShow = true;
- this.isHudBgShow = true;
- },
- // 去支付
- onPayOrder: function () {
- this.isHudPayShow = true;
- this.isHudPayBgShow = true;
- },
- // 再次购买
- onBuyAgain: function () {
- this.goWin("product", "product.html");
- },
- // 查看司机信息
- onCheckDriver: function () {
- this.isHudDriverShow = true;
- this.isHudBgShow = true;
- },
- // 关闭司机信息提示框
- 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>
|