index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  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="index" v-if="item&&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 :goldLimit="item.type.goldLimit" :list="item.list"></uni-coods>
  13. </view>
  14. </view>
  15. <view v-if="goodsListLength==0">
  16. <u-empty icon-size="60" :text="noDataText" mode="list"></u-empty>
  17. </view>
  18. </view>
  19. <!-- 购物车 -->
  20. <uni-cart-fix :dragPic="dragPic"></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. import {checkLogin} from '@/api/login.js'
  30. export default {
  31. components: {
  32. },
  33. data() {
  34. return {
  35. noDataText: '正在加载...',
  36. imageTopList:[],
  37. goodsList:[], // 商品
  38. goodsType:[], // 商品分类
  39. dragPic: '/static/cart.png', // 购物车图标
  40. }
  41. },
  42. onLoad() {
  43. this.pageInit()
  44. },
  45. computed: {
  46. goodsListLength() {
  47. return this.goodsList.length
  48. }
  49. },
  50. onShow() {
  51. // 是否登录
  52. checkLogin().then(res => {
  53. if(res.status != 200){
  54. uni.navigateTo({
  55. url:"/pages/login/login"
  56. })
  57. }
  58. })
  59. },
  60. // 下拉刷新
  61. onPullDownRefresh() {
  62. console.log('refresh')
  63. this.pageInit()
  64. setTimeout(function () {
  65. uni.stopPullDownRefresh()
  66. }, 200)
  67. },
  68. methods: {
  69. pageInit(){
  70. this.getbannerList()
  71. this.goodsList = []
  72. getGoodsClass({}).then(res => {
  73. console.log(res)
  74. if(res.status == 200){
  75. this.goodsType = res.data
  76. this.goodsType.map((item,index) => {
  77. this.getGoods(item,index)
  78. })
  79. }else{
  80. this.goodsList = []
  81. this.noDataText = '暂无商品'
  82. }
  83. })
  84. },
  85. // 点击banner
  86. clickBanner(index){
  87. let row = this.imageTopList[index]
  88. console.log(index,row)
  89. if(row.jumpType !== 'NONE'){
  90. // 跳外网地址
  91. if(row.jumpUrl.indexOf('http') == 0){
  92. }
  93. // 跳小程序页面
  94. if(row.jumpUrl.indexOf('/pages') == 0){
  95. uni.navigateTo({
  96. url: row.jumpUrl
  97. })
  98. }
  99. }
  100. },
  101. // 获取banner
  102. getbannerList(){
  103. bannerList({type:'banner',location:'MALL_TOP'}).then(res=>{
  104. if(res.status==200){
  105. this.imageTopList=res.data
  106. }
  107. })
  108. },
  109. // 更多商品
  110. toGoods(item){
  111. uni.navigateTo({
  112. url:"/pages/goods/goods?goodsTypeNo="+ item.goodsTypeNo + "&goldLimit="+ item.goldLimit + "&name=" + item.name
  113. })
  114. },
  115. // 查询商品
  116. getGoods(item,index){
  117. getGoodsList({pageNo:1,pageSize:item.popularizeGoodsLimit,goodsTypeNo:item.goodsTypeNo}).then(res => {
  118. console.log(res,'goodsList')
  119. if(res.status == 200&&res.data.list&&res.data.list.length){
  120. this.goodsList[index] = {
  121. type: item,
  122. list: res.data.list
  123. }
  124. this.goodsList.splice()
  125. }
  126. })
  127. }
  128. }
  129. }
  130. </script>
  131. <style lang="scss" scoped>
  132. .content {
  133. background: url(../../static/topBg.png) no-repeat top center;
  134. background-size: 100%;
  135. width: 100%;
  136. .goods{
  137. >view{
  138. padding: 25upx 20upx 10upx;
  139. background: #FFFFFF;
  140. border-radius: 15upx;
  141. box-shadow: 0upx 6upx 10upx #eee;
  142. margin-bottom: 20upx;
  143. > .goods-list{
  144. padding-top: 5upx;
  145. }
  146. }
  147. }
  148. .t1{
  149. padding: 20upx 0;
  150. }
  151. }
  152. </style>