active-product.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <view class="">
  3. <tui-skeleton
  4. v-if="skeletonShow"
  5. backgroundColor="#fafafa"
  6. borderRadius="10rpx"
  7. :isLoading="true"
  8. :loadingType="5"
  9. ></tui-skeleton>
  10. <view class="active-product" v-else>
  11. <ProGood v-for="item in activeProductList" :key="item" :storeInfo="item" />
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. import ProGood from './components/procurement_good.vue'
  17. import shareMixin from '@/mixins/shareMixin.js'
  18. export default {
  19. mixins: [ shareMixin ],
  20. components: {
  21. ProGood,
  22. },
  23. data() {
  24. return {
  25. skeletonShow: true,
  26. activeProductList: [], // 活动商品列表
  27. refleshdata: {} // 刷新数据
  28. }
  29. },
  30. onLoad(options) {
  31. this.refleshdata = options
  32. this.activeProduct(options)
  33. },
  34. onPullDownRefresh() {
  35. this.skeletonShow = true
  36. this.activeProduct(this.refleshdata)
  37. uni.stopPullDownRefresh()
  38. },
  39. methods: {
  40. // 楼层商品数据
  41. async activeProduct(options) {
  42. try{
  43. const {data} = await this.SpecialService.activeProduct({imageId: options.activeImageId})
  44. this.activeProductList = data
  45. uni.setNavigationBarTitle({
  46. title: data[0].topic
  47. })
  48. this.skeletonShow = false
  49. }catch(error){
  50. console.log(error)
  51. }
  52. }
  53. }
  54. }
  55. </script>
  56. <style lang="scss">
  57. page {
  58. background-color: #f7f7f7;
  59. }
  60. .active-product {
  61. background: #f7f7f7;
  62. display: flex;
  63. flex-wrap: wrap;
  64. padding: 24rpx;
  65. justify-content: space-between;
  66. }
  67. </style>