historyDetail.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861
  1. <template>
  2. <view class="box">
  3. <view class="top" :style="{background:'#'+themeColor}">
  4. <view class="orderState">
  5. <image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
  6. <view class="SheetState" v-if="orderData.billsheet.PayState==2">已结算</view>
  7. <view class="SheetState" v-if="orderData.billsheet.PayState==0">未结算</view>
  8. </view>
  9. </view>
  10. <!-- 店铺信息 -->
  11. <view class="shopBox">
  12. <image src="../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
  13. <view class="shopCont">
  14. <view class="shopName">{{orderData.billsheet.ShopName}}</view>
  15. <view class="Address">{{orderData.billsheet.Address}}</view>
  16. </view>
  17. <view class="shopRightBox" @click="map">
  18. <image src="../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image>
  19. <view class="shopRihgtTxt">地图</view>
  20. </view>
  21. <view class="shopsx"></view>
  22. <view class="shopRightBox" @click="call">
  23. <image src="../../static/img/icon_phone.png" mode="" class="shopRightImg"></image>
  24. <view class="shopRihgtTxt">电话</view>
  25. </view>
  26. </view>
  27. <!-- 订单信息 -->
  28. <view class="information">
  29. <view class="carMes">
  30. <view class="plate">{{orderData.billsheet.PlateNumber}}</view>
  31. <view class="mileage" v-if="orderData.billsheet.CurrentMileage>0">{{orderData.billsheet.CurrentMileage}}km</view>
  32. </view>
  33. <view class="informationLine">
  34. <view class="informationTxt">姓名:</view>
  35. <view class="informationNum">{{orderData.billsheet.CustomerName}}</view>
  36. </view>
  37. <view class="informationLine">
  38. <view class="informationTxt">手机号:</view>
  39. <view class="informationNum">{{orderData.billsheet.MobilePhone}}</view>
  40. </view>
  41. <view class="informationLine">
  42. <view class="informationTxt">单号:</view>
  43. <view class="informationNum">{{orderData.billsheet.Code}}</view>
  44. </view>
  45. <view class="informationLine">
  46. <view class="informationTxt">接车时间:</view>
  47. <view class="informationNum">{{orderData.billsheet.time}}</view>
  48. </view>
  49. <view class="informationLine">
  50. <view class="informationTxt">服务顾问:</view>
  51. <view class="informationNum">{{orderData.billsheet.PickName}}</view>
  52. </view>
  53. </view>
  54. <!-- 项目明细 -->
  55. <view class="detailedBox itemBox" v-if=" orderData.listItems.length!=0">
  56. <view class="detailedTitle">项目</view>
  57. <view class="detailedLineBox">
  58. <view class="detailedLine" v-for="(item,index) in orderData.listItems">
  59. <view class="detailedName">{{item.ItemName}}</view>
  60. <span>x1</span>
  61. </view>
  62. </view>
  63. </view>
  64. <!-- 商品明细-->
  65. <view class="detailedBox itemBox" v-if="orderData.listParts.length!=0">
  66. <view class="detailedTitle">商品</view>
  67. <view class="detailedLineBox">
  68. <view class="detailedLine" v-for="(item,index) in orderData.listParts">
  69. <view class="detailedName">{{item.GoodsName}}</view>
  70. <span>x{{item.SaleQty}}</span>
  71. </view>
  72. </view>
  73. </view>
  74. <!-- 手机号授权 -->
  75. <view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
  76. <view class="authorizCont" @click.stop="">
  77. <view class="authorizName">{{wxOpenData.miniAppName}}</view>
  78. <view class="authorizMs">您好,欢迎访问本店,授权手机号登录能获取我们最新的促销活动哦~</view>
  79. <button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
  80. </view>
  81. <view style="text-align: center;padding-top: 56rpx;">
  82. <image src="../../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
  83. </view>
  84. </view>
  85. <view class="bottom">
  86. <view v-if="orderData.billsheet.EvaluateState == 0" @click.stop="goAppraise()" class="ping">评价</view>
  87. <view v-else @click.stop="goAppraiseDetail()" class="kan">查看评价</view>
  88. </view>
  89. </view>
  90. </template>
  91. <script>
  92. export default {
  93. data() {
  94. return {
  95. location: '',
  96. id: '',
  97. orderData: '',
  98. themeColor:'',
  99. authorizShow:false,
  100. userInfo:'',
  101. ext:'',
  102. wxOpenData:'',
  103. }
  104. },
  105. onLoad(opt) {
  106. this.id = opt.id
  107. this.themeColor = uni.getStorageSync("themeColor");
  108. this.userInfo=this.$store.state.userInfo;
  109. this.ext=this.$common.getExtStoreId();
  110. if(this.userInfo){
  111. this.getData()
  112. }else{
  113. this.$common.automaticlogin().then(val => {
  114. this.userInfo=this.$store.state.userInfo;
  115. this.wxOpenData=this.$store.state.wxOpenData;
  116. this.themeColor = uni.getStorageSync("themeColor");
  117. this.getData()
  118. })
  119. }
  120. },
  121. methods: {
  122. goAppraiseDetail(item) {
  123. uni.navigateTo({
  124. url: 'myAppraiseDetail?sheetId=' + this.orderData.billsheet.id
  125. })
  126. },
  127. goAppraise(item){
  128. uni.navigateTo({
  129. url: 'appraise?sheetID=' + this.orderData.billsheet.id + '&shopID=' + this.orderData.billsheet.shopID
  130. })
  131. },
  132. decryptPhoneNumber: function(e) {
  133. console.log(e);
  134. this.code=e.detail.code
  135. this.wxPhoneLogin()
  136. this.authorizShow=false;
  137. },
  138. wxPhoneLogin(){
  139. var that=this;
  140. this.$http('miniApp2/sys/wxPhoneLogin', {
  141. appId:this.ext.appId,
  142. unionId:this.ext.unionId,
  143. code:this.code,
  144. openId:this.wxOpenData.openid
  145. },'POST').then(res => {
  146. var data = res.data;
  147. if(data.loginInfo){
  148. this.userInfo=data.loginInfo.openUser;
  149. this.wxOpenData=data.loginInfo;
  150. this.$store.commit('mutationswxOpenData', data.loginInfo)
  151. this.$store.commit('mutationsuserInfo', this.userInfo)
  152. this.getData()
  153. }
  154. })
  155. },
  156. map() {
  157. console.log("打开地图")
  158. var that = this;
  159. if (!that.orderData.billsheet.lat || !that.orderData.billsheet.lng) {
  160. uni.showToast({
  161. title: '该店铺未设置定位',
  162. icon: 'none',
  163. duration: 3000
  164. });
  165. } else {
  166. uni.openLocation({
  167. latitude: Number(that.orderData.billsheet.lat),
  168. longitude: Number(that.orderData.billsheet.lng),
  169. name: that.orderData.billsheet.ShopName,
  170. address: that.orderData.billsheet.Address,
  171. success: function() {
  172. console.log('success');
  173. },
  174. fail(err) {
  175. console.log(err)
  176. }
  177. });
  178. }
  179. },
  180. call() {
  181. uni.makePhoneCall({
  182. phoneNumber: this.orderData.billsheet.shopMobilePhone
  183. });
  184. },
  185. getData() {
  186. uni.showLoading({
  187. title: '加载中'
  188. });
  189. this.$http('openweiXinCardInfoController/queryConsumptionDetail', {
  190. // lat: this.location.lat,
  191. // lng: this.location.lng,
  192. id: this.id,
  193. }, 'POST').then(res => {
  194. uni.hideLoading();
  195. this.orderData = res.data;
  196. })
  197. },
  198. goback() {
  199. uni.navigateBack({})
  200. },
  201. },
  202. onPullDownRefresh() {
  203. this.getData()
  204. setTimeout(function() {
  205. uni.stopPullDownRefresh();
  206. }, 1000);
  207. },
  208. }
  209. </script>
  210. <style scoped>
  211. .box {
  212. min-height: 100vh;
  213. background: #F4F5F7;
  214. }
  215. .top {
  216. height: 190rpx;
  217. background: #FF0000;
  218. }
  219. .orderState {
  220. display: flex;
  221. justify-content: center;
  222. align-items: center;
  223. padding-top: 40rpx;
  224. }
  225. .SheetState {
  226. display: flex;
  227. justify-content: center;
  228. font-size: 36rpx;
  229. font-weight: 500;
  230. color: #FFFFFF;
  231. margin-left: 15rpx;
  232. }
  233. .timeEditImg {
  234. width: 25rpx;
  235. height: 25rpx;
  236. padding-left: 20rpx;
  237. }
  238. .shopBoximg {
  239. width: 40rpx;
  240. height: 40rpx;
  241. }
  242. .shopRightImg {
  243. width: 44rpx;
  244. height: 45rpx;
  245. }
  246. .shopsx {
  247. width: 1px;
  248. height: 50rpx;
  249. background: #EEEEEE;
  250. margin-top: 30rpx;
  251. margin-left: 28rpx;
  252. }
  253. .shopBox {
  254. display: flex;
  255. padding: 30rpx 20rpx;
  256. margin: 0rpx 24rpx;
  257. margin-top: -60rpx;
  258. background-color: #FFFFFF;
  259. border-radius: 10rpx;
  260. }
  261. .shopCont {
  262. width: 405rpx;
  263. padding-left: 20rpx;
  264. }
  265. .shopName {
  266. font-size: 30rpx;
  267. font-weight: bold;
  268. color: #3C3C3C;
  269. line-height: 45rpx;
  270. }
  271. .Address {
  272. color: #999999;
  273. font-size: 24rpx;
  274. margin-top: 10rpx;
  275. }
  276. .shopRihgtTxt {
  277. color: #999999;
  278. font-size: 24rpx;
  279. }
  280. .shopRightBox {
  281. padding-left: 28rpx;
  282. }
  283. .peopleCont {
  284. font-size: 28rpx;
  285. color: #3C3C3C;
  286. padding-left: 20rpx;
  287. }
  288. .people {
  289. display: flex;
  290. padding-left: 20rpx;
  291. padding-top: 30rpx;
  292. padding-bottom: 36rpx;
  293. }
  294. .PlateNumberBox {
  295. display: flex;
  296. padding-left: 20rpx;
  297. padding-bottom: 30rpx;
  298. }
  299. .PlateNumbercx {
  300. font-size: 28rpx;
  301. color: #3C3C3C;
  302. padding-left: 20rpx;
  303. }
  304. .PlateNumber {
  305. width: 130rpx;
  306. height: 32rpx;
  307. border-radius: 4rpx;
  308. border: 1px solid #F19D01;
  309. line-height: 32rpx;
  310. text-align: center;
  311. font-size: 22rpx;
  312. color: #F19D01;
  313. margin-left: 26rpx;
  314. }
  315. .PlateNumberBoxTop {
  316. display: flex;
  317. }
  318. .CarModel {
  319. font-size: 26rpx;
  320. color: #999999;
  321. padding-left: 20rpx;
  322. padding-top: 6rpx;
  323. padding-right: 20rpx;
  324. padding-bottom: 15rpx;
  325. width: 600rpx;
  326. }
  327. .detailedBox {
  328. background: #FFFFFF;
  329. border-radius: 10px;
  330. margin: 20rpx 24rpx;
  331. padding-bottom: 20rpx;
  332. }
  333. .itemBox {
  334. margin-top: 20rpx;
  335. }
  336. .carMes {
  337. padding: 23rpx 20rpx;
  338. display: flex;
  339. align-items: center;
  340. justify-content: flex-start;
  341. border-bottom: 1rpx solid #EEEEEE;
  342. }
  343. .plate {
  344. font-size: 30rpx;
  345. color: #3C3C3C;
  346. font-weight: bold;
  347. margin-right: 20rpx;
  348. }
  349. .mileage {
  350. font-size: 24rpx;
  351. color: #F19D01;
  352. padding: 0rpx 10rpx;
  353. border: 1rpx solid #F19D01;
  354. border-radius: 4rpx;
  355. height: 36rpx;
  356. }
  357. .detailedTitle {
  358. padding: 23rpx 20rpx;
  359. display: flex;
  360. text-align: center;
  361. align-content: flex-start;
  362. border-bottom: 1rpx solid #EEEEEE;
  363. font-size: 30rpx;
  364. font-weight: bold;
  365. color: #3C3C3C;
  366. }
  367. .detailedLine {
  368. display: flex;
  369. padding: 20rpx 20rpx 0rpx;
  370. justify-content: space-between;
  371. }
  372. .detailedImg {
  373. width: 120rpx;
  374. height: 120rpx;
  375. border-radius: 10rpx;
  376. }
  377. .detailedName {
  378. font-size: 26rpx;
  379. color: #3C3C3C;
  380. }
  381. span{
  382. font-size: 26rpx;
  383. color: #999999;
  384. }
  385. .goodscost {
  386. width: 702rpx;
  387. background: #FFFFFF;
  388. border-radius: 10px;
  389. margin-left: 24rpx;
  390. margin-top: 20rpx;
  391. padding: 15rpx 0;
  392. }
  393. .goodscostLine {
  394. display: flex;
  395. justify-content: space-between;
  396. font-size: 28rpx;
  397. padding: 20rpx 20rpx;
  398. color: #666666;
  399. }
  400. .goodsCostNum {
  401. color: #3C3C3C;
  402. }
  403. .information {
  404. width: 702rpx;
  405. background: #FFFFFF;
  406. border-radius: 10px;
  407. margin-left: 24rpx;
  408. margin-top: 20rpx;
  409. padding: 0rpx 0 15rpx 0;
  410. }
  411. .informationLine {
  412. display: flex;
  413. font-size: 26rpx;
  414. padding: 15rpx 20rpx;
  415. }
  416. .informationTxt {
  417. width: 190rpx;
  418. color: #999999;
  419. }
  420. .informationNum {
  421. color: #333333;
  422. }
  423. .copyBtn {
  424. width: 86rpx;
  425. height: 40rpx;
  426. background: #F4F5F7;
  427. border-radius: 20rpx;
  428. font-size: 24rpx;
  429. color: #333333;
  430. text-align: center;
  431. line-height: 40rpx;
  432. margin-left: 20rpx;
  433. }
  434. .orderBottom {
  435. width: 750rpx;
  436. height: 98rpx;
  437. background: #FFFFFF;
  438. position: fixed;
  439. left: 0;
  440. bottom: 0;
  441. display: flex;
  442. justify-content: flex-end;
  443. }
  444. .cancelBtn {
  445. width: 150rpx;
  446. height: 56rpx;
  447. border-radius: 36rpx;
  448. border: 2rpx solid #DDDDDD;
  449. text-align: center;
  450. line-height: 56rpx;
  451. font-size: 28rpx;
  452. color: #3C3C3C;
  453. margin-top: 21rpx;
  454. margin-right: 16rpx;
  455. margin-left: 20rpx;
  456. }
  457. .payBtn {
  458. width: 150rpx;
  459. height: 56rpx;
  460. border-radius: 36rpx;
  461. border: 2rpx solid #FF4F00;
  462. text-align: center;
  463. line-height: 56rpx;
  464. font-size: 28rpx;
  465. color: #FF4F00;
  466. margin-top: 21rpx;
  467. margin-right: 16rpx;
  468. margin-left: 20rpx;
  469. }
  470. .timeBox2 {
  471. width: 100vw;
  472. height: 100vh;
  473. background: rgba(0, 0, 0, 0.5);
  474. position: fixed;
  475. top: 0;
  476. left: 0;
  477. }
  478. .timeLeftActive {
  479. background: #FFFFFF;
  480. }
  481. .timeMain {
  482. width: 100vw;
  483. height: 70vh;
  484. margin-top: 30vh;
  485. background: #FFFFFF;
  486. border-radius: 24rpx 24rpx 0px 0px;
  487. }
  488. .timesfNo {
  489. background: #F5F5F5;
  490. }
  491. .timesfActive {
  492. background: #FF4F00;
  493. }
  494. .timesfActive .timeSfNum {
  495. color: #FFFFFF;
  496. }
  497. .timesfActive .timeyy {
  498. color: #FFFFFF;
  499. }
  500. .topBox {
  501. padding: 20rpx 24rpx;
  502. }
  503. .timeTop {
  504. display: flex;
  505. line-height: 90rpx;
  506. padding-left: 24rpx;
  507. padding-right: 24rpx;
  508. justify-content: space-between;
  509. }
  510. .timeTopTitle {
  511. font-size: 30rpx;
  512. font-family: PingFangSC-Medium, PingFang SC;
  513. font-weight: 600;
  514. color: #3C3C3C;
  515. }
  516. .close {
  517. color: #999999;
  518. font-size: 30rpx;
  519. padding-left: 30rpx;
  520. }
  521. .timeCont {
  522. height: calc(70vh - 210rpx);
  523. }
  524. .timeSv {
  525. height: calc(70vh - 210rpx);
  526. }
  527. .timeLeft2 {
  528. width: 162rpx;
  529. background: #F4F5F7;
  530. border-top: 1px soid #F4F5F7;
  531. border-right: 1px soid #F4F5F7;
  532. }
  533. .timeRight2 {
  534. width: 588rpx;
  535. }
  536. .timesf {
  537. width: 165rpx;
  538. height: 98rpx;
  539. border-radius: 7rpx;
  540. border: 2rpx solid #EEEEEE;
  541. text-align: center;
  542. margin-left: 20rpx;
  543. margin-bottom: 24rpx;
  544. }
  545. .timeBottom {
  546. width: 750rpx;
  547. height: 120rpx;
  548. background: #FFFFFF;
  549. box-shadow: 0px -2px 20rpx 0px rgba(153, 153, 153, 0.2);
  550. display: flex;
  551. align-items: center;
  552. }
  553. .timerightBox {
  554. display: flex;
  555. flex-wrap: wrap;
  556. }
  557. .timeCont {
  558. display: flex;
  559. }
  560. .timeSfNum {
  561. color: #666666;
  562. font-size: 28rpx;
  563. padding-top: 15rpx;
  564. }
  565. .timeyy {
  566. font-size: 24rpx;
  567. color: #999999;
  568. }
  569. .timecomplete {
  570. width: 690rpx;
  571. height: 74rpx;
  572. background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
  573. border-radius: 37rpx;
  574. line-height: 74rpx;
  575. text-align: center;
  576. font-size: 30rpx;
  577. color: #FFFFFF;
  578. margin-left: 30rpx;
  579. }
  580. .timeleftLine {
  581. font-size: 30rpx;
  582. color: #999999;
  583. text-align: center;
  584. padding: 28rpx 10rpx;
  585. border-bottom: 1px solid #EEEEEE;
  586. }
  587. .yuyueBox {
  588. background: #FFFFFF;
  589. border-radius: 10rpx;
  590. margin-left: 24rpx;
  591. margin-right: 24rpx;
  592. }
  593. .yuyueTime {
  594. display: flex;
  595. padding-left: 20rpx;
  596. padding-top: 30rpx;
  597. padding-bottom: 36rpx;
  598. align-items: center;
  599. }
  600. .yuyueState {
  601. display: flex;
  602. padding-left: 20rpx;
  603. padding-top: 30rpx;
  604. padding-bottom: 36rpx;
  605. }
  606. .maBox {
  607. display: flex;
  608. justify-content: space-between;
  609. padding: 24rpx 20rpx;
  610. }
  611. .querenMa {
  612. margin: 20rpx 0;
  613. padding-bottom: 30rpx;
  614. }
  615. .maBoximg {
  616. width: 308rpx;
  617. height: 308rpx;
  618. margin: 30rpx 197rpx;
  619. }
  620. .rightShou {
  621. display: flex;
  622. justify-content: flex-start;
  623. align-items: center;
  624. }
  625. .authorizBox{
  626. width: 100vw;
  627. height: 100vh;
  628. background: rgba(0, 0, 0, 0.5);
  629. position: fixed;
  630. top: 0;
  631. left: 0;
  632. }
  633. .authorizCont{
  634. margin-top: 30vh;
  635. width: 564rpx;
  636. height: 408rpx;
  637. background: #FFFFFF;
  638. border-radius: 24rpx;
  639. margin-left: 93rpx;
  640. position: relative;
  641. }
  642. .authorizCloseImg{
  643. width: 62rpx;
  644. height: 62rpx;
  645. }
  646. .sqLogoBox{
  647. width: 180rpx;
  648. height: 180rpx;
  649. background: #FFFFFF;
  650. border-radius: 90rpx;
  651. text-align: center;
  652. position: absolute;
  653. top: -50rpx;
  654. left: 192rpx;
  655. }
  656. .authorizName{
  657. color: #333333;
  658. line-height: 42rpx;
  659. font-size: 30rpx;
  660. text-align: center;
  661. padding-top: 58rpx;
  662. }
  663. .authorizMs{
  664. color: #999999;
  665. line-height: 36rpx;
  666. font-size: 26rpx;
  667. width: 452rpx;
  668. padding-top: 24rpx;
  669. text-align: center;
  670. margin-left: 56rpx;
  671. }
  672. .authorizContbutton{
  673. width: 422rpx;
  674. height: 88rpx;
  675. background: #D53533;
  676. border-radius: 44rpx;
  677. line-height: 88rpx;
  678. text-align: center;
  679. font-size:30rpx;
  680. color: #FFFFFF;
  681. margin-top: 62rpx;
  682. margin-left:71rpx;
  683. }
  684. .bottom{
  685. position: absolute;
  686. width: 750rpx;
  687. padding: 20rpx 24rpx;
  688. padding-bottom: constant(safe-area-inset-bottom);
  689. padding-bottom: env(safe-area-inset-bottom);
  690. right: 0;
  691. bottom: 0;
  692. background: #ffffff;
  693. border-radius: 24rpx 24rpx 0px 0px;
  694. display: flex;
  695. justify-content: flex-end;
  696. }
  697. .ping{
  698. text-align: center;
  699. color: #FF4F00;
  700. width: 150rpx;
  701. height: 56rpx;
  702. line-height: 56rpx;
  703. border-radius: 36rpx;
  704. border: 2rpx solid #FF4F00;
  705. }
  706. .kan{
  707. text-align: center;
  708. color: #3C3C3C;
  709. width: 150rpx;
  710. height: 56rpx;
  711. line-height: 56rpx;
  712. border-radius: 36rpx;
  713. border: 2rpx solid #DDDDDD;
  714. }
  715. </style>