confirmOrder.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776
  1. <template>
  2. <view class="box">
  3. <view class="topTIs">门店确认收货后,您可去订单详情页选择预约时间</view>
  4. <view class="topShop">
  5. <view class="topShopName">{{orderShop.shopName}}</view>
  6. <view class="topShopAdress">
  7. <image src="../../static/img/topshopicon.png" mode="" class="topShopAdressIcon"></image>
  8. <view class="topShopjl" v-if="orderShop.distance">{{orderShop.distance}}KM</view>
  9. <view class="topShopAdressTxt">{{orderShop.address}}</view>
  10. </view>
  11. </view>
  12. <view class="topBox">
  13. <view class="top">
  14. <view class="topLine borderB" >
  15. <view class="toplineLeft">
  16. <view class="topTitle">车牌号:</view>
  17. <view class="topTxt">{{maintainCarData.plateNumber}}</view>
  18. </view>
  19. </view>
  20. <view class="topLine borderB" v-if="iphoneData">
  21. <view class="toplineLeft">
  22. <view class="topTitle">联系人:</view>
  23. <view class="topTxt">{{iphoneData.name}} {{iphoneData.phone}}</view>
  24. </view>
  25. <view class="topLineRight" @click="gophone">修改></view>
  26. </view>
  27. <view class="topLine borderB" v-if="!iphoneData">
  28. <view class="toplineLeft">
  29. <view class="topTitle">联系人:</view>
  30. <view class="topTxt"></view>
  31. </view>
  32. <view class="topLineRight" @click="gophone">添加></view>
  33. </view>
  34. </view>
  35. </view>
  36. <!-- 保养信息 -->
  37. <view class="main">
  38. <view class="mainLine" v-for="(item,index) in orderData">
  39. <view class="mainTitle">{{item.name}}</view>
  40. <view class="goodsItem" v-for="(v,i) in item.listGoodsAll">
  41. <view>
  42. <image :src="v.picUrl" mode="" class="goodsImg" v-if="v.picUrl"></image>
  43. <image src="../../static/img/noimg.png" mode="" class="goodsImg" v-else></image>
  44. </view>
  45. <view class="goodsItemRight" >
  46. <view class="goodsItemName">{{v.goodsName}}</view>
  47. <view class="goodsItemBottom">
  48. <view class="goodssalePrice">¥{{v.salePrice}}</view>
  49. <view class="goodsNum">x{{v.qty}}</view>
  50. </view>
  51. </view>
  52. </view>
  53. <view class="goodsItem" v-for="(v,i) in item.listItem">
  54. <view>
  55. <image :src="v.picUrl" mode="" class="goodsImg" v-if="v.picUrl"></image>
  56. <image src="../../static/img/noimg.png" mode="" class="goodsImg" v-else></image>
  57. </view>
  58. <view class="goodsItemRight" >
  59. <view class="goodsItemName">{{v.itemName}}</view>
  60. <view class="goodsItemBottom">
  61. <view class="goodssalePrice">¥{{v.salePrice}}</view>
  62. </view>
  63. </view>
  64. </view>
  65. </view>
  66. </view>
  67. <!-- 订单备注-->
  68. <view class="remarksBox">
  69. <view class="remarksLeft">订单备注</view>
  70. <view>
  71. <textarea value="" placeholder="点击添加备注信息" class="textarea" v-model="remark"/>
  72. </view>
  73. </view>
  74. <!-- 支付方式 -->
  75. <view class="payBox">
  76. <view class="payLIne borderB">
  77. <view class="payTitle">支付方式</view>
  78. <view class="payTxt">在线支付</view>
  79. </view>
  80. <view class="payLIne borderB">
  81. <view class="payTitle">商品费</view>
  82. <view class="payTxt">¥{{goodsMoney.toFixed(2)}}</view>
  83. </view>
  84. <view class="payLIne borderB">
  85. <view class="payTitle">项目费</view>
  86. <view class="payTxt">¥{{itemMoney.toFixed(2)}}</view>
  87. </view>
  88. <view class="payLIne" @click="gocoupon">
  89. <view class="payTitle">优惠券</view>
  90. <view class="payTxt2" v-if="!couponMoney">{{yhTotalSize}}张可用></view>
  91. <view class="payTxt2" v-if="couponMoney">-¥{{couponMoney}}</view>
  92. </view>
  93. </view>
  94. <view style="height: 150rpx;"></view>
  95. <!-- 底部 -->
  96. <view class="bottom">
  97. <view class="bottomLeft">
  98. <view>
  99. <view class="heji"> <span class="heji1">合计</span> <span class="hejiNum">¥{{(goodsMoney+itemMoney-couponMoney).toFixed(2)}}</span> </view>
  100. <view class="hejiMs">共{{goodsCount}}件商品,{{itemCount}}项服务</view>
  101. </view>
  102. </view>
  103. <view class="settlement" @click="settlement">提交订单</view>
  104. </view>
  105. </view>
  106. </template>
  107. <script>
  108. export default {
  109. data() {
  110. return {
  111. remark:'',
  112. iphoneData:'',
  113. orderTime:'',
  114. OrderTimes:'',
  115. orderTimeIndex1:0,
  116. orderTimeIndex2:-1,
  117. timeShow:false,
  118. orderData:'',
  119. itemMoney:0,//项目总价
  120. goodsMoney:0,//商品总价
  121. goodsCount:0,//商品数
  122. itemCount:0,//项目数
  123. packJsonArr:[],
  124. shopData:'',
  125. maintainCarData:'',
  126. currentMileage:'',
  127. payMoney:'',
  128. couponID:'',
  129. couponMoney:'',
  130. yhTotalSize:0,
  131. orderShop:'',
  132. }
  133. },
  134. onLoad(opt) {
  135. /* if(opt.type==2){
  136. this.shopData=uni.getStorageSync("cfshopInfo");
  137. }else{
  138. this.shopData=uni.getStorageSync("shopData");
  139. } */
  140. this.orderShop=uni.getStorageSync("orderShop")
  141. this.maintainCarData=uni.getStorageSync("maintainCarData");
  142. //this.getIphoneData(); 获取默认手机号
  143. console.log(opt.orderData)
  144. this.orderData=JSON.parse(opt.orderData);
  145. this.currentMileage=opt.currentMileage;
  146. console.log(this.orderData)
  147. this.orderData.forEach(item=>{
  148. var obj={
  149. 'packageID':item.id,
  150. 'itemJsonArr':[],
  151. 'goodsJsonArr':[],
  152. }
  153. if( item.listGoodsAll.length>0){
  154. item.listGoodsAll.forEach(v=>{
  155. this.goodsMoney+=v.salePrice*v.qty
  156. this.goodsCount+=v.qty
  157. var goodsObj={
  158. 'id':v.goodsID,
  159. //'mItemID':v.mItemID,
  160. 'mGoodsID':v.mGoodsID,
  161. 'salePrice':v.salePrice,
  162. 'saleQty':v.qty,
  163. 'amountMoney':v.salePrice*v.qty,
  164. }
  165. if(v.mItemID){
  166. goodsObj.mItemID=v.mItemID
  167. }
  168. obj.goodsJsonArr.push(goodsObj)
  169. })
  170. }
  171. if(item.listItem.length>0){
  172. item.listItem.forEach(v=>{
  173. this.itemMoney+=v.salePrice
  174. this.itemCount++;
  175. var itemObj={
  176. 'id':v.itemID,
  177. 'mItemID':v.mItemID,
  178. 'salePrice':v.salePrice,
  179. }
  180. obj.itemJsonArr.push(itemObj)
  181. })
  182. }
  183. this.packJsonArr.push(obj)
  184. })
  185. this.myOrderCoupon()// 优惠券
  186. console.log( this.packJsonArr)
  187. },
  188. onShow() {
  189. var iphoneData=uni.getStorageSync("phoneData");
  190. if(iphoneData){
  191. this.iphoneData=iphoneData
  192. }
  193. var couponData=uni.getStorageSync("couponData")
  194. if(couponData){
  195. this.couponID=couponData.ID;
  196. var ActMoney=couponData.ActMoney;
  197. var payMoney=this.goodsMoney+this.itemMoney;
  198. if(payMoney<ActMoney){
  199. this.couponMoney=payMoney
  200. }else{
  201. this.couponMoney=ActMoney
  202. }
  203. }
  204. var cardata = uni.getStorageSync("maintainCarData")
  205. this.maintainCarData=cardata
  206. },
  207. methods: {
  208. myOrderCoupon(){
  209. var payMoney=this.goodsMoney+this.itemMoney;
  210. //payMoney=40
  211. this.$http('worldKeepCar/maintainOrder/myOrderCoupon', {
  212. money:payMoney,
  213. /* page:1,
  214. limit:2, */
  215. },'GET').then(res => {
  216. this.yhTotalSize=res.data.length
  217. })
  218. },
  219. gocoupon(){
  220. var payMoney=this.goodsMoney+this.itemMoney;
  221. //payMoney=40
  222. uni.navigateTo({
  223. url:'../me/discountCard?payMoney='+payMoney
  224. })
  225. },
  226. settlement(){
  227. if(this.couponMoney){
  228. this.payMoney=this.goodsMoney+this.itemMoney-this.couponMoney;
  229. }else{
  230. this.payMoney=this.goodsMoney+this.itemMoney;
  231. }
  232. //this.payMoney=3;
  233. if(this.iphoneData){
  234. if(this.iphoneData.name==''){
  235. uni.showToast({
  236. title: '请选择联系人',
  237. icon:'none',
  238. duration: 2000
  239. });
  240. return false;
  241. }
  242. }else{
  243. uni.showToast({
  244. title: '请选择联系人',
  245. icon:'none',
  246. duration: 2000
  247. });
  248. return false;
  249. }
  250. /* var cardata={
  251. annualmoney: "2017",
  252. brand: "大众",
  253. brandLogo: "http://img.db.66km.cn/carbrandlogo/D - 大众.png",
  254. buyDate: "",
  255. carModel: "2018 双离合变速器(DSG) 7档 前置前驱 CC",
  256. carName: "",
  257. carNumber: "",
  258. createTime: "2021-10-27 09:20:29",
  259. dayMilage: 661,
  260. displacement: "1.4T",
  261. engineCode: "",
  262. engineType: "1111",
  263. id: "07EB4B07-5302-4574-9709-0EC0D1668155",
  264. insuranceCompany: "",
  265. insuranceExpireDate: "1900-01-01 00:00:00",
  266. insuredCity: "",
  267. isDefault: 0,
  268. istransfer: "",
  269. memberID: "E4416E30-C82A-4136-81B7-6B424DDE4847",
  270. milage: 7788,
  271. model: "C-TREK(蔚领)",
  272. nLevelID: "CFV0718D0038",
  273. plateNumber: "鲁A22333",
  274. saleName: "",
  275. series: "C-TREK(蔚领)",
  276. transmissionType: "自动",
  277. traveltime: "",
  278. vIN: "",
  279. currentMileage:'1111',
  280. } */
  281. uni.showLoading({ });
  282. this.$http('worldKeepCar/maintainOrder/submitOrder', {
  283. shopName:this.orderShop.shopName,
  284. contactName:this.iphoneData.name,
  285. contactPhone:this.iphoneData.phone,
  286. carID:this.maintainCarData.id,
  287. plateNumber:this.maintainCarData.plateNumber,
  288. carModel:this.maintainCarData.carModel,
  289. currentMileage:this.maintainCarData.milage,//this.currentMileage,
  290. comment:this.remark,
  291. itemMoney:this.itemMoney,
  292. goodsMoney:this.goodsMoney,
  293. goodsCount:this.goodsCount,
  294. itemCount:this.itemCount,
  295. couponMoney:this.couponMoney,
  296. couponID:this.couponID,
  297. payMoney:this.payMoney,
  298. //payMoney:0.01,
  299. packJsonArr:JSON.stringify(this.packJsonArr) ,
  300. shopID:this.orderShop.shopId,
  301. // unionID:this.orderShop.unionId,
  302. },'POST').then(res => {
  303. if(res.code==0){
  304. if(this.payMoney==0){
  305. uni.hideLoading();
  306. /* uni.navigateTo({
  307. url:'../order/orderDetail?id='+res.data.id+'&type=2'
  308. }) */
  309. this.orderPayzero(res.data.id)
  310. }else{
  311. this.orderPay(res.data.id)
  312. }
  313. }else{
  314. uni.hideLoading();
  315. uni.showToast({
  316. title: res.msg,
  317. icon:'none',
  318. duration: 4000
  319. });
  320. }
  321. })
  322. },
  323. orderPayzero(id){
  324. this.$http('worldKeepCar/maintainOrder/orderPay', {
  325. sheetID:id
  326. },'POST').then(res => {
  327. uni.hideLoading();
  328. if(res.code==0){
  329. }else{
  330. uni.hideLoading();
  331. uni.showToast({
  332. title: res.msg,
  333. icon:'none',
  334. duration: 4000
  335. });
  336. }
  337. if(res.isPay==0){
  338. uni.navigateTo({
  339. url:'../order/orderDetail?id='+id+'&type=2'
  340. })
  341. }
  342. })
  343. },
  344. orderPay(id){
  345. //uni.showLoading({ });
  346. this.$http('worldKeepCar/maintainOrder/orderPay', {
  347. sheetID:id
  348. },'POST').then(res => {
  349. uni.hideLoading();
  350. if(res.code==0){
  351. }else{
  352. uni.hideLoading();
  353. uni.showToast({
  354. title: res.msg,
  355. icon:'none',
  356. duration: 4000
  357. });
  358. }
  359. var payInfo=JSON.parse(res.data.payInfo)
  360. if(res.isPay==0){
  361. uni.navigateTo({
  362. url:'../order/orderDetail?id='+id+'&type=2'
  363. })
  364. }else{
  365. uni.requestPayment({
  366. provider: 'wxpay',
  367. // timeStamp: String(Date.now()),
  368. timeStamp:payInfo.timeStamp,
  369. nonceStr: payInfo.nonceStr,
  370. package: payInfo.package,
  371. signType: payInfo.signType,
  372. paySign: payInfo.paySign,
  373. success: function (res) {
  374. console.log('success:' + JSON.stringify(res));
  375. uni.showToast({
  376. title: '支付成功',
  377. icon:'none',
  378. duration: 2000
  379. });
  380. /* uni.switchTab({
  381. url:'../index/index'
  382. }) */
  383. uni.navigateTo({
  384. url:'../order/orderDetail?id='+id+'&type=2'
  385. })
  386. },
  387. fail: function (err) {
  388. console.log('取消支付fail:' + JSON.stringify(err));
  389. uni.navigateTo({
  390. url:'../order/orderDetail?id='+id+'&type=2'
  391. })
  392. }
  393. });
  394. }
  395. })
  396. },
  397. getIphoneData(){
  398. uni.showLoading({ });
  399. this.$http('miniAppMyBMemberCar/queryBMemberContactIsDefault', {
  400. },'GET').then(res => {
  401. uni.hideLoading();
  402. this.iphoneData=res.data;
  403. })
  404. },
  405. gophone(){
  406. uni.removeStorageSync('phoneData');
  407. uni.navigateTo({
  408. url:'../iPhone/phoneList'
  409. })
  410. },
  411. }
  412. }
  413. </script>
  414. <style scoped>
  415. .topTIs{
  416. font-size: 26rpx;
  417. text-align: center;
  418. color: #C8841C;
  419. height: 72rpx;
  420. background: #FFF7EB;
  421. line-height: 72rpx;
  422. margin-bottom: 20rpx;
  423. }
  424. .topShopAdressIcon{
  425. width: 22rpx;
  426. height: 29rpx;
  427. }
  428. .topShop{
  429. width: 702rpx;
  430. min-height: 148rpx;
  431. background: #FFFFFF;
  432. border-radius: 10rpx;
  433. margin: 0 auto;
  434. }
  435. .topShopName{
  436. font-size: 28rpx;
  437. padding-top: 30rpx;
  438. padding-left: 20rpx;
  439. color: #3C3C3C;
  440. }
  441. .topShopAdress{
  442. display: flex;
  443. padding: 20rpx;
  444. }
  445. .topShopjl{
  446. font-size: 24rpx;
  447. line-height: 30rpx;
  448. color: #999999;
  449. padding-left: 16rpx;
  450. }
  451. .topShopAdressTxt{
  452. font-size: 24rpx;
  453. line-height: 30rpx;
  454. color: #999999;
  455. padding-left: 16rpx;
  456. }
  457. .box{
  458. min-height: 100vh;
  459. background:#F4F5F7 ;
  460. }
  461. .timeBox{
  462. width: 100vw;
  463. height: 100vh;
  464. background: rgba(0,0,0,0.5);
  465. position: fixed;
  466. top: 0;
  467. left: 0;
  468. z-index: 111;
  469. }
  470. .timeLeftActive{
  471. background: #FFFFFF;
  472. }
  473. .timeMain{
  474. width: 100vw;
  475. height: 70vh;
  476. margin-top: 30vh;
  477. background: #FFFFFF;
  478. border-radius: 24rpx 24rpx 0px 0px;
  479. }
  480. .timesfNo{
  481. background: #F5F5F5;
  482. }
  483. .timesfActive{
  484. background: #FF4F00;
  485. }
  486. .timesfActive .timeSfNum{
  487. color: #FFFFFF;
  488. }
  489. .timesfActive .timeyy{
  490. color: #FFFFFF;
  491. }
  492. .topBox{
  493. padding: 20rpx 24rpx;
  494. }
  495. .timeTop{
  496. display: flex;
  497. line-height: 90rpx;
  498. padding-left: 24rpx;
  499. padding-right: 24rpx;
  500. justify-content: space-between;
  501. }
  502. .timeTopTitle{
  503. font-size: 30rpx;
  504. font-family: PingFangSC-Medium, PingFang SC;
  505. font-weight: 600;
  506. color: #3C3C3C;
  507. }
  508. .close{
  509. color: #999999;font-size: 30rpx;
  510. padding-left: 30rpx;
  511. }
  512. .timeCont{
  513. height: calc(70vh - 210rpx);
  514. }
  515. .timeSv{
  516. height: calc(70vh - 210rpx);
  517. }
  518. .timeLeft{
  519. width: 162rpx;
  520. background: #F4F5F7;
  521. border-top: 1px soid #F4F5F7;
  522. border-right:1px soid #F4F5F7 ;
  523. }
  524. .timeRight{
  525. width: 588rpx;
  526. }
  527. .timesf{
  528. width: 165rpx;
  529. height: 98rpx;
  530. border-radius: 7rpx;
  531. border: 2rpx solid #EEEEEE;
  532. text-align: center;
  533. margin-left: 20rpx;
  534. margin-bottom: 24rpx;
  535. }
  536. .timeBottom{
  537. width: 750rpx;
  538. height: 120rpx;
  539. background: #FFFFFF;
  540. box-shadow: 0px -2px 20rpx 0px rgba(153, 153, 153, 0.2);
  541. display: flex;
  542. align-items: center;
  543. }
  544. .timerightBox{
  545. display: flex;
  546. flex-wrap: wrap;
  547. }
  548. .timeCont{
  549. display: flex;
  550. }
  551. .timeSfNum{
  552. color: #666666;
  553. font-size: 28rpx;
  554. padding-top: 15rpx;
  555. }
  556. .timeyy{
  557. font-size: 24rpx;
  558. color: #999999;
  559. }
  560. .timecomplete{
  561. width: 690rpx;
  562. height: 74rpx;
  563. background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
  564. border-radius: 37rpx;
  565. line-height: 74rpx;
  566. text-align: center;
  567. font-size: 30rpx;
  568. color: #FFFFFF;
  569. margin-left: 30rpx;
  570. }
  571. .timeleftLine{
  572. font-size: 30rpx;
  573. color: #999999;
  574. text-align: center;
  575. padding: 28rpx 10rpx;
  576. border-bottom: 1px solid #EEEEEE;
  577. }
  578. .top{
  579. background: #FFFFFF;
  580. border-radius: 10px;
  581. padding: 0 20rpx;
  582. }
  583. .topLine{
  584. display: flex;
  585. justify-content: space-between;
  586. padding: 30rpx 0;
  587. }
  588. .toplineLeft{
  589. display: flex;font-size: 28rpx;
  590. }
  591. .topTitle{
  592. width: 150rpx;font-weight: 400;
  593. color: #3C3C3C;
  594. }
  595. .topLineRight{
  596. font-size: 26rpx;
  597. font-family: PingFangSC-Regular, PingFang SC;
  598. font-weight: 400;
  599. color: #FF4F00;
  600. }
  601. .topTxt{
  602. color: #3C3C3C;
  603. }
  604. .borderB{
  605. border-bottom: 1px solid #EEEEEE;
  606. }
  607. .goodsImg{
  608. width: 120rpx;height: 120rpx;
  609. }
  610. .main{
  611. padding: 0 24rpx;
  612. }
  613. .mainLine{
  614. background: #FFFFFF;
  615. padding: 24rpx 20rpx;
  616. border-radius: 10rpx;
  617. }
  618. .mainTitle{
  619. font-size: 28rpx;
  620. font-weight: 600;
  621. color: #3C3C3C;
  622. }
  623. .goodsItem{
  624. display: flex;
  625. padding: 15rpx 0;
  626. }
  627. .goodsItemRight{
  628. width: 520rpx;
  629. padding-left: 20rpx;
  630. display: flex;
  631. flex-direction:column;
  632. justify-content: space-between;
  633. }
  634. .goodsItemBottom{
  635. display: flex;
  636. justify-content: space-between;
  637. }
  638. .goodsItemName{
  639. font-size: 26rpx;
  640. color: #3C3C3C;
  641. }
  642. .goodssalePrice{
  643. font-size: 32rpx;font-weight: 500;color: #FF4F00;
  644. }
  645. .goodsNum{
  646. font-size: 24rpx;font-weight: 400;color: #999999;
  647. }
  648. .remarksBox{
  649. display: flex;
  650. padding: 24rpx;
  651. border-radius: 16rpx;
  652. background: #FFFFFF;
  653. margin-top: 20rpx;
  654. width: 654rpx;
  655. margin-left: 24rpx;
  656. }
  657. .remarksLeft{
  658. color: #333333;font-size: 28rpx;
  659. width: 160rpx;
  660. }
  661. .textarea{
  662. width: 500rpx;
  663. font-size: 26rpx;
  664. height: 100rpx;
  665. padding: 0;
  666. padding-left: 30rpx;
  667. }
  668. .payBox{
  669. background: #FFFFFF;
  670. margin-top: 20rpx;
  671. margin-left: 24rpx;
  672. width: 702rpx;
  673. border-radius: 16rpx;
  674. }
  675. .payLIne{
  676. display: flex;
  677. justify-content: space-between;
  678. color: #3C3C3C;
  679. font-size: 28rpx;
  680. padding: 29rpx 20rpx;
  681. }
  682. .payTxt2{
  683. color: #FF4F00;
  684. }
  685. .bottom{
  686. position: fixed;
  687. left: 0;
  688. bottom: 0;
  689. width: 100vw;
  690. height: 120rpx;
  691. background: #FFFFFF;
  692. box-shadow: 0px -2px 20px 0px rgba(153, 153, 153, 0.2);
  693. display: flex;
  694. justify-content: space-between;
  695. }
  696. .bottomLeft{
  697. display: flex;
  698. padding-left: 20rpx;
  699. }
  700. .heji1{
  701. font-size: 24rpx;
  702. font-weight: 500;
  703. color: #666666;
  704. }
  705. .hejiNum{
  706. font-size: 32rpx;
  707. font-family: PingFangSC-Medium, PingFang SC;
  708. font-weight: 500;
  709. color: #FF4F00;
  710. }
  711. .hejiMs{
  712. font-size: 24rpx;
  713. padding-top: 5rpx;
  714. color: #999999;
  715. }
  716. .heji{
  717. padding-top: 23rpx;
  718. }
  719. .settlement{
  720. width: 203rpx;
  721. height: 74rpx;
  722. background: #FF4F00;
  723. border-radius: 37rpx;
  724. text-align: center;
  725. line-height: 74rpx;
  726. font-size: 30rpx;
  727. font-family: PingFangSC-Medium, PingFang SC;
  728. font-weight: 500;
  729. color: #FEFFFE;
  730. margin-top: 23rpx;
  731. margin-right: 32rpx;
  732. }
  733. </style>