index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. <template>
  2. <div class="container place-order-panel page--loading" :class="{'page--finished': finished }">
  3. <div class="content">
  4. <div class="product-img" @click="toDetail">
  5. <img class="img" :src="bundle.icon2" alt="">
  6. </div>
  7. <div class="product-info">
  8. <div @click="toDetail">
  9. <div class="title">{{bundle.name}}</div>
  10. <div class="desc">{{bundle.tag}}</div>
  11. </div>
  12. <div>
  13. <div class="price">
  14. ¥{{bundle.price}}
  15. </div>
  16. </div>
  17. </div>
  18. </div>
  19. <div>
  20. <div class="info-list">
  21. <van-cell-group>
  22. <van-cell :value="couponInfo" @click="openCoupon">
  23. <div slot="title" class="cell-title">
  24. 优惠券 <span class="text-red" v-if="selectCoupon.id">(已选择1张)</span>
  25. </div>
  26. </van-cell>
  27. <van-cell title="手机号码" :value="userPhone" />
  28. <van-cell v-if="specialCoupon" title="车牌号">
  29. <div @click="showCarNum = true">
  30. {{carNum || '请选择车牌号'}}
  31. </div>
  32. </van-cell>
  33. </van-cell-group>
  34. </div>
  35. </div>
  36. <!-- <van-submit-bar custom-class="price-bar" :price="price" button-text="去付款" :loading="payLoading" @submit="toPay"></van-submit-bar> -->
  37. <van-action-sheet overlay :show="showCoupons" @close="showCoupons = false">
  38. <div class="title-bar">
  39. <div class="not-use-coupon" @click="notUseCouponHandle()">不使用优惠券</div>
  40. <div class="title-text">选择优惠券</div>
  41. <div @click="showCoupons = false">
  42. <van-icon name="close" />
  43. </div>
  44. </div>
  45. <div class="select-coupon-tab">
  46. <van-tabs :active="activeVal" animated v-if="showCoupons">
  47. <van-tab title="可用优惠券">
  48. <scroll-view scroll-y class="tab-content">
  49. <div class="coupon-item" v-for="item in couponList.canUse" :key="item.id">
  50. <v-coupon :options="item" @use="useCoupon" :canUse="true" />
  51. </div>
  52. <div class="noData-con" v-if="couponList.canUse.length==0">
  53. <img class="logo-img" src="/static/img/empty-icon.png">
  54. <p>暂无数据</p>
  55. </div>
  56. </scroll-view>
  57. </van-tab>
  58. <van-tab title="不可用优惠券">
  59. <scroll-view scroll-y class="tab-content">
  60. <div class="coupon-item" v-for="item in couponList.notUse" :key="item.id">
  61. <v-coupon :options="item" @use="useCoupon" :status="false" />
  62. </div>
  63. <div class="noData-con" v-if="couponList.notUse.length==0">
  64. <img class="logo-img" src="/static/img/empty-icon.png">
  65. <p>暂无数据</p>
  66. </div>
  67. </scroll-view>
  68. </van-tab>
  69. </van-tabs>
  70. </div>
  71. </van-action-sheet>
  72. <car-num v-if="showCarNum" :code="carNum" @cancel="cancelCarNum" @ok="okCarNum"></car-num>
  73. </div>
  74. </template>
  75. <script>
  76. import Coupon from '@/components/Coupon';
  77. import { objToUrl } from '@/utils/index';
  78. import { bundleById, wxPay, getPayStatus } from '@/api/bundle';
  79. import { getCouponList } from '@/api/coupon';
  80. import { getUserPhone } from '@/api/login';
  81. import carNumCom from '@/components/LicensePlatNum';
  82. import { subscribePayMessage, subscribeHxMessage } from '@/utils/index.js';
  83. export default {
  84. components: { 'v-coupon': Coupon, 'car-num': carNumCom },
  85. name: 'packageDetail',
  86. computed: {
  87. couponInfo() {
  88. let { selectCoupon } = this;
  89. if (selectCoupon.id) {
  90. const id = Math.round(selectCoupon.id);
  91. if (id === 900015 || id === 900009) {
  92. return selectCoupon.typeName;
  93. } else {
  94. return `已经优惠${selectCoupon.amount}元`;
  95. }
  96. } else {
  97. return `共${this.couponList.canUse.length}张优惠券可用`;
  98. }
  99. },
  100. specialCoupon() {
  101. let { selectCoupon } = this;
  102. return Math.round(selectCoupon.id) === 900009;
  103. }
  104. },
  105. data() {
  106. return {
  107. payLoading: false,
  108. finished: false,
  109. showCarNum: false,
  110. carNum: '',
  111. list: {},
  112. bundle: {},
  113. activeVal: 0,
  114. couponList: {
  115. canUse: [],
  116. notUse: []
  117. },
  118. showCoupons: false,
  119. selectCoupon: {
  120. id: ''
  121. },
  122. customerCouponId: '',
  123. price: 0,
  124. userPhone: ''
  125. };
  126. },
  127. methods: {
  128. // 查询支付状态
  129. queryPayStatus (tradeNo){
  130. let _this = this
  131. getPayStatus({ tradeNo: tradeNo }).then(result => {
  132. wx.hideLoading();
  133. if (result.status === '200') {
  134. wx.redirectTo({ url: `/pages/paySuccess/main?` + objToUrl(result.data) });
  135. }else{
  136. setTimeout(function(){
  137. _this.queryPayStatus(tradeNo)
  138. },1000)
  139. }
  140. });
  141. },
  142. toPay() {
  143. let _this = this
  144. const { id } = this.$mp.query;
  145. if (this.specialCoupon && !this.carNum) {
  146. wx.showToast({
  147. title: '请输入车牌号',
  148. icon: 'none',
  149. duration: 2500
  150. });
  151. return;
  152. }
  153. if (!this.specialCoupon) {
  154. this.carNum = '';
  155. }
  156. _this.payLoading = true
  157. //订阅消息
  158. subscribePayMessage(function(){
  159. wx.showLoading({
  160. mask: true,
  161. title: '加载中'
  162. });
  163. wxPay({
  164. 'bundleId': id,
  165. 'customerCouponId': _this.customerCouponId,
  166. 'vehicleNumber': _this.carNum
  167. }).then(res => {
  168. if (res.status === '200') {
  169. _this.carNum = '';
  170. setTimeout(function(){
  171. _this.queryPayStatus(res.tradeNo)
  172. },500)
  173. } else {
  174. wx.hideLoading();
  175. wx.showToast({
  176. title: res.message,
  177. icon: 'none',
  178. duration: 5000
  179. });
  180. }
  181. _this.payLoading = false
  182. }).catch(err => {
  183. console.log(err)
  184. let message = '请重新下单或联系客服处理!';
  185. if (err.errMsg === 'requestPayment:fail cancel') {
  186. message = '您取消了支付';
  187. }
  188. wx.showToast({
  189. title: message,
  190. icon: 'none',
  191. duration: 2500
  192. });
  193. wx.navigateTo({
  194. url: `/pages/orderDetail/main?id=${err.orderBundleId}`
  195. });
  196. _this.payLoading = false
  197. });
  198. })
  199. },
  200. useCoupon(obj) {
  201. this.customerCouponId = obj.id;
  202. this.selectCoupon = obj.coupon;
  203. this.computePrice();
  204. this.showCoupons = false;
  205. },
  206. notUseCouponHandle() {
  207. this.selectCoupon = {
  208. id: ''
  209. };
  210. this.customerCouponId = '';
  211. this.computePrice();
  212. this.showCoupons = false;
  213. },
  214. computePrice() {
  215. const { selectCoupon } = this;
  216. const id = Math.round(selectCoupon.id);
  217. if (id === 900015 || id === 900009) {
  218. this.price = selectCoupon.amount * 100;
  219. } else {
  220. if (selectCoupon.amount) {
  221. this.price = (this.bundle.price - selectCoupon.amount) * 100;
  222. } else {
  223. this.price = this.bundle.price * 100;
  224. }
  225. }
  226. },
  227. inputCarNo(val) {
  228. this.carno = val.mp.detail;
  229. },
  230. cancelCarNum() {
  231. this.showCarNum = false;
  232. },
  233. okCarNum(val) {
  234. this.carNum = val;
  235. this.showCarNum = false;
  236. },
  237. openCoupon() {
  238. this.activeVal = 0;
  239. this.showCoupons = true;
  240. }
  241. },
  242. onShow() {
  243. // 处理支付取消后返回默认选中优惠券显示问题
  244. this.selectCoupon = { id: '' };
  245. this.customerCouponId = '';
  246. wx.showLoading({
  247. mask: true,
  248. title: '加载中'
  249. });
  250. const _this = this;
  251. const { id, couponId, customerCouponId } = this.$mp.query;
  252. Promise.all([bundleById({ id }), getCouponList({
  253. bundleId: id,
  254. status: '1'
  255. }), getUserPhone({})]).then(res => {
  256. const bundleRes = res[0];
  257. const couponRes = res[1];
  258. const phoneRes = res[2];
  259. if (bundleRes.status === '200' && couponRes.status === '200' && phoneRes.status === '200') {
  260. _this.bundle = bundleRes.data;
  261. _this.price = _this.bundle.price * 100;
  262. _this.couponList.canUse = couponRes.data.filter(item => item.useEnableFlag === '1');
  263. if (_this.couponList.canUse.length && couponId) {
  264. let _coupon = '';
  265. if (customerCouponId) {
  266. _coupon = _this.couponList.canUse.find(item => item.id + '' === customerCouponId + '');
  267. } else {
  268. _coupon = _this.couponList.canUse.find(item => item.couponId + '' === couponId + '');
  269. }
  270. if (_coupon) {
  271. _this.useCoupon(_coupon);
  272. }
  273. }
  274. _this.couponList.notUse = couponRes.data.filter(item => item.useEnableFlag !== '1');
  275. _this.userPhone = phoneRes.data;
  276. } else {
  277. wx.showToast({
  278. title: res.message,
  279. icon: 'none',
  280. duration: 2500
  281. });
  282. }
  283. _this.finished = true;
  284. wx.hideLoading();
  285. });
  286. },
  287. onUnload() {
  288. this.finished = false;
  289. this.showCarNum = false;
  290. this.carNum = '';
  291. this.list = {};
  292. this.bundle = {};
  293. this.activeVal = 0;
  294. this.showCoupons = false;
  295. this.selectCoupon = {};
  296. this.customerCouponId = '';
  297. this.price = 0;
  298. this.userPhone = '';
  299. this.couponList = {
  300. canUse: [],
  301. notUse: []
  302. };
  303. }
  304. };
  305. </script>
  306. <style lang="stylus" >
  307. .container {
  308. height: 100%;
  309. overflow: hidden;
  310. }
  311. .place-order-panel {
  312. .content {
  313. display: flex;
  314. width: 100%;
  315. height: 250rpx;
  316. box-sizing: border-box;
  317. padding: 25rpx 20rpx;
  318. background-color: #fff;
  319. .product-img {
  320. width: 35%;
  321. img {
  322. width: 100%;
  323. height: 100%;
  324. }
  325. }
  326. .product-info {
  327. padding-left: 10%;
  328. box-sizing: border-box;
  329. font-size: 25rpx;
  330. flex: 1;
  331. display: flex;
  332. flex-direction: column;
  333. justify-content: space-between;
  334. .title {
  335. font-size: 1.2em;
  336. padding: 10rpx 0;
  337. }
  338. .desc {
  339. color: #80848f;
  340. font-size: 0.85em;
  341. }
  342. .price {
  343. font-size: 1.2em;
  344. font-weight: bold;
  345. }
  346. }
  347. }
  348. .price-bar {
  349. box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.1);
  350. }
  351. .info-list {
  352. font-size: 1.4em;
  353. .cell-title {
  354. display: flex;
  355. }
  356. .text-red {
  357. color: #ff5500;
  358. }
  359. }
  360. .tab-content {
  361. height: calc(60vh - 65px);
  362. width: 100vw;
  363. overflow: auto;
  364. box-sizing: border-box;
  365. }
  366. .noData-con{
  367. margin-top: 70rpx;
  368. text-align center;
  369. font-size: 26rpx;
  370. img{
  371. display: inline-block;
  372. width: 196rpx;
  373. height: 128rpx;
  374. margin: 20rpx 0 10rpx;
  375. }
  376. }
  377. .select-coupon-tab {
  378. height: 60vh;
  379. }
  380. .coupon-item {
  381. width: 100%;
  382. padding: 15rpx 20rpx;
  383. box-sizing: border-box;
  384. }
  385. .title-bar {
  386. display: flex;
  387. justify-content: space-between;
  388. align-content: center;
  389. padding: 25rpx;
  390. .not-use-coupon {
  391. font-size: 0.8em;
  392. color: #2d8cf0;
  393. text-decoration: underline;
  394. box-sizing: border-box;
  395. }
  396. .title-text {
  397. position: absolute;
  398. left: 0;
  399. right: 0;
  400. text-align: center;
  401. z-index: -1;
  402. }
  403. }
  404. }
  405. </style>