customBundleDetail.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670
  1. <template>
  2. <view class="content">
  3. <view class="header">
  4. <view class="header-row">
  5. <text>单据信息</text>
  6. </view>
  7. <view class="header-row r2">
  8. <view><text>购买日期:</text>{{panelData.orderDate}}</view>
  9. <view><text>使用门店:</text>{{panelData.useStoreName}}</view>
  10. </view>
  11. <view class="header-row r2">
  12. <view><text>客户名称:</text>{{panelData.orderBundle.customName||'--'}}</view>
  13. <view><text>手机号:</text>{{panelData.orderBundle.customMobile}}</view>
  14. </view>
  15. <view class="header-row">
  16. <view><text>套餐名称:</text>{{panelData.orderBundle.bundleName}}</view>
  17. </view>
  18. <view class="header-row r2">
  19. <view><text>套餐价格:</text>¥{{panelData.orderBundle.bundlePrice}}</view>
  20. </view>
  21. <view class="header-row">
  22. <view>
  23. <text>优惠金额:</text>
  24. ¥{{panelData.orderBundle.couponAmount+(panelData.orderBundle.ticketCouponAmount?panelData.orderBundle.ticketCouponAmount:0)}}
  25. <text class="couponText" v-if="panelData.orderBundle.couponAmount || panelData.orderBundle.ticketCouponAmount">
  26. (其中:
  27. <text class="couponText" v-if="usedCouponList.length" v-for="(item,index) in usedCouponList" :key="index">【{{item.title}}】使用 {{item.usedCount}}张,</text>
  28. <text class="couponText">【员工自主优惠】{{panelData.orderBundle.couponAmount}}元) </text>
  29. </text>
  30. </view>
  31. </view>
  32. <v-select ref="payType" v-show="false" :code="'PAY_PROCUCT_TYPE'"></v-select>
  33. <view class="header-row r2">
  34. <view><text>实际收款:</text>¥{{panelData.orderBundle.totalAmount}}</view>
  35. <view><text>支付方式:</text>{{filterpayType(panelData.orderBundle.payType)}}</view>
  36. </view>
  37. <view class="header-row r2">
  38. <view><text>销售渠道:</text>{{panelData.orderBundle.sellChannel}}</view>
  39. <view><text>销售人员:</text>{{panelData.orderBundle.sellerName}}</view>
  40. </view>
  41. <view class="header-row">
  42. <view><text>销售门店:</text>{{panelData.orderBundle.storeName}}</view>
  43. </view>
  44. <view class="header-row">
  45. <view><text>工单号:</text>{{panelData.orderBundle.number}}</view>
  46. </view>
  47. <view class="header-row">
  48. <view><text>创建渠道:</text>{{panelData.orderBundle.createChannel||'--'}}</view>
  49. </view>
  50. </view>
  51. <view class="tabs">
  52. <view class="need-treament" @click="cur = 0" :class="{ active: cur == 0 }">套餐内容</view>
  53. <view class="pay-close" @click="cur = 1" :class="{ active: cur == 1 }">使用记录</view>
  54. </view>
  55. <view class="cont-list" v-show="cur == 0">
  56. <view class="check-order-list" v-for="item in itemData" :key="item.id">
  57. <view class="check-row">
  58. <view>{{item.name}}</view>
  59. <view>
  60. 剩余:{{item.amount}}
  61. </view>
  62. </view>
  63. </view>
  64. <view v-if="itemData.length==0">
  65. <view class="noDate">暂无数据</view>
  66. </view>
  67. </view>
  68. <view class="cont-list" v-show="cur == 1">
  69. <view
  70. class="check-order-list"
  71. v-for="item in useHistoryData"
  72. :key="item.id"
  73. >
  74. <view class="check-row" >
  75. <view>{{item.startDate}}</view>
  76. <view>
  77. {{item.vehicleNumber}}
  78. </view>
  79. </view>
  80. <view class="check-row" >
  81. <view >
  82. {{item.name}}
  83. </view>
  84. <view>
  85. 使用:{{item.useNum}}
  86. </view>
  87. </view>
  88. <view class="check-row" >
  89. <view class="flex flex_column justify_center">
  90. <view >
  91. 服务门店:{{item.companyName}}
  92. </view>
  93. </view>
  94. </view>
  95. <view class="check-row" >
  96. <view class="flex flex_column justify_center">
  97. <view>
  98. 工单:{{item.number}}
  99. </view>
  100. </view>
  101. </view>
  102. </view>
  103. <view v-if="useHistoryData.length==0">
  104. <view class="noDate">暂无数据</view>
  105. </view>
  106. </view>
  107. <view class="footer flex align_center" v-show="showCancelBuy && (panelData.orderBundle.refundStatus==undefined || panelData.orderBundle.refundStatus == 1)">
  108. <u-button v-if="panelData.orderBundle.orderStatus=='PAED'" @click="cancelBuy()" size="medium" type="primary">取消购买</u-button>
  109. </view>
  110. </view>
  111. </template>
  112. <script>
  113. import _ from 'lodash'
  114. import vSelect from '@/components/select/v-select.vue'
  115. import { customerBundleDetail, customerBundleUseHistory, cancelBuy } from '@/api/customerBundle'
  116. export default {
  117. components: {
  118. vSelect,
  119. },
  120. data() {
  121. return {
  122. payTypeList: [], // 付款方式
  123. usedCouponList: [], // 已使用优惠券列表
  124. cur: 0,
  125. id: '',
  126. panelData: {
  127. orderBundle: {}
  128. },
  129. showCancelBuy: false,
  130. storeList: [],
  131. itemData: [],
  132. useHistoryData: []
  133. };
  134. },
  135. onLoad(opts) {
  136. console.log(opts);
  137. this.id = opts.id;
  138. this.getCustomerBundleDetail();
  139. this.getCustomerBundleHistory();
  140. this.payTypeList = this.$store.state.vuex_paymentTypeList
  141. },
  142. methods: {
  143. filterpayType (val) {
  144. let dataList = this.payTypeList
  145. let _value = ''
  146. for (let i = 0; i < dataList.length; i++) {
  147. if (val == dataList[i].code) {
  148. _value = dataList[i].dispName
  149. break
  150. }
  151. }
  152. return _value
  153. },
  154. message(title){
  155. uni.showToast({
  156. icon:'none',
  157. title: title
  158. })
  159. },
  160. // 获取套餐信息
  161. getCustomerBundleDetail (){
  162. let _this = this
  163. customerBundleDetail({
  164. id: this.id
  165. }).then(res => {
  166. this.panelData = res.data
  167. let list = []
  168. _.forEach(res.data.customerBundleItemList, (item) => {
  169. list.push({
  170. name: item.itemName,
  171. amount: item.itemTimes + '次'
  172. })
  173. })
  174. _.forEach(res.data.customerBundlePartList, (item) => {
  175. list.push({
  176. name: item.partName,
  177. amount: item.quantity + (item.spec || '')
  178. })
  179. })
  180. this.itemData = list
  181. })
  182. },
  183. // 获取套餐使用记录
  184. getCustomerBundleHistory(){
  185. customerBundleUseHistory({
  186. id: this.id
  187. }).then(res => {
  188. let list = []
  189. if (res.data){
  190. _.forEach(res.data.orderItemList, (item) => {
  191. if (_.has(item, 'order')) {
  192. list.push({
  193. ...item.order,
  194. name: item.itemName,
  195. companyName: item.storeName,
  196. useNum: item.itemTimes + '次'
  197. })
  198. }
  199. })
  200. _.forEach(res.data.orderPartList, (item) => {
  201. if (_.has(item, 'order')) {
  202. list.push({
  203. ...item.order,
  204. name: item.partName,
  205. companyName: item.storeName,
  206. useNum: item.quantity + (item.spec || '')
  207. })
  208. }
  209. })
  210. }
  211. this.useHistoryData = list
  212. this.showCancelBuy = list.length == 0
  213. })
  214. },
  215. // 取消购买
  216. cancelBuy () {
  217. let _this = this
  218. clzConfirm({
  219. title: '提示',
  220. content: '取消购买套餐后,该套餐将无法再使用。确认取消购买吗?',
  221. success: function (res) {
  222. if (res.confirm||res.index==0) {
  223. cancelBuy({
  224. id: _this.id
  225. }).then(res => {
  226. console.log(res)
  227. if (res.status == 200) {
  228. uni.$emit('refreshBundle',{msg:'页面更新'})
  229. _this.message('取消购买成功')
  230. uni.navigateBack()
  231. } else {
  232. _this.message(res.message)
  233. }
  234. })
  235. } else if (res.cancel) {
  236. console.log('用户点击取消');
  237. }
  238. }
  239. })
  240. }
  241. },
  242. onShareAppMessage() {}
  243. };
  244. </script>
  245. <style lang="scss">
  246. page{
  247. height: 100%;
  248. }
  249. .content {
  250. padding: 0;
  251. display: flex;
  252. flex-direction: column;
  253. height: 100%;
  254. }
  255. .cont-list{
  256. // padding: 0upx 20upx;
  257. flex: 1;
  258. overflow-y: scroll;
  259. > view{
  260. &:last-child{
  261. border: 0;
  262. }
  263. }
  264. .check-order-list{
  265. background: #ffffff;
  266. padding: 10upx 20upx;
  267. margin: 15upx 25upx;
  268. border-radius: 6upx;
  269. box-shadow: 1px 1px 3px #EEEEEE;
  270. .check-row{
  271. display: flex;
  272. align-items: center;
  273. padding: 15upx 10upx;
  274. font-size: 30upx;
  275. word-break: break-all;
  276. &:first-child{
  277. color: #666;
  278. }
  279. > view{
  280. &:first-child{
  281. flex-grow: 1;
  282. width: 60%;
  283. }
  284. }
  285. .action{
  286. margin: 0 6rpx;
  287. padding: 0 20rpx;
  288. color: #fff;
  289. }
  290. .edit{
  291. background-color: #f9ba09;
  292. }
  293. .view{
  294. background-color: #ff7801;
  295. }
  296. .del{
  297. background-color: #f72525;
  298. }
  299. .finish{
  300. background-color: #2d8cf0;
  301. }
  302. .pay{
  303. background-color: #10c71e;
  304. }
  305. .check-btns{
  306. width: '50%';
  307. display: flex;
  308. align-items: center;
  309. justify-content: flex-end;
  310. > view{
  311. margin-left: 35upx;
  312. font-size: 28upx;
  313. }
  314. }
  315. .u-tag{
  316. border-radius: 0;
  317. }
  318. .uni-icons{
  319. margin: 0 5upx;
  320. }
  321. }
  322. }
  323. }
  324. .footer{
  325. padding: 20upx;
  326. }
  327. .noDate {
  328. font-size: 32rpx;
  329. color: #999;
  330. text-align: center;
  331. padding: 60rpx 0;
  332. }
  333. .header {
  334. position: relative;
  335. background: #FFFFFF;
  336. padding: 10upx 20upx;
  337. font-size: 30upx;
  338. }
  339. .header-row{
  340. display: flex;
  341. align-items: center;
  342. padding: 10upx 0;
  343. color: #666666;
  344. .couponText{
  345. font-size: 28rpx;
  346. color: #666;
  347. }
  348. &:first-child{
  349. font-size: 32upx;
  350. color: #333333;
  351. }
  352. > view{
  353. &:first-child{
  354. margin-left: 20upx;
  355. }
  356. text{
  357. color: #333333;
  358. }
  359. }
  360. }
  361. .header-row.r3{
  362. > view{
  363. width: 33%;
  364. }
  365. }
  366. .header-row.r2{
  367. > view{
  368. width: 50%;
  369. }
  370. }
  371. .img-box > image {
  372. width: 25%;
  373. height: 160rpx;
  374. float: left;
  375. padding: 20rpx;
  376. }
  377. .carImage {
  378. width: 104rpx;
  379. height: 104rpx;
  380. text-align: center;
  381. padding: 15rpx;
  382. }
  383. .little-img {
  384. width: 104rpx;
  385. height: 104rpx;
  386. }
  387. .text {
  388. font-size: 36rpx;
  389. }
  390. .text1 {
  391. color: rab(40, 40, 40);
  392. font-size: 30rpx;
  393. }
  394. .tabs {
  395. width: 100%;
  396. background: #fff;
  397. margin: 20rpx auto 0 auto;
  398. border-radius: 10rpx;
  399. }
  400. .need-treament,
  401. .pay-close,
  402. .good-condition {
  403. font-size: 28rpx;
  404. color: rgb(74, 74, 74);
  405. display: inline-block;
  406. text-align: center;
  407. padding: 20rpx 0;
  408. width: 25%;
  409. }
  410. .need-treament-tab1 {
  411. margin: 20rpx auto 0 auto;
  412. background: #fff;
  413. display: flex;
  414. border-bottom: 1rpx solid rgb(228, 228, 228);
  415. width: 100%;
  416. align-items: center;
  417. }
  418. .oil {
  419. flex-grow: 1;
  420. padding: 0 16rpx;
  421. font-size: 30rpx;
  422. display: flex;
  423. align-items: center;
  424. }
  425. .jiyou {
  426. width: 44rpx;
  427. height: 44rpx;
  428. margin-right: 16rpx;
  429. }
  430. .zhang {
  431. width: 20%;
  432. }
  433. .zhang-logo {
  434. height: 72rpx;
  435. width: 110rpx;
  436. display: inline-block;
  437. }
  438. .intruce {
  439. font-size: 36rpx;
  440. display: inline-block;
  441. margin: 36rpx 0 0 -60rpx;
  442. width: 14%;
  443. text-align: center;
  444. }
  445. .list {
  446. width: 80%;
  447. }
  448. .matter {
  449. background: #fff;
  450. border-bottom: 1rpx dashed rgb(228, 228, 227);
  451. display: flex;
  452. padding: 30rpx;
  453. }
  454. .matter .red {
  455. background: #f2711c;
  456. }
  457. .matter .blue {
  458. background: #07cc04;
  459. }
  460. .matter .green {
  461. background: #239ff2;
  462. }
  463. .problem {
  464. font-size: 24rpx;
  465. background: #fefefe;
  466. width: 90rpx;
  467. text-align: center;
  468. border-radius: 10rpx;
  469. padding: 6rpx;
  470. color: #fff;
  471. }
  472. .num-left {
  473. width: 20%;
  474. }
  475. .num-right {
  476. width: 80%;
  477. color: rgb(74, 74, 74);
  478. padding-top: 6rpx;
  479. }
  480. .num-right > view {
  481. display: flex;
  482. align-items: center;
  483. font-size: 24rpx;
  484. margin-bottom: 20rpx;
  485. }
  486. .num-right > view:last-child {
  487. margin-bottom: 0;
  488. }
  489. .num-right .uni-badge {
  490. margin: 0 10rpx;
  491. }
  492. .number {
  493. font-size: 26rpx;
  494. background: #ccc;
  495. border-radius: 50rpx;
  496. text-align: center;
  497. width: 40rpx;
  498. height: 40rpx;
  499. display: inline-block;
  500. margin: 0 8rpx 0 0;
  501. }
  502. .num-list {
  503. font-size: 30rpx;
  504. display: inline-block;
  505. color: rgb(74, 74, 74);
  506. }
  507. .cle {
  508. clear: both;
  509. }
  510. .instructions-box {
  511. width: 100%;
  512. background: #fff;
  513. margin: 0 auto;
  514. }
  515. .instructions {
  516. width: 16%;
  517. font-size: 24rpx;
  518. background: rgb(252, 232, 41);
  519. width: 90rpx;
  520. text-align: center;
  521. border-radius: 10rpx;
  522. color: rgb(74, 74, 74);
  523. padding: 6rpx;
  524. }
  525. .elaborate {
  526. width: 76%;
  527. font-size: 24rpx;
  528. color: rgb(74, 74, 74);
  529. float: right;
  530. margin: -50rpx 0 30rpx 0;
  531. }
  532. .int {
  533. padding: 30rpx 0 0 30rpx;
  534. }
  535. .del {
  536. clear: both;
  537. }
  538. .illustrations {
  539. width: 100%;
  540. margin: 0 auto;
  541. }
  542. .banner {
  543. width: 100%;
  544. height: 150rpx;
  545. }
  546. .horn {
  547. width: 96%;
  548. background: #ffffff;
  549. margin: 10rpx auto 0 auto;
  550. border-bottom: 1rpx solid rgb(228, 228, 227);
  551. }
  552. .laba {
  553. width: 44rpx;
  554. height: 44rpx;
  555. margin: 20rpx 0 10rpx 20rpx;
  556. }
  557. .uni-collapse-cell__title-text {
  558. font-size: 24rpx !important;
  559. }
  560. .right-text {
  561. font-size: 24rpx;
  562. }
  563. .video-box {
  564. padding: 20rpx;
  565. text-align: center;
  566. }
  567. .horn-text {
  568. font-size: 36rpx;
  569. float: right;
  570. margin: -64rpx 550rpx 0 0;
  571. }
  572. .instructions-box4 {
  573. width: 96%;
  574. background: #fff;
  575. margin: 30rpx auto 0 auto;
  576. border-bottom: 1rpx dashed rgb(228, 228, 227);
  577. }
  578. .condition {
  579. background: #fff;
  580. margin: 30rpx auto 0 auto;
  581. }
  582. .dianchi-img {
  583. width: 60rpx;
  584. height: 60rpx;
  585. background: #aaff7f;
  586. border-radius: 100%;
  587. padding: 20rpx;
  588. }
  589. .battery-box {
  590. width: 100%;
  591. padding-bottom: 20rpx;
  592. }
  593. .bateery {
  594. font-size: 26rpx;
  595. padding: 10rpx 0;
  596. }
  597. .condit-title {
  598. font-size: 30rpx;
  599. color: rgb(40, 40, 40);
  600. border-bottom: 1rpx solid rgb(228, 228, 227);
  601. padding: 20rpx 0 20rpx 20rpx;
  602. }
  603. .lis-img {
  604. display: inline-block;
  605. width: 25%;
  606. text-align: center;
  607. margin: 30rpx 0 0 0;
  608. color: rgb(74, 74, 74);
  609. }
  610. .note {
  611. padding: 30rpx;
  612. font-size: 26rpx;
  613. color: rgb(74, 74, 74);
  614. }
  615. .note-text {
  616. padding: 20rpx 0 0 0;
  617. line-height: 45rpx;
  618. color: #666;
  619. }
  620. .disclaimer {
  621. padding: 30rpx;
  622. font-size: 26rpx;
  623. color: rgb(74, 74, 74);
  624. }
  625. .disclaimer > view {
  626. margin-bottom: 20rpx;
  627. line-height: 45rpx;
  628. }
  629. .active {
  630. border-bottom: 6rpx solid rgb(85, 170, 255);
  631. color: #009AE1;
  632. }
  633. .uni-badge {
  634. margin: 8rpx 16rpx 0 16rpx;
  635. }
  636. </style>