index.vue 3.9 KB

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