RecommendItem.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <!-- recommend.vue -->
  2. <template>
  3. <view class="div ui-recommend-wrapper" v-if="commendList.length > 0">
  4. <view class="div title">为你推荐</view>
  5. <view class="div list-wrap">
  6. <view class="div goods-list double-column"
  7. :index="index"
  8. v-for="(item, index) in commendList"
  9. v-bind:key="index">
  10. <index-prod-item
  11. :item="item"
  12. class="goods-item"
  13. ></index-prod-item>
  14. </view>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. import { urlencode } from '@/util/common'
  20. import { mapState, mapMutations } from 'vuex'
  21. import IndexProdItem from '../IndexProdItem'
  22. export default {
  23. data () {
  24. return {
  25. list: [],
  26. indicatorArray: [],
  27. currentIndex: 0
  28. }
  29. },
  30. components:{IndexProdItem},
  31. created () {
  32. },
  33. computed: {
  34. ...mapState({
  35. commendList: state => state.pointsgoods.commendList,
  36. currentProductId: state => state.pointsgoods.currentProductId
  37. }),
  38. getItemStyle: function () {
  39. const res = uni.getSystemInfoSync()
  40. var width = res.windowWidth
  41. var height = res.windowHeight
  42. let itemWidth = (width - 30 - 16) / 3
  43. let itemHeight = itemWidth
  44. return "width:"+itemWidth +"px;height:"+itemHeight +"px"
  45. }
  46. },
  47. methods: {
  48. goDetail (id) {
  49. let data = Object.assign({}, { id: id })
  50. uni.navigateTo({ url: '/pages/home/pointsgoods/Detail'+'?'+urlencode( { pgoods_id: id } )})
  51. }
  52. }
  53. }
  54. </script>
  55. <style lang="scss" scoped>
  56. .ui-recommend-wrapper {
  57. background: #ffffff;
  58. margin-top:$pageSpace;
  59. margin-bottom:$pageSpace;
  60. .title{text-align: center;position:relative;font-size:$mainFontSize;color:#000;font-weight:700;padding-top:.5rem;padding-bottom:1rem;}
  61. }
  62. .goods-list.double-column {width:50%;}
  63. .goods-list.double-column .goods-item{margin-right:$pageSpace;margin-bottom: 10px;box-shadow: 0 2px 4px #ececec;}
  64. .list-wrap {width: 100%;padding-left:$pageSpace;box-sizing: border-box;display: flex;flex-wrap: wrap;}
  65. </style>