shop_street.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. <template>
  2. <view class="shop-street">
  3. <mescroll-body v-if="appConfig.shop_street_hide" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
  4. @up="upCallback" :up="upOption" :isshow="false">
  5. <view class="shop-street-content">
  6. <view class="search"><u-search v-model="keyword" @search="onReflesh" bg-color="#F4F4F4"
  7. placeholder="搜索关键词"></u-search></view>
  8. <view class="main">
  9. <scroll-view class="bg-white content" :scroll-y="true" :scroll-with-animation="true"
  10. style="width: 30%;">
  11. <view class="store-category p-t-20">
  12. <!-- <view class="category-item flex-col col-center" @tap="changeActive(-1)">
  13. <view class="icon-wrap"
  14. :style="{ borderColor: active == -1 ? colorConfig.primary : '' }">
  15. <u-image width="68rpx" height="68rpx" border-radius="60rpx"
  16. src="/static/images/icon_shop_cate.png" />
  17. </view>
  18. <view class="xs m-t-10" :class="{ primary: active == -1 }">全部</view>
  19. </view> -->
  20. <view class="category-item flex-col col-center" v-for="(item, index) in shopCategory"
  21. :key="index" @tap="changeActive(index)">
  22. <view class="icon-wrap"
  23. :style="{ borderColor: active == index ? colorConfig.primary : '' }">
  24. <u-image width="68rpx" height="68rpx" border-radius="60rpx" :src="item.image" />
  25. </view>
  26. <view class="xs m-t-10 clamp" :class="{ primary: active == index }">{{ item.name }}
  27. </view>
  28. </view>
  29. </view>
  30. </scroll-view>
  31. <scroll-view class="bg-white content" :scroll-y="true" :scroll-with-animation="true"
  32. style="width: 70%;">
  33. <view class="store-container">
  34. <view class="m-t-20" v-for="(item, index) in shopList" :key="index"><shop-item lx='1'
  35. :item="item"></shop-item></view>
  36. </view>
  37. <mescroll-empty v-if="shopList.length == 0 && isjz == 2"
  38. :option="upOption.empty"></mescroll-empty>
  39. </scroll-view>
  40. </view>
  41. </view>
  42. </mescroll-body>
  43. <view v-else>
  44. <view class="p-b-20" v-if="hotGoods.length"><goods-list type="one" :list="hotGoods"></goods-list></view>
  45. </view>
  46. </view>
  47. </template>
  48. <script>
  49. import MescrollEmpty from '@/components/mescroll-uni/components/mescroll-empty.vue';
  50. import {
  51. mapGetters,
  52. mapActions
  53. } from 'vuex';
  54. import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins';
  55. import {
  56. getShopList,
  57. getShopCategory
  58. } from '@/api/shop';
  59. import {
  60. getHome
  61. } from '@/api/store';
  62. export default {
  63. mixins: [MescrollMixin],
  64. components: {
  65. MescrollEmpty
  66. },
  67. data() {
  68. return {
  69. isjz: 1,
  70. shopList: [],
  71. shopCategory: [],
  72. keyword: '',
  73. active: 0,
  74. upOption: {
  75. auto: false,
  76. empty: {
  77. icon: '/static/images/goods_null.png',
  78. tip: '暂无数据~'
  79. }
  80. },
  81. hotGoods: []
  82. };
  83. },
  84. onShow() {
  85. if (!this.appConfig.shop_street_hide) {
  86. uni.setNavigationBarTitle({
  87. title: '商品'
  88. });
  89. this.getHomeFun();
  90. }
  91. this.getCartNum();
  92. },
  93. onShareAppMessage() {
  94. const shareInfo = this.appConfig.share;
  95. return {
  96. title: shareInfo.mnp_share_title,
  97. path: 'pages/shop_street/shop_street?invite_code=' + this.inviteCode
  98. };
  99. },
  100. methods: {
  101. ...mapActions(['getCartNum']),
  102. async downCallback() {
  103. await this.getShopCategoryFun();
  104. this.mescroll.resetUpScroll();
  105. },
  106. // 获取首页数据
  107. async getHomeFun() {
  108. const {
  109. code,
  110. data
  111. } = await getHome();
  112. if (code == 1) {
  113. this.hotGoods = data.hots;
  114. }
  115. },
  116. onReflesh() {
  117. this.shopList = [];
  118. this.mescroll.resetUpScroll();
  119. },
  120. changeActive(index) {
  121. this.active = index;
  122. this.onReflesh();
  123. },
  124. upCallback(page) {
  125. let pageNum = page.num;
  126. let pageSize = page.size;
  127. const {
  128. keyword,
  129. active,
  130. shopCategory
  131. } = this;
  132. const cateId = active == -1 ? '' : shopCategory[active].id;
  133. getShopList({
  134. page_no: pageNum,
  135. page_size: pageSize,
  136. name: keyword,
  137. shop_cate_id: cateId
  138. })
  139. .then(res => {
  140. this.isjz = 2;
  141. if (res.code == 1) {
  142. let curPageData = res.data.list
  143. let curPageLen = curPageData.length;
  144. let hasNext = !!res.data.more;
  145. if (page.num == 1) {
  146. this.shopList = [];
  147. }
  148. this.shopList = this.shopList.concat(curPageData);
  149. this.mescroll.endSuccess(curPageLen, hasNext);
  150. }
  151. })
  152. .catch(err => {
  153. this.mescroll.endErr();
  154. });
  155. },
  156. async getShopCategoryFun() {
  157. const {
  158. code,
  159. data
  160. } = await getShopCategory();
  161. if (code == 1) {
  162. this.shopCategory = data.filter(e => {
  163. return e.id != 35
  164. });
  165. }
  166. }
  167. }
  168. };
  169. </script>
  170. <style lang="scss">
  171. $header-height: 94rpx;
  172. .shop-street {
  173. .search {}
  174. .store-category {
  175. white-space: nowrap;
  176. padding-bottom: 10rpx;
  177. .category-item {
  178. padding: 20rpx 10rpx;
  179. .icon-wrap {
  180. border: 1px solid transparent;
  181. border-radius: 50%;
  182. }
  183. }
  184. }
  185. .store-container {
  186. padding: 0 30rpx;
  187. }
  188. }
  189. .main {
  190. display: flex;
  191. }
  192. /* 二行显示 */
  193. .clamp {
  194. text-align: center;
  195. width: 156rpx;
  196. text-overflow: ellipsis;
  197. display: -webkit-box;
  198. -webkit-line-clamp: 2;
  199. -webkit-box-orient: vertical;
  200. display: -moz-box;
  201. -moz-line-clamp: 2;
  202. -moz-box-orient: vertical;
  203. overflow-wrap: break-word;
  204. word-break: break-all;
  205. white-space: normal;
  206. }
  207. .content {
  208. height: calc(100vh - #{$header-height} - var(--window-top) - var(--window-bottom));
  209. }
  210. </style>