customBundleDetail.vue 13 KB

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