goods-shop-list.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <template>
  2. <view class="container clearfix">
  3. <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
  4. :loadingType="5" />
  5. <template v-else>
  6. <view class="shop-content clearfix">
  7. <view class="tui-supplier-item" v-for="(sup, supIndex) in list" :key="supIndex"
  8. @click.stop="NavToDetailPage(sup,index)">
  9. <view class="tui-shop-top">
  10. <view class="tui-top-logo">
  11. <image :src="sup.image" mode=""></image>
  12. </view>
  13. <view class="tui-top-name">
  14. <text>{{ sup.supplierName }}</text>
  15. </view>
  16. </view>
  17. <view class="tui-shop-mid">
  18. <view class="tui-mid-item" v-for="(pros, prIndex) in sup.products" :key="prIndex"
  19. @click.stop="navToDetailPage(pros)">
  20. <image :src="pros.mainImage" mode=""></image>
  21. </view>
  22. </view>
  23. <view class="tui-shop-bot">
  24. <view class="tui-bot-btn">
  25. 进店<text class="iconfont icon-xiayibu"></text>
  26. </view>
  27. </view>
  28. </view>
  29. </view>
  30. </template>
  31. </view>
  32. </template>
  33. <script>
  34. import { mapState, mapMutations } from 'vuex'
  35. export default {
  36. data() {
  37. return {
  38. skeletonShow: true,
  39. list: []
  40. }
  41. },
  42. onLoad(option) {
  43. },
  44. methods: {
  45. async getHomeDataInfo() {
  46. //初始化首页数据
  47. try {
  48. const userInfo = await this.$api.getStorage()
  49. const res = await this.CommonService.GetHomeDataInfo({ userId: userInfo.userId ? userInfo
  50. .userId : 0, source: 2 })
  51. const data = res.data.supplierImage
  52. this.list = data || [] // 供应商列表
  53. setTimeout(() => {
  54. this.skeletonShow = false
  55. }, 1000)
  56. } catch (e) {
  57. //TODO handle the exception
  58. this.$util.msg(error.msg, 2000)
  59. }
  60. },
  61. //跳转商品详情
  62. navToDetailPage(pros) {
  63. this.$api.navigateTo(`/pages/goods/product?id=${pros.productId}`)
  64. },
  65. // 链接跳转
  66. NavToDetailPage(pros) {
  67. this.$api.navigateTo(`/pages/supplier/user/my-shop?shopId=${pros.linkParam.id}`)
  68. },
  69. },
  70. onShow() {
  71. this.getHomeDataInfo()
  72. }
  73. }
  74. </script>
  75. <style lang="scss">
  76. page {
  77. background-color: #F7F7F7;
  78. }
  79. .shop-content {
  80. width: 100%;
  81. height: auto;
  82. box-sizing: border-box;
  83. padding: 24rpx 24rpx;
  84. display: flex;
  85. justify-content: flex-start;
  86. flex-wrap: wrap;
  87. .tui-supplier-item {
  88. display: flex;
  89. width: 339rpx;
  90. height: 448rpx;
  91. flex-direction: column;
  92. align-items: center;
  93. border-radius: 16rpx;
  94. margin: 0 20rpx 20rpx 0;
  95. box-sizing: border-box;
  96. padding: 24rpx 0;
  97. background-color: #FFFFFF;
  98. &:nth-child(2n) {
  99. margin-right: 0;
  100. }
  101. .tui-shop-top {
  102. width: 100%;
  103. display: flex;
  104. flex-direction: column;
  105. align-items: center;
  106. .tui-top-logo {
  107. display: flex;
  108. align-items: center;
  109. justify-content: center;
  110. width: 219rpx;
  111. height: 96rpx;
  112. background-color: #ffffff;
  113. border-radius: 8rpx;
  114. image {
  115. width: 219rpx;
  116. height: 96rpx;
  117. }
  118. }
  119. .tui-top-name {
  120. justify-content: center;
  121. font-size: 30rpx;
  122. line-height: 80rpx;
  123. color: #1bc0de;
  124. }
  125. }
  126. .tui-shop-mid {
  127. width: 100%;
  128. height: 95rpx;
  129. display: flex;
  130. justify-content: flex-start;
  131. align-items: center;
  132. box-sizing: border-box;
  133. margin: 20rpx 0;
  134. padding: 0 10rpx;
  135. .tui-mid-item {
  136. width: 95rpx;
  137. height: 95rpx;
  138. border-radius: 8rpx;
  139. overflow: hidden;
  140. margin: 0 5rpx;
  141. box-sizing: border-box;
  142. border: 1px solid #e1e1e1;
  143. image {
  144. width: 95rpx;
  145. height: 95rpx;
  146. }
  147. }
  148. }
  149. .tui-shop-bot {
  150. width: 100%;
  151. height: 54rpx;
  152. display: flex;
  153. justify-content: center;
  154. align-items: center;
  155. margin-top: 20rpx;
  156. .tui-bot-btn {
  157. justify-content: center;
  158. align-items: center;
  159. font-size: 28rpx;
  160. line-height: 52rpx;
  161. color: #333333;
  162. padding: 0 30rpx;
  163. border: 1px solid #999999;
  164. border-radius: 30rpx;
  165. .iconfont {
  166. font-size: 24rpx;
  167. }
  168. }
  169. }
  170. }
  171. }
  172. </style>