微信小店联盟带货小程序

result.wxml 3.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <view class="container">
  2. <!-- 搜索框 -->
  3. <view class="search-header">
  4. <view class="search-box" bindtap="navigateToSearch">
  5. <icon type="search" size="16" color="#8C8C8C"/>
  6. <text class="search-text">{{keyword}}</text>
  7. </view>
  8. </view>
  9. <!-- 排序栏 -->
  10. <view class="sort-bar">
  11. <view
  12. class="sort-item {{sortType === 'default' ? 'active' : ''}}"
  13. data-type="default"
  14. bindtap="onSortChange"
  15. >
  16. 综合
  17. </view>
  18. <view
  19. class="sort-item {{sortType === 'price' ? 'active' : ''}}"
  20. data-type="price"
  21. bindtap="onSortChange"
  22. >
  23. 价格
  24. <view class="sort-icon">
  25. <text class="iconfont icon-up {{sortOrder === 'asc' && sortType === 'price' ? 'active' : ''}}"/>
  26. <text class="iconfont icon-down {{sortOrder === 'desc' && sortType === 'price' ? 'active' : ''}}"/>
  27. </view>
  28. </view>
  29. <view
  30. class="sort-item {{sortType === 'sales' ? 'active' : ''}}"
  31. data-type="sales"
  32. bindtap="onSortChange"
  33. >
  34. 销量
  35. <view class="sort-icon">
  36. <text class="iconfont icon-up {{sortOrder === 'asc' && sortType === 'sales' ? 'active' : ''}}"/>
  37. <text class="iconfont icon-down {{sortOrder === 'desc' && sortType === 'sales' ? 'active' : ''}}"/>
  38. </view>
  39. </view>
  40. <view
  41. class="sort-item {{sortType === 'commission' ? 'active' : ''}}"
  42. data-type="commission"
  43. bindtap="onSortChange"
  44. >
  45. 佣金
  46. <view class="sort-icon">
  47. <text class="iconfont icon-up {{sortOrder === 'asc' && sortType === 'commission' ? 'active' : ''}}"/>
  48. <text class="iconfont icon-down {{sortOrder === 'desc' && sortType === 'commission' ? 'active' : ''}}"/>
  49. </view>
  50. </view>
  51. </view>
  52. <!-- 商品列表 -->
  53. <scroll-view
  54. class="goods-list"
  55. scroll-y="{{true}}"
  56. bindscrolltolower="loadMore"
  57. enable-back-to-top="{{true}}"
  58. refresher-enabled="{{true}}"
  59. refresher-triggered="{{isRefreshing}}"
  60. bindrefresherrefresh="onRefresh"
  61. >
  62. <view class="goods-grid">
  63. <view
  64. class="goods-item"
  65. wx:for="{{goodsList}}"
  66. wx:key="id"
  67. bindtap="goToDetail"
  68. data-id="{{item.id}}"
  69. >
  70. <view class="goods-img">
  71. <image src="{{item.image}}" mode="aspectFill" lazy-load></image>
  72. </view>
  73. <view class="goods-info">
  74. <text class="goods-name">{{item.title}}</text>
  75. <view class="price-box">
  76. <view class="price-group">
  77. <text class="price-symbol">¥</text>
  78. <text class="price">{{item.price}}</text>
  79. </view>
  80. <view class="commission-group">
  81. <text class="iconfont icon-share"></text>
  82. <text class="commission">{{item.commission}}</text>
  83. </view>
  84. </view>
  85. </view>
  86. </view>
  87. </view>
  88. <!-- 加载状态 -->
  89. <view class="loading-status">
  90. <block wx:if="{{isLoading}}">
  91. <view class="loading">
  92. <text>加载中...</text>
  93. </view>
  94. </block>
  95. <block wx:elif="{{!hasMore}}">
  96. <view class="no-more">
  97. <text>没有更多了</text>
  98. </view>
  99. </block>
  100. </view>
  101. </scroll-view>
  102. <!-- 空状态 -->
  103. <view class="empty-state" wx:if="{{goodsList.length === 0 && !isLoading}}">
  104. <icon type="info" size="64" color="#CCCCCC"/>
  105. <text>暂无相关商品</text>
  106. </view>
  107. </view>