oldhistoryDetail.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131
  1. <template>
  2. <view class="box">
  3. <homenav :iStatusBarHeight="iStatusBarHeight" :title="'消费明细'" ></homenav>
  4. <view class="contentBox">
  5. <view class="top" :style="{background:'#'+themeColor}">
  6. <view class="orderState">
  7. <image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;">
  8. </image>
  9. <view class="stateBox" >
  10. <!-- 0待施工(已保存)1施工中(已派工)2已完工 3已质检 4 已作废 -->
  11. <view class="SheetState" >{{orderData.checkoutState?orderData.checkoutState:''}}</view>
  12. </view>
  13. </view>
  14. </view>
  15. <!-- 店铺信息 -->
  16. <view class="shopBox">
  17. <image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
  18. <view class="shopCont">
  19. <view class="shopName">{{orderData.shopName}}</view>
  20. </view>
  21. </view>
  22. <!-- 订单信息 -->
  23. <view class="information">
  24. <view class="carMes">
  25. <view class="plate">{{orderData.plateNumber}}</view>
  26. <view class="mileage" v-if="orderData.currentMileage>0">
  27. {{orderData.currentMileage}}km
  28. </view>
  29. </view>
  30. <view class="informationLine">
  31. <view class="informationTxt">姓名:</view>
  32. <view class="informationNum">{{orderData.customerName}}</view>
  33. </view>
  34. <view class="informationLine">
  35. <view class="informationTxt">手机号:</view>
  36. <view class="informationNum">{{orderData.customerPhone}}</view>
  37. </view>
  38. <view class="informationLine">
  39. <view class="informationTxt">单号:</view>
  40. <view class="informationNum">{{orderData.code}}</view>
  41. </view>
  42. <view class="informationLine" v-if="Comment">
  43. <view class="informationTxt">备注:</view>
  44. <view class="informationNum" v-if="orderData.comment">{{orderData.comment}}
  45. </view>
  46. </view>
  47. </view>
  48. <!-- 项目明细 -->
  49. <view class="detailedBox itemBox" v-if=" orderData.listItems.length!=0">
  50. <view class="detailedTitle">项目</view>
  51. <view class="detailedLineBox">
  52. <view class="detailedLine" v-for="(item,index) in orderData.listItems">
  53. <view class="detailedName"><span v-if="item.CardDetailID" class="kaColor">卡</span>{{item.ItemName}}
  54. </view>
  55. <view class="secondBox" :class="{noLine:index == orderData.listItems.length-1}">
  56. <view class="comment" v-if="ItemComment&&item.Comment">{{item.Comment}}</view>
  57. <view class="secondRight">
  58. <!-- <view class="grayPrice">¥{{item.CheckOutTaxRate}}</view> -->
  59. <view class="price" v-if="ItemMoney">
  60. <span>¥</span>
  61. {{item.AmountMoney?item.AmountMoney:0}}
  62. </view>
  63. </view>
  64. </view>
  65. </view>
  66. </view>
  67. </view>
  68. <!-- 商品明细-->
  69. <view class="detailedBox itemBox" v-if="orderData.listParts.length!=0">
  70. <view class="detailedTitle">商品</view>
  71. <view class="detailedLineBox">
  72. <view class="detailedLine" v-for="(item,index) in orderData.listParts">
  73. <view class="goodTop">
  74. <view class="detailedName"><span v-if="item.CardDetailID"
  75. class="kaColor">卡</span>{{item.GoodsName}}</view>
  76. <view class="qty">x{{item.SaleQty}}</view>
  77. </view>
  78. <view class="secondBox" :class="{noLine:index == orderData.listParts.length-1}">
  79. <view class="comment" v-if="GoodsComment&&item.Comment">{{item.Comment}}</view>
  80. <view class="secondRight">
  81. <!-- <view class="grayPrice">¥{{item.CheckOutTaxRate}}</view> -->
  82. <view class="price" v-if="ItemMoney">
  83. <span>¥</span>
  84. {{item.AmountMoney?item.AmountMoney:0}}
  85. </view>
  86. </view>
  87. </view>
  88. </view>
  89. </view>
  90. </view>
  91. <!-- 费用明细 -->
  92. <view class="goodscost"
  93. v-if=" TotalDiscountMoney ||ReceiptsMoney">
  94. <view class="detailedTitle">费用明细</view>
  95. <view class="goodscostLine" v-if="TotalDiscountMoney">
  96. <view class="goodscostTxt">优惠总计</view>
  97. <view class="goodsCostNum">¥{{orderData.discountMoney?orderData.discountMoney:0}}</view>
  98. </view>
  99. <view class="goodscostLine" v-if="ReceiptsMoney">
  100. <view class="goodscostTxt">支付金额</view>
  101. <view class="goodsCostNum">¥{{orderData.checkoutMoney?orderData.checkoutMoney:0}}</view>
  102. </view>
  103. </view>
  104. <!-- 手机号授权 -->
  105. <view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
  106. <view class="authorizCont" @click.stop="">
  107. <view class="authorizName">{{wxOpenData.miniAppName}}</view>
  108. <view class="authorizMs">您好,欢迎访问本店,授权手机号登录能获取我们最新的促销活动哦~</view>
  109. <button class="authorizContbutton" type="default" open-type="getPhoneNumber"
  110. @getphonenumber="decryptPhoneNumber">授权</button>
  111. </view>
  112. <view style="text-align: center;padding-top: 56rpx;">
  113. <image src="../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
  114. </view>
  115. </view>
  116. </view>
  117. <view v-if="appraise == true && orderData.billsheet.PayState == 2" class="bottom">
  118. <view
  119. v-if="(orderData.billsheet.EvaluateState == 0) && (lastDay <= 30) && appraise == true && orderData.billsheet.PayState == 2"
  120. @click.stop="goAppraise()" class="ping">评价</view>
  121. <view v-if="orderData.billsheet.EvaluateState == 1" @click.stop="goAppraiseDetail()" class="kan">查看评价</view>
  122. </view>
  123. </view>
  124. </template>
  125. <script>
  126. import homenav from "../../components/homenav/nav.vue"
  127. export default {
  128. components: {
  129. homenav
  130. },
  131. data() {
  132. return {
  133. location: '',
  134. id: '',
  135. orderData: '',
  136. themeColor: '',
  137. authorizShow: false,
  138. userInfo: '',
  139. ext: '',
  140. wxOpenData: '',
  141. appraise: false,
  142. lastDay: '',
  143. // 权限
  144. FaultDescription: false, //故障描述
  145. RepairDescription: false, //维修建议
  146. Comment: false, //备注
  147. ItemMoney: false, //项目、商品金额
  148. ItemComment: false, //项目备注
  149. GoodsComment: false, //商品备注
  150. AmountMoney: false, //应收总计
  151. TotalDiscountMoney: false, //优惠总计
  152. CardMoneyT: false, //计次卡冲销
  153. CardMoneyC: false, //储值卡冲销
  154. ReceiptsMoney: false, //支付金额
  155. iStatusBarHeight:'',
  156. }
  157. },
  158. onLoad(opt) {
  159. this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  160. this.id = opt.id
  161. this.themeColor = uni.getStorageSync("themeColor");
  162. this.userInfo = this.$store.state.userInfo;
  163. this.ext = this.$common.getExtStoreId();
  164. if (this.userInfo) {
  165. this.getData()
  166. } else {
  167. this.$common.automaticlogin().then(val => {
  168. this.userInfo = this.$store.state.userInfo;
  169. this.wxOpenData = this.$store.state.wxOpenData;
  170. this.themeColor = uni.getStorageSync("themeColor");
  171. this.getData()
  172. if(!this.userInfo){
  173. this.authorizShow=true
  174. }
  175. })
  176. }
  177. this.myPower();
  178. this.showPower();
  179. },
  180. methods: {
  181. //显示权限
  182. showPower() {
  183. this.$http('openweiXinCardInfoController/getShowSetting', {
  184. }, 'GET').then(res => {
  185. // 权限
  186. // FaultDescription:false,//故障描述
  187. // RepairDescription:false,//维修建议
  188. // Comment:false,//备注
  189. // ItemMoney:false,//项目、商品金额
  190. // ItemComment:false,//项目备注
  191. // GoodsComment:false,//商品备注
  192. // AmountMoney:false,//应收总计
  193. // TotalDiscountMoney:false,//优惠总计
  194. // CardMoneyT:false,//计次卡冲销
  195. // CardMoneyC:false,//储值卡冲销
  196. // ReceiptsMoney:false,//支付金额
  197. var list = res.data
  198. list.forEach((item, index) => {
  199. if (item.fieldValue == 'FaultDescription') {
  200. this.FaultDescription = item.isChecked
  201. }
  202. if (item.fieldValue == 'RepairDescription') {
  203. this.RepairDescription = item.isChecked
  204. }
  205. if (item.fieldValue == 'Comment') {
  206. this.Comment = item.isChecked
  207. }
  208. if (item.fieldValue == 'ItemMoney') {
  209. this.ItemMoney = item.isChecked
  210. }
  211. if (item.fieldValue == 'ItemComment') {
  212. this.ItemComment = item.isChecked
  213. }
  214. if (item.fieldValue == 'GoodsComment') {
  215. this.GoodsComment = item.isChecked
  216. }
  217. if (item.fieldValue == 'AmountMoney') {
  218. this.AmountMoney = item.isChecked
  219. }
  220. if (item.fieldValue == 'CardMoneyT') {
  221. this.CardMoneyT = item.isChecked
  222. }
  223. if (item.fieldValue == 'CardMoneyC') {
  224. this.CardMoneyC = item.isChecked
  225. }
  226. if (item.fieldValue == 'ReceiptsMoney') {
  227. this.ReceiptsMoney = item.isChecked
  228. }
  229. })
  230. })
  231. },
  232. //评价权限
  233. myPower() {
  234. this.$http('openMiniEvaluate/getEvaluateSetting', {
  235. }, 'GET').then(res => {
  236. // var list = res.data.Items
  237. this.appraise = res.data
  238. })
  239. },
  240. goAppraiseDetail(item) {
  241. uni.navigateTo({
  242. url: 'myAppraiseDetail?sheetId=' + this.orderData.billsheet.id
  243. })
  244. },
  245. goAppraise(item) {
  246. uni.navigateTo({
  247. url: 'appraise?sheetID=' + this.orderData.billsheet.id + '&shopID=' + this.orderData.billsheet
  248. .shopID
  249. })
  250. },
  251. decryptPhoneNumber: function(e) {
  252. console.log(e);
  253. this.code = e.detail.code
  254. this.wxPhoneLogin()
  255. this.authorizShow = false;
  256. },
  257. wxPhoneLogin() {
  258. var that = this;
  259. this.$http('miniApp2/sys/wxPhoneLogin', {
  260. appId: this.ext.appId,
  261. unionId: this.ext.unionId,
  262. code: this.code,
  263. openId: this.wxOpenData.openid
  264. }, 'POST').then(res => {
  265. var data = res.data;
  266. if (data.loginInfo) {
  267. this.userInfo = data.loginInfo.openUser;
  268. this.wxOpenData = data.loginInfo;
  269. this.$store.commit('mutationswxOpenData', data)
  270. this.$store.commit('mutationsuserInfo', this.userInfo)
  271. this.getData()
  272. }
  273. })
  274. },
  275. map() {
  276. console.log("打开地图")
  277. var that = this;
  278. if (!that.orderData.billsheet.lat || !that.orderData.billsheet.lng) {
  279. uni.showToast({
  280. title: '该店铺未设置定位',
  281. icon: 'none',
  282. duration: 3000
  283. });
  284. } else {
  285. uni.openLocation({
  286. latitude: Number(that.orderData.billsheet.lat),
  287. longitude: Number(that.orderData.billsheet.lng),
  288. name: that.orderData.billsheet.ShopName,
  289. address: that.orderData.billsheet.Address,
  290. success: function() {
  291. console.log('success');
  292. },
  293. fail(err) {
  294. console.log(err)
  295. }
  296. });
  297. }
  298. },
  299. call() {
  300. uni.makePhoneCall({
  301. phoneNumber: this.orderData.billsheet.shopMobilePhone
  302. });
  303. },
  304. getData() {
  305. let that = this
  306. uni.showLoading({
  307. title: '加载中'
  308. });
  309. this.$http('openweiXinCardInfoController/queryConsumptionDetailOld', {
  310. // lat: this.location.lat,
  311. // lng: this.location.lng,
  312. id: this.id,
  313. }, 'POST').then(res => {
  314. uni.hideLoading();
  315. this.orderData = res.data;
  316. console.log('data===', this.orderData);
  317. })
  318. },
  319. //时间对比
  320. getDateBeforeNow(stringTime) {
  321. console.log("传参未格式化", stringTime);
  322. stringTime = new Date(stringTime.replace(/-/g, '/'))
  323. // 统一单位换算
  324. var minute = 1000 * 60;
  325. var hour = minute * 60;
  326. var day = hour * 24;
  327. var week = day * 7;
  328. var month = day * 30;
  329. var year = month * 12;
  330. var time1 = new Date().getTime(); //当前的时间戳 console.log("当前时间", time1);
  331. // 对时间进行毫秒单位转换 var time2 = new Date(stringTime).getTime(); //指定时间的时间戳
  332. console.log("传过来的时间", time2);
  333. var time = time1 - time2;
  334. console.log("计算后的时间", time);
  335. var result =
  336. null; // if (time < 0) { // // alert("传过来的时间的时间不能晚于当前时间!"); // result = stringTime; // } else if (time / year >= 1) {
  337. // result = parseInt(time / year) + "年前";
  338. // } else if (time / month >= 1) {
  339. // result = parseInt(time / month) + "月前";
  340. // } else if (time / week >= 1) { // result = parseInt(time / week) + "周前"; // } else if (time / day >= 1) {
  341. // result = parseInt(time / day) + "天前";
  342. // } else if (time / hour >= 1) { // result = parseInt(time / hour) + "小时前";
  343. // } else if (time / minute >= 1) {
  344. // result = parseInt(time / minute) + "分钟前"; // } else {
  345. // result = "刚刚"; // }
  346. if (time < 0) {
  347. // alert("传过来的时间的时间不能晚于当前时间!");
  348. result = -1;
  349. } else if (time / day >= 0) {
  350. result = parseInt(time / day); //多少天前
  351. }
  352. console.log("多少天前", result);
  353. return result;
  354. },
  355. goback() {
  356. uni.navigateBack({})
  357. },
  358. },
  359. onPullDownRefresh() {
  360. this.getData()
  361. setTimeout(function() {
  362. uni.stopPullDownRefresh();
  363. }, 1000);
  364. },
  365. }
  366. </script>
  367. <style scoped>
  368. .box {
  369. min-height: 100vh;
  370. background: #F4F5F7;
  371. padding-bottom: constant(safe-area-inset-bottom);
  372. padding-bottom: env(safe-area-inset-bottom);
  373. }
  374. .contentBox {
  375. background: #F4F5F7;
  376. padding-bottom: 100rpx;
  377. }
  378. .top {
  379. height: 190rpx;
  380. background: #FF0000;
  381. }
  382. .stateBox {
  383. display: flex;
  384. }
  385. .orderState {
  386. display: flex;
  387. justify-content: center;
  388. align-items: center;
  389. padding-top: 40rpx;
  390. }
  391. .SheetState {
  392. display: flex;
  393. justify-content: center;
  394. font-size: 36rpx;
  395. font-weight: 500;
  396. color: #FFFFFF;
  397. margin-left: 15rpx;
  398. }
  399. .timeEditImg {
  400. width: 25rpx;
  401. height: 25rpx;
  402. padding-left: 20rpx;
  403. }
  404. .shopBoximg {
  405. width: 40rpx;
  406. height: 40rpx;
  407. }
  408. .shopRightImg {
  409. width: 44rpx;
  410. height: 45rpx;
  411. }
  412. .shopsx {
  413. width: 1px;
  414. height: 50rpx;
  415. background: #EEEEEE;
  416. margin-top: 30rpx;
  417. margin-left: 28rpx;
  418. }
  419. .shopBox {
  420. display: flex;
  421. padding: 30rpx 20rpx;
  422. margin: 0rpx 24rpx;
  423. margin-top: -60rpx;
  424. background-color: #FFFFFF;
  425. border-radius: 10rpx;
  426. }
  427. .shopCont {
  428. width: 405rpx;
  429. padding-left: 20rpx;
  430. }
  431. .shopName {
  432. font-size: 30rpx;
  433. font-weight: bold;
  434. color: #3C3C3C;
  435. line-height: 45rpx;
  436. }
  437. .Address {
  438. color: #999999;
  439. font-size: 24rpx;
  440. margin-top: 10rpx;
  441. }
  442. .shopRihgtTxt {
  443. color: #999999;
  444. font-size: 24rpx;
  445. }
  446. .shopRightBox {
  447. padding-left: 28rpx;
  448. }
  449. .peopleCont {
  450. font-size: 28rpx;
  451. color: #3C3C3C;
  452. padding-left: 20rpx;
  453. }
  454. .people {
  455. display: flex;
  456. padding-left: 20rpx;
  457. padding-top: 30rpx;
  458. padding-bottom: 36rpx;
  459. }
  460. .PlateNumberBox {
  461. display: flex;
  462. padding-left: 20rpx;
  463. padding-bottom: 30rpx;
  464. }
  465. .PlateNumbercx {
  466. font-size: 28rpx;
  467. color: #3C3C3C;
  468. padding-left: 20rpx;
  469. }
  470. .PlateNumber {
  471. width: 130rpx;
  472. height: 32rpx;
  473. border-radius: 4rpx;
  474. border: 1px solid #F19D01;
  475. line-height: 32rpx;
  476. text-align: center;
  477. font-size: 22rpx;
  478. color: #F19D01;
  479. margin-left: 26rpx;
  480. }
  481. .PlateNumberBoxTop {
  482. display: flex;
  483. }
  484. .CarModel {
  485. font-size: 26rpx;
  486. color: #999999;
  487. padding-left: 20rpx;
  488. padding-top: 6rpx;
  489. padding-right: 20rpx;
  490. padding-bottom: 15rpx;
  491. width: 600rpx;
  492. }
  493. .detailedBox {
  494. background: #FFFFFF;
  495. border-radius: 10px;
  496. margin: 20rpx 24rpx;
  497. padding-bottom: 20rpx;
  498. }
  499. .itemBox {
  500. margin-top: 20rpx;
  501. }
  502. .carMes {
  503. padding: 23rpx 20rpx;
  504. display: flex;
  505. align-items: center;
  506. justify-content: flex-start;
  507. border-bottom: 1rpx solid #EEEEEE;
  508. }
  509. .plate {
  510. font-size: 30rpx;
  511. color: #3C3C3C;
  512. font-weight: bold;
  513. margin-right: 20rpx;
  514. }
  515. .mileage {
  516. font-size: 24rpx;
  517. color: #F19D01;
  518. padding: 0rpx 10rpx;
  519. border: 1rpx solid #F19D01;
  520. border-radius: 4rpx;
  521. height: 36rpx;
  522. }
  523. .detailedTitle {
  524. padding: 23rpx 20rpx;
  525. display: flex;
  526. text-align: center;
  527. align-content: flex-start;
  528. border-bottom: 1rpx solid #EEEEEE;
  529. font-size: 30rpx;
  530. font-weight: bold;
  531. color: #3C3C3C;
  532. }
  533. .detailedLine {
  534. padding: 20rpx 20rpx 0rpx;
  535. }
  536. .detailedImg {
  537. width: 120rpx;
  538. height: 120rpx;
  539. border-radius: 10rpx;
  540. }
  541. .detailedName {
  542. font-size: 26rpx;
  543. color: #3C3C3C;
  544. }
  545. .kaColor {
  546. background: #F19D01;
  547. border-radius: 4rpx;
  548. color: #FFFFFF;
  549. font-size: 24rpx;
  550. margin-right: 8rpx;
  551. padding: 3rpx 5rpx;
  552. }
  553. .qty {
  554. font-size: 24rpx;
  555. font-weight: 400;
  556. color: #999999;
  557. }
  558. .secondBox {
  559. display: flex;
  560. padding: 20rpx 0rpx;
  561. justify-content: space-between;
  562. align-items: baseline;
  563. border-bottom: 1rpx solid #EEEEEE;
  564. }
  565. .noLine {
  566. border-bottom: 0 solid #FFFFFF;
  567. }
  568. .comment {
  569. margin-right: 20rpx;
  570. font-size: 24rpx;
  571. font-weight: 400;
  572. color: #999999;
  573. flex-grow: 1;
  574. }
  575. .secondRight {
  576. display: flex;
  577. justify-content: flex-end;
  578. align-items: baseline;
  579. }
  580. .grayPrice {
  581. font-size: 24rpx;
  582. font-weight: 400;
  583. color: #999999;
  584. text-decoration: line-through;
  585. }
  586. .price {
  587. font-size: 32rpx;
  588. font-weight: 500;
  589. color: #FF0000;
  590. display: flex;
  591. align-items: center;
  592. }
  593. span {
  594. font-size: 24rpx;
  595. }
  596. .goodTop {
  597. display: flex;
  598. justify-content: space-between;
  599. }
  600. .goodscost {
  601. background: #FFFFFF;
  602. border-radius: 10px;
  603. margin: 20rpx 24rpx;
  604. padding-bottom: 20rpx;
  605. }
  606. .goodscostLine {
  607. display: flex;
  608. justify-content: space-between;
  609. font-size: 26rpx;
  610. padding: 20rpx 20rpx;
  611. color: #333333;
  612. }
  613. .goodsCostNum {
  614. color: #FF0000;
  615. font-weight: bold;
  616. }
  617. .information {
  618. width: 702rpx;
  619. background: #FFFFFF;
  620. border-radius: 10px;
  621. margin-left: 24rpx;
  622. margin-top: 20rpx;
  623. padding: 0rpx 0 15rpx 0;
  624. }
  625. .informationLine {
  626. display: flex;
  627. font-size: 26rpx;
  628. padding: 15rpx 20rpx;
  629. }
  630. .informationTxt {
  631. width: 190rpx;
  632. color: #999999;
  633. }
  634. .informationNum {
  635. color: #333333;
  636. width: calc(100vw - 190rpx);
  637. }
  638. .copyBtn {
  639. width: 86rpx;
  640. height: 40rpx;
  641. background: #F4F5F7;
  642. border-radius: 20rpx;
  643. font-size: 24rpx;
  644. color: #333333;
  645. text-align: center;
  646. line-height: 40rpx;
  647. margin-left: 20rpx;
  648. }
  649. .orderBottom {
  650. width: 750rpx;
  651. height: 98rpx;
  652. background: #FFFFFF;
  653. position: fixed;
  654. left: 0;
  655. bottom: 0;
  656. display: flex;
  657. justify-content: flex-end;
  658. }
  659. .cancelBtn {
  660. width: 150rpx;
  661. height: 56rpx;
  662. border-radius: 36rpx;
  663. border: 2rpx solid #DDDDDD;
  664. text-align: center;
  665. line-height: 56rpx;
  666. font-size: 28rpx;
  667. color: #3C3C3C;
  668. margin-top: 21rpx;
  669. margin-right: 16rpx;
  670. margin-left: 20rpx;
  671. }
  672. .payBtn {
  673. width: 150rpx;
  674. height: 56rpx;
  675. border-radius: 36rpx;
  676. border: 2rpx solid #FF4F00;
  677. text-align: center;
  678. line-height: 56rpx;
  679. font-size: 28rpx;
  680. color: #FF4F00;
  681. margin-top: 21rpx;
  682. margin-right: 16rpx;
  683. margin-left: 20rpx;
  684. }
  685. .timeBox2 {
  686. width: 100vw;
  687. height: 100vh;
  688. background: rgba(0, 0, 0, 0.5);
  689. position: fixed;
  690. top: 0;
  691. left: 0;
  692. }
  693. .timeLeftActive {
  694. background: #FFFFFF;
  695. }
  696. .timeMain {
  697. width: 100vw;
  698. height: 70vh;
  699. margin-top: 30vh;
  700. background: #FFFFFF;
  701. border-radius: 24rpx 24rpx 0px 0px;
  702. }
  703. .timesfNo {
  704. background: #F5F5F5;
  705. }
  706. .timesfActive {
  707. background: #FF4F00;
  708. }
  709. .timesfActive .timeSfNum {
  710. color: #FFFFFF;
  711. }
  712. .timesfActive .timeyy {
  713. color: #FFFFFF;
  714. }
  715. .topBox {
  716. padding: 20rpx 24rpx;
  717. }
  718. .timeTop {
  719. display: flex;
  720. line-height: 90rpx;
  721. padding-left: 24rpx;
  722. padding-right: 24rpx;
  723. justify-content: space-between;
  724. }
  725. .timeTopTitle {
  726. font-size: 30rpx;
  727. font-family: PingFangSC-Medium, PingFang SC;
  728. font-weight: 600;
  729. color: #3C3C3C;
  730. }
  731. .close {
  732. color: #999999;
  733. font-size: 30rpx;
  734. padding-left: 30rpx;
  735. }
  736. .timeCont {
  737. height: calc(70vh - 210rpx);
  738. }
  739. .timeSv {
  740. height: calc(70vh - 210rpx);
  741. }
  742. .timeLeft2 {
  743. width: 162rpx;
  744. background: #F4F5F7;
  745. border-top: 1px soid #F4F5F7;
  746. border-right: 1px soid #F4F5F7;
  747. }
  748. .timeRight2 {
  749. width: 588rpx;
  750. }
  751. .timesf {
  752. width: 165rpx;
  753. height: 98rpx;
  754. border-radius: 7rpx;
  755. border: 2rpx solid #EEEEEE;
  756. text-align: center;
  757. margin-left: 20rpx;
  758. margin-bottom: 24rpx;
  759. }
  760. .timeBottom {
  761. width: 750rpx;
  762. height: 120rpx;
  763. background: #FFFFFF;
  764. box-shadow: 0px -2px 20rpx 0px rgba(153, 153, 153, 0.2);
  765. display: flex;
  766. align-items: center;
  767. }
  768. .timerightBox {
  769. display: flex;
  770. flex-wrap: wrap;
  771. }
  772. .timeCont {
  773. display: flex;
  774. }
  775. .timeSfNum {
  776. color: #666666;
  777. font-size: 28rpx;
  778. padding-top: 15rpx;
  779. }
  780. .timeyy {
  781. font-size: 24rpx;
  782. color: #999999;
  783. }
  784. .timecomplete {
  785. width: 690rpx;
  786. height: 74rpx;
  787. background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
  788. border-radius: 37rpx;
  789. line-height: 74rpx;
  790. text-align: center;
  791. font-size: 30rpx;
  792. color: #FFFFFF;
  793. margin-left: 30rpx;
  794. }
  795. .timeleftLine {
  796. font-size: 30rpx;
  797. color: #999999;
  798. text-align: center;
  799. padding: 28rpx 10rpx;
  800. border-bottom: 1px solid #EEEEEE;
  801. }
  802. .yuyueBox {
  803. background: #FFFFFF;
  804. border-radius: 10rpx;
  805. margin-left: 24rpx;
  806. margin-right: 24rpx;
  807. }
  808. .yuyueTime {
  809. display: flex;
  810. padding-left: 20rpx;
  811. padding-top: 30rpx;
  812. padding-bottom: 36rpx;
  813. align-items: center;
  814. }
  815. .yuyueState {
  816. display: flex;
  817. padding-left: 20rpx;
  818. padding-top: 30rpx;
  819. padding-bottom: 36rpx;
  820. }
  821. .maBox {
  822. display: flex;
  823. justify-content: space-between;
  824. padding: 24rpx 20rpx;
  825. }
  826. .querenMa {
  827. margin: 20rpx 0;
  828. padding-bottom: 30rpx;
  829. }
  830. .maBoximg {
  831. width: 308rpx;
  832. height: 308rpx;
  833. margin: 30rpx 197rpx;
  834. }
  835. .rightShou {
  836. display: flex;
  837. justify-content: flex-start;
  838. align-items: center;
  839. }
  840. .authorizBox {
  841. width: 100vw;
  842. height: 100vh;
  843. background: rgba(0, 0, 0, 0.5);
  844. position: fixed;
  845. top: 0;
  846. left: 0;
  847. }
  848. .authorizCont {
  849. margin-top: 30vh;
  850. width: 564rpx;
  851. height: 408rpx;
  852. background: #FFFFFF;
  853. border-radius: 24rpx;
  854. margin-left: 93rpx;
  855. position: relative;
  856. }
  857. .authorizCloseImg {
  858. width: 62rpx;
  859. height: 62rpx;
  860. }
  861. .sqLogoBox {
  862. width: 180rpx;
  863. height: 180rpx;
  864. background: #FFFFFF;
  865. border-radius: 90rpx;
  866. text-align: center;
  867. position: absolute;
  868. top: -50rpx;
  869. left: 192rpx;
  870. }
  871. .authorizName {
  872. color: #333333;
  873. line-height: 42rpx;
  874. font-size: 30rpx;
  875. text-align: center;
  876. padding-top: 58rpx;
  877. }
  878. .authorizMs {
  879. color: #999999;
  880. line-height: 36rpx;
  881. font-size: 26rpx;
  882. width: 452rpx;
  883. padding-top: 24rpx;
  884. text-align: center;
  885. margin-left: 56rpx;
  886. }
  887. .authorizContbutton {
  888. width: 422rpx;
  889. height: 88rpx;
  890. background: #D53533;
  891. border-radius: 44rpx;
  892. line-height: 88rpx;
  893. text-align: center;
  894. font-size: 30rpx;
  895. color: #FFFFFF;
  896. margin-top: 62rpx;
  897. margin-left: 71rpx;
  898. }
  899. .bottom {
  900. position: fixed;
  901. width: 100%;
  902. padding: 20rpx 24rpx;
  903. right: 0;
  904. bottom: 0;
  905. background: #ffffff;
  906. font-size: 28rpx;
  907. display: flex;
  908. justify-content: flex-end;
  909. height: 58rpx;
  910. padding-bottom: constant(safe-area-inset-bottom);
  911. padding-bottom: env(safe-area-inset-bottom);
  912. }
  913. .ping {
  914. text-align: center;
  915. color: #FF4F00;
  916. width: 150rpx;
  917. height: 56rpx;
  918. line-height: 56rpx;
  919. border-radius: 36rpx;
  920. border: 2rpx solid #FF4F00;
  921. }
  922. .kan {
  923. text-align: center;
  924. color: #3C3C3C;
  925. width: 150rpx;
  926. height: 56rpx;
  927. line-height: 56rpx;
  928. border-radius: 36rpx;
  929. border: 2rpx solid #DDDDDD;
  930. }
  931. </style>