index.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  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&&hasLogin">
  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. // if(res.status != 200){
  68. // uni.navigateTo({
  69. // url:"/pages/login/login"
  70. // })
  71. // }
  72. })
  73. },
  74. // 下拉刷新
  75. onPullDownRefresh() {
  76. console.log('refresh')
  77. this.noDataText = '正在加载...'
  78. this.pageInit()
  79. setTimeout(function () {
  80. uni.stopPullDownRefresh()
  81. }, 200)
  82. },
  83. methods: {
  84. pageInit(){
  85. this.getbannerList()
  86. this.goodsList = []
  87. getGoodsClass({}).then(res => {
  88. console.log(res)
  89. if(res.status == 200){
  90. this.goodsType = res.data
  91. this.goodsType.map((item,index) => {
  92. this.getGoods(item,index)
  93. })
  94. }else{
  95. this.goodsList = []
  96. this.noDataText = '暂无商品'
  97. }
  98. })
  99. },
  100. // 查询商品
  101. getGoods(item,index){
  102. getGoodsList({
  103. pageNo:1,
  104. pageSize:item.popularizeGoodsLimit,
  105. goodsTypeNo:item.goodsTypeNo,
  106. }).then(res => {
  107. console.log(res,'goodsList')
  108. if(res.status == 200&&res.data.list&&res.data.list.length){
  109. this.goodsList[index] = {
  110. type: item,
  111. list: res.data.list
  112. }
  113. this.goodsList.splice()
  114. }else{
  115. this.noDataText = '暂无商品'
  116. }
  117. })
  118. },
  119. // 点击banner
  120. clickBanner(index){
  121. let row = this.imageTopList[index]
  122. console.log(index,row)
  123. if(row.jumpType !== 'NONE'){
  124. // 跳外网地址
  125. if(row.jumpUrl.indexOf('http') == 0){
  126. }
  127. // 跳小程序页面
  128. if(row.jumpUrl.indexOf('/pages') == 0){
  129. uni.navigateTo({
  130. url: row.jumpUrl
  131. })
  132. }
  133. }
  134. },
  135. // 获取banner
  136. getbannerList(){
  137. bannerList({type:'banner',location:'MALL_TOP'}).then(res=>{
  138. if(res.status==200){
  139. this.imageTopList=res.data
  140. }
  141. })
  142. },
  143. // 更多商品
  144. toGoods(item){
  145. uni.navigateTo({
  146. url:"/pagesA/goods/goods?goodsTypeNo="+ item.goodsTypeNo + "&goldLimit="+ item.goldLimit + "&name=" + item.name
  147. })
  148. },
  149. toLoginPage(){
  150. uni.navigateTo({
  151. url: '/pages/login/login'
  152. })
  153. }
  154. }
  155. }
  156. </script>
  157. <style lang="scss" scoped>
  158. .content {
  159. background: url(../../static/topBg.png) no-repeat top center;
  160. background-size: 100%;
  161. width: 100%;
  162. .goods{
  163. >view{
  164. padding: 25upx 20upx 10upx;
  165. background: #FFFFFF;
  166. border-radius: 15upx;
  167. box-shadow: 0upx 6upx 10upx #eee;
  168. margin-bottom: 20upx;
  169. > .goods-list{
  170. padding-top: 5upx;
  171. }
  172. }
  173. .nologin{
  174. padding: 50upx 0;
  175. text-align: center;
  176. >view{
  177. padding: 30upx 0;
  178. font-size: 0.8em;
  179. color: #666;
  180. }
  181. }
  182. }
  183. .t1{
  184. padding: 20upx 0;
  185. }
  186. }
  187. </style>