index.vue 4.4 KB

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