index.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. <template>
  2. <view id="category" :style="{paddingTop:CustomBar+'px'}">
  3. <!--顶部搜索导航栏-->
  4. <view class="'search-input-fixed" :style="{top:CustomBar/2+'px'}">
  5. <cat-search :systeminfo='systeminfo' :navbar-data='nvabarData' :headerBtnPosi ="headerBtnPosi" @click="hanldTabClick"></cat-search>
  6. </view>
  7. <view class="category-list">
  8. <!-- 左侧分类导航 -->
  9. <scroll-view class="left-aside" scroll-y="true" scroll-with-animation :scroll-top="verticalNavTop" :style="{top:(CustomBar+38)+'px',height:(windowHeight-CustomBar+38)+'px'}">
  10. <view class="row" v-for="(m, index) in categoryList" :key="index" :class="[index==showCategoryIndex?'on':'']" @tap="showCategory($event,index)" :data-id="index">
  11. <view class="text">{{m.name}}</view>
  12. <view class="block"></view>
  13. </view>
  14. </scroll-view>
  15. <!--右侧子导航-->
  16. <scroll-view scroll-y="true" class="right-aside" :style="{top:(CustomBar+38)+'px',height:(windowHeight-CustomBar+38)+'px'}">
  17. <view class="category" v-if="n.smalltypeList.length > 0" v-for="(n,index) in categoryList" :key="index" v-show="index==showCategoryIndex" >
  18. <view class="category-box" v-for="(o,oIndex) in n.smalltypeList" :key="oIndex">
  19. <view class="title">{{o.name}}</view>
  20. <view class="list" v-if="o.tinytypeList.length > 0">
  21. <view class="box" v-for="(pro,proIndex) in o.tinytypeList" :key="proIndex" @click.stop="navToListPage(pro,proIndex)">
  22. <image :src="pro.icon"></image>
  23. <view class="text">{{pro.name}}</view>
  24. </view>
  25. </view>
  26. <view v-else class="no-data">
  27. 该栏目暂无分类~
  28. </view>
  29. </view>
  30. </view>
  31. </scroll-view>
  32. </view>
  33. </view>
  34. </template>
  35. <script>
  36. import catSearch from '@/components/uni-search/cat-search.vue'
  37. export default {
  38. components: {
  39. catSearch
  40. },
  41. data() {
  42. return {
  43. nvabarData: { //顶部自定义导航
  44. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示
  45. title: '' // 导航栏 中间的标题
  46. },
  47. CustomBar:this.CustomBar,// 顶部导航栏高度
  48. headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
  49. systeminfo: this.setSysteminfo(), //获取设备信息
  50. headerShow:true,
  51. showCategoryIndex: 0,
  52. categoryList: [],//分类列表
  53. search: '',
  54. cateTop: {},
  55. verticalNavTop: 0,
  56. categoryTabIndex:1,
  57. windowHeight:0,
  58. scrollHeight:0,
  59. }
  60. },
  61. onLoad() {
  62. this.initData();
  63. },
  64. methods: {
  65. // 数据初始化
  66. initData() {
  67. this.GetProductCate(this.categoryTabIndex);
  68. const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
  69. this.windowHeight = windowHeight - 1;
  70. this.scrollHeight = windowHeight - 1;
  71. },
  72. hanldTabClick(data){
  73. this.categoryList = []
  74. this.GetProductCate(data);
  75. },
  76. // 获取商品分类列表
  77. GetProductCate (index) {
  78. this.CommonService.GetFirstClassly({typeSort:index,source :'crm'}).then(response =>{
  79. this.categoryList = response.data
  80. // 查询第一个拥有二级菜单的子菜单
  81. for (let i = 0; i < this.categoryList.length; i++) {
  82. if (this.categoryList[i].smalltypeList.length > 0) {
  83. this.showCategoryIndex = i;
  84. break;
  85. }
  86. }
  87. }).catch(error =>{
  88. this.$util.msg(error.msg,2000)
  89. })
  90. },
  91. showCategory(e,index){//分类切换显示
  92. this.showCategoryIndex = index;
  93. this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
  94. },
  95. toSearch () {// 跳转至搜索详情页
  96. uni.navigateTo({
  97. url: `/pages/search/search?search=${JSON.stringify(this.search)}`
  98. })
  99. },
  100. navToListPage(pro,index){//分类导航跳转
  101. let self = this;
  102. uni.setStorage({
  103. key: 'commodity_id',
  104. data: pro.tinyTypeID,
  105. success: function () {
  106. self.$api.navToListPage({type:'4',value:pro.name,id:pro.tinyTypeID});
  107. }
  108. })
  109. },
  110. setHeaderBtnPosi(){
  111. // 获得胶囊按钮位置信息
  112. let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
  113. return headerBtnPosi
  114. },
  115. setSysteminfo(){
  116. let systeminfo;
  117. uni.getSystemInfo({ // 获取设备信息
  118. success: (res) => {
  119. systeminfo = res
  120. },
  121. })
  122. return systeminfo
  123. },
  124. }
  125. }
  126. </script>
  127. <style scoped lang="scss">
  128. page {
  129. background-color: #fff;
  130. }
  131. .search-input-fixed{
  132. width: 100%;
  133. height:auto;
  134. position: fixed;
  135. top: 0;
  136. left: 0;
  137. z-index: 1000;
  138. background: #FFFFFF;
  139. border-bottom: 1px solid #F7F7F7;
  140. }
  141. #category {
  142. /*模块分类*/
  143. .category-list{
  144. width: 100%;
  145. background-color: #fff;
  146. display: flex;
  147. .left-aside,.right-aside{
  148. position: absolute;
  149. top: 100rpx;
  150. /* #ifdef APP-PLUS */
  151. top: calc(100rpx + var(--status-bar-height));
  152. /* #endif */
  153. bottom: 0rpx;
  154. }
  155. .left-aside{
  156. width: 200rpx;
  157. left: 0rpx;
  158. background-color: #f2f2f2;
  159. .row{
  160. width: 100%;
  161. height: 100rpx;
  162. display: flex;
  163. align-items: center;
  164. position: relative;
  165. .text{
  166. width: 100%;
  167. position: relative;
  168. font-size: $font-size-28;
  169. display: flex;
  170. justify-content: center;
  171. color: $text-color;
  172. /* transition: transform 0.3s ease;*/
  173. transition-property: transform;
  174. transition-duration: 0.2s;
  175. transition-timing-function: ease;
  176. }
  177. .block{
  178. position: absolute;
  179. width: 0rpx;
  180. left: 0;
  181. /* transition: transform 0.3s ease;*/
  182. transition-property: transform;
  183. transition-duration: 0.2s;
  184. transition-timing-function: ease;
  185. }
  186. &.on{
  187. height: 100rpx;
  188. background-color: #fff;
  189. .text{
  190. font-size: $font-size-28;
  191. color: $color-system;
  192. }
  193. .block{
  194. width: 10rpx;
  195. height: 60rpx;
  196. top: 20rpx;
  197. background-color: $color-system;
  198. border-radius: 0 15rpx 15rpx 0;
  199. }
  200. }
  201. }
  202. }
  203. .right-aside{
  204. width: 550rpx;
  205. left: 200rpx;
  206. .category{
  207. width: calc(100%);
  208. padding: 0 15rpx 20rpx 0;
  209. background: #F7F7F7;
  210. .category-box{
  211. background: #FFFFFF;
  212. margin-bottom: 20rpx;
  213. .title{
  214. padding: 0 24rpx;
  215. line-height: 80rpx;
  216. height: 80rpx;
  217. text-align: left;
  218. color: $text-color;
  219. font-size: $font-size-26;
  220. border-bottom: 1px solid #F7F7F7;
  221. font-weight: 600;
  222. }
  223. .list{
  224. margin-top: 24rpx;
  225. width: 100%;
  226. display: flex;
  227. flex-wrap: wrap;
  228. .box{
  229. width: calc(71.44vw / 3);
  230. margin-bottom: 40rpx;
  231. display: flex;
  232. justify-content: center;
  233. align-items: center;
  234. flex-wrap: wrap;
  235. image{
  236. width: 140rpx;
  237. height: 140rpx;
  238. }
  239. .text{
  240. margin-top: 8rpx;
  241. width: 100%;
  242. display: flex;
  243. justify-content: center;
  244. font-size: $font-size-24;
  245. }
  246. }
  247. }
  248. .no-data {
  249. text-align: center;
  250. margin: 30rpx 0;
  251. color: #999999;
  252. font-size: 24rpx;
  253. line-height: 80rpx;
  254. }
  255. }
  256. }
  257. }
  258. }
  259. }
  260. </style>