orderStatus.vue 38 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106
  1. <template>
  2. <view class="container-view">
  3. <view class="time-info">
  4. <navBar bgColor="transparent" left="0"></navBar>
  5. <view>
  6. <view v-if="orderInfo.pay_status!=2">
  7. <view class="get-time-view flex-row" v-if="orderInfo.pay_status == 0">待支付</view>
  8. <view class="get-time-view flex-row" v-else-if="orderInfo.pay_status == 1">支付中</view>
  9. <view class="get-time-view flex-row" v-else-if="orderInfo.pay_status == 3">支付失败</view>
  10. <view class="get-time-view flex-row" v-else-if="orderInfo.pay_status == 4">支付取消</view>
  11. <view class="get-time-view flex-row" v-else-if="orderInfo.pay_status == 5">线下待审核</view>
  12. <view class="get-time-view flex-row" v-else-if="orderInfo.pay_status == 6">线下审核拒绝</view>
  13. </view>
  14. <block v-if="orderInfo.pay_status == 2">
  15. <view :class="['get-time-view', 'flex-row', 'blue-text']" v-if="orderInfo.order_status == 3">使用中...
  16. </view>
  17. <view :class="['get-time-view', 'flex-row', 'red-text']" v-if="orderInfo.order_status == 4">已逾期
  18. </view>
  19. <view class="get-time-view flex-row" v-if="orderInfo.order_status == 2">请上传车辆图片激活车辆</view>
  20. <view class="get-time-view flex-row" v-if="orderInfo.order_status == 5">待门店确认</view>
  21. <view class="get-time-view flex-row" v-if="orderInfo.order_status == 6">还车中,等待门店取车</view>
  22. <view class="get-time-view flex-row" v-if="orderInfo.order_status == 7">已完成</view>
  23. <view class="get-time-view flex-row"
  24. v-if="orderInfo.order_status == 8||orderInfo.order_status == 9">已取消</view>
  25. <view class="get-time-view flex-row" v-if="orderInfo.order_status == 1 "><text>请于</text><text
  26. class="get-car-time">{{tools.formatTimeSecond( orderInfo.pick_up_time)}}</text><text>到门店取车</text>
  27. </view>
  28. <view v-if="orderInfo.order_status == 10">已完结</view>
  29. </block>
  30. </view>
  31. <view class="time-money">
  32. <view v-if="orderInfo.order_type != 3" class="flex-row flex-between">
  33. <view class="money-item">
  34. <view :class="orderInfo.order_status == 4?'red-status':''">
  35. <block v-if="orderInfo.hire_duration_time&&orderInfo.hire_duration_time>0">{{orderInfo.hire_duration_time}}</block>
  36. <block v-else>{{Number(orderInfo.hire_cycle) * (orderInfo.hire_duration)}}</block>
  37. </view>
  38. <view>{{(orderInfo.order_status == 2 || orderInfo.order_status == 3)?'租期剩余':(orderInfo.order_status == 4 ? '逾期时长':'租借周期')}}·<text style="opacity: 0.4;">{{leaseUnits(orderInfo.hire_duration_unit)}}</text></view>
  39. <!-- <view v-if="(orderInfo.order_status == 2&&orderInfo.hire_type==2) || orderInfo.order_status == 3">
  40. 租期剩余·天</view>
  41. <view v-else-if="orderInfo.order_status == 4 " class="red-status">逾期时长·天</view>
  42. <view v-else>租借周期·天</view> -->
  43. </view>
  44. <view v-if="orderInfo.order_status != 4||orderInfo.overdue_money==0" class="money-item">
  45. <view>
  46. {{((orderInfo.hire_money + orderInfo.deposit) / 100).toFixed(2)}}
  47. </view>
  48. <view>订单金额<text style="opacity: 0.4;">·$</text></view>
  49. </view>
  50. <view v-if="orderInfo.order_status == 4&&orderInfo.overdue_money!=0" class="money-item">
  51. <view style="color:#F95151" class="red-status">
  52. {{(orderInfo.money / 100).toFixed(2)}}
  53. <!-- {{(orderInfo.overdue_money / 100).toFixed(2)}} -->
  54. </view>
  55. <view style="color:#F95151">逾期金额·$</view>
  56. </view>
  57. <view @tap="bindExpanded">
  58. <text>{{isExpanded?'收起':'展开'}}</text>
  59. <img
  60. :src="isExpanded?'https://qiniu.bms16.com/FvRah8ro91B_TUVEmInBq6n69W2f':'https://qiniu.bms16.com/FtbxPP0aXYG8hyJTEJfNTXa_Puuc'" />
  61. </view>
  62. </view>
  63. <view v-if="orderInfo.order_type == 3" class="flex-row flex-between">
  64. <view class="money-item">
  65. <view></view>
  66. <view>租借周期:购买</view>
  67. </view>
  68. <view class="money-item">
  69. <view :class="orderInfo.order_status == 4?'red-status':''">
  70. {{orderInfo.order_status == 4?tools.toFix(over_fee/100):tools.toFix(orderInfo.money / 100)}}<text>元</text>
  71. </view>
  72. <view>订单金额</view>
  73. </view>
  74. <view @tap="bindExpanded">
  75. <text>{{isExpanded?'收起':'展开'}}</text>
  76. <img
  77. :src="isExpanded?'https://qiniu.bms16.com/FvRah8ro91B_TUVEmInBq6n69W2f':'https://qiniu.bms16.com/FtbxPP0aXYG8hyJTEJfNTXa_Puuc'" />
  78. </view>
  79. </view>
  80. <view v-if="isExpanded" class="dashed-border"></view>
  81. <view v-if="isExpanded">
  82. <view class="big-text">订单信息</view>
  83. <view class="sn-content flex-row flex-between">
  84. <view class="sn-title">订单编号</view>
  85. <view class="sn-text">{{orderInfo.sub_sn}}</view>
  86. </view>
  87. <view class="sn-content flex-row flex-between">
  88. <view class="sn-title">下单时间</view>
  89. <view class="sn-text">{{tools.formatTime(orderInfo.ctime)}}</view>
  90. </view>
  91. <view v-if="orderInfo.pay_time" class="sn-content flex-row flex-between">
  92. <view class="sn-title">支付时间</view>
  93. <view class="sn-text">{{tools.formatTime(orderInfo.pay_time)}}</view>
  94. </view>
  95. <view class="sn-content flex-row flex-between">
  96. <view class="sn-title">支付方式</view>
  97. <view v-if="orderInfo.pay_type == 0" class="sn-text">微信支付</view>
  98. <view v-if="orderInfo.pay_type == 1" class="sn-text">线下支付</view>
  99. <view v-if="orderInfo.pay_type == 2" class="sn-text">支付宝支付</view>
  100. <view v-if="orderInfo.pay_type == 9" class="sn-text">钱包余额支付</view>
  101. </view>
  102. <view v-if="orderInfo.order_type != 3" class="sn-content flex-row flex-between">
  103. <view class="sn-title">租车金额</view>
  104. <view class="sn-text">$ {{tools.toFix(orderInfo.hire_money/100)}}</view>
  105. </view>
  106. <view v-if="orderInfo.order_type != 3" class="sn-content flex-row flex-between">
  107. <view class="sn-title">租车押金</view>
  108. <view class="sn-text"><text class="grey-text"></text> $
  109. {{tools.toFix(orderInfo.deposit/100)}}
  110. </view>
  111. </view>
  112. </view>
  113. </view>
  114. </view>
  115. <view class="car-info">
  116. <view class="flex-row flex-between" style="margin-bottom: 40rpx;">
  117. <text>自行去门店取还</text>
  118. <text class="distance-num">{{orderInfo.distance}}m</text>
  119. </view>
  120. <view class="flex-row store-img-view">
  121. <img src="https://qiniu.bms16.com/FrwDlFZdSMiBgqnqDjB19PiDUmuu" alt="">
  122. <view style="width: calc(100% - 180rpx);margin-left: 24rpx;">
  123. <view class="store-name">{{orderInfo.shop_name}}</view>
  124. <view class="store-name-address">{{orderInfo.address || '未知地址'}}</view>
  125. <view class="flex-row flex-between align-center">
  126. <view class="flex-row time-style align-center">
  127. <img v-if="orderInfo.work_begin_time && orderInfo.work_end_time"
  128. style="width: 40rpx;height: 40rpx;"
  129. src="https://qiniu.bms16.com/Fp-G1pdXxnTV-G3qFbgS453AuqcU" alt="">
  130. <text
  131. v-if="orderInfo.work_begin_time && orderInfo.work_end_time">{{orderInfo.work_begin_time}}-{{orderInfo.work_end_time}}</text>
  132. </view>
  133. <img @click="navToCabinet" style="width: 112rpx;height: 64rpx;"
  134. src="https://qiniu.bms16.com/Fts38M35doVjK09GfOza5qD-wwkK" alt="">
  135. </view>
  136. </view>
  137. </view>
  138. </view>
  139. <view class="car-info">
  140. <view>车辆信息</view>
  141. <view class="car-top flex-row flex-between">
  142. <view>
  143. <view class="top-flex">
  144. <view>{{orderInfo.model_name}}</view>
  145. <view>
  146. 续航{{(orderInfo.endurance /1000).toFixed(0)}}km|重量{{(orderInfo.weight / 1000).toFixed(0)}}kg
  147. </view>
  148. </view>
  149. <!-- //配套服务 -->
  150. <view class="serviceList">
  151. <view v-for="(item,index) of orderInfo.service_list" :key="index" class="tag">
  152. {{item}}
  153. </view>
  154. </view>
  155. </view>
  156. <image mode="aspectFit" v-if="orderInfo.model_images" :src="orderInfo.model_images"></image>
  157. <image v-else src="https://qiniu.bms16.com/FhEvnKUckAHPtWaC04mi2s53IEVj" mode=""></image>
  158. </view>
  159. <!-- <view class="exchange-info">
  160. <view class="flex-row flex-between">
  161. <view class="exchange-info-title flex-row align-center">
  162. <img style="width: 40rpx;height: 40rpx;" src="https://qiniu.bms16.com/Fj_ifr41AqH2PijZBdOBa3SCxADg" alt="">
  163. <text style="margin-left: 16rpx;">换电信息</text>
  164. </view>
  165. <view @tap="navToExchange" class="flex-row" style="margin-bottom: 28rpx;">
  166. <view class="exchange-button">共3次</view>
  167. <image src="https://qiniu.bms16.com/FpIN7AVzFU75slFlX-SIdnSEmn1k" style="width: 28rpx;height: 28rpx;" />
  168. </view>
  169. </view>
  170. <view class="exchange-content">本单可享3次免费换电数,超出后需单独支付</view>
  171. <view class="exchange-content">自费换电:S1/次</view> -->
  172. <!-- <view class="exchange-content">本单您可享受{{orderInfo.gift_exchange_num}}次免费换电,
  173. 当前免费换电剩余{{(orderInfo.gift_exchange_num - orderInfo.used_exchange_num) > 0 ? (orderInfo.gift_exchange_num - orderInfo.used_exchange_num) : '0' }}次,超出后需要单独支付换电费用
  174. </view> -->
  175. <!-- </view> -->
  176. </view>
  177. <view v-if="orderInfo.hire_begin_time!=0&&orderInfo.hire_end_time!=0" class="return-info">
  178. <view class="return-top flex-row flex-between">
  179. <view>取还时间</view>
  180. <view>
  181. <!-- 共3天{{orderInfo.hire_return_time.day > 0 ? orderInfo.hire_return_time.day :'' }}<text
  182. v-if="orderInfo.hire_return_time.day>0">日</text>{{orderInfo.hire_return_time.hour > 0 ? orderInfo.hire_return_time.hour :'' }}<text
  183. v-if="orderInfo.hire_return_time.hour>0">小时</text>{{orderInfo.hire_return_time.minute > 0 ? orderInfo.hire_return_time.minute :'' }}<text
  184. v-if="orderInfo.hire_return_time.minute>0">分</text> -->
  185. 共{{hireDurationUnitsFn(orderInfo.total_hire_time,orderInfo.hire_duration_unit)}}{{leaseUnits(orderInfo.hire_duration_unit)}}
  186. </view>
  187. </view>
  188. <view class="return-bottom flex-row">
  189. <view>{{orderInfo.hire_begin_times}}</view>
  190. <img src="https://qiniu.bms16.com/FoXmBbj7YGWmjyeuVEY35nzieqnx" />
  191. <view>{{orderInfo.hire_end_times}}</view>
  192. <!-- <view>{{tools.formatTimeDate(orderInfo.hire_begin_time)}}</view>
  193. <img src="https://qiniu.bms16.com/FoXmBbj7YGWmjyeuVEY35nzieqnx" />
  194. <view>{{tools.formatTimeDate(orderInfo.hire_end_time)}}</view> -->
  195. </view>
  196. </view>
  197. <view v-if="orderInfo.order_status==2||orderInfo.order_status==3||orderInfo.order_status==4"
  198. class="overdue-info">
  199. <view>逾期规则</view>
  200. <view class="overdue-one">
  201. <view>1. 逾期后还可用车吗?</view>
  202. <view>如果逾期将触发智能锁车逻辑,可能导致您无法正常用车,请及时续费或联系商家处理。</view>
  203. </view>
  204. <view class="overdue-two">
  205. <view>2. 逾期费计算标准是什么?</view>
  206. <view>小时租逾期费=每小时费用*逾期小时;当日还/日/周/月/季租逾期费=每天费用*逾期天数;如果不满1小时按1小时算,不满1天按1天算,最终收取的逾期费以门店确认的费用为准</view>
  207. </view>
  208. <view class="overdue-thr">
  209. <view>3. 逾期后续租如何收费?</view>
  210. <view>逾期后及时续租不收取逾期费,逾期时长将从续租订单的用车时间中抵扣</view>
  211. </view>
  212. </view>
  213. <view class="inset-bottom"></view>
  214. <block v-if="orderInfo.pay_status != 2">
  215. <view class="payment-info flex-row">
  216. <view
  217. v-if="(orderInfo.order_status == 0 ||orderInfo.order_status == 1 || orderInfo.pay_status == 5 || orderInfo.pay_status == 0) && orderInfo.order_type != 3"
  218. class="cancel" @tap="clickCancel">结束订单</view>
  219. <view @tap="callStorePhone" class="link-phone-btn">联系门店</view>
  220. </view>
  221. </block>
  222. <block v-if="orderInfo.pay_status == 2">
  223. <view class="payment-info flex-row">
  224. <!-- 待激活 -->
  225. <view class="grow_1" v-if="orderInfo.order_status == 0 ||orderInfo.order_status == 1">
  226. <view
  227. v-if="(orderInfo.order_status == 0 ||orderInfo.order_status == 1 || orderInfo.pay_status == 5 || orderInfo.pay_status == 0) && orderInfo.order_type != 3"
  228. class="cancel" @tap="clickCancel">结束订单</view>
  229. <view v-if="orderInfo.order_status == 1" @tap="navToScan" class="sesame-btn ">扫码绑定</view>
  230. <view v-if="orderInfo.order_status == 2" @tap="navToScan" class="sesame-btn ">去上传</view>
  231. </view>
  232. <!-- 使用中、已逾期 -->
  233. <view class="grow_1" v-if="(orderInfo.order_status == 3||orderInfo.order_status == 4) && orderInfo.order_type != 3 && orderInfo.pay_status != 5">
  234. <view @tap="callStorePhone" class="cancel">联系门店</view>
  235. <view @tap="tapReturnCar" class="deposit-btn">到店还车</view>
  236. <view @tap="bindRenew" class="sesame-btn">续租</view>
  237. </view>
  238. <!-- 待门店确认、已取消、已完成 -->
  239. <view class="grow_1" v-if="(orderInfo.order_status == 5||orderInfo.order_status == 6||orderInfo.order_status == 7||orderInfo.order_status == 8||orderInfo.order_status == 9)">
  240. <view @tap="callStorePhone" class="link-phone-btn">联系门店</view>
  241. </view>
  242. </view>
  243. </block>
  244. <!-- <view class="payment-info flex-row flex-between">
  245. <view v-if="orderInfo.order_status == 1 || orderInfo.pay_status == 5" class="flex-row">
  246. <view v-if="orderInfo.order_type != 3"
  247. class="cancel" @tap="clickCancel">结束订单
  248. </view>
  249. <view @tap="callStorePhone" class="deposit-btn ">联系门店</view>
  250. </view>
  251. <view v-if="orderInfo.order_status == 1" class="flex-row">
  252. <view @tap="callStorePhone" class="deposit-btn ">联系门店</view>
  253. <view @tap="navToScan" class="sesame-btn ">扫码绑定</view>
  254. </view>
  255. <view v-if="orderInfo.order_status == 2" class="flex-row">
  256. <view @tap="callStorePhone" class="deposit-btn ">联系门店</view>
  257. <view @tap="navToScan" class="sesame-btn ">去上传</view>
  258. </view>
  259. <view
  260. v-else-if="(orderInfo.order_status == 3||orderInfo.order_status == 4) && orderInfo.order_type != 3 && orderInfo.pay_status != 5"
  261. class="flex-row">
  262. <view @tap="callStorePhone" class="cancel">联系门店</view>
  263. <view @tap="tapReturnCar" class="deposit-btn">到店还车</view>
  264. <view @tap="bindRenew" class="sesame-btn">续租</view>
  265. </view>
  266. <view v-else-if="orderInfo.order_status == 5||orderInfo.order_status == 6" @tap="callStorePhone"
  267. class="pay-btn">
  268. 联系门店</view>
  269. <view v-else-if="orderInfo.order_status == 7" @tap="callStorePhone" class="pay-btn">联系门店</view>
  270. <view v-if="orderInfo.order_type == 3 && (orderInfo.order_status == 3||orderInfo.order_status == 4)"
  271. @tap="callStorePhone" class="pay-btn">联系门店</view>
  272. </view> -->
  273. <view v-if="isShowCancel" class="cancel-b">
  274. <view class="cancel-box">
  275. <view class="cancel-title flex-row flex-between">
  276. <view>选择取消原因</view>
  277. <view @tap="isShowCancel = false" style="font-size: 60rpx;">×</view>
  278. </view>
  279. <view @click="reason = '行程变更无需用车'" class="cancel-item flex-row flex-between">
  280. <view>行程变更无需用车</view>
  281. <img
  282. :src="reason == '行程变更无需用车'?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/Fh0JH6_QbiXYmVy7FNYnDkVIGvLC'" />
  283. </view>
  284. <view @click="reason = '修改订单信息'" class="cancel-item flex-row flex-between">
  285. <view>修改订单信息</view>
  286. <img
  287. :src="reason == '修改订单信息'?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/Fh0JH6_QbiXYmVy7FNYnDkVIGvLC'" />
  288. </view>
  289. <view @click="reason = '不想要了'" class="cancel-item flex-row flex-between">
  290. <view>不想要了</view>
  291. <img
  292. :src="reason == '不想要了'?'https://qiniu.bms16.com/FhWimtmWybKlYMB6mgIReVWArbfq':'https://qiniu.bms16.com/Fh0JH6_QbiXYmVy7FNYnDkVIGvLC'" />
  293. </view>
  294. <view @click="bindCancel" class="cancel_btn">确认取消</view>
  295. </view>
  296. </view>
  297. <returnCar :isShowReturnCar="isShowReturnCar" @closeShowReturnCarBtn="()=>isShowReturnCar=false"
  298. @navStoreBtn="navStoreBtn" @immediatelyReturnBtn="immediatelyReturnBtn" />
  299. <carPlan :isBuy='false' @payToOrder='payReturn' v-if="showCarPlan" @changeSelectType="changeSelectType"
  300. @closeShowMore="showCarPlan = false" :params="params" :selectType="selectType" />
  301. <PayTypeModel @closeShow="()=>isShowToBuy=false" @payToOrder="payToOrder" :free_price="totalPrice"
  302. :isShowToBuy="isShowToBuy" />
  303. </view>
  304. </template>
  305. <script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
  306. <script module="tools" lang="sjs" src="@/pages/common/wxs/tools.sjs"></script>
  307. <script>
  308. var config_gyq = require('../../common/config_gyq.js');
  309. var config = require('../../common/config.js');
  310. var request = require('../../common/request');
  311. var common = require('../../common/common.js');
  312. var http = require('../../common/http.js');
  313. var storage = require('../../common/storage.js');
  314. var user = require('../../common/user.js');
  315. //
  316. import {
  317. getRemainingTime
  318. } from '@/utils/util';
  319. import {
  320. MAX_LIMITS,LEASE_TYPE_ARR
  321. } from '@/common/constant.js'
  322. var appWhiteListFilter = require('../../common/appWhiteListFilter.js');
  323. import allPrice from '@/component/allPrice/allPrice';
  324. import ReturnCar from '@/component/returnCar/returnCar';
  325. import carPlan from '@/component/carPlan/carPlan';
  326. import PayTypeModel from '@/component/payTypeModel/payTypeModel';
  327. import dayjs from 'dayjs'
  328. import duration from 'dayjs/plugin/duration'
  329. dayjs.extend(duration);
  330. export default {
  331. components: {
  332. allPrice,
  333. ReturnCar,
  334. PayTypeModel,
  335. carPlan
  336. },
  337. data() {
  338. return {
  339. overdueData: {},
  340. select_type: '',
  341. car_detail: {},
  342. showCarPlan: false,
  343. return_imgs: {},
  344. charge_standard: {},
  345. isShowCancel: false,
  346. order_sn: '',
  347. reason: '行程变更无需用车',
  348. orderInfo: {},
  349. shop_image: [],
  350. isExpanded: false,
  351. isShowPrice: false,
  352. timer: '',
  353. isSelectStatus: 1,
  354. price_list: [], //车辆价格 hire_duration_unit 1 日 4 小时 6 周
  355. insurance_status: 0,
  356. over_fee: 0, //逾期金额
  357. plate_number: '',
  358. isScanCondeRentalCar: '',
  359. isShowReturnCar: false,
  360. isShowToBuy: false,
  361. totalPrice: 0, //逾期支付金额
  362. };
  363. },
  364. /**
  365. * 生命周期函数--监听页面加载
  366. */
  367. onLoad: function(options) {
  368. this.sub_sn = options.sub_sn || ''
  369. this.bindOrderInfo()
  370. },
  371. /**
  372. * 生命周期函数--监听页面显示
  373. */
  374. onShow: function(e) {
  375. if (this.sub_sn && this.orderInfo.sub_sn) {
  376. this.bindOrderInfo()
  377. }
  378. },
  379. onUnload: function() {},
  380. computed: {},
  381. methods: {
  382. getAddressName(latitude, longitude) {
  383. const pData = {
  384. lng: longitude,
  385. lat: latitude,
  386. pi: "wx_index"
  387. }
  388. const that = this
  389. http.postApi(config.API_MAP_REGEO, pData, (resp) => {
  390. if (resp.data.code === 200) {
  391. that.orderInfo.address = resp.data.data.data.address
  392. } else {
  393. common.simpleToast(resp.data.msg)
  394. }
  395. })
  396. },
  397. leaseUnits(type){
  398. const result = LEASE_TYPE_ARR.find(v => v.value == type);
  399. return result ? result.unit : '';
  400. },
  401. leaseUnitsResult(type) {
  402. const result = LEASE_TYPE_ARR.find(v => v.value == type);
  403. return result ? result.label : '';
  404. },
  405. payReturn() {},
  406. //逾期费用计算
  407. async overdueMoneyFn(car_sn) {
  408. let {
  409. data
  410. } = await request.postApi(config_gyq.API_FLK_CAR_OVERDUE_MONEY, {
  411. car_sn
  412. })
  413. if (data.code == 200) {
  414. this.overdueData = data.data
  415. } else {
  416. common.simpleToast(data.msg)
  417. }
  418. },
  419. payToOrder() {},
  420. async loadCarInfo(model_id) {
  421. const me = this
  422. http.postApi(config.API_FLK_INDEX_CAR_MODEL_DETAIL, {
  423. model_id,
  424. }, (resp) => {
  425. if (resp.data.code === 200) {
  426. const pData = {
  427. ...this.car_detail,
  428. price: this.price
  429. }
  430. me.setData({
  431. car_detail: resp.data.data,
  432. params: {
  433. order_sn: this.orderInfo.order_sn,
  434. ...resp.data.data,
  435. price: (resp.data.data.rental_setting[0].hire_price / 100).toFixed(2)
  436. }
  437. })
  438. } else {
  439. common.simpleToast(resp.data.msg);
  440. }
  441. })
  442. },
  443. changeSelectType(select_type, price) {
  444. this.setData({
  445. selectType: select_type,
  446. price: (price / 100).toFixed(2)
  447. })
  448. },
  449. async carDetFn(car_sn) {
  450. let {
  451. data
  452. } = await request.postApi(config.API_FLK_CAR_DETAIL, {
  453. car_sn
  454. })
  455. if (data.code === 200) {
  456. if (data.data.model_id == this.orderInfo.model_id) {
  457. return true
  458. } else {
  459. common.simpleToast('车型不匹配!')
  460. return false
  461. }
  462. if (data.data.is_hire == 1) {
  463. return true
  464. } else {
  465. common.simpleToast('车辆已被租售!')
  466. return false
  467. }
  468. if (data.data.is_display == 1) {
  469. return true
  470. } else {
  471. common.simpleToast('车辆未展示!')
  472. return false
  473. }
  474. } else {
  475. common.simpleToast('请扫描正确的二维码!')
  476. return false
  477. }
  478. return false
  479. },
  480. async navToScan() {
  481. let car_sn = this.orderInfo.car_sn || ''
  482. if (!car_sn) {
  483. let res = await uni.scanCode({
  484. onlyFromCamera: true,
  485. scanType: ['qrCode'],
  486. });
  487. if (res[0]) return
  488. car_sn = res[1].result
  489. if (!await this.carDetFn(car_sn)) return
  490. }
  491. uni.showLoading({
  492. title: '识别中....',
  493. mask: true
  494. })
  495. setTimeout(() => {
  496. uni.hideLoading();
  497. uni.navigateTo({
  498. url: `/pages/activation/activation?model_id=${this.orderInfo.model_id}&sub_sn=${this.sub_sn}&car_sn=${car_sn}`
  499. })
  500. }, 1000);
  501. },
  502. navToCabinet() {
  503. const {
  504. latitude,
  505. longitude,
  506. cityname,
  507. address,
  508. shop_name
  509. } = this.orderInfo
  510. uni.openLocation({
  511. latitude: latitude - 0,
  512. longitude: longitude - 0,
  513. scale: 15,
  514. name: shop_name,
  515. address: address,
  516. success: function(res) {}
  517. });
  518. },
  519. hireDurationUnitFn(type) {
  520. if (type == 1) {
  521. return '天'
  522. } else if (type == 2) {
  523. return '月'
  524. } else if (type == 3) {
  525. return '年'
  526. } else if (type == 4) {
  527. return '小时'
  528. } else if (type == 5) {
  529. return '分钟'
  530. } else if (type == 6) {
  531. return '周'
  532. } else if (type == 7) {
  533. return '季'
  534. }
  535. },
  536. hireDurationUnitsFn(time, type) {
  537. if (type == 1) {
  538. return Math.ceil(time / 60 / 60 / 24)
  539. } else if (type == 2) {
  540. return Math.ceil(time / 60 / 60 / 24 / 30)
  541. } else if (type == 3) {
  542. return Math.ceil(time / 60 / 60 / 24 / 30 / 365)
  543. } else if (type == 4) {
  544. return Math.ceil(time / 60 / 60)
  545. } else if (type == 5) {
  546. return Math.ceil(time / 60)
  547. } else if (type == 6) {
  548. return Math.ceil(time / 60 / 60 / 24 / 7)
  549. } else if (type == 7) {
  550. return Math.ceil(time / 60 / 60 / 24 / 30 / 3)
  551. }
  552. },
  553. async bindOrderInfo() {
  554. const me = this
  555. const locationStr = uni.getStorageSync('user_current_location');
  556. // if (locationStr) {
  557. // this.myLocation = locationStr;
  558. // }
  559. http.postApi(config.API_FLK_ORDER_INFO, {
  560. sub_sn: me.sub_sn,
  561. latitude: locationStr.latitude,
  562. longitude: locationStr.longitude,
  563. }, (resp) => {
  564. if (resp.data.code === 200) {
  565. me.orderInfo = resp.data.data.order_info
  566. me.orderInfo.model_images = me.orderInfo.model_images.split(',')[0]
  567. me.getAddressName(this.orderInfo.latitude,this.orderInfo.longitude)
  568. //
  569. if (resp.data.data.order_info.model_id) {
  570. me.loadCarInfo(resp.data.data.order_info.model_id)
  571. }
  572. let distance = common.getFlatternDistance(locationStr.longitude, locationStr.latitude,
  573. me
  574. .orderInfo.longitude, me.orderInfo.latitude)
  575. resp.data.data.order_info.distance = distance
  576. // 取还时间展示
  577. // me.orderInfo.hire_return_time = common.getTimeToDay(Math.ceil(me.orderInfo
  578. // .hire_end_time - me.orderInfo.hire_begin_time) / 60)
  579. me.orderInfo.hire_return_time = getRemainingTime(me.orderInfo
  580. .hire_begin_time, me
  581. .orderInfo.hire_end_time)
  582. me.orderInfo.hire_begin_times = me.orderInfo.hire_begin_time ? dayjs(me
  583. .orderInfo
  584. .hire_begin_time * 1000).format(
  585. 'YY-MM-DD') : 0
  586. me.orderInfo.hire_end_times = me.orderInfo.hire_end_time ? dayjs(me
  587. .orderInfo
  588. .hire_end_time * 1000).format(
  589. 'YY-MM-DD') : 0
  590. console.log(me.orderInfo.order_status == 1);
  591. let other_time = 0
  592. // 剩余租期判断
  593. //订单状态 0 默认 1 待取车 2 待激活 3 使用中 4 已逾期 5 还车申请中 6 还车中 7 车辆已归还 8 订单已支付,已取消 9 订单未支付已取消
  594. if (me.orderInfo.order_status == 1) {
  595. me.orderInfo.hire_duration_time = common.countToDay(me.orderInfo.hire_cycle * me
  596. .orderInfo.hire_duration, me.orderInfo.hire_duration_unit)
  597. console.log(me.orderInfo.hire_duration_time, 'me.orderInfo.hire_duration_time');
  598. } else if ((me.orderInfo.hire_type == 2 && me.orderInfo.order_status == 2) || me
  599. .orderInfo.order_status == 3) {
  600. // me.orderInfo.hire_duration_time = common.timestampToDays(Math.ceil(me.orderInfo
  601. // .hire_end_time - Math.floor(new Date()) / 1000))
  602. me.orderInfo.hire_duration_time = common.formatTimeDifference(me.orderInfo
  603. .hire_end_time * 1000)
  604. } else {
  605. if (me.orderInfo.order_status == 4) {
  606. me.overdueMoneyFn(me.orderInfo.car_sn)
  607. // me.orderInfo.hire_duration_time = common.timestampToDays(Math.ceil(Math.floor(
  608. // new Date()) / 1000 - me.orderInfo.hire_end_time))
  609. me.orderInfo.hire_duration_time = common.formatTimeDifference(me.orderInfo
  610. .hire_end_time * 1000)
  611. } else {
  612. me.orderInfo.hire_duration_time = common.timestampToDays(Math.ceil(me.orderInfo
  613. .hire_begin_time - me.orderInfo.hire_end_time))
  614. }
  615. }
  616. } else {
  617. // 默认返回上一个页面再提示报错
  618. uni.navigateBack({
  619. delta: 1
  620. })
  621. common.simpleToast(resp.data.msg)
  622. }
  623. })
  624. },
  625. navStoreBtn() {
  626. const {
  627. latitude,
  628. longitude,
  629. address,
  630. shop_name
  631. } = this.orderInfo
  632. uni.openLocation({
  633. latitude: latitude - 0,
  634. longitude: longitude - 0,
  635. scale: 15,
  636. name: shop_name,
  637. address: address,
  638. success: function(res) {}
  639. });
  640. },
  641. tapReturnCar() {
  642. this.setData({
  643. isShowReturnCar: true
  644. })
  645. },
  646. immediatelyReturnBtn() {
  647. //到店还车 判断逾期状态 如果逾期要交逾期费用 跳转到上传车辆图片再支付逾期费用还车
  648. const isOverdue = this.orderInfo.order_status == 4
  649. const {
  650. car_sn,
  651. shop_id,
  652. overdue_money
  653. } = this.orderInfo
  654. const returnCarParams = {
  655. car_sn,
  656. shop_id,
  657. overdue_money,
  658. isReturnCar: true,
  659. }
  660. //提交还车图片
  661. uni.navigateTo({
  662. url: `/pages/activation/activation?isReturnCar=true&model_id=${this.orderInfo.model_id}&sub_sn=${this.sub_sn}&car_sn=${this.orderInfo.car_sn}&isOverdue=${isOverdue}&overdueMoney=${this.overdueData.money}&overdueTime=${this.overdueData.time}&type=index`
  663. });
  664. // if (isOverdue) {
  665. // this.setData({
  666. // totalPrice: this.overdueData.money,
  667. // isShowToBuy: true
  668. // })
  669. // } else {
  670. // //提交还车图片
  671. // uni.navigateTo({
  672. // url: `/pages/activation/activation?isReturnCar=true,model_id=${this.orderInfo.model_id}&sub_sn=${this.sub_sn}&car_sn=${this.orderInfo.car_sn}&isOverdue=${isOverdue}&overdueMoney=${this.overdueData.money}&overdueTime=${this.overdueData.time}`
  673. // });
  674. // }
  675. },
  676. callStorePhone() {
  677. const phone = this.orderInfo.link_phone
  678. common.callPhone(phone)
  679. },
  680. async clickCancel() {
  681. this.isShowCancel = true
  682. },
  683. async bindCancel() {
  684. const me = this
  685. let res = await uni.showModal({
  686. title: '取消订单',
  687. content: '您是否需要取消该订单',
  688. confirmText: '是',
  689. confirmColor: '#0074FF',
  690. cancelText: '否',
  691. cancelColor: '#191D23',
  692. });
  693. if (res[1].confirm) {
  694. let {
  695. data
  696. } = await request.postApi(config.API_DAYHIRE_HIRE_CANCEL_ORDER, {
  697. sub_sn: this.sub_sn,
  698. remark: this.reason
  699. })
  700. if (data.code == 200) {
  701. common.simpleToast(data.msg)
  702. this.isShowCancel = false
  703. this.bindOrderInfo()
  704. } else {
  705. common.simpleToast(data.msg)
  706. }
  707. }
  708. },
  709. bindToNav() {
  710. console.log(111);
  711. const {
  712. address,
  713. latitude,
  714. longitude,
  715. shop_name
  716. } = this.shopInfo
  717. uni.openLocation({
  718. latitude: latitude - 0,
  719. longitude: longitude - 0,
  720. scale: 15,
  721. name: shop_name,
  722. address: address,
  723. success: function(res) {},
  724. })
  725. },
  726. bindToHome() {
  727. uni.reLaunch({
  728. url: '/pages/index/index',
  729. success: function(res) {},
  730. fail: function(res) {},
  731. complete: function(res) {}
  732. });
  733. },
  734. callPhone() {
  735. const me = this
  736. const phone = me.shopInfo.link_phone
  737. uni.showModal({
  738. content: `您是否要拨打电话${phone}?`,
  739. confirmText: '确定',
  740. success: (res) => {
  741. if (res.confirm) {
  742. uni.makePhoneCall({
  743. phoneNumber: phone,
  744. success() {},
  745. fail() {}
  746. })
  747. }
  748. },
  749. fail: (res) => {}
  750. })
  751. },
  752. bindRenew() {
  753. this.params.overdueData = this.overdueData
  754. this.showCarPlan = true
  755. // this.isReturnHome = false
  756. // let isRenew = true
  757. // uni.navigateTo({
  758. // url: '/pages/carIntroduce/carIntroduce?plate_number=' + this.orderInfo
  759. // .license_plate_number +
  760. // '&isRenew=' + isRenew +
  761. // '&order_sn=' + this.order_sn,
  762. // success: function(res) {},
  763. // fail: function(res) {},
  764. // complete: function(res) {}
  765. // });
  766. },
  767. bindBattery() {
  768. this.isReturnHome = false
  769. uni.navigateTo({
  770. url: '/pages/battery/battery?plate_number=' + this.orderInfo.license_plate_number,
  771. success: function(res) {},
  772. fail: function(res) {},
  773. complete: function(res) {}
  774. });
  775. },
  776. bindExpanded() {
  777. this.isExpanded = !this.isExpanded
  778. },
  779. navToInput() {
  780. this.isReturnHome = false
  781. uni.navigateTo({
  782. url: '/pages/inputLicensePlate/inputLicensePlate?order_sn=' + this.orderInfo
  783. .order_sn,
  784. success: function(res) {},
  785. fail: function(res) {},
  786. complete: function(res) {}
  787. });
  788. },
  789. // 激活车辆
  790. navToActive() {
  791. this.isReturnHome = false
  792. const me = this
  793. if (this.orderInfo.hire_type == 1) { // 预约
  794. if (me.isScanCondeRentalCar) {
  795. uni.scanCode({
  796. onlyFromCamera: true,
  797. success: function(res) {
  798. me.loadScanCode(res.result)
  799. },
  800. fail: function(res) {},
  801. complete: function(res) {},
  802. })
  803. } else {
  804. uni.navigateTo({
  805. url: '/pages/inputLicensePlate/inputLicensePlate?order_sn=' + this
  806. .order_sn + '&order_model_id=' + this.orderInfo.model_id,
  807. success: function(res) {},
  808. fail: function(res) {},
  809. complete: function(res) {}
  810. });
  811. }
  812. } else { // 非预约
  813. const isJumpReturn = false
  814. uni.navigateTo({
  815. url: '/pages/activation/activation?order_sn=' + this.order_sn +
  816. '&plate_number=' + this
  817. .orderInfo.license_plate_number + '&isJumpReturn=' + isJumpReturn,
  818. success: function(res) {},
  819. fail: function(res) {},
  820. complete: function(res) {}
  821. });
  822. }
  823. },
  824. loadScanCode(battery_sn) {
  825. const pData = {
  826. longitude: this.longitude,
  827. latitude: this.latitude,
  828. battery_sn: battery_sn
  829. }
  830. const me = this
  831. http.postApi(config.API_DAYHIRE_CAR_CAR_INFO, pData, (resp) => {
  832. uni.hideLoading()
  833. if (resp.data.code === 200) {
  834. const timestamp = Date.now(); // 获取当前时间戳(毫秒)
  835. const isOffline = (Math.floor(timestamp / 1000) - resp.data.data
  836. .last_comm_time) > 1800
  837. me.plate_number = resp.data.data.license_plate_number
  838. if (resp.data.data.last_comm_time === 0 || isOffline) {
  839. common.simpleToast('此车辆已离线,请选择其他车辆')
  840. } else {
  841. let carInfo = JSON.stringify(resp.data.data)
  842. const car_model = resp.data.data.model_info.car_model
  843. const model_images = resp.data.data.model_info.model_images.split(',')
  844. const return_imgs = resp.data.data.return_imgs
  845. var model_id = resp.data.data.model_info.model_id
  846. if (resp.data.data.has_owner) { //车辆正在被使用
  847. if (resp.data.data.is_mine) { //是本人在使用
  848. wx.showModal({
  849. title: '提示',
  850. content: '已有正在使用的车辆,是否跳转至车辆详情页?',
  851. cancelText: '取消',
  852. confirmText: '确定',
  853. success: function(res) {
  854. this.isReturnHome = false
  855. uni.navigateTo({
  856. url: '/pages/battery/battery?plate_number=' +
  857. this.plate_number
  858. });
  859. },
  860. fail: function(res) {},
  861. complete: function(res) {},
  862. })
  863. } else {
  864. common.simpleToast('此车辆正在被使用')
  865. }
  866. } else {
  867. if (me.order_sn && me.order_sn != '') {
  868. if (this.orderInfo.model_id != model_id) { // 预租车型与之前预约车型不一致
  869. common.simpleToast('与预约车型不符')
  870. } else {
  871. this.isReturnHome = false
  872. uni.navigateTo({
  873. url: '/pages/activation/activation?plate_number=' +
  874. this.plate_number + '&order_sn=' + this
  875. .order_sn +
  876. '&car_model=' + car_model + '&model_image=' +
  877. model_images[0] + '&return_imgs=' + JSON
  878. .stringify(
  879. return_imgs),
  880. fail() {}
  881. })
  882. }
  883. } else {
  884. this.isReturnHome = false
  885. uni.navigateTo({
  886. url: '/pages/carIntroduce/carIntroduce?carInfo=' +
  887. encodeURIComponent(carInfo) + '&plate_number=' +
  888. this.plate_number,
  889. fail() {}
  890. })
  891. }
  892. }
  893. }
  894. } else {
  895. common.simpleToast(resp.data.msg)
  896. }
  897. })
  898. },
  899. bindToPay() {
  900. const me = this
  901. //#ifdef MP-ALIPAY
  902. const _from = 'ali'
  903. const _pay_type = 2
  904. //#endif
  905. //#ifdef MP-WEIXIN
  906. const _from = 'wx'
  907. const _pay_type = 0
  908. //#endif
  909. http.postApi(config.API_DAYHIRE_HIRE_CONTINUE_PAY, {
  910. order_sn: me.order_sn,
  911. from: _from,
  912. pay_type: _pay_type
  913. }, (resp) => {
  914. common.loading()
  915. if (resp.data.code === 200) {
  916. uni.hideLoading()
  917. //#ifdef MP-ALIPAY
  918. my.tradePay({
  919. tradeNO: resp.data.data.trade_no,
  920. success: function(res) {
  921. if (res.resultCode == 9000) {
  922. common.simpleToast('支付成功');
  923. }
  924. setTimeout(function() {
  925. me.bindOrderInfo()
  926. }, 1000)
  927. },
  928. fail: function(res) {
  929. common.simpleToast('支付失败,请重试')
  930. },
  931. })
  932. //#endif
  933. //#ifdef MP-WEIXIN
  934. var payParams = JSON.parse(resp.data.data.payParams);
  935. user.wxPay(me.order_sn, payParams, function(isSuccess) {
  936. if (isSuccess) {
  937. common.simpleToast('支付成功')
  938. setTimeout(function() {
  939. me.bindOrderInfo()
  940. }, 1000)
  941. } else {
  942. common.simpleToast('支付失败,请重试')
  943. }
  944. });
  945. //#endif
  946. } else {
  947. uni.hideLoading()
  948. common.simpleToast(resp.data.msg)
  949. }
  950. })
  951. },
  952. // 计算拖车说明收费价格
  953. calculateFare(distance, charge_list) {
  954. let fare = 0
  955. if (distance <= charge_list.start_mil) {
  956. fare = charge_list.start_price / 100
  957. } else {
  958. // actual_start_mil:实际距离单位米
  959. // over_start_price:向上取整的公里数*超出首公里的费用
  960. var actual_start_mil = distance - charge_list.start_mil
  961. var over_start_price = (Math.ceil(actual_start_mil / charge_list.step_mil)) * charge_list
  962. .step_price
  963. fare = (charge_list.start_price + over_start_price) / 100
  964. }
  965. const fareArray = fare.toFixed(2).split('.'); //将价格拆分为整数部分和小数部分
  966. const price_list = {
  967. start_mil: (charge_list.start_mil / 1000).toFixed(2),
  968. start_price: (charge_list.start_price / 100).toFixed(2),
  969. step_mil: (charge_list.step_mil / 1000).toFixed(2),
  970. step_price: (charge_list.step_price / 100).toFixed(2),
  971. actual_start_mil: actual_start_mil ? (actual_start_mil / 1000).toFixed(2) : 0,
  972. over_start_price: over_start_price ? (over_start_price / 100).toFixed(2) : 0,
  973. fare: fare.toFixed(2), // 保留两位小数
  974. fareArray: fareArray //将价格拆分为整数部分和小数部分
  975. }
  976. return price_list
  977. },
  978. bindChangeStatus(e) {
  979. const {
  980. status,
  981. unit
  982. } = e.currentTarget.dataset
  983. this.setData({
  984. isSelectStatus: unit,
  985. selectIndex: status
  986. })
  987. // this.bindDuration()
  988. },
  989. //计算价格
  990. // bindDuration(){
  991. // const me = this
  992. // var _insurance_price //保险金
  993. // const unit_price=(me.price_list[0].hire_price/100) * me.leaseTime //租金
  994. // // insurance_setting 保险
  995. // if (me.insurance_setting!=null) { // 有保险的时候
  996. // // isSelectDeposit==0为免押 isOpenNoDeposit为是否成功开通免押 total_money为总金额
  997. // // unit_price 租金 insurance_setting.price 保险金 deposit 押金
  998. // if (me.duration_unit == 4) { // 时
  999. // _insurance_price = (me.insurance_setting.price - 0) * 1
  1000. // } else if(me.duration_unit == 6) { // 周
  1001. // _insurance_price = (me.insurance_setting.price - 0) * 7 * me.leaseTime
  1002. // } else { //天
  1003. // _insurance_price = (me.insurance_setting.price - 0) * me.leaseTime
  1004. // }
  1005. // } else { // 无保险
  1006. // _insurance_price = 0
  1007. // }
  1008. // if (me.isOpenNoDeposit) {
  1009. // // 金额=(周期数*周期价格)+保险金
  1010. // me.amount = ((me.leaseTime * me.price_list[0].hire_price -0) + (_insurance_price - 0)) / 100
  1011. // } else {
  1012. // // 金额=(周期数*周期价格)+押金+保险金
  1013. // me.amount = ((me.leaseTime * me.price_list[0].hire_price -0) + (me.modelInfo.deposit -0) + (_insurance_price - 0)) / 100
  1014. // }
  1015. // },
  1016. loadEnd() {
  1017. this.bindOrderInfo()
  1018. },
  1019. navToExchange() {
  1020. console.log('跳转换电记录');
  1021. uni.navigateTo({
  1022. url: '/pages/exchangeRecord/exchangeRecord' +
  1023. '?order_sn=' + this.orderInfo.order_sn
  1024. })
  1025. }
  1026. }
  1027. };
  1028. </script>
  1029. <style>
  1030. @import './orderStatus.css';
  1031. .cancel_btn {
  1032. width: 702rpx;
  1033. height: 80rpx;
  1034. background: #060809;
  1035. border-radius: 40rpx;
  1036. font-family: PingFangSC, PingFang SC;
  1037. font-weight: 500;
  1038. font-size: 32rpx;
  1039. color: #FFFFFF;
  1040. display: flex;
  1041. align-items: center;
  1042. justify-content: center;
  1043. }
  1044. </style>