index.wxml 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <view class='classify-box'>
  2. <!-- 头部搜索 -->
  3. <view class='header'>
  4. <view class='header-box'>
  5. <view class='auto f-box'>
  6. <image class='mar-r20' src='../../images/news/l_icon.png' mode="aspectFit"></image>
  7. <view class='f-item f-box f-align-items-center h-search mar-t20 mar-b20'>
  8. <icon class='iconfont icon-sousuo'></icon>
  9. <input placeholder='输入搜索关键词' class='f-s26'></input>
  10. </view>
  11. </view>
  12. </view>
  13. </view>
  14. <!-- 内容模块 -->
  15. <view class='classify-main f-box'>
  16. <!-- left nav -->
  17. <view class='class-left'>
  18. <view class='nav'>
  19. <view class='nav-list f-box f-align-items-center f-justify-content-center {{item.id === classifyNavActiveId ? "active" : ""}}' wx:for="{{classifyNavList}}" data-item="{{item}}" bindtap='classifyTap'>{{item.classify_name}}</view>
  20. </view>
  21. </view>
  22. <!-- right content -->
  23. <view class='class-right f-item'>
  24. <!-- 筛选-->
  25. <view class='filter-box'>
  26. <view class='f-box'>
  27. <view class='f-item f-box f-align-items-center f-justify-content-center' bindtap='newTap'>
  28. <text>最新</text>
  29. <!-- 三角形 -->
  30. <view class='triangle-box'>
  31. <view class='triangle-just {{isNew ? "active" : ""}}'></view>
  32. <view class='triangle-invert {{isNew ? "" : "active"}}'></view>
  33. </view>
  34. </view>
  35. <view class='f-item f-box f-align-items-center f-justify-content-center' bindtap='priceTap'>
  36. <text>价格</text>
  37. <!-- 三角形 -->
  38. <view class='triangle-box'>
  39. <view class='triangle-just {{isNew ? "active" : ""}}'></view>
  40. <view class='triangle-invert {{isNew ? "" : "active"}}'></view>
  41. </view>
  42. </view>
  43. <view class='f-item f-box f-align-items-center f-justify-content-center' bindtap='filterTap'>
  44. <text>筛选</text>
  45. <!-- 三角形 -->
  46. <view class='triangle-box' style='height:16rpx'>
  47. <view class='triangle-invert'></view>
  48. </view>
  49. </view>
  50. <!-- 筛选内容 -->
  51. <view class='filter-main' wx:if="{{filterStatic}}">
  52. <!-- 第一块内容 -->
  53. <view class='filter-frist'>
  54. <radio-group class="radio-group" bindchange="radioChange">
  55. <label class="radio" wx:for="{{filterArray}}">
  56. <radio value="{{item.name}}" color='#e60012' />
  57. {{item.value}}
  58. </label>
  59. </radio-group>
  60. </view>
  61. <view class='filter-next'>
  62. <view class='filter-next-title'>价格区间(元)</view>
  63. <view class='f-box filter-range'>
  64. <view class='f-item'>
  65. <input placeholder='最低价'></input>
  66. </view>
  67. <view class='f-item'>——</view>
  68. <view class='f-item'>
  69. <input placeholder='最高价'></input>
  70. </view>
  71. </view>
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. <!-- goodsList -->
  77. <view class='goods-box '>
  78. <view class='f-box f-flex-wrap f-justify-content-between'>
  79. <view class='goods-list' wx:for="{{goodsList}}">
  80. <image src='{{item.commodity_logo}}' class='goods-img' mode='aspectFit'></image>
  81. <!-- <view class='goods-summary'></view> -->
  82. <view class='goods-title'>{{item.commodity_name}}</view>
  83. <view class='goods-price'>¥{{item.commodity_sale}}</view>
  84. </view>
  85. </view>
  86. <divider wx:if="{{!requestState}}"></divider>
  87. <data-none wx:if="{{goodsList.length === 0}}"></data-none>
  88. </view>
  89. </view>
  90. </view>
  91. </view>
  92. <view class='ceng' bindtap='close' wx:if="{{filterStatic}}"></view>