index.vue 4.4 KB

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