orderDetails.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761
  1. <template>
  2. <view class="page" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
  3. <c-nav-bar title="订单详情" showIcon="true" :titleStyle="titleStyle"></c-nav-bar>
  4. <view class="content" style="background-color: #F5F8FA;">
  5. <view class="head">
  6. <text class="status" v-if="list.orderStatus=='1'">未核销</text>
  7. <text class="status" v-if="list.orderStatus=='-2'">待支付</text>
  8. <text class="status" v-if="list.orderStatus=='2'">已核销</text>
  9. <text class="status" v-if="list.orderStatus=='4'">已取消</text>
  10. <text class="status" v-if="list.orderStatus=='5'">已退款</text>
  11. <text>¥</text>
  12. <text>{{list.orderAmount}}</text>
  13. </view>
  14. <view class="ticketInfo">
  15. <view class="ticketInfo-hander">
  16. <view class="images">
  17. <image class="image" :src="list.cover" mode="aspectFill"></image>
  18. </view>
  19. <view class="" style="width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;">
  20. <view class="name">
  21. {{list.homestayName}}
  22. </view>
  23. <view class="date">
  24. <text>{{list.comboName}}</text>
  25. </view>
  26. </view>
  27. </view>
  28. <view class="ticketInfo-demo">
  29. <u-row customStyle="margin-bottom: 10px">
  30. <u-col span="3">
  31. <view class="demo-layout bg-purple">
  32. 套餐说明
  33. </view>
  34. </u-col>
  35. <u-col span="9">
  36. <view class="demo-layout bg-purple-light">
  37. {{list.comboExplain}}
  38. </view>
  39. </u-col>
  40. </u-row>
  41. </view>
  42. </view>
  43. <!-- 订单信息 -->
  44. <view class="orderInfo">
  45. <view class="tit">订单信息</view>
  46. <u-cell :border="false">
  47. <text slot="icon" class="txt">订单编号</text>
  48. >
  49. <text slot="title" class="val">{{list.orderCode}}</text>
  50. <text slot="right-icon" class="icon"
  51. style="border: 1rpx solid #1372FF; border-radius: 50rpx; box-sizing: border-box; color: #1372FF;padding: 2rpx 10rpx; font-size: 22rpx; font-weight: Regular;"
  52. @tap="copyOrderNo(list)">复制</text>
  53. </u-cell>
  54. <u-cell :border="false">
  55. <text slot="icon" class="txt">关联房间</text>
  56. >
  57. <text slot="title" class="val">{{list.roomNumber==null?'暂无':list.roomNumber}}</text>
  58. </u-cell>
  59. <u-cell :border="false">
  60. <text slot="icon" class="txt">预约时间</text>
  61. >
  62. <text slot="title" class="val">{{list.repastTime}}</text>
  63. </u-cell>
  64. <u-cell :border="false" v-if="list.orderStatus==2">
  65. <text slot="icon" class="txt">核销时间</text>
  66. >
  67. <text slot="title" class="val">{{list.checkinTime}}</text>
  68. </u-cell>
  69. <u-cell :border="false">
  70. <text slot="icon" class="txt">预约人姓名</text>
  71. >
  72. <text slot="title" class="val">{{list.guestName}}</text>
  73. </u-cell>
  74. <u-cell :border="false">
  75. <text slot="icon" class="txt">预约手机号</text>
  76. >
  77. <text slot="title" class="val">{{list.guestPhoneCopy}}</text>
  78. <image style="width: 48rpx;height: 48rpx;" slot="right-icon" src="https://fsy.shengsi.gov.cn/file/20240605/20affd94bb514035b654823fefcaba2e.png" @click="callPhone(list.guestPhone)"></image>
  79. </u-cell>
  80. <u-cell :border="false" v-if="list.comboType==2">
  81. <text slot="icon" class="txt">就餐份数</text>
  82. >
  83. <text slot="title" class="val">{{list.num}}</text>
  84. </u-cell>
  85. <u-cell :border="false" v-if="list.comboType==1">
  86. <text slot="icon" class="txt">成人人数</text>
  87. >
  88. <text slot="title" class="val">{{list.num}}</text>
  89. </u-cell>
  90. <u-cell :border="false" v-if="list.comboType==1">
  91. <text slot="icon" class="txt">儿童人数</text>
  92. >
  93. <text slot="title" class="val">{{list.repastNum}}</text>
  94. </u-cell>
  95. <u-cell :border="false">
  96. <text slot="icon" class="txt">备注</text>
  97. >
  98. <text slot="title" class="val">{{list.remarks==null?'':list.remarks}}</text>
  99. </u-cell>
  100. <u-cell :border="false">
  101. <text slot="icon" class="txt">合计金额</text>
  102. >
  103. <text slot="title" class="val">{{list.orderAmount}}</text>
  104. </u-cell>
  105. </view>
  106. </view>
  107. <view class="btns">
  108. <template v-if="list.orderStatus==1&&isDel!=0">
  109. <view class="" @click="toStatus0(list)"
  110. style="color:#fff ; border-color: #1372FF; background-color: #1372FF; width: 100%;">
  111. 确定核销
  112. </view>
  113. </template>
  114. <!-- <template v-if="list.orderStatus==-2||list.orderStatus==5||list.orderStatus==4">
  115. <view class="" style="color:#fff ; border-color: #1372FF; background-color: #1372FF; width: 100%;"
  116. @click="applyAfterSales(list)">
  117. 删除订单
  118. </view>
  119. </template> -->
  120. </view>
  121. <u-toast ref="uToast"></u-toast>
  122. </view>
  123. </template>
  124. <script>
  125. export default {
  126. data() {
  127. return {
  128. titles: '订单详情',
  129. h: uni.getSystemInfoSync().windowHeight,
  130. mt: uni.getSystemInfoSync().statusBarHeight + 44,
  131. value: 1,
  132. status: 1,
  133. id: '',
  134. list: {},
  135. bedData: {},
  136. id: '',
  137. arriveTime: '',
  138. arriveTimes: '',
  139. leaveTime: '',
  140. leaveTimes: '',
  141. count: '',
  142. orderId: '',
  143. price: '',
  144. form: {
  145. initiator: 2,
  146. orderCode: '',
  147. status: ''
  148. },
  149. num: 0,
  150. checkInTimeStart: '',
  151. checkOutTime: '',
  152. checkInRooms: 0,
  153. isDel: null,
  154. }
  155. },
  156. onLoad(option) {
  157. console.log('+++++++++++', JSON.parse(option.obj));
  158. let obj = JSON.parse(option.obj)
  159. this.id = obj.orderId
  160. this.isDel = obj.isDel
  161. this.getList()
  162. },
  163. methods: {
  164. callPhone(phoneNumber){
  165. uni.makePhoneCall({
  166. phoneNumber
  167. })
  168. },
  169. copyOrderNo(no) {
  170. let that = this;
  171. // #ifdef H5
  172. this.$copyText(no).then(res => {
  173. this.$showToast('复制成功');
  174. })
  175. // #endif
  176. // #ifdef MP-WEIXIN
  177. uni.setClipboardData({
  178. data: no,
  179. success(res) {
  180. that.$showToast('复制成功');
  181. },
  182. fail(err) {
  183. that.$showToast('复制失败');
  184. }
  185. })
  186. // #endif
  187. },
  188. // 获取详情
  189. getList() {
  190. this.$api.get(`/merchant/hotel/repast/getRepastOrderInfo/${this.id}`)
  191. .then(res => {
  192. this.list = res.data.data;
  193. if(this.list.guestPhone) this.list.guestPhoneCopy = this.$aesTm.tuomin(this.list.guestPhone,2)
  194. })
  195. },
  196. // 删除
  197. applyAfterSales(item) {
  198. let ids = []
  199. ids.push(item.id)
  200. this.$api.del('/merchant/hotel/repast', ids).then(res => {
  201. console.log(res);
  202. if (res.data.code == 0) {
  203. uni.navigateTo({
  204. url: '/pagesMy/orderList/orderList'
  205. })
  206. } else this.$showToast(res.data.msg);
  207. })
  208. },
  209. toStatus0(item) {
  210. // this.$api.get('/merchant/hotel/repast/writeOffOrder/' + res.result)
  211. // .then(res => {
  212. // console.log('0000', res);
  213. // if (res.data.code == 0) {
  214. // uni.setStorageSync('list', res.data.data);
  215. // } else {
  216. // this.$showToast(res.data.msg)
  217. // }
  218. // })
  219. this.$api.get('/merchant/hotel/repast/writeOffOrder/' + item.orderCode)
  220. .then(res => {
  221. if (res.data.code == 0) {
  222. uni.navigateTo({
  223. url: '/pages/house/WriteOffResults?price=' + item.orderAmount
  224. })
  225. } else {
  226. this.$showToast(res.data.msg)
  227. }
  228. })
  229. }
  230. }
  231. }
  232. </script>
  233. <style lang="scss" scoped>
  234. .listItemed {
  235. padding: 13rpx 0;
  236. font-size: 26rpx;
  237. color: #666;
  238. align-items: center;
  239. .name {
  240. font-size: 28rpx;
  241. color: #111111;
  242. font-weight: bold;
  243. }
  244. .verityInfo {
  245. margin: 30rpx 0;
  246. line-height: 28rpx;
  247. height: 28rpx;
  248. }
  249. .top {
  250. margin-bottom: 30rpx;
  251. }
  252. .ticketType {
  253. margin-left: 20rpx;
  254. font-weight: 400;
  255. color: #94A9C8;
  256. line-height: 33rpx;
  257. height: 33rpx;
  258. font-size: 24rpx;
  259. background: #F5F8FA;
  260. border-radius: 8rpx;
  261. padding: 4rpx;
  262. }
  263. }
  264. .voucherCode_colse {
  265. padding: 20rpx;
  266. .title {
  267. height: 80rpx;
  268. font-weight: 600;
  269. font-size: 31rpx;
  270. color: #333;
  271. padding: 20rpx 30rpx;
  272. line-height: 80rpx;
  273. background: #fff;
  274. border-radius: 20rpx;
  275. }
  276. .title_info {
  277. line-height: 80rpx;
  278. font-weight: 600;
  279. font-size: 34rpx;
  280. color: #333;
  281. padding: 0 10rpx;
  282. }
  283. .codeList {
  284. // margin-top: 19rpx;
  285. padding: 20rpx;
  286. background: #fff;
  287. border-radius: 20rpx;
  288. }
  289. .listItem {
  290. display: flex;
  291. justify-content: space-between;
  292. padding: 13rpx 19rpx;
  293. flex-direction: row;
  294. font-size: 26rpx;
  295. color: #666;
  296. align-items: center;
  297. .verityInfo {
  298. margin: 30rpx 0;
  299. line-height: 28rpx;
  300. height: 28rpx;
  301. }
  302. .top {
  303. margin-bottom: 30rpx;
  304. }
  305. .ticketType {
  306. margin-left: 20rpx;
  307. font-weight: 400;
  308. color: #94A9C8;
  309. line-height: 33rpx;
  310. height: 33rpx;
  311. font-size: 24rpx;
  312. background: #F5F8FA;
  313. border-radius: 8rpx;
  314. padding: 4rpx;
  315. }
  316. }
  317. }
  318. .ci_bottom {
  319. text-align: center;
  320. width: 100%;
  321. padding: 0 24rpx 30rpx;
  322. box-sizing: border-box;
  323. font-weight: 600;
  324. font-size: 30rpx;
  325. color: #111111;
  326. // display: flex;
  327. // justify-content: space-between;
  328. }
  329. .ci_code {
  330. width: 100%;
  331. display: flex;
  332. align-items: center;
  333. justify-content: center;
  334. }
  335. .voucherCode {
  336. margin: 20rpx 23rpx 0;
  337. padding: 44rpx 24rpx 20rpx;
  338. border-radius: 20rpx;
  339. background-color: #fff;
  340. z-index: 2;
  341. .title {
  342. font-weight: 600;
  343. font-size: 34rpx;
  344. color: #333;
  345. }
  346. .orange {
  347. margin: 0 30rpx;
  348. font-weight: Regular;
  349. font-size: 24rpx;
  350. color: #AAAAAA;
  351. }
  352. }
  353. .bottom-list {
  354. display: flex;
  355. margin: 37rpx auto;
  356. justify-content: center;
  357. .image {
  358. width: 36rpx;
  359. height: 36rpx;
  360. margin: 0 8rpx;
  361. image {
  362. width: 100%;
  363. height: 100%;
  364. }
  365. }
  366. .text {
  367. font-size: 26rpx;
  368. color: #999999;
  369. font-weight: Regular;
  370. }
  371. }
  372. .minus,
  373. .plus {
  374. display: flex;
  375. align-items: center;
  376. // width: 44rpx;
  377. // height: 44rpx;
  378. // line-height: 44rpx;
  379. padding: 10rpx 10rpx;
  380. // padding-left: 8rpx;
  381. border: 1px solid #999;
  382. border-radius: 6rpx;
  383. text-align: center;
  384. }
  385. page {
  386. box-sizing: border-box;
  387. background-color: #F5F8FA;
  388. .content {
  389. position: relative;
  390. z-index: 3;
  391. padding-bottom: 160rpx;
  392. background-color: content;
  393. .hand-title {
  394. position: absolute;
  395. left: 20rpx;
  396. top: 100rpx;
  397. font-size: 24rpx;
  398. color: #fff;
  399. }
  400. }
  401. }
  402. .ticketInfo-demo {
  403. // border-bottom: 2rpx solid #EFEFEF;
  404. margin-top: 40rpx;
  405. .bg-purple {
  406. font-size: 26rpx;
  407. color: #808080;
  408. font-weight: Regular;
  409. }
  410. .bg-purple-light {
  411. font-size: 30rpx;
  412. color: #111111;
  413. font-weight: Regular;
  414. }
  415. }
  416. .two-center-two {
  417. box-sizing: border-box;
  418. .tit {
  419. font-size: 32rpx;
  420. color: #333333;
  421. margin: 20rpx 0;
  422. }
  423. .df-one {
  424. font-size: 32rpx;
  425. color: #333333;
  426. font-weight: bold;
  427. // .bg-purple-dark {
  428. // margin-left: 140rpx;
  429. // }
  430. // .demo-layout {
  431. // margin-left: 30rpx;
  432. // }
  433. }
  434. .df-two {
  435. border-bottom: 2rpx solid #EFEFEF;
  436. .bg-purple {
  437. // margin-right: 100rpx;
  438. width: 182rpx;
  439. margin-left: -13rpx;
  440. }
  441. .bg-purple-dark {
  442. // margin-left: 50rpx;
  443. }
  444. .bg-purple,
  445. .bg-purple-dark {
  446. font-size: 26rpx;
  447. color: #777777;
  448. font-weight: Regular;
  449. text-align: center;
  450. text {
  451. margin: 0 8rpx;
  452. }
  453. }
  454. .bg-purple-light {
  455. font-size: 24rpx;
  456. color: #666666;
  457. border: 1rpx solid #666666;
  458. text-align: center;
  459. border-radius: 50rpx;
  460. }
  461. }
  462. }
  463. .prices-content {
  464. margin: 24rpx 0;
  465. .txt1 {
  466. font-size: 32rpx;
  467. color: #111111;
  468. font-weight: bold;
  469. }
  470. .txt2 {
  471. margin: 12rpx 0;
  472. font-size: 26rpx;
  473. color: #777777;
  474. font-weight: Regular;
  475. }
  476. }
  477. .orderInfo {
  478. box-sizing: border-box;
  479. background-color: #fff;
  480. border-radius: 16rpx;
  481. width: 96%;
  482. margin: 0 auto 20rpx;
  483. padding: 0 0 30rpx;
  484. .tit {
  485. font-size: 32rpx;
  486. color: #333;
  487. padding-left: 30rpx;
  488. padding-top: 40rpx;
  489. font-weight: 600;
  490. margin-bottom: 20rpx;
  491. }
  492. .txt {
  493. font-size: 28rpx;
  494. color: #666;
  495. width: 140rpx;
  496. }
  497. .icon {
  498. font-size: 28rpx;
  499. color: #666;
  500. }
  501. .val {
  502. font-size: 28rpx;
  503. color: #333333;
  504. margin: 0 20rpx 0 30rpx;
  505. font-weight: Regular;
  506. }
  507. }
  508. .ticketInfo {
  509. box-sizing: border-box;
  510. width: 96%;
  511. margin: 0 auto 20rpx;
  512. padding: 44rpx 24rpx 10rpx;
  513. border-radius: 20rpx;
  514. position: relative;
  515. background-color: #fff;
  516. z-index: 2;
  517. .ticketInfo-hander {
  518. display: flex;
  519. .images {
  520. width: 136rpx;
  521. height: 136rpx;
  522. border-radius: 12rpx;
  523. margin-right: 20rpx;
  524. .image {
  525. border-radius: 12rpx;
  526. // width: 100%;
  527. // height: 100%;
  528. width: 136rpx;
  529. height: 136rpx;
  530. }
  531. }
  532. }
  533. .name {
  534. font-size: 32rpx;
  535. color: #333;
  536. font-weight: bold;
  537. width: 100%;
  538. }
  539. .date {
  540. // padding: 20rpx 0 32rpx;
  541. padding-top: 30rpx;
  542. font-size: 28rpx;
  543. color: #666666;
  544. font-weight: Regular;
  545. }
  546. .topHead {
  547. width: 96%;
  548. margin: 0 auto;
  549. background-color: #F5F8FA;
  550. padding: 28rpx 0 28rpx 84rpx;
  551. border-radius: 16rpx;
  552. position: relative;
  553. text {
  554. position: absolute;
  555. left: 0;
  556. top: 0;
  557. z-index: 1;
  558. border-radius: 16rpx 0 0 16rpx;
  559. width: 48rpx;
  560. color: #fff;
  561. font-size: 20rpx;
  562. background-color: #484F61;
  563. text-align: center;
  564. height: 100%;
  565. padding: 15rpx 10rpx 0;
  566. }
  567. .p {
  568. font-size: 28rpx;
  569. color: #333;
  570. &:nth-of-type(1) {
  571. font-weight: 600;
  572. margin-bottom: 16rpx;
  573. }
  574. }
  575. }
  576. .code {
  577. margin-top: 40rpx;
  578. text-align: center;
  579. position: relative;
  580. .cover,
  581. .sx {
  582. position: absolute;
  583. background-color: rgba(255, 255, 255, 0.5);
  584. width: 340rpx;
  585. height: 340rpx;
  586. top: 66rpx;
  587. left: 50%;
  588. transform: translate(-50%, 0);
  589. }
  590. .sx {
  591. width: 120rpx;
  592. height: 120rpx;
  593. top: 150rpx;
  594. background: transparent;
  595. }
  596. .txt {
  597. font-size: 28rpx;
  598. }
  599. image {
  600. width: 340rpx;
  601. height: 340rpx;
  602. margin: 30rpx 0;
  603. }
  604. }
  605. }
  606. .head {
  607. box-sizing: border-box;
  608. padding: 34rpx 24rpx 60rpx;
  609. display: flex;
  610. position: relative;
  611. z-index: 2;
  612. text {
  613. color: #111111;
  614. &:nth-child(1),
  615. &:nth-child(3) {
  616. font-size: 44rpx;
  617. }
  618. &:nth-child(2) {
  619. flex: 1;
  620. text-align: right;
  621. width: 100px;
  622. font-size: 36rpx;
  623. }
  624. }
  625. }
  626. .btns {
  627. box-sizing: border-box;
  628. width: 100%;
  629. position: fixed;
  630. bottom: 0;
  631. z-index: 4;
  632. left: 0;
  633. display: flex;
  634. padding: 32rpx 32rpx 50rpx;
  635. background-color: #fff;
  636. gap: 0 20rpx;
  637. box-shadow: 0 -8rpx 16rpx rgba(0, 0, 0, 0.06);
  638. &>view {
  639. width: calc(50% - 15rpx);
  640. height: 80rpx;
  641. border-radius: 46rpx;
  642. // border: 1rpx solid #999999;
  643. line-height: 80rpx;
  644. text-align: center;
  645. font-size: 28rpx;
  646. font-family: PingFangSC-Regular, PingFang SC;
  647. font-weight: Bold;
  648. color: #111111;
  649. background-color: #F6F6F6;
  650. }
  651. }
  652. </style>