index.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <view class="content">
  3. <u-swiper height="250" @click="clickBanner" :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="goodsList.length&&item.list.length">
  10. <u-section :title="item.type.name" font-size="35" 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. <view v-if="goodsList.length==0">
  16. <u-empty icon-size="60" :text="noDataText" mode="list"></u-empty>
  17. </view>
  18. </view>
  19. <!-- 购物车 -->
  20. <uni-cart-fix></uni-cart-fix>
  21. </view>
  22. </template>
  23. <script>
  24. import {
  25. getGoodsClass,
  26. getGoodsList
  27. } from '@/api/goods.js'
  28. import {bannerList} from '@/api/banner.js'
  29. export default {
  30. components: {
  31. },
  32. data() {
  33. return {
  34. noDataText: '正则加载...',
  35. imageTopList:[],
  36. goodsList:[], // 商品
  37. goodsType:[], // 商品分类
  38. }
  39. },
  40. onShow() {
  41. this.getbannerList()
  42. this.goodsList = []
  43. getGoodsClass({}).then(res => {
  44. console.log(res)
  45. if(res.status == 200){
  46. this.goodsType = res.data
  47. this.goodsType.map((item,index) => {
  48. this.getGoods(item,index)
  49. })
  50. }else{
  51. this.goodsList = []
  52. this.noDataText = '暂无商品'
  53. }
  54. })
  55. },
  56. methods: {
  57. // 点击banner
  58. clickBanner(index){
  59. let row = this.imageTopList[index]
  60. console.log(index,row)
  61. if(row.jumpType !== 'NONE'){
  62. // 跳外网地址
  63. if(row.jumpUrl.indexOf('http') == 0){
  64. }
  65. // 跳小程序页面
  66. if(row.jumpUrl.indexOf('/pages') == 0){
  67. uni.navigateTo({
  68. url: row.jumpUrl
  69. })
  70. }
  71. }
  72. },
  73. // 获取banner
  74. getbannerList(){
  75. bannerList({type:'banner',location:'MALL_TOP'}).then(res=>{
  76. if(res.status==200){
  77. this.imageTopList=res.data
  78. }
  79. })
  80. },
  81. // 更多商品
  82. toGoods(item){
  83. uni.navigateTo({
  84. url:"/pages/goods/goods?goodsTypeNo="+ item.goodsTypeNo + "&goldLimit="+ item.goldLimit
  85. })
  86. },
  87. // 查询商品
  88. getGoods(item,index){
  89. getGoodsList({pageNo:1,pageSize:item.popularizeGoodsLimit,goodsTypeNo:item.goodsTypeNo}).then(res => {
  90. console.log(res,'goodsList')
  91. if(res.status == 200&&res.data.list&&res.data.list.length){
  92. this.goodsList[index] = {
  93. type: item,
  94. list: res.data.list
  95. }
  96. this.goodsList.splice()
  97. }
  98. })
  99. }
  100. }
  101. }
  102. </script>
  103. <style lang="scss" scoped>
  104. .content {
  105. background: url(../../static/topBg.png) no-repeat top center;
  106. background-size: 100%;
  107. width: 100%;
  108. .goods{
  109. >view{
  110. padding: 25upx 20upx 10upx;
  111. background: #FFFFFF;
  112. border-radius: 15upx;
  113. box-shadow: 0upx 6upx 10upx #eee;
  114. margin-bottom: 20upx;
  115. > .goods-list{
  116. padding-top: 5upx;
  117. }
  118. }
  119. }
  120. .t1{
  121. padding: 20upx 0;
  122. }
  123. }
  124. </style>