index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510
  1. <template>
  2. <div class="order-detail-container">
  3. <div class="order-detail-panel page--loading" :class="{'page--finished': finished }">
  4. <div class="order-status">
  5. <h3 class="title">{{getTitle}}</h3>
  6. <span class="desc" v-if="orderBundle.orderFlag == 'CAEL' || orderBundle.orderFlag == 'SYCA' ">取消原因: {{getPayStatusFun}}</span>
  7. </div>
  8. <div class="content" @click="toDetail">
  9. <div class="product-img" >
  10. <img v-if="bundle.icon2" class="img" :src="bundle.icon2" alt="">
  11. <div v-else class="center-con">
  12. <img class="img" src="/static/img/ic_shop_title_06.png" alt="">
  13. </div>
  14. </div>
  15. <div class="product-info">
  16. <div>
  17. <div class="title">{{detailData ? detailData.bundleName : ''}}</div>
  18. <div class="desc">{{bundle.tag ? bundle.tag : ''}}</div>
  19. </div>
  20. </div>
  21. </div>
  22. <div class="package-info" v-if="orderBundle.orderFlag === 'PAED'">
  23. <div v-for="item in customerBundleItemList" :key="item.id" :id='item.id' @click="subscribeMessage" class="info-item">
  24. <div class="item-itemName">
  25. <div>{{item.itemName}}</div>
  26. <div class="package-qr">
  27. <span style="color: #999;">剩余{{item.remainTimes}}次</span>
  28. <van-icon class="icon-qr" size="1.5em" name="qr" color="#ff5500" />
  29. </div>
  30. </div>
  31. <div style="color: #999;font-size: 12px;">{{(item.expiryDateStr ? item.expiryDateStr :'') + ( item.expiryTimesStr ? '('+item.expiryTimesStr+')' :'')}}</div>
  32. </div>
  33. <!-- <van-cell-group>
  34. <!-- <form @submit="formSubmit" class="formId" report-submit="true">
  35. <button form-type="submit"></button>
  36. </form> -->
  37. <!--<van-cell :title="item.itemName" v-for="item in customerBundleItemList" :key="item.id" :id='item.id' is-link @click="subscribeMessage">
  38. <div class="package-qr">
  39. <span>剩余{{item.remainTimes}}次</span>
  40. <van-icon class="icon-qr" size="1.5em" name="qr" color="#ff5500" />
  41. </div>
  42. <div class="package-expiryDate">{{(item.expiryDateStr ? item.expiryDateStr :'')+(item.expiryTimesStr? (item.expiryTimesStr):'')}}</div>
  43. </van-cell>
  44. </van-cell-group> -->
  45. <div class="package-info-desc">
  46. 请将对应服务的二维码出示给门店进行消费
  47. </div>
  48. </div>
  49. <!-- 已支付 -->
  50. <div class="look-record" v-if="orderBundle.orderFlag === 'PAED'" @click="goPage">
  51. 查看使用记录
  52. </div>
  53. <div class="order-infos">
  54. <van-cell-group>
  55. <van-cell title="订单编号" :value="orderBundle.number" class="order-number">
  56. </van-cell>
  57. <van-cell title="下单时间">
  58. <div style="font-size:0.95em">{{orderBundle.orderDate}}</div>
  59. </van-cell>
  60. <van-cell title="车牌号" v-if="orderBundle.vehicleNumber">
  61. <span>{{orderBundle.vehicleNumber}}</span>
  62. </van-cell>
  63. <!-- <van-cell title="支付方式" value="2" /> -->
  64. <!-- <van-cell title="套餐售价">
  65. <span class="price">¥{{orderBundle.payedAmount}}</span>
  66. </van-cell> -->
  67. <van-cell title="优惠券" v-if="orderBundle.couponAmount > 0">
  68. <span class="price">¥-{{orderBundle.couponAmount}}</span>
  69. </van-cell>
  70. <van-cell title="实付款" v-if="orderBundle.orderFlag === 'PAED'||orderBundle.orderFlag === 'RUND'">
  71. <span class="price">¥{{orderBundle.payedAmount}}</span>
  72. </van-cell>
  73. <van-cell title="待付款" v-else>
  74. <span class="price">¥{{orderBundle.totalAmount}}</span>
  75. </van-cell>
  76. </van-cell-group>
  77. </div>
  78. <div class="order-control" v-if="orderBundle.orderFlag === 'UNPA'">
  79. <van-button class="btn" plain size="large" @click="cancelHandler">取消订单</van-button>
  80. <!-- <van-button class="btn" size="large" type="danger" :disabled="payLoading" :loading="payLoading" @click="toPay">立即支付</van-button> -->
  81. </div>
  82. <!-- <div class="order-control" v-if="orderBundle.orderFlag === 'CAEL' || orderBundle.orderFlag === 'SYCA'">
  83. <van-button class="btn" size="large" type="danger" @click="rePay">重新购买</van-button>
  84. </div> -->
  85. <!-- <div class="order-control" v-if="orderBundle.orderFlag === 'PAED'">
  86. <van-button class="btn" size="large" type="danger" @click="rePay">再次购买</van-button>
  87. </div> -->
  88. </div>
  89. <van-popup :show="showQRcodePopup" @close="closePopup">
  90. <div class="qrcode-panel">
  91. <canvas class="qrcode-img" canvas-id="mycanvas" />
  92. <p class="qrcode-des">二维码有效期24小时</p>
  93. </div>
  94. </van-popup>
  95. </div>
  96. </template>
  97. <script>
  98. import QR from '@/utils/qrcode';
  99. import { orderDetail, getQRCode, cancelOrder, wxPay, getPayStatus } from '@/api/bundle';
  100. import { subscribePayMessage, subscribeHxMessage } from '@/utils/index.js';
  101. export default {
  102. components: {},
  103. name: 'package',
  104. data() {
  105. return {
  106. payLoading: false,
  107. finished: false,
  108. showQRcodePopup: false,
  109. bundle: {
  110. icon2: null,
  111. name: '',
  112. tag: null,
  113. price: 0
  114. },
  115. coupon: undefined,
  116. orderBundle: {},
  117. customerBundleItemList: [],
  118. formId:null,
  119. detailData: null,
  120. bundleType:'', // 0: 套餐 1:非套餐
  121. itemBundleId:'' // 套餐id
  122. };
  123. },
  124. computed: {
  125. getPayStatusFun() {
  126. const dict = {
  127. 'UNPA': '未支付',
  128. 'INPA': '支付中',
  129. 'PAED': '已支付',
  130. 'CAEL': '用户手动取消',
  131. 'SYCA': '超时未支付'
  132. };
  133. return dict[this.orderBundle.orderFlag];
  134. },
  135. getTitle() {
  136. const dict = {
  137. 'UNPA': '未支付',
  138. 'INPA': '支付中',
  139. 'PAED': '已支付',
  140. 'CAEL': '已取消',
  141. 'SYCA': '已取消',
  142. 'RUND': '已退款'
  143. };
  144. return dict[this.orderBundle.orderFlag];
  145. }
  146. },
  147. methods: {
  148. // 套餐查看详情
  149. toDetail(){
  150. console.log(this.itemBundleId,'this.itemBundleId','----------套餐id')
  151. if(this.bundleType==0){
  152. wx.navigateTo({
  153. url: `/pages/bundleDetail/main?id=${this.itemBundleId}`
  154. })
  155. }
  156. },
  157. // 核销订阅消息
  158. subscribeMessage(e){
  159. console.log(e)
  160. this.formId = ''
  161. this.showQRcode(e.currentTarget.id)
  162. // 发起订阅
  163. subscribeHxMessage(function(){})
  164. },
  165. cancelHandler() {
  166. const { id } = this.$mp.query;
  167. const _this = this;
  168. cancelOrder({
  169. id: id
  170. }).then(res => {
  171. if (res.status === '200') {
  172. _this.getOrderInfo(id);
  173. }
  174. });
  175. },
  176. closePopup() {
  177. console.log(1111)
  178. const { id } = this.$mp.query;
  179. this.showQRcodePopup = false;
  180. this.getOrderInfo(id);
  181. },
  182. showQRcode(itemId) {
  183. const { bundle } = this;
  184. const _this = this;
  185. const _size = this.setCanvasSize();
  186. getQRCode({
  187. 'bundleId': bundle.id,
  188. 'customerBundleItemId': itemId,
  189. 'formId': this.formId
  190. }).then(res => {
  191. if (res.status === '200') {
  192. _this.showQRcodePopup = true;
  193. // QR.api.draw('123123', 'mycanvas', 300, 300);
  194. QR.api.draw(res.data, 'mycanvas', _size.w, _size.h);
  195. } else {
  196. wx.showToast({
  197. title: res.message,
  198. icon: 'none',
  199. duration: 2500
  200. });
  201. }
  202. });
  203. },
  204. setCanvasSize: function() {
  205. var size = {};
  206. const res = wx.getSystemInfoSync();
  207. const width = res.windowWidth * 0.75;
  208. const height = width; // canvas画布为正方形
  209. size.w = width;
  210. size.h = height;
  211. return size;
  212. },
  213. getOrderInfo(id) {
  214. const _this = this;
  215. orderDetail({ id: id}).then(res => {
  216. if (res.status === '200') {
  217. _this.detailData = res.data || null
  218. _this.bundle = res.data.bundle || {icon2: null, name: '', tag: null, price: 0};
  219. _this.coupon = res.data.coupon;
  220. _this.orderBundle = res.data.orderBundle;
  221. _this.bundleType=res.data.freeChoiceFlag
  222. _this.itemBundleId=res.data.bundleId
  223. res.data.customerBundleItemList.map(item => {
  224. if((item.expiryDate && (item.expiryDate.substr(0,10) != '2099-01-01')) && item.cycleFlag== 0){
  225. item.expiryDateStr = '过期时间:' + item.expiryDate
  226. }
  227. if(item.expiryTimes && item.expiryTimes!=0){
  228. item.expiryTimesStr='已过期'+item.expiryTimes+'次'
  229. }
  230. // if(item.expiryDate && (item.expiryDate.substr(0,10) != '2099-01-01') && item.cycleFlag== 0){
  231. // item.expiryDateStr = '过期时间:' + item.expiryDate
  232. // }else{
  233. // item.expiryDateStr = '过期时间:' + '--'
  234. // }
  235. })
  236. _this.customerBundleItemList = res.data.customerBundleItemList
  237. } else {
  238. wx.showToast({
  239. title: res.message,
  240. icon: 'none',
  241. duration: 2500
  242. });
  243. }
  244. _this.finished = true;
  245. wx.hideLoading();
  246. });
  247. },
  248. rePay() {
  249. wx.navigateTo({
  250. url: `/pages/bundleDetail/main?id=${this.orderBundle.bundleId}`
  251. });
  252. },
  253. // 查询支付状态
  254. queryPayStatus (tradeNo,id){
  255. getPayStatus({ tradeNo: tradeNo }).then(result => {
  256. wx.hideLoading()
  257. if (result.status === '200') {
  258. this.getOrderInfo(id);
  259. }
  260. });
  261. },
  262. // 查看使用记录
  263. goPage(){
  264. wx.navigateTo({
  265. url: `/pages/pagesA/usageRecord/main?billNo=${this.detailData.orderBundleNo}`
  266. })
  267. },
  268. // 去支付
  269. toPay() {
  270. let _this = this
  271. if(this.payLoading){return}
  272. const { id } = this.$mp.query;
  273. this.payLoading = true
  274. // 订阅支付消息
  275. subscribePayMessage(function(res){
  276. wx.showLoading({title:'正在支付中...'})
  277. wxPay({
  278. id: id
  279. }).then(res => {
  280. if (res.status === '200') {
  281. setTimeout(function(){
  282. _this.queryPayStatus(res.tradeNo,id)
  283. },500)
  284. } else {
  285. wx.showToast({
  286. title: res.message,
  287. icon: 'none',
  288. duration: 2500
  289. });
  290. }
  291. _this.payLoading = false
  292. }).catch(err => {
  293. let message = '支付失败!';
  294. if (err.errMsg === 'requestPayment:fail cancel') {
  295. message = '您取消了支付';
  296. }
  297. wx.showToast({
  298. title: message,
  299. icon: 'none',
  300. duration: 2500
  301. });
  302. _this.payLoading = false
  303. });
  304. })
  305. }
  306. },
  307. onShow() {
  308. wx.showLoading({
  309. mask: true,
  310. title: '加载中'
  311. });
  312. const { id } = this.$mp.query;
  313. this.getOrderInfo(id);
  314. },
  315. onUnload() {
  316. wx.hideLoading();
  317. this.finished = false;
  318. this.showQRcodePopup = false;
  319. this.bundle = {
  320. icon2: null,
  321. name: '',
  322. tag: null,
  323. price: 0
  324. };
  325. this.coupon = undefined;
  326. this.orderBundle = {};
  327. this.customerBundleItemList = [];
  328. this.detailData = null
  329. }
  330. };
  331. </script>
  332. <style lang="stylus" scoped>
  333. .order-detail-container {
  334. min-height: 100vh;
  335. background-color: #f8f8f9;
  336. }
  337. .formId{
  338. margin-bottom: 10px;
  339. display: block;
  340. }
  341. .formId button{
  342. background:none;
  343. border:none;
  344. padding:0;
  345. }
  346. .look-record{
  347. margin: 10rpx 0;
  348. font-size: 28rpx;
  349. font-weight: bold;
  350. background-color: #fff;
  351. line-height: 72rpx;
  352. text-align center;
  353. }
  354. .order-detail-panel {
  355. font-size: 30rpx;
  356. .order-status {
  357. text-align: center;
  358. margin-bottom: 10rpx;
  359. background-color: #fff;
  360. padding: 15rpx 0;
  361. .title {
  362. color: #ff5500;
  363. font-weight: bold;
  364. font-size: 1.2em;
  365. padding-bottom: 10rpx;
  366. }
  367. .desc {
  368. color: #80848f;
  369. font-size: 0.85em;
  370. }
  371. }
  372. .content {
  373. display: flex;
  374. width: 100%;
  375. height: 250rpx;
  376. box-sizing: border-box;
  377. padding: 25rpx 20rpx;
  378. background-color: #fff;
  379. .product-img {
  380. width: 35%;
  381. img {
  382. width: 100%;
  383. height: 100%;
  384. }
  385. .center-con{
  386. text-align: center;
  387. height: 100%;
  388. img{
  389. display: inline-block;
  390. width: 204rpx;
  391. height: 100%;
  392. }
  393. }
  394. }
  395. .product-info {
  396. padding-left: 1em;
  397. box-sizing: border-box;
  398. font-size: 25rpx;
  399. flex: 1;
  400. display: flex;
  401. flex-direction: column;
  402. justify-content: space-between;
  403. .title {
  404. font-size: 1.2em;
  405. padding: 10rpx 0;
  406. }
  407. .desc {
  408. color: #80848f;
  409. font-size: 0.85em;
  410. }
  411. .price {
  412. font-size: 1.2em;
  413. font-weight: bold;
  414. }
  415. }
  416. }
  417. .package-info, .order-infos {
  418. padding: 0 20rpx;
  419. background-color: #fff;
  420. }
  421. .package-info {
  422. .info-item{
  423. padding :15rpx 0;
  424. border-bottom :1px solid #eee
  425. .item-itemName{
  426. display :flex;
  427. justify-content :space-between;
  428. align-items :center
  429. .package-qr {
  430. display: flex;
  431. align-items: flex-start;
  432. justify-content: flex-end;
  433. .icon-qr {
  434. margin: 0 20rpx;
  435. position: relative;
  436. top: 1px;
  437. }
  438. }
  439. }
  440. }
  441. .package-info-desc {
  442. font-size: 25rpx;
  443. background-color: #fff;
  444. text-align: center;
  445. padding: 25rpx 0;
  446. }
  447. .package-expiryDate{
  448. text-align :start
  449. }
  450. }
  451. .order-infos {
  452. margin-top: 10rpx;
  453. .price {
  454. color: #ff5500;
  455. font-weight: bold;
  456. }
  457. }
  458. .order-control {
  459. display: flex;
  460. margin-top: 30rpx;
  461. padding: 0 20rpx;
  462. .btn {
  463. flex: 1;
  464. }
  465. .btn + .btn {
  466. margin-left: 20rpx;
  467. }
  468. }
  469. }
  470. .qrcode-img {
  471. width: 75vw;
  472. height: 75vw;
  473. background-color: #fff;
  474. }
  475. .qrcode-des{
  476. text-align: center;
  477. font-size: 26rpx;
  478. padding: 25rpx 0;
  479. background-color: #f4f4f5;
  480. }
  481. .order-number {
  482. /deep/ .van-cell__value {
  483. overflow: visible !important;
  484. }
  485. }
  486. </style>