index.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <scroll-view scroll-y class="container bundle-detail-page">
  3. <div class=" bundle-detail page--loading" :class="{'page--finished': finished }">
  4. <b-card :options="options" type="detail" />
  5. <div class="detail-info">
  6. <div class="bundle-detail-desc">
  7. <div class="bundle-detail-title">
  8. <van-icon name="stop" class="detail-title-icon" /> 套餐描述:
  9. </div>
  10. <div class="detail-text">
  11. {{options.description}}
  12. </div>
  13. </div>
  14. <div class="bundle-detail-title">
  15. <van-icon name="stop" class="detail-title-icon" /> 套餐详情:
  16. </div>
  17. <div class="detail-content-imgs">
  18. <image :src="img" class="detail-img" v-for="(img, index) in imgList" :key="index" mode="widthFix" />
  19. </div>
  20. </div>
  21. <div class="submit-btn" v-if="options.showFlag === '1'&&options.stock>0" @click="sumbitOrder">
  22. 立即下单
  23. </div>
  24. <div class="submit-btn" style="background:#ccc" v-if="options.showFlag === '0'">
  25. 套餐已下线
  26. </div>
  27. <div class="submit-btn" style="background:#ccc" v-if="options.stock<=0">
  28. 套餐已售罄
  29. </div>
  30. </div>
  31. </scroll-view>
  32. </template>
  33. <script>
  34. import { bundleById } from '@/api/bundle';
  35. import BundleCard from '@/components/BundleCard';
  36. import { checkLogin } from '@/api/login';
  37. export default {
  38. name: 'bundleDetail',
  39. components: { 'b-card': BundleCard },
  40. data() {
  41. return {
  42. options: {},
  43. imgList: [],
  44. finished: false,
  45. timeout: null,
  46. loading: false
  47. };
  48. },
  49. methods: {
  50. sumbitOrder() {
  51. if(this.loading){return}
  52. const { id, couponId, customerCouponId } = this.$mp.query;
  53. if (this.options.stock<=0){
  54. wx.showToast({
  55. title: '活动套餐已售罄,下次早点来哦!',
  56. icon: 'none',
  57. duration: 2500
  58. });
  59. return
  60. }
  61. this.loading = true
  62. checkLogin().then(res => {
  63. if (res.status === '200') {
  64. wx.navigateTo({
  65. url: `/pages/placeOrder/main?id=${id}&couponId=${couponId}&customerCouponId=${customerCouponId}`
  66. });
  67. } else {
  68. wx.navigateTo({
  69. url: `/pages/login/main?lanuch=false&path=` + encodeURIComponent(`/pages/bundleDetail/main?id=${id}`)
  70. });
  71. }
  72. });
  73. }
  74. },
  75. onShow() {
  76. wx.showLoading({
  77. mask: true,
  78. title: '加载中'
  79. });
  80. this.loading = false
  81. const { id } = this.$mp.query;
  82. const _this = this;
  83. bundleById({ id }).then(res => {
  84. if (res.status === '200') {
  85. _this.options = res.data;
  86. if (res.data.detail) {
  87. _this.imgList = res.data.detail.split(',');
  88. }
  89. _this.finished = true;
  90. wx.hideLoading();
  91. if (res.data.showFlag === '0') {
  92. wx.showToast({
  93. title: '该套餐已经下线, 无法购买',
  94. icon: 'none',
  95. duration: 2500
  96. });
  97. }
  98. }
  99. this.timeout = setTimeout(() => {
  100. if (_this.finished === false) {
  101. _this.finished = true;
  102. }
  103. }, 2000);
  104. }).catch(err => {
  105. console.error(err);
  106. });
  107. },
  108. onUnload() {
  109. wx.hideLoading();
  110. this.options = {};
  111. this.imgList = [];
  112. this.finished = false;
  113. if (this.timeout !== null) {
  114. clearTimeout(this.timeout);
  115. this.timeout = null;
  116. }
  117. },
  118. onShareAppMessage: function () {
  119. }
  120. };
  121. </script>
  122. <style lang="stylus" scoped>
  123. .bundle-detail-page {
  124. height: 100vh;
  125. }
  126. .bundle-detail {
  127. padding: 10px 20px;
  128. box-sizing: border-box;
  129. background-color: #fff;
  130. margin-top: 10rpx;
  131. .submit-btn {
  132. position: fixed;
  133. left: 0;
  134. right: 0;
  135. bottom: 0;
  136. height: 50px;
  137. background-color: #f44;
  138. text-align: center;
  139. line-height: 50px;
  140. font-size: 1.2em;
  141. color: #fff;
  142. }
  143. }
  144. .detail-info {
  145. margin-top: 20px;
  146. margin-bottom: 50px;
  147. .bundle-detail-desc {
  148. border-top: 1rpx solid #dcdee2;
  149. border-bottom: 1rpx solid #dcdee2;
  150. margin: 10px 0;
  151. padding: 5px 0;
  152. .detail-text {
  153. font-size: 0.8em;
  154. padding: 5px 5px 0 2px;
  155. box-sizing: border-box;
  156. }
  157. }
  158. .bundle-detail-title {
  159. font-size: 0.9em;
  160. .detail-title-icon {
  161. position: relative;
  162. top: 4rpx;
  163. }
  164. }
  165. .detail-content-imgs {
  166. margin-top: 5px;
  167. .detail-img {
  168. width: 100%;
  169. height: auto;
  170. display: block;
  171. }
  172. }
  173. }
  174. </style>