index.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  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. if(this.hasLogin){
  125. // 跳外网地址
  126. if(row.jumpUrl.indexOf('http') == 0){
  127. }
  128. // 跳小程序页面
  129. if(row.jumpUrl.indexOf('/pages') == 0){
  130. uni.navigateTo({
  131. url: row.jumpUrl
  132. })
  133. }
  134. }else{
  135. this.toLoginPage()
  136. }
  137. }
  138. },
  139. // 获取banner
  140. getbannerList(){
  141. bannerList({type:'banner',location:'MALL_TOP'}).then(res=>{
  142. if(res.status==200){
  143. this.imageTopList=res.data
  144. }
  145. })
  146. },
  147. // 更多商品
  148. toGoods(item){
  149. uni.navigateTo({
  150. url:"/pagesA/goods/goods?goodsTypeNo="+ item.goodsTypeNo + "&goldLimit="+ item.goldLimit + "&name=" + item.name
  151. })
  152. },
  153. toLoginPage(){
  154. uni.navigateTo({
  155. url: '/pages/login/login'
  156. })
  157. }
  158. }
  159. }
  160. </script>
  161. <style lang="scss" scoped>
  162. .content {
  163. background: url(../../static/topBg.png) no-repeat top center;
  164. background-size: 100%;
  165. width: 100%;
  166. .goods{
  167. >view{
  168. padding: 25upx 20upx 10upx;
  169. background: #FFFFFF;
  170. border-radius: 15upx;
  171. box-shadow: 0upx 6upx 10upx #eee;
  172. margin-bottom: 20upx;
  173. > .goods-list{
  174. padding-top: 5upx;
  175. }
  176. }
  177. .nologin{
  178. padding: 50upx 0;
  179. text-align: center;
  180. >view{
  181. padding: 30upx 0;
  182. font-size: 0.8em;
  183. color: #666;
  184. }
  185. }
  186. }
  187. .t1{
  188. padding: 20upx 0;
  189. }
  190. }
  191. </style>