customBundleDetail.vue 11 KB

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