index.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <view class="activity-box">
  3. <view class="activity_header" :style="{backgroundImage: headerBg}">
  4. <view class='cart_nav'>
  5. <nav-bar navTitle="秒杀列表" ref="navBarRef" iconColor='#fff' :backgroundColor="backgroundColor"
  6. :isBackgroundColor="false"></nav-bar>
  7. </view>
  8. </view>
  9. <view class="list-box" :style="{'z-index':listZindex}" @touchstart="touchStart">
  10. <seckill-list :seckillList="seckillList" :loading="loading" :loadTitle="loadTitle"
  11. :status="1"></seckill-list>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. import navBar from '@/components/navBar';
  17. import useActivity from "@/mixins/useActivity";
  18. import SeckillList from "../components/SeckillList";
  19. import {
  20. seckillMerchantApi
  21. } from "../../../api/activity";
  22. import {
  23. silenceBindingSpread,
  24. getUserSpread
  25. } from '@/utils/index.js';
  26. import {
  27. mapGetters
  28. } from "vuex";
  29. import onShare from "@/mixins/onShare";
  30. export default {
  31. mixins: [useActivity,onShare],
  32. name: "index",
  33. computed: {
  34. headerBg() {
  35. return 'url(' + this.urlDomain + 'crmebimage/presets/seckill_header.png' + ')'
  36. },
  37. ...mapGetters(['isLogin', 'uid', 'globalData']),
  38. },
  39. components: {
  40. navBar,
  41. SeckillList
  42. },
  43. data() {
  44. return {
  45. seckillList: [],
  46. page: 1,
  47. limit: 10,
  48. loading: false,
  49. loadend: false,
  50. merId: 0,
  51. loadTitle: '',
  52. urlDomain: this.$Cache.get("imgHost"),
  53. title: '秒杀列表'
  54. }
  55. },
  56. onLoad(options) {
  57. this.merId = options.merId
  58. this.getSeckillList()
  59. //分销码
  60. getUserSpread(options);
  61. },
  62. onShow() {
  63. //分销绑定
  64. silenceBindingSpread(this.isLogin, this.globalData.spread);
  65. },
  66. // 滚动监听
  67. onPageScroll(e) {
  68. // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
  69. uni.$emit('scroll');
  70. },
  71. /**
  72. * 页面上拉触底事件的处理函数
  73. */
  74. onReachBottom: function() {
  75. this.getSeckillList();
  76. },
  77. methods: {
  78. //滚动
  79. touchStart() {
  80. this.$refs.navBarRef.currentPage = false;
  81. },
  82. getSeckillList() {
  83. let data = {
  84. page: this.page,
  85. limit: this.limit,
  86. merId: this.merId,
  87. };
  88. if (this.loadend) return;
  89. if (this.loading) return;
  90. this.loadTitle = '';
  91. this.loading = true
  92. seckillMerchantApi(data).then(res => {
  93. this.$set(this, 'page', this.page + 1);
  94. this.seckillList = this.seckillList.concat(res.data.list || []);
  95. this.loadend = this.page > res.data.totalPage;
  96. this.loadTitle = this.loadend ? '已全部加载' : '加载更多';
  97. this.loading = false;
  98. this.showSkeleton = false
  99. }).catch(err => {
  100. this.loading = false
  101. });
  102. },
  103. }
  104. }
  105. </script>
  106. <style scoped lang="scss">
  107. @import "../static/css/activity.scss";
  108. /deep/.seckill_list{
  109. padding: 0 !important;
  110. background-color: #f5f5f5 !important;
  111. }
  112. /deep/.seckill_item{
  113. border: none;
  114. }
  115. </style>