index.vue 69 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917
  1. <template>
  2. <view>
  3. <ujp-navbar title="折扣卡购买" :show="false"></ujp-navbar>
  4. <!-- 头部图片 -->
  5. <view class="background">
  6. <view class="banner">
  7. <u-swiper bg-color="#fff" :img-mode="'scaleToFill'" :list="bannerList"
  8. @click="clickBanner" :name="'picUrl'">
  9. </u-swiper>
  10. </view>
  11. <!-- 选项列表 -->
  12. <view class="option-list" v-if="false">
  13. <view class="list-item" @click="getScanCode">
  14. <view class="icon iconfont" style="background: linear-gradient(45deg,#00B962,#5FE4A6);">
  15. &#xe61a;
  16. </view>
  17. <view class="text oldTextjp2" oldstyle="font-size: 18px;">
  18. 扫码充电
  19. </view>
  20. </view>
  21. <view class="list-item" @click="fastRecharge">
  22. <view class="icon iconfont" style="background: linear-gradient(45deg,#23AD9B,#4BD2C0);">
  23. &#xe629;
  24. </view>
  25. <view class="text oldTextjp2" oldstyle="font-size: 18px;">
  26. 快速充值
  27. </view>
  28. </view>
  29. <view class="list-item" @click="chargingRecord">
  30. <view class="icon iconfont" style="background: linear-gradient(45deg,#407DE4,#6FA5FF );">
  31. &#xe625;
  32. </view>
  33. <view class="text oldTextjp2" oldstyle="font-size: 18px;">
  34. 充电记录
  35. </view>
  36. </view>
  37. <view class="list-item" @click="toSearchPile">
  38. <view class="icon iconfont" style="background: linear-gradient(45deg,#6366FF,#9D9FFF);">
  39. &#xe622;
  40. </view>
  41. <view class="text oldTextjp2" oldstyle="font-size: 18px;">
  42. 附近站点
  43. </view>
  44. </view>
  45. </view>
  46. <!-- 充值活动 -->
  47. <view class=" top-up" v-if="activityList.length > 0 && !activityListShow">
  48. <view class="card-box">
  49. <view class="card" v-for="(item,index) in activityList" :key="item.id"
  50. @click="rechargeActivity(item)">
  51. <img :src="item.picUrl" alt="">
  52. </view>
  53. </view>
  54. </view>
  55. <u-modal v-model="showOss" class="showOss" :show-title="false" :show-confirm-button="false">
  56. <view class="slot-content">
  57. <u-image width="250px" style="margin: auto;min-height: 250px;" mode="widthFix"
  58. @click="clickBanner(showOssIndex,true)" :src="showOssImg">
  59. <view slot="loading" style="height: 200px;">
  60. <u-loading mode="flower" size="186">
  61. </u-loading>
  62. </view>
  63. </u-image>
  64. <u-image width="36px" style="margin: auto;" mode="widthFix" @click="showOss=false"
  65. src="../../assets/img/if-close-line-circled.png"></u-image>
  66. </view>
  67. </u-modal>
  68. <!-- 专享优惠券 -->
  69. <!--
  70. <view class="couponmain" v-if="false&&bannerListTop[showTopIndex].topmodel=='coupon'">
  71. <view class="main">
  72. <view class="exclusive">
  73. <p class="exclusive1">恭喜你</p>
  74. <p class="exclusive2">获得{{bannerListTop[showTopIndex].value}}元月卡卷</p>
  75. <view class="img">
  76. <img src="../../assets/img/Frame915.png" alt="">
  77. <view class="num">
  78. {{bannerListTop[showTopIndex].value}}<span class="unit">元</span>
  79. </view>
  80. <view class="unit2">月卡优惠券</view>
  81. <view class="ticket-info">
  82. <view class="ticket-name">
  83. {{bannerListTop[showTopIndex].text}}
  84. </view>
  85. </view>
  86. </view>
  87. <view class="exclusive-text"> 持月卡在指定站点充电,充电服务费全免</view>
  88. <button class="exclusive-btn" @click="clickBannerTop()" shape="circle">立即开通</button>
  89. </view>
  90. </view>
  91. </view> -->
  92. <u-modal v-model="showTop" v-if="getBannerInfoTopBl" class="showOss" :show-title="false" :show-confirm-button="false">
  93. <view class="slot-content" >
  94. <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2500"
  95. :duration="500">
  96. <swiper-item class="swiperitem" v-if="showNt">
  97. <u-image width="600" style="margin: auto;min-height: 250px;" mode="widthFix" v-show="showNtStep==0"
  98. src="@/assets/img/nt/f5surprised-1.png">
  99. <view slot="loading" style="height: 200px;">
  100. <u-loading mode="flower" size="186">
  101. </u-loading>
  102. </view>
  103. </u-image>
  104. <view style="color: #ecc07d;
  105. font-size: 64rpx;
  106. position: relative;
  107. top: -220rpx;
  108. right: -100rpx; width: 400rpx;" @click="showNtStepClick" v-show="showNtStep==0">
  109. <span>.</span>
  110. </view>
  111. <u-image width="600" height="700" style="margin: auto;;min-height: 250px;" mode="scaleToFill"
  112. v-show="showNtStep==1" src="@/assets/img/nt/f5surprised-2.png">
  113. </u-image>
  114. <u-image width="600" style="margin: auto;min-height: 250px;" mode="widthFix"
  115. v-show="showNtStep==2" src="@/assets/img/nt/nt-activity-3.png">
  116. </u-image>
  117. <u-image width="500" style="color: #FFFFFF;
  118. font-size: 64rpx;
  119. position: relative;
  120. top: -540rpx;
  121. right: -60rpx;height: 0;
  122. " mode="widthFix" v-show="showNtStep==2" src="@/assets/img/nt/f5surprised-3.png">
  123. </u-image>
  124. <view style="color: #ecc07d;
  125. font-size: 72rpx;
  126. position: relative;
  127. top: -180rpx;
  128. right: -144rpx; width: 310rpx;" @click="showNtStepClick" v-show="showNtStep==2">
  129. <span>.</span>
  130. </view>
  131. <view style="color: #FFFFFF;
  132. font-size: 64rpx;
  133. position: relative;
  134. top: -528rpx;
  135. right: -80rpx;" :style="{
  136. right:showNtValue>99?'-80rpx':(showNtValue>9?'-95rpx':'-110rpx')
  137. }" v-show="showNtStep==1"><b>{{showNtValue}}</b>
  138. <span style="font-size: 28rpx;">元</span>
  139. </view>
  140. <view style="color: #ecc07d;
  141. font-size: 72rpx;
  142. position: relative;
  143. top: -270rpx;
  144. right: -144rpx; width: 310rpx;" @click="showNtStepClick" v-show="showNtStep==1">
  145. <span>.</span>
  146. </view>
  147. </swiper-item>
  148. <swiper-item class="swiperitem" v-for="(item,i) in bannerListTop" :key="i">
  149. <u-image width="500" height="500" bgColor="#ff000000" style="margin: auto;min-height: 250px;"
  150. mode="widthFix" @click="clickBannerTopI(i)" :src="item.picUrl">
  151. <view slot="loading" style="height: 200px;">
  152. <u-loading mode="flower" size="186">
  153. </u-loading>
  154. </view>
  155. </u-image>
  156. </swiper-item>
  157. </swiper>
  158. <u-image width="36px"
  159. style="margin: auto; margin-top: 10px;" mode="widthFix" @click="showTop=false"
  160. src="../../assets/img/if-close-line-circled.png"></u-image>
  161. </view>
  162. </u-modal>
  163. <!-- 模式选择 -->
  164. <u-mask :show="show">
  165. <view class="wrap">
  166. <view class="shema" @tap.stop>
  167. <view class="title">
  168. 设置浏览模式
  169. </view>
  170. <view class="">
  171. <u-radio-group v-model="value">
  172. <u-radio v-for="(item, index) in list" :key="index" :name="item.name"
  173. :disabled="item.disabled" active-color="#00B962">
  174. {{item.name}}
  175. <p v-if="item.name == '长辈模式'">字体更大 看的清楚</p>
  176. <p v-if="item.name == '标准模式'">信息丰富 功能全面</p>
  177. </u-radio>
  178. </u-radio-group>
  179. </view>
  180. <view class="hint">可在 {{""}}我的-设置 {{""}}页面中切换</view>
  181. <view class="btn-box">
  182. <u-button class="choice-btn" type="success" shape="circle"
  183. @click="elderClick">我选好了</u-button>
  184. </view>
  185. </view>
  186. </view>
  187. </u-mask>
  188. <!-- <view class="top-up-title oldTextjp" oldstyle="font-size:20px;"><text class="line"></text>最新活动</view>
  189. <view class="img-box">
  190. <view class="img-1" v-for="(item,index) in activityList" :key="item.id"
  191. @click="rechargeActivity(item)">
  192. <img :src="item.picUrl" alt="">
  193. </view>
  194. </view> -->
  195. </view>
  196. <!-- 最新活动 -->
  197. <view class=" top-up" v-if="activityList.length > 0 && activityListShow">
  198. <view class="top-up-title oldTextjp" oldstyle="font-size:20px;"><text class="line"></text>最新活动</view>
  199. <view class="img-box2">
  200. <view class="left-image" :style="{backgroundImage: 'url(' + activityDateList.picUrl + ')'}"
  201. @click="rechargeActivity(activityDateList)">
  202. <p>{{activityDateList.name}}</p>
  203. <view class="time-activities">
  204. 距活动结束仅剩 <text class="time">{{description}}</text>
  205. </view>
  206. </view>
  207. <view class="right-image">
  208. <img class="margin-bottom" v-for="(item,index) in activityList" :key="item.id"
  209. @click="rechargeActivity(item)" :src="item.narrowUrl" alt="">
  210. <!-- <img class="margin-bottom" src="../../assets/img/topup2.png" alt="" @click="rechargeActivity(0)">
  211. <img class="margin-bottom" src="../../assets/img/topup3.png" alt="" @click="rechargeActivity(1)"> -->
  212. </view>
  213. </view>
  214. </view>
  215. <template v-if="message == 'getLocation:ok' && stationList.length != 0 && chargeList.length == 0">
  216. <view class=" top-up">
  217. <view class="top-up-title oldTextjp" oldstyle="font-size:20px;"><text class="line"></text>附近站点
  218. <view class="pack-up" v-show="!listShow" @click="listShow=true">
  219. 收起<text class="iconfont">&#xe607;</text>
  220. </view>
  221. <view class="pack-up" v-if="listShow" @click="listShow=false">
  222. 展开<text class="iconfont">&#xe62c;</text>
  223. </view>
  224. </view>
  225. </view>
  226. <!-- 附近站点 -->
  227. <template v-for="(stationData,i) in stationList" >
  228. <view class="station" :key="i" v-show="!listShow||i==0"
  229. @click="gotoUrl('pages/searchPile/stationAndPile/stationDetails?id=' + stationData.id)">
  230. <view class="head">
  231. <view class="title oldTextjp" oldstyle="font-size: 20px;">
  232. {{stationData.name}}
  233. </view>
  234. <view class="distance ">
  235. <text class="iconfont"
  236. style="color:#666666">&#xe615;</text>{{stationData.distance!=null&&stationData.distance>0.1 ? stationData.distance.toFixed(1)+'公里':'小于100米'}}
  237. </view>
  238. </view>
  239. <view class="sign" v-if="stationData.stationType==50">
  240. <view class="sign-tag sign-0" v-if="stationData.isRecommend">推荐</view>
  241. <view class="sign-tag sign-5" v-if="stationData.isAlways">常用</view>
  242. <view class="sign-tag sign-6" v-if="stationData.isSpecial">特价</view>
  243. {{stationData.address}}
  244. </view>
  245. <view class="sign" v-else>
  246. <view class="sign-tag sign-0" v-if="stationData.isRecommend">推荐</view>
  247. <view class="sign-tag sign-5" v-if="stationData.isAlways">常用</view>
  248. <view class="sign-tag sign-6" v-if="stationData.isSpecial">特价</view>
  249. <!-- -->
  250. <view class="sign-1"
  251. v-if="stationData.giveDiscount&&stationData.discountRatio&&stationData.discountRatio!=100">
  252. 会员{{discountRatio10(stationData.discountRatio)}}折</view>
  253. <view class="sign-3" v-if="stationData.category=='超充'">160kW超充站</view>
  254. <view class="sign-4"
  255. v-if="stationData.nightLowPriceEnabled">
  256. 夜间超低价</view>
  257. <view class="sign-2" v-if="stationData.platformType==1">自营站</view>
  258. <view class="sign-2" v-if="stationData.tagList.length != 0"
  259. v-for="(tagName,tagIndex) in stationData.tagList" :key="tagIndex">{{tagName}}</view>
  260. </view>
  261. <view class="price-free oldTextClass">
  262. <view class="price" v-if="personInfo&&personInfo.userType==2">
  263. <view class="price-1">
  264. <text class="num">
  265. {{!stationData.giveDiscount ? (stationData.electricityPrice+stationData.servicePrice).toFixed(2)
  266. : (stationData.electricityPrice+stationData.discountServicePrice).toFixed(2)}}</text>
  267. <text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
  268. </view>
  269. <view class="price-2 " oldstyle="font-size: 48rpx;" v-if="stationData.giveDiscount">
  270. <text
  271. class="num">{{(stationData.electricityPrice+stationData.servicePrice).toFixed(2)}}</text>
  272. <text class="unit ">元/度</text>
  273. </view>
  274. </view>
  275. <!-- 游客价格-->
  276. <view class="price" v-else>
  277. <view class="price-1">
  278. <text class="num">
  279. {{(stationData.electricityPrice+stationData.servicePrice).toFixed(2)}}</text>
  280. <text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
  281. </view>
  282. <view class="price-3 " oldstyle="font-size: 48rpx;" v-if="stationData.giveDiscount">
  283. <text class="num1">会员</text>
  284. <text class="num">{{ (stationData.electricityPrice+stationData.discountServicePrice).toFixed(2)}}</text>
  285. <text class="unit ">元/度</text>
  286. </view>
  287. </view>
  288. <view class="free">
  289. <view class="fast" v-if="stationData.fastNum">
  290. <view class="fast-font">
  291. </view>
  292. <view class="num">
  293. {{stationData.fastAvailableNum}}
  294. </view>
  295. <view class="num1">
  296. /{{stationData.fastNum}}
  297. </view>
  298. </view>
  299. <view class="slow oldTextjp2" oldstyle="margin-left: 1px;" v-if="stationData.slowNum">
  300. <view class="slow-font">
  301. </view>
  302. <view class="num">
  303. {{stationData.slowAvailableNum}}
  304. </view>
  305. <view class="num1">
  306. /{{stationData.slowNum}}
  307. </view>
  308. </view>
  309. </view>
  310. </view>
  311. </view>
  312. <view class="piccBanner" @click="gotoUrl('pages/user/sharePicc')" :key="i" style="
  313. text-align: center;
  314. padding: 4px 16px;
  315. margin-top: 8px; " v-if="(stationList.length<=2&&stationList.length-1==i)||(stationList.length>2&&i==1)">
  316. <image src="@/assets/img/gologin/piccBanner.png" style="height: 154rpx;width: 100%;" ></image>
  317. </view>
  318. </template>
  319. <view class="bottom" @click="searchStationData(true)" v-if="recordsTotal2!=stationList.length">
  320. <view class="bot">
  321. <view class="bot-line"></view>
  322. <view class="bot-text " style="color: #00B962;">点击查看更多站点</view>
  323. <view class="bot-line"></view>
  324. </view>
  325. </view>
  326. <view class="bottom" v-else>
  327. <view class="bot">
  328. <view class="bot-line"></view>
  329. <view class="bot-text " style="color: #00B962;">已经到底了</view>
  330. <view class="bot-line"></view>
  331. </view>
  332. </view>
  333. </template>
  334. <template v-if="loading&&message == 'getLocation:ok' && stationList.length == 0 && chargeList.length == 0">
  335. <view class="location-box">
  336. <view class="location">
  337. <view class="location-text">
  338. <view class="text-1 oldTextjp" oldstyle="font-size: 20px;">
  339. {{loading?'查询失败':'加载中'}}
  340. </view>
  341. <view class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
  342. {{loading?'未查询到可用的站点':'正在为你查找附近的站点'}}
  343. </view>
  344. <view class="text-3 oldTextjp2"
  345. v-if="loading"
  346. oldstyle="font-size: 16px;" @click="toSearchPile" >
  347. 去找桩
  348. </view>
  349. </view>
  350. <view class="img-box">
  351. <img src="static/img/暂无网络信号-缺省页 1.png">
  352. </view>
  353. </view>
  354. </view>
  355. </template>
  356. <!-- 定位 -->
  357. <view class="location-box"
  358. v-if="message != 'getLocation:ok' && stationList.length == 0 && chargeList.length == 0">
  359. <view class="location">
  360. <view class="location-text">
  361. <view class="text-1 oldTextjp" oldstyle="font-size: 20px;">
  362. 定位中...
  363. </view>
  364. <view class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
  365. 授权定位后可查询附近充电站
  366. </view>
  367. <view class="text-3 oldTextjp2" oldstyle="font-size: 16px;" @click="getPoint()">
  368. 重新定位
  369. </view>
  370. </view>
  371. <view class="img-box">
  372. <img src="static/img/暂无网络信号-缺省页 1.png">
  373. </view>
  374. </view>
  375. </view>
  376. <!-- 附近站点 -->
  377. <view class="station" v-for="(stationData,i) in defaultStation" :key="i" v-if="stationList.length == 0 && chargeList.length == 0"
  378. @click="gotoUrl('pages/searchPile/stationAndPile/stationDetails?id=' + stationData.id)">
  379. <view class="head">
  380. <view class="title oldTextjp" oldstyle="font-size: 20px;">
  381. {{stationData.name}}
  382. </view>
  383. <view class="distance " v-if="false">
  384. <text class="iconfont"
  385. style="color:#666666">&#xe615;</text>{{stationData.distance!=null&&stationData.distance>0.1 ? stationData.distance.toFixed(1)+'公里':'小于100米'}}
  386. </view>
  387. </view>
  388. <view class="sign" >
  389. <view class="sign-tag sign-0" >推荐</view>
  390. <!-- -->
  391. <view class="sign-1"
  392. v-if="stationData.giveDiscount&&stationData.discountRatio&&stationData.discountRatio!=100">
  393. 会员{{discountRatio10(stationData.discountRatio)}}折</view>
  394. <view class="sign-3" v-if="stationData.category=='超充'">160kW超充站</view>
  395. <view class="sign-4"
  396. v-if="stationData.nightLowPriceEnabled">
  397. 夜间超低价</view>
  398. <view class="sign-2" v-if="stationData.platformType==1">自营站</view>
  399. <view class="sign-2" v-if="stationData.tagList.length != 0"
  400. v-for="(tagName,tagIndex) in stationData.tagList" :key="tagIndex">{{tagName}}</view>
  401. </view>
  402. <view class="price-free oldTextClass">
  403. <view class="price" v-if="personInfo&&personInfo.userType==2">
  404. <view class="price-1 ">
  405. <text class="num">
  406. {{!stationData.giveDiscount ? (stationData.electricityPrice+stationData.servicePrice).toFixed(2)
  407. : (stationData.electricityPrice+stationData.discountServicePrice).toFixed(2)}}</text>
  408. <text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
  409. </view>
  410. <view class="price-2 " oldstyle="font-size: 48rpx;" v-if="stationData.giveDiscount">
  411. <text
  412. class="num">{{(stationData.electricityPrice+stationData.servicePrice).toFixed(2)}}</text>
  413. <text class="unit ">元/度</text>
  414. </view>
  415. </view>
  416. <!-- 游客价格-->
  417. <view class="price" v-else>
  418. <view class="price-1">
  419. <text class="num">
  420. {{(stationData.electricityPrice+stationData.servicePrice).toFixed(2)}}</text>
  421. <text class="unit " oldstyle="font-size: 48rpx;">元/度</text>
  422. </view>
  423. <view class="price-3 " oldstyle="font-size: 48rpx;" v-if="stationData.giveDiscount">
  424. <text class="num1">会员</text>
  425. <text class="num">{{ (stationData.electricityPrice+stationData.discountServicePrice).toFixed(2)}}</text>
  426. <text class="unit ">元/度</text>
  427. </view>
  428. </view>
  429. <view class="free">
  430. <view class="fast" v-if="stationData.fastNum">
  431. <view class="fast-font">
  432. </view>
  433. <view class="num">
  434. {{stationData.fastAvailableNum}}
  435. </view>
  436. <view class="num">
  437. /{{stationData.fastNum}}
  438. </view>
  439. </view>
  440. <view class="slow oldTextjp2" oldstyle="margin-left: 1px;" v-if="stationData.slowNum">
  441. <view class="slow-font">
  442. </view>
  443. <view class="num">
  444. {{stationData.slowAvailableNum}}
  445. </view>
  446. <view class="num1">
  447. /{{stationData.slowNum}}
  448. </view>
  449. </view>
  450. </view>
  451. </view>
  452. </view>
  453. <view class="piccBanner" v-if="stationList.length == 0 && chargeList.length == 0"
  454. @click="gotoUrl('pages/user/sharePicc')" style="
  455. text-align: center;
  456. padding: 4px 16px;
  457. margin-top: 8px; " >
  458. <image src="@/assets/img/gologin/piccBanner.png" style="height: 154rpx;width: 100%;" ></image>
  459. </view>
  460. <!-- 新闻 -->
  461. <view class="news-title" v-if="chargeList.length > 0">
  462. <view class="news-title-left oldTextjp" oldstyle="font-size:20px;">
  463. <view class="line" style="margin-top:4px;"></view>充电车辆
  464. <view class="lineBox" v-if="chargeList.length > 1">{{chargeList.length }}</view>
  465. </view>
  466. <view class="more oldTextjp2" oldstyle="font-size:16px;" v-if="chargeList.length > 3" @click="toAll">查看全部
  467. <view class="more-icon iconfont"> &#xe600;</view>
  468. </view>
  469. </view>
  470. <!-- 充电状态 -->
  471. <view class="state1 state" v-if="chargeList.length > 0" v-for="(item,index) in chargeList" v-show="index<3"
  472. :key="item.id" @click="gotoUrl('pages/searchPile/chargeProcess/dcCharging?id=' + item.id)">
  473. <view class="state-text">
  474. <view class="text-1 " oldstyle="font-size: 20px;">
  475. <span v-if="item.carNumber">{{item.carNumber}}</span>
  476. {{item.statusText}}...
  477. </view>
  478. <view v-if="item.status == '0'" class="text-2 " oldstyle="font-size: 16px;">
  479. 启动中
  480. </view>
  481. <view v-if="item.status == '1'" class="text-2 " oldstyle="font-size: 16px;">
  482. 已充
  483. <span
  484. class="text-21">{{item.electricQuantity?(item.electricQuantity/10000).toFixed(1):'0.0'}}度</span>
  485. 合计<span class="text-22">{{item.dueFee != null ? item.dueFee.toFixed(2) : '0.00'}}元</span>
  486. <view style="display: initial;" v-if="item.endSoc">电量<span class="text-21">{{item.endSoc}}%</span>
  487. </view>
  488. </view>
  489. <!-- <view v-if="item.status == '2'" class="text-2" style="color: red;">
  490. 超出时间将收取占位费
  491. </view> -->
  492. <view v-if="item.status == '4'" class="text-2 oldTextjp2" oldstyle="font-size: 16px;">
  493. <span v-if="item.waitNum==1">请耐心等待</span>
  494. <span v-else>前方等待{{item.waitNum-1}}位</span>
  495. </view>
  496. <view class="text-3 " oldstyle="font-size: 16px;">
  497. <p style=" width: 160%;">
  498. {{item.deviceName}}枪{{channelNoShow(item.channelNo,item.manufacturer)}}/{{item.stationName}}<br />当前电价{{item.chargingCostPrice.toFixed(2)}}元/度
  499. </p>
  500. </view>
  501. </view>
  502. <view class="img-box4">
  503. <img v-if="item.status == '0'" src="static/img/等待中-缺省页.png">
  504. <img v-if="item.status == '1'" src="static/img/充电中-缺省页.png">
  505. <img v-if="item.status == '2'" src="static/img/已充满-缺省页.png">
  506. <img v-if="item.status == '4'" src="static/img/等待中-缺省页.png">
  507. <view class="img-view">
  508. <view class="more-icon iconfont">查看 &#xe600;</view>
  509. </view>
  510. </view>
  511. </view>
  512. <view class="bottom" v-if="chargeList.length > 3" @click="toAll()">
  513. <view class="bot">
  514. <view class="bot-line"></view>
  515. <view class="bot-text " style="color: #00B962;">点击查看全部充电车辆</view>
  516. <view class="bot-line"></view>
  517. </view>
  518. </view>
  519. <!-- 新闻 -->
  520. <view class="news-title" v-if="newsList.length > 0" >
  521. <!-- <view class="news-title-left oldTextjp" oldstyle="font-size:20px;">
  522. <view class="line" style="margin-top:4px;"></view>活动公告
  523. </view>
  524. <view class="more oldTextjp2" oldstyle="font-size:16px;" >更多<view
  525. class="more-icon iconfont"> &#xe600;</view>
  526. </view> -->
  527. <u-notice-bar mode="horizontal"
  528. color="#FF3D00" bg-color="#fff"
  529. :list="newsList"></u-notice-bar>
  530. </view>
  531. <view class="news-title" >
  532. <view class="news-title-left oldTextjp" oldstyle="font-size:20px;">
  533. <view class="line" style="margin-top:4px;"></view>51商城
  534. </view>
  535. <view class="more oldTextjp2" oldstyle="font-size:16px;" >
  536. 备货中,敬请期待!
  537. </view>
  538. </view>
  539. <view class="shopList" @click="bhz" >
  540. <view class="shopItem" v-for="(item,i) in shopList" :key="i">
  541. <view class="shopItemImg">
  542. <img :src="item.img" >
  543. </view>
  544. <view class="shopItemName" >
  545. <img v-if="item.iszy" style="width:52px; height:16px; vertical-align: middle;" src="@/assets/img/buy/ptzy.png">
  546. {{item.name}}</view>
  547. <view class="shopItemPrice" >
  548. <view class="shopItemPrice1" v-if="personInfo&&personInfo.userType==2&&personInfo.memberLevel&&item.prices" >
  549. ¥{{item.prices[personInfo.memberLevel]?item.prices[personInfo.memberLevel]:item.price+"&&"}}</view>
  550. <view class="shopItemPrice1" v-else >¥{{item.price}}</view>
  551. <view class="shopItemPrice2">
  552. <u-icon name="shopping-cart"></u-icon>
  553. </view>
  554. </view>
  555. </view>
  556. </view>
  557. <view class="bottom">
  558. <view class="bot">
  559. <view class="bot-line"></view>
  560. <view class="bot-text oldTextjp2" oldstyle="font-size: 14px;">已经到底了</view>
  561. <view class="bot-line"></view>
  562. </view>
  563. </view>
  564. <!-- 导航栏 -->
  565. <view class="navigation">
  566. <view class="login-prompt" v-if="!userId">
  567. 登录显示更多会员服务
  568. <text class="button" @click="toLogin">登录/注册</text>
  569. </view>
  570. </view>
  571. <view class="slogan-4 " v-show="couponList.length||bannerListTop.length"
  572. @click="showTop=true,getBannerInfoTopBl=true">
  573. <u-icon :class="{
  574. imageshake :couponList.length&&showNtStep==0
  575. }"
  576. size="45"
  577. name="gift"></u-icon>
  578. </view>
  579. <Tabbar :current="0" ref="tabbarMain" :elderStatus="elderStatus"></Tabbar>
  580. </view>
  581. </template>
  582. <script>
  583. import * as API from '@/apis/index.js'
  584. import * as newsApi from '@/apis/news.js'
  585. import * as WxJsApi from '@/utils/wxJsApi.js'
  586. import * as siteApi from '@/apis/site.js'
  587. import * as loginApi from '@/apis/login.js'
  588. import * as userApi from '@/apis/user.js'
  589. import MapLoader from '@/utils/AMap'
  590. import Tabbar from '@/components/Tabbar.vue'
  591. var img1=require("@/assets/img/shopimg/1.png")
  592. var img2=require("@/assets/img/shopimg/2.png")
  593. var img3=require("@/assets/img/shopimg/3.png")
  594. var img4=require("@/assets/img/shopimg/4.png")
  595. import {
  596. newDate,
  597. currentTimeStamp,
  598. parseUnixTime,
  599. secondsDistance,
  600. hourDistanceArr
  601. } from '@/utils'
  602. export default {
  603. components: {
  604. Tabbar
  605. },
  606. data() {
  607. return {
  608. listShow: false,
  609. stationList: [],
  610. bannerList: [],
  611. bannerListTop: [],
  612. timeOut: false,
  613. pointTimeOut: true,
  614. chargeList: [],
  615. activityList: [],
  616. userId: '',
  617. newsList: [],
  618. pageIndex: 1,
  619. recordsTotal: 0,
  620. longitude: '',
  621. latitude: '',
  622. message: '',
  623. indexLogo: '',
  624. showOss: false,
  625. showOssImg: '',
  626. showOssIndex: '',
  627. loading:false,
  628. showTop: false,
  629. showTopImg: '',
  630. showTopIndex: 0,
  631. getBannerInfoTopBl:true,
  632. show: false,
  633. list: [{
  634. name: '长辈模式',
  635. disabled: false
  636. },
  637. {
  638. name: '标准模式',
  639. disabled: false
  640. },
  641. ],
  642. // u-radio-group的v-model绑定的值如果设置为某个radio的name,就会被默认选中
  643. value: '长辈模式',
  644. elderStatus: false,
  645. fontMode: '',
  646. description: '00:00:00',
  647. activityDate: '',
  648. activityDateList: {},
  649. activityListShow: false,
  650. personInfo: {},
  651. showNt: false,
  652. showNtStep: 0,
  653. showNtValue: 30,
  654. couponList: [],
  655. couponSelect: {},
  656. pageIndex2: 1,
  657. recordsTotal2: 0,
  658. defaultStation:[],
  659. shopList:[
  660. {
  661. iszy:1,
  662. name:"7KW交流充电桩4G共享版",
  663. price:"1488",
  664. prices:["1488","1088","988","888"],
  665. img:img1
  666. },{
  667. iszy:1,
  668. name:"7KW交流充电桩即插即充版",
  669. price:"1088",
  670. prices:["1088","888","788","688"],
  671. img:img2
  672. },{
  673. name:"联通流量卡99元全国流量套餐卡纯流量",
  674. price:"99",
  675. img:img3
  676. },{
  677. price:"1880",
  678. name:"10通道智能充电桩(4G版)",
  679. img:img4
  680. }]
  681. }
  682. },
  683. onLoad(op) {
  684. if (op.jpcode) {
  685. var k = API.codeOperation(op.jpcode)
  686. if (k) {
  687. uni.navigateTo({
  688. url: k
  689. })
  690. }
  691. }
  692. },
  693. onUnload() {
  694. this.timeOut = false;
  695. this.pointTimeOut = false;
  696. },
  697. onHide() {
  698. this.timeOut = false;
  699. this.pointTimeOut = false;
  700. },
  701. onReachBottom() {
  702. // if (this.newsList.length < this.recordsTotal) {
  703. // this.myLoadmore();
  704. // }
  705. },
  706. onShow() {
  707. if (this.$refs.tabbarMain) {
  708. this.$refs.tabbarMain.setcount(0);
  709. }
  710. if (!this.pointTimeOut) {
  711. this.pointTimeOut = true
  712. this.getPointTimeOut();
  713. }
  714. this.getUserInfo();
  715. },
  716. onReady() {
  717. // if (this.carhelp.get("getElderModeClass")) {
  718. // if(this.carhelp.get("getElderModeClass") == "长辈模式") {
  719. // this.fontMode = '1';
  720. // } else {
  721. // this.fontMode = '0';
  722. // }
  723. // API.changeFont({fontMode: this.fontMode}).then((res) => {
  724. // }).catch(error => {
  725. // uni.showToast({
  726. // title: error,
  727. // icon: "none"
  728. // })
  729. // })
  730. // }
  731. //this.getUserInfo();
  732. WxJsApi.getWxConfig(['getLocation', 'addEventListener', 'scanQRCode']).then((res) => {
  733. // //(res)
  734. }).catch(error => {
  735. //(res)
  736. })
  737. this.getBannerInfo("homepage");
  738. this.getBannerInfoTop("home-top");
  739. //this.getBannerInfoTop("home-top");
  740. this.getPointTimeOut();
  741. this.getNewsList();
  742. this.getActivityInfoList();
  743. this.getChargingStationDetail()
  744. },
  745. methods: {
  746. getChargingStationDetail(){
  747. var defaultStation=process.car.defaultStation
  748. for(var item in defaultStation){
  749. siteApi.getChargingStationDetail({
  750. stationId:defaultStation[item]
  751. }).then((res) => {
  752. var station=res.data.station
  753. //this.MapLoaderthen(station)
  754. this.defaultStation.push(station)
  755. }).catch(error => {
  756. uni.showToast({
  757. title: error,
  758. icon: "none"
  759. })
  760. })
  761. }
  762. },
  763. getf5surprised() {
  764. userApi.exchangeGroupDetail("逢5红包").then((res) => {
  765. var message = res.message;
  766. this.couponList = res.data;
  767. if (this.couponList.length) {
  768. var list = res.data;
  769. var x = 0;
  770. for (var i in list) {
  771. var obj = list[i]
  772. if (!obj.probability) {
  773. continue;
  774. }
  775. var end = x + obj.probability;
  776. obj.start = x;
  777. obj.end = end;
  778. x = end;
  779. }
  780. var code = parseInt(Math.random() * x)
  781. // console.log(code)
  782. // console.log(list)
  783. var selectObj = null;
  784. for (var i in list) {
  785. var obj = list[i]
  786. if (!obj.probability) {
  787. continue;
  788. }
  789. if (code >= obj.start && code < obj.end) {
  790. selectObj = obj;
  791. this.couponSelect = selectObj;
  792. break
  793. }
  794. }
  795. if (selectObj) {
  796. this.showNt = true
  797. this.showTop = true;
  798. this.showNtStep = 0;
  799. this.showNtValue = this.couponSelect.totalDiscount
  800. } else {
  801. //this.getBannerInfoTop("home-top");
  802. }
  803. //console.log(selectObj)
  804. // this.exchangeDetailF5(selectObj.key);
  805. } else if (message == '1001') { //
  806. //周五,但是因为手里有卷, 所以不能抽
  807. var nowtime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')
  808. var time = this.carhelp.get("getf5surprised-time");
  809. if ((time && nowtime == time)) {
  810. //this.getBannerInfoTop("home-top");
  811. } else {
  812. this.carhelp.set("getf5surprised-time", nowtime);
  813. }
  814. this.showNt = true
  815. this.showTop = true;
  816. this.showNtStep = 2;
  817. } else {
  818. //this.getBannerInfoTop("home-top");
  819. }
  820. }).catch(error => {
  821. uni.showToast({
  822. title: error,
  823. icon: "none"
  824. })
  825. })
  826. },
  827. getNewYear() {
  828. //var obj=this.carhelp.get("newyear_activity2023-2-15")
  829. //
  830. var sz = ["1615623336912621591", "1615623336912621590"];
  831. var code = parseInt(Math.random() * 2)
  832. this.carhelp.set("newyear_activity2023-2-15", {
  833. nt: sz[code],
  834. code: code,
  835. status: 0
  836. })
  837. //先查询另一个领取过没
  838. userApi.exchangeDetail({
  839. key: sz[code == 0 ? 1 : 0]
  840. }).then((res) => {
  841. if (!res.data.enabled) {
  842. if (res.data.code == 2) {
  843. //未开始
  844. } else {
  845. //已经结束
  846. }
  847. //this.getBannerInfoTop("home-top");
  848. } else if (res.data.status == 1) {
  849. //this.getBannerInfoTop("home-top");
  850. //已经兑换,或者不能兑换
  851. } else if (res.data.status == 2) {
  852. // this.showNtValue=res.data.totalDiscount
  853. this.exchangeDetail(sz[code]);
  854. } else {
  855. //res.data.status==0
  856. //this.showNtValue=res.data.totalDiscount
  857. this.exchangeDetail(sz[code], sz[code == 0 ? 1 : 0]);
  858. }
  859. }).catch(error => {
  860. //this.showNt = false;
  861. uni.showToast({
  862. title: error,
  863. icon: "none"
  864. })
  865. })
  866. },
  867. exchangeDetail(exchangeCode, code2) {
  868. uni.showLoading({
  869. title: "加载中",
  870. mask: true,
  871. })
  872. userApi.exchangeDetail({
  873. key: exchangeCode
  874. }).then((res) => {
  875. uni.hideLoading();
  876. //
  877. if (!res.data.enabled) {
  878. if (res.data.code == 2) {
  879. //未开始
  880. } else {
  881. //已经结束
  882. }
  883. //this.getBannerInfoTop("home-top");
  884. } else if (res.data.status == 1) {
  885. //this.getBannerInfoTop("home-top");
  886. //已经兑换,
  887. } else if (res.data.status == 2) {
  888. if (code2) {
  889. //试试另一张卷
  890. var c = this.carhelp.get("newyear_activity2023-2-15")
  891. if (c) {
  892. this.carhelp.set("newyear_activity2023-2-15", {
  893. nt: code2,
  894. code: c.code == 0 ? 1 : 0,
  895. status: 0
  896. })
  897. }
  898. this.exchangeDetail(code2)
  899. } else {
  900. //this.getBannerInfoTop("home-top");
  901. }
  902. //不能兑换
  903. } else {
  904. this.showNt = true
  905. this.showTop = true;
  906. this.showNtStep = 0;
  907. this.showNtValue = res.data.totalDiscount
  908. }
  909. }).catch(error => {
  910. //this.showNt = false;
  911. uni.showToast({
  912. title: error,
  913. icon: "none"
  914. })
  915. })
  916. },
  917. redeemF5(exchangeCode) {
  918. uni.showLoading({
  919. title: "加载中",
  920. mask: true,
  921. })
  922. userApi.exchangeByGroupFive({
  923. key: exchangeCode
  924. }).then((res) => {
  925. uni.hideLoading();
  926. this.showNtStep = 1
  927. var nowtime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')
  928. this.carhelp.set("getf5surprised-time", nowtime);
  929. }).catch(error => {
  930. //this.showNt = false;
  931. uni.showToast({
  932. title: error,
  933. icon: "none"
  934. })
  935. })
  936. },
  937. redeemNow(exchangeCode) {
  938. uni.showLoading({
  939. title: "加载中",
  940. mask: true,
  941. })
  942. userApi.exchange({
  943. key: exchangeCode
  944. }).then((res) => {
  945. uni.hideLoading();
  946. this.showNtStep = 1
  947. this.carhelp.set("newyear_activity2023-2-15", {
  948. nt: exchangeCode,
  949. status: 1
  950. })
  951. }).catch(error => {
  952. //this.showNt = false;
  953. uni.showToast({
  954. title: error,
  955. icon: "none"
  956. })
  957. })
  958. },
  959. showNtStepClick() {
  960. if (this.showNtStep == 0) {
  961. if (this.personInfo.userType == 1) {
  962. this.showTop = false;
  963. //this.showNt = false;
  964. uni.showModal({
  965. title: "提示",
  966. content: "游客无法兑换,请先注册为会员后再兑换",
  967. confirmText: "前往注册",
  968. success: res1 => {
  969. if (res1.confirm) {
  970. uni.navigateTo({
  971. url: '/pages/login/login'
  972. })
  973. } else if (res1.cancel) {
  974. //('用户点击取消');
  975. }
  976. }
  977. })
  978. }else if(!this.personInfo.carLicense){
  979. this.showTop = false;
  980. uni.showModal({
  981. title: "提示",
  982. content: "请先车辆认证后再兑换",
  983. confirmText: "车辆信息",
  984. success: res1 => {
  985. if (res1.confirm) {
  986. uni.navigateTo({
  987. url: '/pages/user/car/carDet'
  988. })
  989. } else if (res1.cancel) {
  990. //('用户点击取消');
  991. }
  992. }
  993. })
  994. }else {
  995. this.redeemF5(this.couponSelect.key);
  996. }
  997. } else if (this.showNtStep == 1 || this.showNtStep == 2 || this.showNtStep == 3 || this.showNtStep == 4) {
  998. //this.showNt = false;
  999. uni.navigateTo({
  1000. url: "/pages/user/coupon/myCoupon"
  1001. })
  1002. }
  1003. },
  1004. test() {
  1005. if (process.env.NODE_ENV === "development") {
  1006. }
  1007. },
  1008. goSearch() {
  1009. this.$refs.tabbarMain.beforeSwitch(1)
  1010. },
  1011. nextTop(index) {
  1012. this.showTopImg = this.bannerListTop[index + 1].picUrl;
  1013. this.showTopIndex = index + 1;
  1014. },
  1015. getDescriptionTime() {
  1016. var date = this.activityDate;
  1017. var dateMonth1 = new Date().getMonth() + 1;
  1018. var dateDay1 = new Date().getDate();
  1019. var dateMonth2 = parseInt(date.slice(5, 7));
  1020. var dateDay2 = parseInt(date.slice(8, 10));
  1021. if (dateMonth1 < dateMonth2) {
  1022. var days = new Date(new Date().getFullYear(), dateMonth1, 0).getDate();
  1023. dateDay2 = dateDay2 + days;
  1024. console.log(dateDay2)
  1025. }
  1026. if (dateDay1 < dateDay2 - 2) {
  1027. this.description = dateDay2 - dateDay1 + '天'
  1028. } else {
  1029. var dateTime2 = new Date(date).getTime()
  1030. var c = hourDistanceArr(new Date(), new Date(dateTime2))
  1031. if (c[0] < 10) {
  1032. c[0] = '0' + c[0];
  1033. }
  1034. if (c[1] < 10) {
  1035. c[1] = '0' + c[1];
  1036. }
  1037. if (c[2] < 10) {
  1038. c[2] = '0' + c[2];
  1039. }
  1040. this.description = c[0] + ':' + c[1] + ':' + c[2];
  1041. if (this.description == '00:00:00') {
  1042. this.activityListShow = false;
  1043. }
  1044. setTimeout(() => {
  1045. this.getDescriptionTime();
  1046. }, 1000)
  1047. }
  1048. },
  1049. getUserInfo() {
  1050. uni.showLoading({
  1051. title: "加载中",
  1052. mask: true,
  1053. })
  1054. loginApi.findByOpenId({
  1055. openId: this.carhelp.getOpenId(),
  1056. noerror: true,
  1057. }).then((res) => {
  1058. uni.hideLoading();
  1059. if (res.code == 200 && res.result) {
  1060. this.personInfo = res.data.regUser;
  1061. var token = res ? res.data.token : '';
  1062. this.carhelp.setPersonInfo(res.data.regUser);
  1063. this.carhelp.setToken(token);
  1064. this.carhelp.setPersonInfoPlus(res.data);
  1065. }
  1066. console.log("--------------")
  1067. if (res.data && res.data.regUser) {
  1068. // if (res.data.regUser.fontMode == null) {
  1069. // this.show = true;
  1070. // } else {
  1071. // this.show = false;
  1072. // this.fontMode = res.data.regUser.fontMode;
  1073. // if (this.fontMode == '1') {
  1074. // this.carhelp.set("getElderModeClass", "长辈模式");
  1075. // } else {
  1076. // this.carhelp.set("getElderModeClass", "标准模式");
  1077. // }
  1078. // }
  1079. this.userId = res.data.regUser.id;
  1080. this.getFindChargeData();
  1081. if(res.data.regUser.fontMode=="1"){
  1082. this.checked = true;
  1083. this.carhelp.set("getElderModeClass","长辈模式")
  1084. }
  1085. if (this.carhelp.get("getElderModeClass")) {
  1086. if (this.carhelp.get("getElderModeClass") == "长辈模式") {
  1087. this.elderStatus = true;
  1088. } else {
  1089. this.elderStatus = false;
  1090. }
  1091. }else{
  1092. this.carhelp.set("getElderModeClass", "标准模式");
  1093. this.elderStatus = false;
  1094. }
  1095. } else {
  1096. if (!this.carhelp.get("getElderModeClass")) {
  1097. this.carhelp.set("getElderModeClass", "标准模式");
  1098. }
  1099. this.elderStatus = true;
  1100. var obj = this.carhelp.get("friends_invitation")
  1101. // this.carhelp.set("friends_invitation",{
  1102. // op:op,
  1103. // date:new Date().getTime()
  1104. // })
  1105. if (obj && false) {
  1106. if (obj.date + 1000 * 60 * 60 * 24 > new Date().getTime()) {
  1107. this.friendsInvitation(obj)
  1108. }
  1109. }
  1110. }
  1111. }).catch(error => {
  1112. uni.showToast({
  1113. title: error,
  1114. icon: "none"
  1115. })
  1116. })
  1117. },
  1118. friendsInvitation(obj) {
  1119. uni.showLoading({
  1120. title: "加载中",
  1121. mask: true,
  1122. })
  1123. API.findActivity({
  1124. id: obj.op.id,
  1125. code: obj.op.icode
  1126. }).then((res) => {
  1127. uni.hideLoading()
  1128. obj.activityInfo = res.data.activityInfo;
  1129. var name = res.data.activityInfo.name;
  1130. var title = "参与活动"
  1131. var okbtn = "前往注册"
  1132. var endTime = res.data.activityInfo.endTime;
  1133. if (endTime && secondsDistance(newDate(endTime)) > 0) {
  1134. name = "活动已结束"
  1135. okbtn = "继续注册"
  1136. title = "提示"
  1137. obj = null
  1138. }
  1139. this.carhelp.set("friends_invitation", obj)
  1140. uni.showModal({
  1141. title: title,
  1142. content: name,
  1143. confirmText: okbtn,
  1144. success: res1 => {
  1145. if (res1.confirm) {
  1146. uni.navigateTo({
  1147. url: '/pages/login/login'
  1148. })
  1149. } else if (res1.cancel) {
  1150. //('用户点击取消');
  1151. }
  1152. }
  1153. })
  1154. }).catch(error => {
  1155. uni.showToast({
  1156. title: error,
  1157. icon: "none"
  1158. })
  1159. })
  1160. },
  1161. clickBannerTopI(i) {
  1162. var mod = this.bannerListTop[i];
  1163. //this.showTop = false;
  1164. this.clickBanner(0, true, mod)
  1165. },
  1166. clickBannerTop() {
  1167. var mod = this.bannerListTop[this.showTopIndex];
  1168. this.showTop = false;
  1169. this.clickBanner(0, true, mod)
  1170. },
  1171. clickBanner(index, bl, modout) {
  1172. var uurl = "";
  1173. var mod = this.bannerList[index]
  1174. if (modout) {
  1175. mod = modout;
  1176. }
  1177. mod.clickUrl = mod.linkUrl
  1178. if (mod.linkPicUrl && !bl) {
  1179. this.showOss = true;
  1180. this.showOssImg = mod.linkPicUrl;
  1181. this.showOssIndex = index;
  1182. } else if (mod.clickUrl == null) {
  1183. } else if (mod.clickUrl.indexOf('http') == 0) {
  1184. window.location = mod.clickUrl + uurl;
  1185. } else if (mod.clickUrl.slice(-5) == 'login' && this.userId) {
  1186. } else if (mod.clickUrl.indexOf('#/') == 0) {
  1187. if (mod.clickUrl.indexOf("?") == -1) {
  1188. mod.clickUrl += '?';
  1189. }
  1190. var url = mod.clickUrl.split("#")[1]
  1191. //window.location = mod.clickUrl;
  1192. uni.navigateTo({
  1193. url: url + uurl
  1194. })
  1195. } else if (mod.clickUrl == '#' || mod.clickUrl == '') {
  1196. } else {
  1197. uni.navigateTo({
  1198. url: mod.clickUrl + uurl
  1199. })
  1200. }
  1201. },
  1202. getBannerInfoTop(code) {
  1203. var nowtime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')
  1204. var time = this.carhelp.get("bannerListTop");
  1205. if ((time && nowtime == time)) {
  1206. this.getBannerInfoTopBl=false;
  1207. }
  1208. uni.showLoading({
  1209. title: "加载中",
  1210. mask: true,
  1211. })
  1212. newsApi.getBannerInfo(code).then((res) => {
  1213. this.bannerListTop = res.data;
  1214. if (this.bannerListTop.length) {
  1215. this.showTop = true;
  1216. this.showTopImg = this.bannerListTop[0].picUrl;
  1217. this.showTopIndex = 0;
  1218. }
  1219. this.carhelp.set("bannerListTop", nowtime);
  1220. //this.test()
  1221. var userInfo = this.carhelp.getPersonInfo();
  1222. if (userInfo && userInfo.id) {
  1223. this.getf5surprised()
  1224. } else {
  1225. }
  1226. uni.hideLoading()
  1227. //document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 120px;"
  1228. }).catch(error => {
  1229. uni.showToast({
  1230. title: error,
  1231. icon: "none"
  1232. })
  1233. })
  1234. },
  1235. getBannerInfo(code) {
  1236. uni.showLoading({
  1237. title: "加载中",
  1238. mask: true,
  1239. })
  1240. newsApi.getBannerInfo(code).then((res) => {
  1241. this.bannerList = res.data;
  1242. uni.hideLoading()
  1243. //document.getElementsByClassName("uni-swiper-wrapper")[0].parentNode.style="background-color: rgb(255, 255, 255); height: 120px;"
  1244. }).catch(error => {
  1245. uni.showToast({
  1246. title: error,
  1247. icon: "none"
  1248. })
  1249. })
  1250. },
  1251. elderClick() {
  1252. if (this.value == "长辈模式") {
  1253. this.elderStatus = true;
  1254. this.carhelp.set("getElderModeClass", "长辈模式");
  1255. this.fontMode = '1';
  1256. } else {
  1257. this.elderStatus = false;
  1258. this.carhelp.set("getElderModeClass", "标准模式");
  1259. this.fontMode = '0';
  1260. }
  1261. API.changeFont({
  1262. fontMode: this.fontMode
  1263. }).then((res) => {
  1264. this.show = false;
  1265. }).catch(error => {
  1266. uni.showToast({
  1267. title: error,
  1268. icon: "none"
  1269. })
  1270. })
  1271. },
  1272. bhz(){
  1273. uni.showToast({
  1274. title: "备货中,敬请期待",
  1275. icon: "none"
  1276. })
  1277. },
  1278. getPointTimeOut() {
  1279. setTimeout(() => {
  1280. if (this.pointTimeOut) {
  1281. this.getPoint();
  1282. }
  1283. }, 1000)
  1284. },
  1285. getFindChargeData() {
  1286. API.findChargeData().then((res) => {
  1287. this.chargeList = res.data.chargingRecordList;
  1288. var list = res.data.chargingRecordList;
  1289. for (var i = 0; i < list.length; i++) {
  1290. if (list[i].status == '1' || list[i].status == '4') {
  1291. this.timeOut = true;
  1292. }
  1293. }
  1294. if (this.timeOut && this.pointTimeOut) {
  1295. setTimeout(() => {
  1296. this.getFindChargeData();
  1297. }, 5000)
  1298. }
  1299. }).catch(error => {
  1300. uni.showToast({
  1301. title: error,
  1302. icon: "none"
  1303. })
  1304. })
  1305. },
  1306. toAll() {
  1307. uni.navigateTo({
  1308. url: '/pages/index/all'
  1309. })
  1310. },
  1311. toSearchPile() {
  1312. uni.navigateTo({
  1313. url: '/pages/searchPile/searchPile'
  1314. })
  1315. },
  1316. toLogin() {
  1317. uni.navigateTo({
  1318. url: '/pages/login/login'
  1319. })
  1320. },
  1321. toNewsNotice() {
  1322. // uni.navigateTo({
  1323. // url: '/pages/article/newsNotice'
  1324. // })
  1325. uni.navigateTo({
  1326. url: '/pages/index/activity'
  1327. })
  1328. },
  1329. //微信扫二维码
  1330. getScanCode() {
  1331. if (this.userId) {
  1332. WxJsApi.scanQRCode(1).then(res => {
  1333. //("scanQRCode------" + res)
  1334. if (res) {
  1335. API.scanCode(res).then((response) => {
  1336. }).catch(error => {
  1337. uni.showToast({
  1338. title: error,
  1339. icon: "none"
  1340. })
  1341. })
  1342. }
  1343. }).catch(error => {
  1344. })
  1345. } else {
  1346. uni.navigateTo({
  1347. url: '/pages/login/login'
  1348. })
  1349. }
  1350. },
  1351. fastRecharge() {
  1352. if (this.userId) {
  1353. if(this.personInfo.userType==1){
  1354. uni.showToast({
  1355. title:"游客模式只支持“先付后退”"
  1356. })
  1357. }else{
  1358. uni.navigateTo({
  1359. url: '/pages/user/finance/recharge'
  1360. })
  1361. }
  1362. } else {
  1363. uni.navigateTo({
  1364. url: '/pages/login/login'
  1365. })
  1366. }
  1367. },
  1368. chargingRecord() {
  1369. if (this.userId) {
  1370. uni.navigateTo({
  1371. url: '/pages/record/index'
  1372. })
  1373. } else {
  1374. uni.navigateTo({
  1375. url: '/pages/login/login'
  1376. })
  1377. }
  1378. },
  1379. rechargeActivity(item) {
  1380. if (this.userId) {
  1381. var uurl = "&uid=" + this.userId;
  1382. var mod = item
  1383. if (mod.clickUrl == null) {
  1384. } else if (mod.clickUrl.indexOf('http') == 0) {
  1385. window.location = mod.clickUrl + uurl;
  1386. } else if (mod.clickUrl.indexOf('#/') == 0) {
  1387. if (mod.clickUrl.indexOf("?") == -1) {
  1388. mod.clickUrl += '?';
  1389. }
  1390. var url = mod.clickUrl.split("#")[1]
  1391. //window.location = mod.clickUrl;
  1392. uni.navigateTo({
  1393. url: url + uurl
  1394. })
  1395. } else if (mod.clickUrl == '#' || mod.clickUrl == '') {
  1396. } else {
  1397. uni.navigateTo({
  1398. url: mod.clickUrl + uurl
  1399. })
  1400. }
  1401. } else {
  1402. uni.navigateTo({
  1403. url: '/pages/login/login'
  1404. })
  1405. }
  1406. },
  1407. getActivityInfoList() {
  1408. uni.showLoading({
  1409. title: "加载中",
  1410. mask: true,
  1411. })
  1412. API.activityInfoList({
  1413. pageIndex: 1,
  1414. pageSize: 10
  1415. }).then((res) => {
  1416. uni.hideLoading()
  1417. var list = res.data.data;
  1418. for (let i = 0; i < list.length; i++) {
  1419. if (list[i].type == 2 && list[i].endTime != null) {
  1420. this.activityListShow = true;
  1421. var reg = new RegExp('-', 'gi');
  1422. this.activityDate = list[i].endTime.replace(reg, '/');
  1423. console.log(this.activityDate)
  1424. this.activityDateList = list[i];
  1425. list.splice(i, 1);
  1426. this.getDescriptionTime();
  1427. }
  1428. }
  1429. this.activityList = list;
  1430. }).catch(error => {
  1431. uni.showToast({
  1432. title: error,
  1433. icon: "none"
  1434. })
  1435. })
  1436. },
  1437. searchStationData(bl) {
  1438. if (bl) {
  1439. this.pageIndex2++;
  1440. }
  1441. var data = {
  1442. longitude: this.longitude,
  1443. latitude: this.latitude,
  1444. pageIndex: this.pageIndex2,
  1445. pageSize: 3
  1446. }
  1447. if (this.carhelp.getPersonInfo()) {
  1448. data.openId = this.carhelp.getOpenId()
  1449. }
  1450. this.loading = false
  1451. siteApi.searchStationData(data).then((response) => {
  1452. if (this.pageIndex2 == 1) {
  1453. this.stationList = response.data.data;
  1454. // this.listForm.totalPage = response.data.totalPage;
  1455. } else {
  1456. this.stationList = [
  1457. ...this.stationList,
  1458. ...response.data.data
  1459. ];
  1460. }
  1461. this.recordsTotal2 = response.data.recordsTotal;
  1462. this.loading = true
  1463. console.log(this.loading)
  1464. if (false&&response.data.data.length&&false) {
  1465. var stationDataList = response.data.data;
  1466. MapLoader().then(AMap1 => {
  1467. for (var i in stationDataList) {
  1468. var item = stationDataList[i]
  1469. var lnglat = new AMap.LngLat(this.longitude, this.latitude);
  1470. var myDistance = lnglat.distance([item.longitude, item.latitude]);
  1471. item.distance = myDistance / 1000;
  1472. console.log(item.distance)
  1473. }
  1474. })
  1475. //this.stationData = stationDataList;
  1476. }
  1477. }).catch(error => {
  1478. console.log(error,"123")
  1479. uni.showToast({
  1480. title: error,
  1481. icon: "none"
  1482. })
  1483. })
  1484. },
  1485. getPoint() {
  1486. if (this.stationList.length != 0) {
  1487. return
  1488. }
  1489. WxJsApi.getLocation().then((res) => {
  1490. this.latitude = parseFloat(res.latitude);
  1491. this.longitude = parseFloat(res.longitude);
  1492. this.message = res.errMsg;
  1493. if (res.errMsg != 'getLocation:ok') {
  1494. uni.showToast({
  1495. title: res
  1496. })
  1497. } else {
  1498. this.searchStationData()
  1499. }
  1500. }).catch(error => {
  1501. uni.showToast({
  1502. title: error,
  1503. icon: "none"
  1504. })
  1505. })
  1506. },
  1507. getNewsList(bl) {
  1508. uni.showLoading({
  1509. title: "加载中",
  1510. mask: true,
  1511. })
  1512. newsApi.newsInfoList({
  1513. pageIndex: 1,
  1514. pageSize: 5,
  1515. shortName:'GDXW',
  1516. //shortName:'TZGG'
  1517. }).then((res) => {
  1518. uni.hideLoading()
  1519. this.newsList = res.data.data.map(item=>{
  1520. return item.title
  1521. })
  1522. }).catch(error => {
  1523. uni.showToast({
  1524. title: error,
  1525. icon: "none"
  1526. })
  1527. })
  1528. },
  1529. myLoadmore() {
  1530. //this.pageIndex += 1;
  1531. //this.getNewsList()
  1532. },
  1533. }
  1534. }
  1535. </script>
  1536. <style lang="scss" scoped>
  1537. .swiper{
  1538. height: 700rpx;
  1539. .swiperitem{
  1540. height: 700rpx;
  1541. }
  1542. }
  1543. .couponmain {
  1544. .main {
  1545. margin: 100px auto 0;
  1546. position: relative;
  1547. .content {
  1548. padding: 24px;
  1549. padding-top: 50px;
  1550. background-color: #fff;
  1551. box-shadow: 0px 0px 0px 1px rgba(254, 229, 147, 100);
  1552. border: 2px solid rgba(253, 217, 141, 100);
  1553. border-radius: 8px;
  1554. .img {
  1555. width: 44vw;
  1556. height: 134px;
  1557. position: absolute;
  1558. top: -88px;
  1559. right: 0px;
  1560. img {
  1561. width: 100%;
  1562. height: 100%;
  1563. }
  1564. }
  1565. .title {
  1566. font-size: 16px;
  1567. color: rgba(84, 45, 45, 100);
  1568. margin-bottom: 13px;
  1569. }
  1570. .text {
  1571. line-height: 24px;
  1572. color: rgba(84, 45, 45, 100);
  1573. font-size: 16px;
  1574. text-align: justify;
  1575. text-decoration: underline;
  1576. text-decoration-color: #ECE3BA;
  1577. text-indent: 32px;
  1578. }
  1579. .sign {
  1580. text-align: right;
  1581. margin-top: 8px;
  1582. font-size: 16px;
  1583. }
  1584. }
  1585. // 专享优惠券
  1586. .exclusive {
  1587. background-color: #F5E4C8;
  1588. margin-top: 20px;
  1589. padding: 32rpx 32rpx 32rpx 32rpx;
  1590. box-shadow: 0px 0px 0px 1px rgba(254, 229, 147, 100);
  1591. border: 2px solid rgba(253, 217, 141, 100);
  1592. border-radius: 8px;
  1593. .exclusive1 {
  1594. font-size: 48rpx;
  1595. color: rgba(51, 51, 51, 1);
  1596. font-family: SourceHanSerif-bold;
  1597. }
  1598. .exclusive2 {
  1599. font-family: PingFangSC-regular;
  1600. color: rgba(51, 51, 51, 1);
  1601. font-size: 36rpx;
  1602. }
  1603. p {
  1604. width: 100%;
  1605. text-align: center;
  1606. //color: rgba(255, 73, 75, 100);
  1607. //font-size: 20px;
  1608. }
  1609. .img {
  1610. // width: 74.4vw;
  1611. // height: 84px;
  1612. margin-top: 16px;
  1613. position: relative;
  1614. img {
  1615. width: 100%;
  1616. height: 100%;
  1617. }
  1618. }
  1619. .num {
  1620. font-size: 54rpx;
  1621. color: rgba(252, 237, 179, 100);
  1622. position: absolute;
  1623. top: 10px;
  1624. left: 8vw;
  1625. font-weight: 600;
  1626. .unit {
  1627. font-size: 24rpx;
  1628. color: rgba(252, 237, 179, 100);
  1629. }
  1630. }
  1631. .unit2 {
  1632. font-size: 12px;
  1633. color: #FFF;
  1634. position: absolute;
  1635. top: 90rpx;
  1636. left: 24rpx;
  1637. }
  1638. .exclusive-text {
  1639. color: #333333;
  1640. font-size: 16rpx;
  1641. }
  1642. .exclusive-btn {
  1643. width: 80%;
  1644. margin-top: 48rpx;
  1645. border-radius: 50px;
  1646. background: linear-gradient(90.58deg, rgba(225, 208, 165, 1) 0.05%, rgba(228, 190, 132, 1) 98.67%);
  1647. color: rgba(51, 51, 51, 1);
  1648. font-size: 36rpx;
  1649. text-align: center;
  1650. box-shadow: 0px 8rpx 20rpx 0px rgba(184, 155, 103, 40);
  1651. font-family: -apple-system;
  1652. // width: 87.4%;
  1653. // margin-top: 20px;
  1654. // background-image: linear-gradient(#ffff00, #ff9600);
  1655. // color: #521e00;
  1656. // font-size: 20px;
  1657. // border-radius: 50px;
  1658. }
  1659. .ticket-info {
  1660. width: 40vw;
  1661. text-align: center;
  1662. position: absolute;
  1663. top: 18px;
  1664. right: 16rpx;
  1665. .ticket-name {
  1666. line-height: 40rpx;
  1667. color: rgba(16, 16, 16, 100);
  1668. font-size: 16rpx;
  1669. }
  1670. .condition {
  1671. line-height: 22px;
  1672. color: #8a6f6f;
  1673. font-size: 12px;
  1674. }
  1675. }
  1676. }
  1677. }
  1678. }
  1679. .oldTextClassF {
  1680. .text-2 {
  1681. font-size: 36rpx !important;
  1682. }
  1683. .text-3 {
  1684. font-size: 34rpx !important;
  1685. }
  1686. .station .price-free .price-1 .num {
  1687. font-size: 48rpx !important;
  1688. line-height: 40rpx;
  1689. font-weight: bold;
  1690. }
  1691. }
  1692. /deep/.u-image__loading {
  1693. background: #ff000000;
  1694. }
  1695. // 头部图片
  1696. img {
  1697. width: 100%;
  1698. // height: 100%;
  1699. }
  1700. .background {
  1701. background: linear-gradient(#D6EEDC, #F3F4F4);
  1702. padding-top: 16px;
  1703. }
  1704. .banner {
  1705. width: 91.4%;
  1706. margin: 0 auto;
  1707. border-radius: 12px;
  1708. height: 100px;
  1709. overflow: hidden;
  1710. /deep/uni-swiper{
  1711. height: 100px !important;
  1712. }
  1713. }
  1714. // 选项列表
  1715. .option-list {
  1716. padding-top: 15px;
  1717. line-height: 20px;
  1718. border-radius: 8px;
  1719. text-align: center;
  1720. margin: auto;
  1721. display: flex;
  1722. justify-content: space-around;
  1723. .list-item {
  1724. // 图标
  1725. .icon {
  1726. width: 40px;
  1727. height: 40px;
  1728. border-radius: 99px;
  1729. line-height: 40px;
  1730. font-size: 24px;
  1731. text-align: center;
  1732. margin: auto;
  1733. color: #ffffff;
  1734. }
  1735. .text {
  1736. margin-top: 4px;
  1737. }
  1738. }
  1739. }
  1740. .flex {
  1741. display: flex;
  1742. }
  1743. // 站点
  1744. .pack-up {
  1745. float: right;
  1746. font-size: 16px;
  1747. color: rgba(119, 119, 119, 100);
  1748. }
  1749. .station,
  1750. .location,
  1751. .state1 {
  1752. box-shadow: 0px 4rpx 12rpx 0px #008c4a33;
  1753. }
  1754. // 附近站点改版
  1755. .station {
  1756. width: 91.4%;
  1757. border-radius: 8px;
  1758. padding: 12px 12px 12px 11px;
  1759. background-color: #fff;
  1760. margin: 8px auto 0;
  1761. .head {
  1762. display: flex;
  1763. justify-content: space-between;
  1764. align-items: center;
  1765. .title {
  1766. color: rgba(16, 16, 16, 100);
  1767. font-size: 32rpx;
  1768. font-weight: 550;
  1769. width: 440rpx;
  1770. text-overflow: ellipsis;
  1771. overflow: hidden;
  1772. white-space: nowrap;
  1773. }
  1774. .distance {
  1775. width: 180rpx;
  1776. color: rgba(102, 102, 102, 100);
  1777. font-size: 32rpx;
  1778. text-align: end;
  1779. .iconfont {
  1780. font-size: 24rpx;
  1781. margin-right: 4rpx;
  1782. }
  1783. }
  1784. }
  1785. .sign {
  1786. display: flex;
  1787. flex-wrap: wrap;
  1788. margin-top: 16rpx;
  1789. height: 46rpx;
  1790. overflow: hidden;
  1791. .sign-tag {
  1792. line-height: 40rpx;
  1793. border-radius: 8rpx;
  1794. //background-color: rgba(255, 255, 255, 100);
  1795. //color: rgba(255, 139, 0, 100);
  1796. font-size: 24rpx;
  1797. text-align: center;
  1798. //border: 1px solid rgba(255, 139, 0, 100);
  1799. padding: 0 8rpx 14rpx 8rpx;
  1800. margin-right: 16rpx;
  1801. margin-bottom: 8rpx;
  1802. }
  1803. .sign-0 {
  1804. background: linear-gradient(89.4deg, rgba(129,97,255,1) 2.8%,rgba(169,147,255,1) 98.02%);
  1805. color: rgba(255, 255, 255, 1);
  1806. padding: 0 10rpx;
  1807. //border: 1px solid rgba(255, 139, 0, 100);
  1808. }
  1809. .sign-5 {
  1810. background: linear-gradient(89.4deg, rgba(255,61,0,1) 2.8%,rgba(255,134,0,1) 98.02%);
  1811. color: rgba(255, 255, 255, 1);
  1812. padding: 0 10rpx;
  1813. }
  1814. .sign-6 {
  1815. //background: linear-gradient(89.4deg, rgba(255,61,0,1) 2.8%,rgba(255,134,0,1) 98.02%);
  1816. background: linear-gradient(89.4deg, rgba(0,164,87,1) 2.8%,rgba(0,206,141,1) 98.02%);
  1817. color: rgba(255, 255, 255, 1);
  1818. padding: 0 10rpx;
  1819. }
  1820. .sign-1 {
  1821. line-height: 40rpx;
  1822. border-radius: 8rpx;
  1823. background-color: rgba(255, 255, 255, 100);
  1824. color: rgba(255, 139, 0, 100);
  1825. font-size: 24rpx;
  1826. text-align: center;
  1827. border: 1px solid rgba(255, 139, 0, 100);
  1828. padding: 0 8rpx;
  1829. margin-right: 16rpx;
  1830. margin-bottom: 8rpx;
  1831. }
  1832. .sign-2 {
  1833. line-height: 40rpx;
  1834. border-radius: 8rpx;
  1835. background-color: rgba(255, 255, 255, 100);
  1836. color: rgba(153, 153, 153, 100);
  1837. font-size: 24rpx;
  1838. text-align: center;
  1839. border: 1px solid rgba(204, 204, 204, 100);
  1840. padding: 0 8rpx;
  1841. margin-right: 16rpx;
  1842. margin-bottom: 8rpx;
  1843. }
  1844. .sign-3 {
  1845. line-height: 40rpx;
  1846. border-radius: 8rpx;
  1847. background-color: rgba(255, 255, 255, 100);
  1848. color: #8161FF;
  1849. font-size: 24rpx;
  1850. text-align: center;
  1851. border: 1px solid #8161FF;
  1852. padding: 0 8rpx;
  1853. margin-right: 16rpx;
  1854. margin-bottom: 8rpx;
  1855. }
  1856. .sign-4 {
  1857. line-height: 40rpx;
  1858. border-radius: 8rpx;
  1859. background-color: rgba(255, 255, 255, 100);
  1860. color: #00B962;
  1861. font-size: 24rpx;
  1862. text-align: center;
  1863. border: 1px solid #00B962;
  1864. padding: 0 8rpx;
  1865. margin-right: 16rpx;
  1866. margin-bottom: 8rpx;
  1867. }
  1868. }
  1869. .price-free {
  1870. display: flex;
  1871. justify-content: space-between;
  1872. margin-top: 8rpx;
  1873. .price {
  1874. display: flex;
  1875. align-items: baseline;
  1876. }
  1877. .price-1 {
  1878. .num {
  1879. color: rgba(255, 98, 0, 100);
  1880. font-size: 44rpx;
  1881. }
  1882. .unit {
  1883. font-size: 12px;
  1884. color: rgba(153, 153, 153, 100);
  1885. }
  1886. }
  1887. .price-2 {
  1888. font-size: 24rpx;
  1889. margin-left: 8rpx;
  1890. color: #999999;
  1891. text-decoration: line-through;
  1892. }
  1893. .price-3 {
  1894. font-size: 24rpx;
  1895. color: #fff;
  1896. margin-left: 8rpx;
  1897. padding-right: 9rpx;
  1898. background:#00B962 ;
  1899. border-radius: 8rpx;
  1900. .num1{
  1901. padding-left: 12rpx;
  1902. border-radius: 8rpx 0 8rpx 8rpx;
  1903. padding-right: 18rpx;
  1904. background: #121212;
  1905. -webkit-clip-path: polygon(0 0, 93% 0, 84% 100%, 0% 100%);
  1906. clip-path: polygon(0 0, 93% 0, 84% 100%, 0% 100%);
  1907. }
  1908. }
  1909. }
  1910. .free {
  1911. display: flex;
  1912. align-items: center;
  1913. .slow,
  1914. .fast {
  1915. display: flex;
  1916. .sp-font {
  1917. width: 40rpx;
  1918. height: 40rpx;
  1919. line-height: 40rpx;
  1920. border-radius: 4px;
  1921. background-color: #7a68f6;
  1922. color: #fff;
  1923. font-size: 28rpx;
  1924. text-align: center;
  1925. margin-right: 2rpx;
  1926. }
  1927. .fast-font {
  1928. width: 40rpx;
  1929. height: 40rpx;
  1930. line-height: 40rpx;
  1931. border-radius: 8rpx;
  1932. // background-color: rgba(186, 240, 215, 100);
  1933. // color: rgba(0, 130, 69, 100);
  1934. background-color: #1677FF;
  1935. color: rgba(255, 255, 255, 1);
  1936. font-size: 28rpx;
  1937. text-align: center;
  1938. margin-right: 8rpx;
  1939. }
  1940. .slow-font {
  1941. width: 40rpx;
  1942. height: 40rpx;
  1943. line-height: 40rpx;
  1944. border-radius: 8rpx;
  1945. // background-color: rgba(226, 226, 226, 100);
  1946. // color: rgba(128, 128, 128, 100);
  1947. background-color: #00B962;
  1948. color: rgba(255, 255, 255, 1);
  1949. font-size: 28rpx;
  1950. text-align: center;
  1951. margin-right: 8rpx;
  1952. }
  1953. .num {
  1954. font-size: 32rpx;
  1955. color: #666;
  1956. line-height: 40rpx;
  1957. }
  1958. .num1 {
  1959. font-size: 32rpx;
  1960. color: #bbb;
  1961. line-height: 40rpx;
  1962. }
  1963. }
  1964. .slow {
  1965. margin-left: 24rpx;
  1966. }
  1967. }
  1968. }
  1969. //定位
  1970. .location {
  1971. width: 91.4%;
  1972. background-color: #ffffff;
  1973. height: 120px;
  1974. display: flex;
  1975. justify-content: space-between;
  1976. margin: 20px auto 0;
  1977. border-radius: 8px;
  1978. border: #F2F4F4 1px;
  1979. .location-text {
  1980. padding: 24px 0 0 28px;
  1981. .text-1 {
  1982. height: 16px;
  1983. line-height: 16px;
  1984. color: rgba(16, 16, 16, 100);
  1985. font-size: 16px;
  1986. text-align: left;
  1987. }
  1988. .text-2 {
  1989. height: 17px;
  1990. line-height: 17px;
  1991. color: rgba(102, 102, 102, 100);
  1992. font-size: 12px;
  1993. text-align: left;
  1994. margin-top: 4px;
  1995. white-space: nowrap; //强制不换行
  1996. text-overflow: ellipsis; //文本超出出现省略号
  1997. overflow: hidden;
  1998. }
  1999. .text-3 {
  2000. width: 80px;
  2001. height: 24px;
  2002. line-height: 22px;
  2003. border-radius: 50px;
  2004. color: rgba(0, 185, 98, 100);
  2005. font-size: 12px;
  2006. text-align: center;
  2007. border: 1px solid rgba(0, 185, 98, 100);
  2008. margin-top: 11px;
  2009. }
  2010. }
  2011. .img-box {
  2012. width: 120px;
  2013. height: 120px;
  2014. margin-right: 20px;
  2015. }
  2016. }
  2017. .img-box4 {
  2018. padding-top: 5px;
  2019. height: 260rpx;
  2020. img {
  2021. max-width: 100px;
  2022. }
  2023. .img-view {
  2024. color: #0293f0;
  2025. float: right;
  2026. font-size: 10px;
  2027. margin-top: 3px;
  2028. position: relative;
  2029. bottom: 30rpx;
  2030. left: -15px;
  2031. .iconfont {
  2032. font-size: 14px;
  2033. }
  2034. }
  2035. }
  2036. .state {
  2037. width: 91.4%;
  2038. background-color: #ffffff;
  2039. height: 260rpx;
  2040. min-height: 120px;
  2041. max-height: 130px;
  2042. display: flex;
  2043. margin: 20rpx auto 0;
  2044. border-radius: 8px;
  2045. border: #F2F4F4 1px;
  2046. .state-text {
  2047. min-width: 70%;
  2048. padding: 48rpx 0 0 24rpx;
  2049. Z-INDEX: 99;
  2050. .text-1 {
  2051. height: 16px;
  2052. line-height: 16px;
  2053. color: rgba(0, 185, 98, 1);
  2054. font-size: 16px;
  2055. text-align: left;
  2056. font-weight: bold;
  2057. span {
  2058. color: rgba(16, 16, 16, 1);
  2059. margin-right: 12rpx;
  2060. }
  2061. }
  2062. .text-2 {
  2063. width: 160%;
  2064. height: 17px;
  2065. line-height: 17px;
  2066. color: #101010;
  2067. text-align: left;
  2068. margin-top: 12px;
  2069. span {
  2070. font-weight: bold;
  2071. margin-right: 6rpx;
  2072. margin-left: 6rpx;
  2073. }
  2074. .text-21 {
  2075. color: rgba(0, 185, 98, 1);
  2076. }
  2077. .text-22 {
  2078. color: #ed7847;
  2079. }
  2080. }
  2081. .text-3 {
  2082. font-size: 14px;
  2083. line-height: 20px;
  2084. margin-top: 6px;
  2085. color: #999999;
  2086. }
  2087. }
  2088. .img-box {
  2089. width: 120px;
  2090. height: 120px;
  2091. margin-right: 20px;
  2092. }
  2093. }
  2094. //充值
  2095. .top-up {
  2096. width: 91.4%;
  2097. margin: 12px auto 0;
  2098. .top-up-title {
  2099. color: rgba(16, 16, 16, 100);
  2100. font-size: 16px;
  2101. }
  2102. .card-box {
  2103. display: flex;
  2104. justify-content: space-between;
  2105. //padding: 0 0 16px 0;
  2106. .card {
  2107. width: 48.3%;
  2108. height: 65px;
  2109. img {
  2110. width: 100%;
  2111. height: 100%;
  2112. }
  2113. }
  2114. }
  2115. .img-box2 {
  2116. margin-top: 12px;
  2117. display: flex;
  2118. justify-content: space-between;
  2119. img {
  2120. width: 100%;
  2121. height: 100%;
  2122. }
  2123. .left-image {
  2124. width: 48.3%;
  2125. height: 166px;
  2126. padding: 8px 0 0 12px;
  2127. // background: url(@/assets/img/topup1.png);
  2128. background-repeat: no-repeat;
  2129. background-position: 30% 10%;
  2130. background-size: cover;
  2131. p {
  2132. color: rgba(56, 47, 33, 100);
  2133. font-size: 24px;
  2134. line-height: 28px;
  2135. font-weight: 600;
  2136. }
  2137. .time-activities {
  2138. color: rgba(56, 39, 14, 100);
  2139. font-size: 16px;
  2140. line-height: 22px;
  2141. margin-top: 4px;
  2142. .time {
  2143. margin-left: 4px;
  2144. color: #fa3534;
  2145. font-weight: bold;
  2146. }
  2147. }
  2148. }
  2149. .right-image {
  2150. width: 48.3%;
  2151. display: flex;
  2152. flex-direction: column;
  2153. justify-content: space-between;
  2154. .margin-top {
  2155. margin-top: 12px;
  2156. }
  2157. img {
  2158. height: 77px;
  2159. }
  2160. }
  2161. ;
  2162. }
  2163. }
  2164. .lineBox {
  2165. background-color: rgba(0, 145, 67, 100);
  2166. padding: 0px 3px;
  2167. background-color: rgba(0, 185, 98, 1);
  2168. color: rgba(255, 255, 255, 1);
  2169. margin-left: 6px;
  2170. border-radius: 3px;
  2171. }
  2172. // 小竖线
  2173. .line {
  2174. display: inline-block;
  2175. width: 3px;
  2176. height: 12px;
  2177. margin-right: 7px;
  2178. background-color: rgba(0, 145, 67, 100);
  2179. }
  2180. // 新闻公告
  2181. .news-title {
  2182. padding: 0 16px;
  2183. margin-top: 12px;
  2184. color: rgba(16, 16, 16, 100);
  2185. font-size: 16px;
  2186. display: flex;
  2187. justify-content: space-between;
  2188. background-color: #F2F4F4;
  2189. .news-title-left {
  2190. display: flex;
  2191. }
  2192. .more {
  2193. font-size: 14px;
  2194. color: #777777;
  2195. display: flex;
  2196. line-height: 20px;
  2197. .more-icon {
  2198. font-size: 24px
  2199. }
  2200. }
  2201. }
  2202. .news {
  2203. background-color: #fff;
  2204. width: 91.4%;
  2205. margin: 12px auto 0;
  2206. border-radius: 8px;
  2207. .news-content {
  2208. display: flex;
  2209. justify-content: space-between;
  2210. padding: 12px;
  2211. .content-text {
  2212. width: 56.2%;
  2213. height: 100%;
  2214. line-height: 21px;
  2215. color: #101010;
  2216. text-align: left;
  2217. font-size: 14px;
  2218. }
  2219. .content-title {
  2220. width: 100%;
  2221. overflow: hidden;
  2222. text-overflow: ellipsis;
  2223. display: -webkit-box;
  2224. -webkit-box-orient: vertical;
  2225. -webkit-line-clamp: 3;
  2226. }
  2227. .content-img {
  2228. width: 40.57%;
  2229. height: 100%;
  2230. border-radius: 4px;
  2231. overflow: hidden;
  2232. img {
  2233. width: 100%;
  2234. height: 80%;
  2235. }
  2236. }
  2237. .news-time {
  2238. margin-top: 5%;
  2239. color: #999999;
  2240. width: 80px;
  2241. height: 20px;
  2242. font-size: 14px;
  2243. }
  2244. }
  2245. }
  2246. .bottom {
  2247. width: 100%;
  2248. height: 60px;
  2249. .bot {
  2250. width: 100%;
  2251. margin: 0 auto;
  2252. padding: 0 17.3%;
  2253. justify-content: space-between;
  2254. display: flex;
  2255. .bot-line {
  2256. margin-top: 20px;
  2257. width: 21.3%;
  2258. height: 0px;
  2259. border: 1px solid rgba(207, 210, 213, 100);
  2260. }
  2261. .bot-text {
  2262. white-space: nowrap;
  2263. height: 17px;
  2264. margin-top: 13px;
  2265. margin-left: 12px;
  2266. margin-right: 12px;
  2267. font-size: 12px;
  2268. text-align: center;
  2269. color: rgba(182, 189, 195, 100);
  2270. }
  2271. }
  2272. }
  2273. // 导航栏
  2274. .navigation {
  2275. width: 100%;
  2276. // height: 40px;
  2277. padding: 10px 0;
  2278. background-color: #fff;
  2279. position: fixed;
  2280. bottom: 0;
  2281. left: 0;
  2282. display: flex;
  2283. justify-content: space-around;
  2284. text-align: center;
  2285. color: #999999;
  2286. .nav-icon {
  2287. width: 54px;
  2288. font-size: 24px
  2289. }
  2290. .nav-text {
  2291. font-size: 14px;
  2292. }
  2293. }
  2294. .shema {
  2295. width: 70%;
  2296. padding-bottom: 20px;
  2297. border-radius: 16px;
  2298. background-color: #fff;
  2299. position: fixed;
  2300. top: 100px;
  2301. left: 0;
  2302. right: 0;
  2303. margin: 0 auto;
  2304. z-index: 9999;
  2305. .title {
  2306. height: 33px;
  2307. color: rgba(16, 16, 16, 100);
  2308. font-size: 24px;
  2309. text-align: center;
  2310. padding: 16px 0;
  2311. }
  2312. .u-radio-group {
  2313. margin: 16px 5vw;
  2314. }
  2315. /deep/.u-radio {
  2316. width: 60vw !important;
  2317. padding: 24px 24px 40px;
  2318. line-height: 20px;
  2319. border-radius: 16px;
  2320. text-align: center;
  2321. border: #101010 1px solid;
  2322. margin-top: 12px;
  2323. }
  2324. /deep/ .u-radio__label {
  2325. text-align: left;
  2326. height: 24px;
  2327. // color: rgba(0, 185, 98, 100);
  2328. font-size: 24px;
  2329. }
  2330. p {
  2331. height: 22px;
  2332. color: rgba(102, 102, 102, 100);
  2333. font-size: 14px;
  2334. margin-top: 12px;
  2335. white-space: nowrap
  2336. }
  2337. .hint {
  2338. text-align: center;
  2339. }
  2340. .btn-box {
  2341. margin-top: 20px;
  2342. .choice-btn {
  2343. width: 80%;
  2344. }
  2345. }
  2346. }
  2347. .wrap {
  2348. display: flex;
  2349. align-items: center;
  2350. justify-content: center;
  2351. height: 100%;
  2352. }
  2353. // 登录提示
  2354. .login-prompt {
  2355. width: 91.4%;
  2356. height: 40px;
  2357. line-height: 40px;
  2358. border-radius: 50px;
  2359. text-align: left;
  2360. padding-left: 16px;
  2361. padding-right: 4px;
  2362. background-color: rgba(0, 0, 0, 0.6);
  2363. position: fixed;
  2364. bottom: 75px;
  2365. color: #ffffff;
  2366. .button {
  2367. width: 88px;
  2368. height: 32px;
  2369. line-height: 32px;
  2370. border-radius: 50px;
  2371. background-color: rgba(0, 185, 98, 100);
  2372. text-align: center;
  2373. float: right;
  2374. margin-top: 4px;
  2375. }
  2376. }
  2377. .showOss {
  2378. /deep/.u-model,
  2379. /deep/.u-mode-center-box {
  2380. background-color: transparent;
  2381. }
  2382. }
  2383. .carNone {
  2384. display: flex;
  2385. flex-direction: column;
  2386. justify-content: center;
  2387. align-items: center;
  2388. img {
  2389. width: 100%;
  2390. height: 100%;
  2391. }
  2392. p {
  2393. margin-top: -60px;
  2394. }
  2395. }
  2396. .shopItemPrice2{
  2397. border-radius: 25px;
  2398. height: 40rpx;
  2399. width: 40rpx;
  2400. display: flex;
  2401. justify-content: center;
  2402. /* text-decoration: underline; */
  2403. color: #fff;
  2404. text-align: center;
  2405. background: linear-gradient(180deg, rgba(255,98,0,1) 0%,rgba(255,40,0,1) 100%);
  2406. }
  2407. .slogan-4 {
  2408. margin-top: 10px;
  2409. display: flex;
  2410. justify-content: center;
  2411. /* text-decoration: underline; */
  2412. text-align: center;
  2413. position: fixed;
  2414. /* top: 40px; */
  2415. bottom: 180px;
  2416. right: 20px;
  2417. height: 80rpx;
  2418. width: 80rpx;
  2419. line-height: 20px;
  2420. font-size: 16px;
  2421. background: linear-gradient(95deg, #FF9800, #FF5722);
  2422. box-shadow: 0 4rpx 24rpx 0 #FF5722;
  2423. //padding-top: 8px;
  2424. color: #fff;
  2425. border-radius: 25px;
  2426. }
  2427. .imageshake {
  2428. position: relative;
  2429. animation: shake 0.5s ease-in-out infinite;
  2430. }
  2431. @keyframes shake {
  2432. 0% { transform: rotate(0deg); }
  2433. 25% { transform: rotate(8deg); }
  2434. 50% { transform: rotate(0deg); }
  2435. 75% { transform: rotate(-8deg); }
  2436. 100% { transform: rotate(0deg); }
  2437. }
  2438. .shopList{
  2439. width: 91.4%;
  2440. margin: 8px auto 0;
  2441. border-radius: 8px;
  2442. padding: 12px 12px 12px 11px;
  2443. background-color: #fff;
  2444. display: flex;
  2445. justify-content: space-around;
  2446. flex-wrap: wrap;
  2447. .shopItem{
  2448. width: 45%;
  2449. margin: 3px;
  2450. .shopItemPrice{
  2451. display: flex;
  2452. justify-content: space-between;
  2453. .shopItemPrice1{
  2454. color:#FF2800
  2455. }
  2456. }
  2457. }
  2458. }
  2459. </style>