eorderDetail.vue 27 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034
  1. <template>
  2. <view class="box">
  3. <view class="top">
  4. <view class="nav" >
  5. <view>
  6. <image src="../../static/img/baiback22.png" mode="" class="gobackImg" @click="goback"></image>
  7. <!-- <image src="../../static/img/baigoindex22.png" mode="" class="goIndexImg" @click="goIndex()"></image> -->
  8. </view>
  9. <view>订单详情</view>
  10. <view style="width: 92rpx;"></view>
  11. </view>
  12. <view style="height: 44px;"></view>
  13. <view class="SheetState" v-if="orderData.sheetState==1">等待付款</view>
  14. <view class="SheetState" v-if="orderData.sheetState==2">待服务</view>
  15. <view class="SheetState" v-if="orderData.sheetState==3||orderData.sheetState==5">订单已完成</view>
  16. <view class="SheetState" v-if="orderData.sheetState==0">订单已取消</view>
  17. <view class="SheetState" v-if="orderData.sheetState==4">订单已完成</view>
  18. </view>
  19. <view v-if="orderData">
  20. <!-- 服务确认码 -->
  21. <view class="orderTop" v-if="false"><!-- v-if="orderData.sheetState==2 || orderData.sheetState==3 || orderData.sheetState==4 || orderData.sheetState==5" -->
  22. <view class="maBox">
  23. <view class="timeLeft">
  24. <span>服务确认码</span>
  25. </view>
  26. <view style="text-decoration:line-through; color: #999999; font-size: 26rpx;"
  27. v-if="orderData.sheetState==3 || orderData.sheetState==4 || orderData.sheetState==5 && orderData.serviceCode!=null">{{orderData.serviceCode}}</view>
  28. <view class="rightShou" v-if="orderData.sheetState==2">
  29. <view class="timeRight" style="color: #FF2400;" @click="showMa">收起</view>
  30. <image src="../../static/img/icon_arrow_up_orange.png" style="width: 17rpx; height: 11rpx; margin-left:10rpx ;">
  31. </image>
  32. </view>
  33. <view style="color: #999999; font-size: 26rpx;" v-if="orderData.sheetState==3 || orderData.sheetState==4 || orderData.sheetState==5">已使用</view>
  34. </view>
  35. <!-- 确认码 -->
  36. <view class="querenMa" v-if="isShowMa==true && orderData.sheetState==2">
  37. <view style="color: #FF2400; font-size: 24rpx; text-align: center;">请到店出示券码即可开始服务</view>
  38. <view class="maBoximg">
  39. <tki-qrcode cid="qrcode1" ref="qrcode" :val="orderData.serviceCode" :size="308" :unit="unit"
  40. :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
  41. :loadMake="loadMake" :usingComponents="true" @result="qrR" />
  42. </view>
  43. <view style="color: #333333; font-size: 26rpx; font-weight: bold; text-align: center;">
  44. {{orderData.serviceCode}}
  45. </view>
  46. </view>
  47. </view>
  48. <view class="orderTop">
  49. <view class="timeBox">
  50. <view class="timeLeft">
  51. <span v-if="orderData.sheetState==1||orderData.sheetState==2||orderData.sheetState==0">预约到店:{{orderData.orderTime}}</span>
  52. <span v-else>服务时间:{{orderData.serviceTime}}</span>
  53. <image v-if="orderData.sheetState==2" src="../../static/img/icon_edit.png" mode="" class="timeEditImg" @click="timeShowClick"></image>
  54. </view>
  55. <!-- <view class="timeRight" @click="qrcodeClick">订单码</view> -->
  56. </view>
  57. <view class="shopBox">
  58. <image src="../../static/img/newshop.png" mode="" class="shopBoximg"></image>
  59. <view class="shopCont">
  60. <view class="shopName">{{orderData.shopName}}</view>
  61. </view>
  62. <!-- <view class="shopRightBox" @click="map">
  63. <view> <image src="../../static/img/icon_ditu2.png" mode="" class="shopRightImg"></image> </view>
  64. <view class="shopRihgtTxt">地图</view>
  65. </view>
  66. <view class="shopsx"></view>
  67. <view class="shopRightBox" @click="call">
  68. <view> <image src="../../static/img/icon_phone2.png" mode="" class="shopRightImg"></image> </view>
  69. <view class="shopRihgtTxt">电话</view>
  70. </view> -->
  71. </view>
  72. <view class="people">
  73. <image src="../../static/img/icon_ren.png" mode="" class="shopBoximg"></image>
  74. <view class="peopleCont">{{orderData.contactName}}</view>
  75. <view class="peopleCont" style="padding-left: 20rpx;">{{orderData.contactPhone}}</view>
  76. </view>
  77. <view class="PlateNumberBox">
  78. <image src="../../static/img/icon_che.png" mode="" class="shopBoximg"></image>
  79. <view class="">
  80. <view class="PlateNumberBoxTop">
  81. <view class="PlateNumbercx"> <span v-if="orderData.carInfo">{{orderData.carInfo.brand}}</span>
  82. <span style="padding-left: 20rpx;" v-if="orderData.carInfo">{{orderData.carInfo.series}}</span>
  83. </view>
  84. <view class="PlateNumber">{{orderData.plateNumber}}</view>
  85. </view>
  86. <view class="CarModel">{{orderData.carModel}}</view>
  87. </view>
  88. </view>
  89. </view>
  90. <view style="margin-top: -40rpx;"></view>
  91. <!-- 商品明细-->
  92. <view class="detailedBox itemBox" v-if="orderData.goodsList.length!=0">
  93. <view class="detailedTitle">商品明细</view>
  94. <view class="detailedLineBox">
  95. <view class="detailedLine" v-for="(item,index) in orderData.goodsList">
  96. <view>
  97. <image :src="item.Url" mode="" class="detailedImg" v-if="item.Url"></image>
  98. <image src="../../static/img/noimg.png" mode="" class="detailedImg" v-else></image>
  99. </view>
  100. <view class="detailedCont">
  101. <view class="detailedName">{{item.GoodsName}}</view>
  102. <view class="detailedContBottom">
  103. <span class="SalePrice">¥{{item.SalePrice}}</span>
  104. <span>x{{item.SaleQty}}</span>
  105. </view>
  106. </view>
  107. </view>
  108. </view>
  109. </view>
  110. <!-- 商品明细-->
  111. <!-- 项目明细 -->
  112. <view class="detailedBox itemBox" v-if=" orderData.itemList.length!=0">
  113. <view class="detailedTitle">项目明细</view>
  114. <view class="detailedLineBox">
  115. <view class="detailedLine" v-for="(item,index) in orderData.itemList">
  116. <view>
  117. <image :src="item.Url" mode="" class="detailedImg" v-if="item.Url"></image>
  118. <image src="../../static/img/noitem.png" mode="" class="detailedImg" v-else></image>
  119. </view>
  120. <view class="detailedCont">
  121. <view class="detailedName">{{item.ItemName}}</view>
  122. <view class="detailedContBottom">
  123. <span class="SalePrice">¥{{item.SalePrice}}</span>
  124. <span>x1</span>
  125. </view>
  126. </view>
  127. </view>
  128. </view>
  129. </view>
  130. <!-- 项目明细 -->
  131. <!-- 商品费 -->
  132. <view class="goodscost">
  133. <view class="goodscostLine">
  134. <view class="goodscostTxt">商品费</view>
  135. <view class="goodsCostNum">¥{{orderData.goodsMoney}}</view>
  136. </view>
  137. <view class="goodscostLine">
  138. <view class="goodscostTxt">项目费</view>
  139. <view class="goodsCostNum">¥{{orderData.itemMoney}}</view>
  140. </view>
  141. <view class="goodscostLine">
  142. <view class="goodscostTxt">优惠券优惠</view>
  143. <view class="goodsCostNum">-¥{{orderData.couponMoney}}</view>
  144. </view>
  145. <view class="goodscostLine">
  146. <view class="goodscostTxt">实付款</view>
  147. <view class="goodsCostNum" style="color: #FF4F00;">¥{{orderData.payMoney}}</view>
  148. </view>
  149. </view>
  150. <!-- 商品费 -->
  151. <!-- 订单信息 -->
  152. <view class="information">
  153. <view class="detailedTitle">订单信息</view>
  154. <view class="informationLine">
  155. <view class="informationTxt">订单编号:</view>
  156. <view class="informationNum">{{orderData.code}}</view>
  157. <view class="copyBtn" @click="copy(orderData.code)">复制</view>
  158. </view>
  159. <view class="informationLine">
  160. <view class="informationTxt">下单人:</view>
  161. <view class="informationNum">{{orderData.memberName}}</view>
  162. </view>
  163. <view class="informationLine">
  164. <view class="informationTxt">下单时间:</view>
  165. <view class="informationNum">{{orderData.createTime}}</view>
  166. </view>
  167. <view class="informationLine">
  168. <view class="informationTxt">下单备注:</view>
  169. <view class="informationNum">{{orderData.comment}}</view>
  170. </view>
  171. </view>
  172. <!-- 订单信息 -->
  173. <!-- 支付信息 -->
  174. <view class="information">
  175. <view class="detailedTitle">支付信息</view>
  176. <view class="informationLine">
  177. <view class="informationTxt">支付状态:</view>
  178. <view class="informationNum" v-if="orderData.sheetState==2||orderData.sheetState==3||orderData.sheetState==4">已支付</view>
  179. <view class="informationNum" v-if="orderData.sheetState==1">未支付</view>
  180. </view>
  181. <view class="informationLine">
  182. <view class="informationTxt">支付方式:</view>
  183. <view class="informationNum">{{orderData.payMethod==1?'线上支付':'线下支付'}}</view>
  184. </view>
  185. <view class="informationLine">
  186. <view class="informationTxt">支付时间:</view>
  187. <view class="informationNum" v-if="orderData.payTime">{{orderData.payTime}}</view>
  188. </view>
  189. </view>
  190. <!-- 支付信息 -->
  191. <view style="height: 150rpx;"></view>
  192. <!-- <view class="orderBottom" v-if="orderData.SheetState==1||orderData.SheetState==2">
  193. <view class="payBtn" v-if="orderData.SheetState!=2" @click="orderPay">立即支付</view>
  194. <view class="cancelBtn" style="margin-right: 16rpx;" @click="cancelOrder">取消订单</view>
  195. </view>
  196. <view class="orderBottom" v-if="orderData.EvaluateState==1">
  197. <view class="cancelBtn" style="margin-right: 16rpx;" @click="gopingjia">查看评价</view>
  198. </view>
  199. <view class="orderBottom" v-if="orderData.EvaluateState==0&&orderData.EState==1">
  200. <view class="payBtn" @click="evaluate">立即评价</view>
  201. </view> -->
  202. <view class="orderBottom" v-if="orderData.sheetState==2">
  203. <view class="cancelBtn" style="margin-right: 16rpx;" @click="goHeXiao">核销</view>
  204. </view>
  205. <!-- 二维码 -->
  206. <view v-if="qrcodeShow" class="qrcodeBox" @click="qrcodeShow=false">
  207. <view @click.stop="qrc">
  208. <tki-qrcode cid="qrcode1" ref="qrcode" :val="qrcodeTopVal" :size="size" :unit="unit"
  209. :pdground="pdground" :icon="icon" :iconSize="iconsize" pdground="#000000"
  210. :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR"/>
  211. </view>
  212. </view>
  213. <!-- 二维码 -->
  214. <!-- 地图 -->
  215. <!-- 地图 -->
  216. <!-- 预约时间 -->
  217. <view class="timeBox2" v-if="timeShow&&OrderTimes" @click="timeShow=false">
  218. <view class="timeMain">
  219. <view class="timeTop">
  220. <view class="timeTopTitle">选择预约时间</view>
  221. <view class="close" @click="timeShow=false">X</view>
  222. </view>
  223. <view class="timeCont">
  224. <view class="timeLeft2">
  225. <scroll-view scroll-y="true" class="timeSv">
  226. <view class="timeleftLine" v-for="(item,index) in OrderTimes"
  227. :class="{timeLeftActive:index==orderTimeIndex1}"
  228. @click.stop="orderTimeIndex1=index,orderTimeIndex2=-1"
  229. >{{item.date.substring(5,10)}}</view>
  230. </scroll-view>
  231. </view>
  232. <view class="timeRight2">
  233. <scroll-view scroll-y="true" class="timeSv">
  234. <view class="timerightBox">
  235. <view class="timesf" v-for="(item,index) in OrderTimes[orderTimeIndex1].timeList"
  236. :class="{timesfNo:item.type!=1,timesfActive:index==orderTimeIndex2}"
  237. @click.stop="timeSfCk(item,index)"
  238. >
  239. <view class="timeSfNum">{{item.time}}</view>
  240. <view class="timeyy" v-if="item.type==1">可预约</view>
  241. <view class="timeyy" v-if="item.type==2">已约满</view>
  242. <view class="timeyy" v-if="item.type==3">已过期</view>
  243. </view>
  244. </view>
  245. </scroll-view>
  246. </view>
  247. </view>
  248. <view class="timeBottom">
  249. <view class="timecomplete" @click="timeCk">完成</view>
  250. </view>
  251. </view>
  252. </view>
  253. </view>
  254. </view>
  255. </template>
  256. <script>
  257. import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
  258. export default {
  259. components: {
  260. tkiQrcode
  261. },
  262. data() {
  263. return {
  264. location:'',
  265. isload:false,
  266. id:'',
  267. iStatusBarHeight:'',
  268. orderData:'',
  269. type:'',
  270. onval: true, // val值变化时自动重新生成二维码
  271. loadMake: true, // 组件加载完成后自动生成二维码
  272. size:500,
  273. qrcodeShow:false,
  274. qrcodeTop:'-100vh',
  275. qrcodeTopVal:'',
  276. ifShow: false,
  277. val: '二维码', // 要生成的二维码值
  278. unit: 'upx', // 单位
  279. background: '#b4e9e2', // 背景色
  280. foreground: '#309286', // 前景色
  281. pdground: '#333333', // 角标色
  282. icon: '', // 二维码图标
  283. iconsize: 40, // 二维码图标大小
  284. lv: 3, // 二维码容错级别 , 一般不用设置,默认就行
  285. src: '' ,// 二维码生成后的图片地址或base64
  286. timeShow:false,
  287. orderTime:'',
  288. OrderTimes:'',
  289. orderTimeIndex1:0,
  290. orderTimeIndex2:-1,
  291. isShowMa: true,
  292. iOSInfo:'',
  293. }
  294. },
  295. onLoad(opt) {
  296. this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  297. this.location=uni.getStorageSync("location");
  298. this.id=opt.id
  299. this.getData()
  300. this.type=opt.type;
  301. this.getOrderTimes();
  302. var qxnum = uni.getStorageSync("quanxian");
  303. if (qxnum == 1) {
  304. this.iOSInfo = JSON.parse(JSON.stringify(window.iOSInfo));
  305. }else if(qxnum==2){
  306. window.getAndroid=this.getAndroid;
  307. }
  308. },
  309. onShow() {
  310. if(this.id){
  311. this.getData()
  312. }
  313. },
  314. methods: {
  315. getAndroid(e){
  316. this.iOSInfo=e
  317. },
  318. showMa() {
  319. this.isShowMa = !this.isShowMa
  320. },
  321. gopingjia(){
  322. uni.navigateTo({
  323. url:'../me/myAppraiseDetail?id='+this.id
  324. })
  325. },
  326. timeShowClick(){
  327. if(this.OrderTimes){
  328. this.timeShow=true
  329. }else{
  330. uni.showToast({
  331. title: '当前店铺尚未设置可预约时间',
  332. icon:'none',
  333. duration: 3000
  334. });
  335. }
  336. },
  337. goHeXiao() {
  338. console.log(this.id)
  339. //app交互
  340. var standalone = window.navigator.standalone
  341. var userAgent = window.navigator.userAgent.toLowerCase()
  342. var safari = /safari/.test(userAgent)
  343. var ios = /iphone|ipod|ipad|mac/.test(userAgent)
  344. var android = /android/.test(userAgent)
  345. if (ios) {
  346. if (true) { //!standalone&& !safari
  347. window.webkit.messageHandlers.europewriteoff.postMessage({
  348. "id": this.id ? this.id : ''
  349. })
  350. }
  351. } else if (android) {
  352. window.android.europewriteoff(this.id)
  353. }
  354. },
  355. map(){
  356. console.log("打开地图")
  357. var that=this;
  358. if(!that.orderData.Lat||!that.orderData.Lng){
  359. uni.showToast({
  360. title: '该店铺未设置定位',
  361. icon:'none',
  362. duration: 3000
  363. });
  364. }else{
  365. uni.openLocation({
  366. latitude:Number(that.orderData.Lat) ,
  367. longitude:Number( that.orderData.Lng),
  368. name:that.orderData.ShopName,
  369. address:that.orderData.Address,
  370. success: function () {
  371. console.log('success');
  372. },
  373. fail(err) {
  374. console.log(err)
  375. }
  376. });
  377. }
  378. },
  379. qrR(){
  380. },
  381. qrc(){
  382. console.log(111)
  383. },
  384. call(){
  385. uni.makePhoneCall({
  386. phoneNumber: this.orderData.contactPhone
  387. });
  388. },
  389. qrcodeClick(){
  390. this.ifShow=true;
  391. this.qrcodeShow=true;
  392. this.qrcodeTopVal=this.orderData.Code;
  393. //this.$refs.qrcode._makeCode()
  394. },
  395. copy(txt){
  396. uni.setClipboardData({
  397. data: txt,
  398. success: function () {
  399. uni.showToast({
  400. title: '复制成功',
  401. icon:'none',
  402. duration: 2000
  403. });
  404. }
  405. });
  406. },
  407. getData(){
  408. uni.showLoading({ title: '加载中'});
  409. this.$http('h5BmSheet/h5BmSheetDetail', {
  410. //lat:this.location.lat,
  411. // lng:this.location.lng,
  412. id:this.id,
  413. },'GET').then(res => {
  414. uni.hideLoading();
  415. this.orderData=res.data;
  416. })
  417. },
  418. goback(){
  419. // if(this.type==2){
  420. // uni.switchTab({
  421. // url:'../index/index'
  422. // })
  423. // }else{
  424. // uni.navigateBack({})
  425. // }
  426. var standalone = window.navigator.standalone
  427. var userAgent = window.navigator.userAgent.toLowerCase()
  428. var safari = /safari/.test(userAgent)
  429. var ios = /iphone|ipod|ipad|mac/.test(userAgent)
  430. var android = /android/.test(userAgent)
  431. if (ios) {
  432. if ( true) {//!standalone&& !safari
  433. window.webkit.messageHandlers.goMyNav.postMessage(null)
  434. }
  435. } else if (android) {
  436. window.android.postMessage()
  437. }
  438. },
  439. evaluate(){
  440. uni.navigateTo({
  441. url:'evaluate?sheetID='+this.id+'&shopID='+this.orderData.ShopID
  442. })
  443. },
  444. goIndex(){
  445. uni.switchTab({
  446. url:'../index/index'
  447. })
  448. },
  449. cancelOrder(){
  450. var that=this;
  451. uni.showModal({
  452. title: '提示',
  453. content: '确定要取消订单吗',
  454. success: function (res) {
  455. if (res.confirm) {
  456. uni.showLoading({ title: '加载中'});
  457. that.$http('miniAppMyBMemberCar/updateBMSheetState', {
  458. id:that.orderData.ID
  459. },'POST').then(res => {
  460. uni.hideLoading();
  461. if(that.orderData.SheetState!=1){
  462. uni.showModal({
  463. title: '订单取消成功,请等待银行处理',
  464. content: '金额将原路退还至您的账户。若您使用了优惠券,将退至您的账户',
  465. showCancel:false,
  466. success: function (res) {
  467. that.getData()
  468. }
  469. });
  470. }else{
  471. uni.showModal({
  472. title: '提示',
  473. content: '订单取消成功',
  474. showCancel:false,
  475. success: function (res) {
  476. that.getData()
  477. }
  478. });
  479. }
  480. // that.getData()
  481. })
  482. } else if (res.cancel) {
  483. }
  484. }
  485. });
  486. },
  487. orderPay(){
  488. uni.showLoading({ title: '加载中'});
  489. var that=this;
  490. this.$http('miniApp/maintainOrder/orderPay', {
  491. sheetID:this.orderData.ID
  492. },'POST').then(res => {
  493. uni.hideLoading();
  494. var payInfo=JSON.parse(res.data.payInfo)
  495. uni.requestPayment({
  496. provider: 'wxpay',
  497. // timeStamp: String(Date.now()),
  498. timeStamp:payInfo.timeStamp,
  499. nonceStr: payInfo.nonceStr,
  500. package: payInfo.package,
  501. signType: payInfo.signType,
  502. paySign: payInfo.paySign,
  503. success: function (res) {
  504. console.log('success:' + JSON.stringify(res));
  505. uni.showToast({
  506. title: '支付成功',
  507. icon:'none',
  508. duration: 2000
  509. });
  510. that.getData()
  511. },
  512. fail: function (err) {
  513. console.log('fail:' + JSON.stringify(err));
  514. }
  515. });
  516. })
  517. },
  518. timeSfCk(item,index){
  519. if(item.type==1){
  520. this.orderTimeIndex2=index;
  521. var orderTime=this.OrderTimes[this.orderTimeIndex1].date +' '+ item.time
  522. this.orderTime=orderTime
  523. }
  524. },
  525. timeCk(){
  526. this.timeShow=false;
  527. var that=this;
  528. this.$http('h5BmSheet/h5UpdateTimeOfAppointment', {
  529. id:this.id,
  530. billDate:this.orderTime
  531. },'POST').then(res => {
  532. if(res.code==1){
  533. uni.showToast({
  534. title: '修改成功',
  535. icon:'none',
  536. duration: 2000
  537. });
  538. }
  539. setTimeout(() => {
  540. that.getData()
  541. }, 2000);
  542. })
  543. },
  544. getOrderTimes(){
  545. this.$http('h5BmSheet/getOrderTimes', {
  546. },'GET').then(res => {
  547. this.OrderTimes=res.data;
  548. })
  549. }
  550. },
  551. onPullDownRefresh() {
  552. this.getOrderTimes()
  553. this.getData()
  554. setTimeout(function () {
  555. uni.stopPullDownRefresh();
  556. }, 1000);
  557. },
  558. }
  559. </script>
  560. <style scoped>
  561. .box{
  562. min-height: 100vh;
  563. background: #F4F5F7;
  564. }
  565. .status_bar{
  566. background: #FF4F00;
  567. width: 100vw;
  568. position: fixed;
  569. top: 0;
  570. left: 0;
  571. z-index: 1111;
  572. }
  573. .qrcodeBox{
  574. width: 100vw;
  575. height: 100vh;
  576. display: flex;
  577. justify-content: center;
  578. align-items: center;
  579. position: fixed;
  580. top: 0;
  581. left: 0;
  582. background: rgba(0,0,0,0.7);
  583. }
  584. .top{
  585. width: 750rpx;
  586. height: 242rpx;
  587. background: #FF4F00;
  588. /* background: linear-gradient(134deg, #FF8635 0%, #FF4828 100%); */
  589. }
  590. .nav{
  591. line-height: 44px;
  592. font-size: 34rpx;
  593. font-weight: 600;
  594. display: flex;
  595. justify-content: space-between;
  596. color: #FFFFFF;
  597. position: fixed;
  598. width: 100vw;
  599. left: 0;
  600. z-index: 1111;
  601. background: #FF4F00;
  602. }
  603. .gobackImg{
  604. width: 92rpx;
  605. height: 88rpx;
  606. /* padding: 12px; */
  607. }
  608. .SheetState{
  609. font-size: 44rpx;
  610. font-weight: 500;
  611. color: #FFFFFF;
  612. padding-left: 24rpx;
  613. padding-top: 24rpx;
  614. }
  615. .orderTop{
  616. background: #FFFFFF;
  617. border-radius: 10rpx;
  618. margin: 20rpx 24rpx;
  619. }
  620. .timeEditImg{
  621. width: 25rpx;height: 25rpx;padding-left: 20rpx;
  622. }
  623. .timeLeft{
  624. font-size: 28rpx;
  625. color: #3C3C3C;font-weight: 500;
  626. }
  627. .timeRight{
  628. font-size: 26rpx;
  629. color: #3F90F7;
  630. }
  631. .timeBox{
  632. display: flex;
  633. justify-content: space-between;
  634. padding: 24rpx 20rpx;
  635. border-bottom: 1px solid #EEEEEE;
  636. }
  637. .orderTop{
  638. position: relative;
  639. top: -44rpx;
  640. }
  641. .shopBoximg{
  642. width: 40rpx;height: 40rpx;
  643. }
  644. .shopRightImg{
  645. width: 52rpx;height: 38rpx;
  646. }
  647. .shopsx{
  648. width: 1px;
  649. height: 50rpx;
  650. background: #EEEEEE;
  651. margin-top: 30rpx;
  652. margin-left: 28rpx;
  653. }
  654. .shopBox{
  655. display: flex;
  656. padding: 30rpx 20rpx 24rpx 20rpx;
  657. }
  658. .shopCont{
  659. width: 418rpx;padding-left: 20rpx;
  660. }
  661. .shopName{
  662. font-size: 28rpx;
  663. color: #3C3C3C;
  664. font-weight: 500;
  665. }
  666. .Address{
  667. color: #999999;font-size: 26rpx;padding-top: 10rpx;
  668. }
  669. .shopRihgtTxt{
  670. color: #999999;font-size: 22rpx;padding-top: 5rpx;
  671. }
  672. .shopRightBox{
  673. padding-top: 30rpx;
  674. padding-left: 28rpx;
  675. }
  676. .peopleCont{
  677. font-size: 28rpx;
  678. font-weight: 500;
  679. color: #3C3C3C;
  680. padding-left: 20rpx;
  681. }
  682. .people{
  683. display: flex;
  684. padding-left: 20rpx;
  685. padding-bottom: 24rpx;
  686. }
  687. .PlateNumberBox{
  688. display: flex;padding-left: 20rpx;padding-bottom: 30rpx;
  689. }
  690. .PlateNumbercx{
  691. font-size: 28rpx;
  692. font-weight: 500;
  693. color: #3C3C3C;
  694. padding-left: 20rpx;
  695. }
  696. .PlateNumber{
  697. width: 130rpx;
  698. height: 32rpx;
  699. border-radius: 4rpx;
  700. border: 1px solid #F19D01;
  701. line-height: 32rpx;
  702. text-align: center;
  703. font-size: 22rpx;
  704. color: #F19D01;
  705. margin-left: 26rpx;
  706. }
  707. .PlateNumberBoxTop{
  708. display: flex;
  709. }
  710. .CarModel{
  711. font-size: 26rpx;
  712. color: #999999;
  713. padding-left: 20rpx;
  714. padding-top: 6rpx;
  715. padding-right: 20rpx;
  716. padding-bottom: 15rpx;
  717. width: 600rpx;
  718. }
  719. .detailedBox{
  720. width: 702rpx;
  721. background: #FFFFFF;
  722. border-radius: 10px;
  723. margin-left: 24rpx;
  724. margin-top: -60rpx;
  725. padding-bottom: 20rpx;
  726. }
  727. .itemBox{
  728. margin-top: 20rpx;
  729. }
  730. .detailedTitle{
  731. font-size: 32rpx;
  732. color: #3C3C3C;
  733. padding-left: 20rpx;padding-top: 30rpx;
  734. font-weight: 600;
  735. padding-bottom: 10rpx;
  736. }
  737. .detailedLine{
  738. display: flex;
  739. padding-left: 20rpx;
  740. padding-top: 40rpx;
  741. }
  742. .detailedImg{
  743. width: 120rpx;
  744. height: 120rpx;
  745. border-radius: 10rpx;
  746. }
  747. .detailedCont{
  748. padding-left: 20rpx;
  749. display: flex;
  750. flex-direction: column;
  751. justify-content: space-between;
  752. }
  753. .detailedName{
  754. font-size: 26rpx;
  755. color: #3C3C3C;
  756. }
  757. .detailedContBottom{
  758. display: flex;
  759. justify-content: space-between;
  760. font-size: 26rpx;
  761. color: #999999;
  762. width: 500rpx;
  763. line-height: 40rpx;
  764. }
  765. .SalePrice{
  766. font-size: 32rpx;
  767. font-weight: 500;
  768. color: #3C3C3C;
  769. }
  770. .goodscost{
  771. width: 702rpx;
  772. background: #FFFFFF;
  773. border-radius: 10px;
  774. margin-left: 24rpx;
  775. margin-top: 20rpx;
  776. padding: 15rpx 0;
  777. }
  778. .goodscostLine{
  779. display: flex;
  780. justify-content: space-between;
  781. font-size: 28rpx;
  782. padding: 20rpx 20rpx;
  783. color: #666666;
  784. }
  785. .goodsCostNum{
  786. color: #3C3C3C;
  787. }
  788. .information{
  789. width: 702rpx;
  790. background: #FFFFFF;
  791. border-radius: 10px;
  792. margin-left: 24rpx;
  793. margin-top: 20rpx;
  794. padding: 0rpx 0 15rpx 0;
  795. }
  796. .informationLine{
  797. display: flex;font-size: 26rpx;
  798. padding: 15rpx 20rpx;
  799. }
  800. .informationTxt{
  801. width: 150rpx;
  802. color: #666666;
  803. }
  804. .informationNum{
  805. color: #333333;
  806. }
  807. .copyBtn{
  808. width: 86rpx;
  809. height: 40rpx;
  810. background: #F4F5F7;
  811. border-radius: 20rpx;
  812. font-size: 24rpx;
  813. color: #333333;
  814. text-align: center;
  815. line-height: 40rpx;
  816. margin-left: 20rpx;
  817. }
  818. .orderBottom{
  819. width: 750rpx;
  820. height: 98rpx;
  821. background: #FFFFFF;
  822. position: fixed;
  823. left: 0;
  824. bottom: 0;
  825. display: flex;
  826. justify-content: flex-end;
  827. }
  828. .cancelBtn{
  829. width: 150rpx;
  830. height: 56rpx;
  831. border-radius: 36rpx;
  832. border: 2rpx solid #DDDDDD;
  833. text-align: center;
  834. line-height: 56rpx;
  835. font-size: 28rpx;
  836. color: #3C3C3C;
  837. margin-top: 21rpx;
  838. }
  839. .payBtn{
  840. width: 150rpx;
  841. height: 56rpx;
  842. border-radius: 36rpx;
  843. border: 2rpx solid #FF4F00;
  844. text-align: center;
  845. line-height: 56rpx;
  846. font-size: 28rpx;
  847. color: #FF4F00;
  848. margin-top: 21rpx;
  849. margin-right: 16rpx;
  850. margin-left: 40rpx;
  851. }
  852. .timeBox2{
  853. width: 100vw;
  854. height: 100vh;
  855. background: rgba(0,0,0,0.5);
  856. position: fixed;
  857. top: 0;
  858. left: 0;
  859. }
  860. .timeLeftActive{
  861. background: #FFFFFF;
  862. }
  863. .timeMain{
  864. width: 100vw;
  865. height: 70vh;
  866. margin-top: 30vh;
  867. background: #FFFFFF;
  868. border-radius: 24rpx 24rpx 0px 0px;
  869. }
  870. .timesfNo{
  871. background: #F5F5F5;
  872. }
  873. .timesfActive{
  874. background: #FF4F00;
  875. }
  876. .timesfActive .timeSfNum{
  877. color: #FFFFFF;
  878. }
  879. .timesfActive .timeyy{
  880. color: #FFFFFF;
  881. }
  882. .topBox{
  883. padding: 20rpx 24rpx;
  884. }
  885. .timeTop{
  886. display: flex;
  887. line-height: 90rpx;
  888. padding-left: 24rpx;
  889. padding-right: 24rpx;
  890. justify-content: space-between;
  891. }
  892. .timeTopTitle{
  893. font-size: 30rpx;
  894. font-family: PingFangSC-Medium, PingFang SC;
  895. font-weight: 600;
  896. color: #3C3C3C;
  897. }
  898. .close{
  899. color: #999999;font-size: 30rpx;
  900. padding-left: 30rpx;
  901. }
  902. .timeCont{
  903. height: calc(70vh - 210rpx);
  904. }
  905. .timeSv{
  906. height: calc(70vh - 210rpx);
  907. }
  908. .timeLeft2{
  909. width: 162rpx;
  910. background: #F4F5F7;
  911. border-top: 1px soid #F4F5F7;
  912. border-right:1px soid #F4F5F7 ;
  913. }
  914. .timeRight2{
  915. width: 588rpx;
  916. }
  917. .timesf{
  918. width: 165rpx;
  919. height: 98rpx;
  920. border-radius: 7rpx;
  921. border: 2rpx solid #EEEEEE;
  922. text-align: center;
  923. margin-left: 20rpx;
  924. margin-bottom: 24rpx;
  925. }
  926. .timeBottom{
  927. width: 750rpx;
  928. height: 120rpx;
  929. background: #FFFFFF;
  930. box-shadow: 0px -2px 20rpx 0px rgba(153, 153, 153, 0.2);
  931. display: flex;
  932. align-items: center;
  933. }
  934. .timerightBox{
  935. display: flex;
  936. flex-wrap: wrap;
  937. }
  938. .timeCont{
  939. display: flex;
  940. }
  941. .timeSfNum{
  942. color: #666666;
  943. font-size: 28rpx;
  944. padding-top: 15rpx;
  945. }
  946. .timeyy{
  947. font-size: 24rpx;
  948. color: #999999;
  949. }
  950. .timecomplete{
  951. width: 690rpx;
  952. height: 74rpx;
  953. background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
  954. border-radius: 37rpx;
  955. line-height: 74rpx;
  956. text-align: center;
  957. font-size: 30rpx;
  958. color: #FFFFFF;
  959. margin-left: 30rpx;
  960. }
  961. .timeleftLine{
  962. font-size: 30rpx;
  963. color: #999999;
  964. text-align: center;
  965. padding: 28rpx 10rpx;
  966. border-bottom: 1px solid #EEEEEE;
  967. }
  968. .goIndexImg{
  969. width: 92rpx;
  970. height: 88rpx;
  971. }
  972. .maBox {
  973. display: flex;
  974. justify-content: space-between;
  975. padding: 24rpx 20rpx;
  976. }
  977. .querenMa {
  978. margin: 20rpx 0;
  979. padding-bottom: 30rpx;
  980. }
  981. .maBoximg {
  982. width: 308rpx;
  983. height: 308rpx;
  984. margin: 30rpx 197rpx;
  985. }
  986. .rightShou {
  987. display: flex;
  988. justify-content: flex-start;
  989. align-items: center;
  990. }
  991. </style>