index.vue 5.0 KB

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