index.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <view class="content">
  3. <u-swiper height="250" :list="imageTopList"></u-swiper>
  4. <view class="t1">
  5. <u-image height="40" src="/static/t1.png"></u-image>
  6. </view>
  7. <!-- 商品 -->
  8. <view class="goods">
  9. <view v-for="(item,index) in goodsList" :key="item.type.id" v-if="item.list.length">
  10. <u-section :title="item.type.name" line-color="#01c9b2" sub-title="更多" @click="toGoods(item.type)"></u-section>
  11. <view class="goods-list">
  12. <uni-coods :list="item.list"></uni-coods>
  13. </view>
  14. </view>
  15. <u-empty v-else text="暂无商品" mode="list"></u-empty>
  16. </view>
  17. <!-- 购物车 -->
  18. <uni-cart-fix></uni-cart-fix>
  19. </view>
  20. </template>
  21. <script>
  22. import {
  23. getGoodsClass,
  24. getGoodsList
  25. } from '@/api/goods.js'
  26. export default {
  27. components: {
  28. },
  29. data() {
  30. return {
  31. imageTopList:[
  32. {image:'/static/banner.png'},
  33. {image:'/static/banner1.png'}
  34. ],
  35. goodsList:[], // 商品
  36. goodsType:[], // 商品分类
  37. }
  38. },
  39. onShow() {
  40. getGoodsClass({}).then(res => {
  41. console.log(res)
  42. if(res.status == 200){
  43. this.goodsType = res.data
  44. this.goodsType.map((item,index) => {
  45. this.getGoods(item,index)
  46. })
  47. }
  48. })
  49. },
  50. methods: {
  51. // 更多商品
  52. toGoods(item){
  53. uni.navigateTo({
  54. url:"/pages/goods/goods?goodsTypeNo="+ item.goodsTypeNo + "&goldLimit="+ item.goldLimit
  55. })
  56. },
  57. // 查询商品
  58. getGoods(item,index){
  59. getGoodsList({pageNo:1,pageSize:item.popularizeGoodsLimit,goodsTypeNo:item.goodsTypeNo}).then(res => {
  60. console.log(res,'goodsList')
  61. if(res.status == 200&&res.data.list&&res.data.list.length){
  62. this.goodsList.push({
  63. type: item,
  64. list: res.data.list
  65. })
  66. this.goodsList.splice()
  67. }
  68. })
  69. }
  70. }
  71. }
  72. </script>
  73. <style lang="scss" scoped>
  74. .content {
  75. background: url(../../static/topBg.png) no-repeat top center;
  76. background-size: 100%;
  77. width: 100%;
  78. .goods{
  79. >view{
  80. padding: 25upx 20upx 10upx;
  81. background: #FFFFFF;
  82. border-radius: 15upx;
  83. box-shadow: 0upx 6upx 10upx #eee;
  84. margin-bottom: 20upx;
  85. > .goods-list{
  86. padding-top: 5upx;
  87. }
  88. }
  89. }
  90. .t1{
  91. padding: 20upx 0;
  92. }
  93. }
  94. </style>