GuessLike.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <template>
  2. <view class="div guess-like" v-if="goodsList && goodsList.length">
  3. <view class="div title">猜你喜欢</view>
  4. <view class="div product-list-body">
  5. <index-product-body
  6. class="product-item"
  7. :item="item"
  8. :index="index"
  9. v-for="(item, index) in goodsList"
  10. v-bind:key="index"
  11. ></index-product-body>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. import { mapState } from 'vuex'
  17. import IndexProductBody from './home/index/IndexProductBody'
  18. import { getGuessLike } from '../api/homeindex'
  19. export default {
  20. name: 'GuessLike',
  21. data () {
  22. return {
  23. goodsList: false
  24. }
  25. },
  26. computed: {
  27. ...mapState({
  28. user: state => state.member.info
  29. })
  30. },
  31. components: {
  32. IndexProductBody
  33. },
  34. props: {
  35. },
  36. created: function () {
  37. if (this.user) {
  38. getGuessLike(this.user.member_id).then(res => {
  39. this.goodsList = res.result.goods_list
  40. })
  41. }
  42. },
  43. methods: {
  44. }
  45. }
  46. </script>
  47. <style scoped lang="scss">
  48. .guess-like{background: #fff}
  49. .product-list-body{
  50. display: flex; flex-wrap: wrap;background: #fff;padding-right: $pageSpace;
  51. .product-item{width:50%;}
  52. }
  53. .title{text-align: center;position:relative;font-size:$mainFontSize;color:#000;font-weight:700;padding-top:.5rem;padding-bottom:1rem;}
  54. </style>