list.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <template>
  2. <view>
  3. <navbar v-model="screenHeight" title-color="#ffffff" background="#1b43c4" :iSimmersive="false" :placeholder="true" title="商品列表"></navbar>
  4. <view class="navbar">
  5. <view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
  6. 综合排序
  7. </view>
  8. <view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
  9. 销量优先
  10. </view>
  11. <view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
  12. <view>价格</view>
  13. <view class="arrow-box">
  14. <text :class="{active: priceOrder === 1 && filterIndex === 2,'icon-arrow-up-active':priceOrder === 1 && filterIndex === 2}" class="icon iconfont icon-arrow-up">&#xe61c;</text>
  15. <text :class="{active: priceOrder === 2 && filterIndex === 2,'icon-arrow-down-active':priceOrder === 2 && filterIndex === 2}" class="icon iconfont icon-arrow-down">&#xe61c;</text>
  16. </view>
  17. </view>
  18. </view>
  19. <view style="height: 100rpx; background-color: #b91922"></view>
  20. <mescroll-body
  21. ref="mescrollRef"
  22. @init="mescrollInit"
  23. @down="downCallback"
  24. @up="upCallback"
  25. :height="(screenHeight-50)+'px'"
  26. >
  27. <view class="goods-list-box">
  28. <view
  29. class="goods-list-item-box"
  30. v-for="(item,index) in result"
  31. :key="index"
  32. @click="go(keywords,item.id)"
  33. >
  34. <view class="goods-list-item-wrap">
  35. <view><image :src="item.photo"></view>
  36. <view>{{ item.title }}</view>
  37. <view>¥{{ item.price }}</view>
  38. </view>
  39. </view>
  40. </view>
  41. </mescroll-body>
  42. </view>
  43. </template>
  44. <script>
  45. import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  46. import navbar from "@/components/navbar/navbar";
  47. export default {
  48. mixins: [MescrollMixin],
  49. components: {
  50. navbar
  51. },
  52. data() {
  53. return {
  54. screenHeight: 0,
  55. filterIndex: 0,
  56. priceOrder: 1,
  57. result: [],
  58. keywords: ""
  59. }
  60. },
  61. onLoad(options) {
  62. this.keywords = options.keywords;
  63. },
  64. methods: {
  65. go(keywords,goods_id){
  66. let platformAgent = this.$utils.platformAgent();
  67. let client_type = 1;
  68. if(platformAgent.isMini){
  69. client_type = 4;
  70. }else if(platformAgent.isWechat){
  71. client_type = 3;
  72. }else if(platformAgent.type == "app"){
  73. client_type = 2;
  74. }
  75. this.$http.searchKeywords({
  76. keywords:keywords,
  77. goods_id:goods_id,
  78. client_type: client_type
  79. }).then(res=>{
  80. this.$utils.navigateTo("goods/view",{ id: goods_id });
  81. }).catch(err=>{
  82. this.$utils.msg("请求失败,请检查网络是否连接");
  83. })
  84. },
  85. tabClick(index){
  86. if(this.filterIndex === index && index !== 2){
  87. return;
  88. }
  89. this.filterIndex = index;
  90. if(index === 2){
  91. this.priceOrder = this.priceOrder === 1 ? 2: 1;
  92. }else{
  93. this.priceOrder = 0;
  94. }
  95. this.mescroll.resetUpScroll();
  96. },
  97. downCallback(){
  98. setTimeout(()=>{
  99. this.mescroll.resetUpScroll();
  100. },1200);
  101. },
  102. triggerDownScroll(){
  103. this.mescroll.triggerDownScroll();
  104. },
  105. upCallback(page) {
  106. this.$http.getSearchList({
  107. page: page.num,
  108. keywords: this.keywords,
  109. type: this.filterIndex,
  110. sort: this.priceOrder
  111. }).then((result)=>{
  112. this.mescroll.endByPage(result.data.list.length, result.data.total);
  113. if(result.status==1){
  114. if(page.num == 1) this.result = [];
  115. this.result = this.result.concat(result.data.list);
  116. }else if(result.status == -1){
  117. this.mescroll.endErr();
  118. }
  119. }).catch(error=>{
  120. this.mescroll.endErr();
  121. });
  122. }
  123. }
  124. }
  125. </script>
  126. <style lang="scss" scoped>
  127. .navbar{
  128. position: fixed;
  129. top: calc(45px + env(safe-area-inset-top)) + rpx;
  130. /* #ifdef APP-PLUS */
  131. left: 0;
  132. /* #endif */
  133. /* #ifdef H5 */
  134. left: 0;
  135. /* #endif */
  136. display: flex;
  137. width: 100%;
  138. height: 100rpx;
  139. background: #1b43c4;
  140. z-index: 10111;
  141. .nav-item{
  142. flex: 1;
  143. display: flex;
  144. justify-content: center;
  145. align-items: center;
  146. height: 100%;
  147. font-size: 28rpx;
  148. color: #fff;
  149. position: relative;
  150. &.current{ color: #fff000; }
  151. .arrow-box{
  152. display: flex;
  153. flex-direction: column;
  154. .icon{
  155. display: flex;
  156. align-items: center;
  157. justify-content: center;
  158. width: 38rpx;
  159. height: 10rpx;
  160. line-height: 10rpx;
  161. margin-left: 0px;
  162. font-size: 30rpx;
  163. color: #fff;
  164. text-align: center;
  165. &.active{
  166. color: #fff000;
  167. }
  168. }
  169. .icon-arrow-up {}
  170. .icon-arrow-down {
  171. transform:rotate(-180deg);
  172. }
  173. }
  174. }
  175. }
  176. .goods-list-box{ margin-top: 20rpx; width: 100%;display: flex; flex-direction: row;flex-wrap: wrap; }
  177. .goods-list-item-box{ width: 50%; margin-bottom: 20rpx; }
  178. .goods-list-item-box:nth-child(2n+1) .goods-list-item-wrap { margin-left: 20rpx; margin-right: 10rpx; }
  179. .goods-list-item-box:nth-child(2n) .goods-list-item-wrap { margin-left: 10rpx; margin-right: 20rpx; }
  180. .goods-list-item-wrap{ height: 520rpx; background: #fff; overflow: hidden; border-radius: 16rpx; }
  181. .goods-list-item-wrap view { display: block; }
  182. .goods-list-item-wrap view:nth-child(1) { height: 370rpx; }
  183. .goods-list-item-wrap view:nth-child(1) image { padding: 20rpx 5%; width: 90%; height: 330rpx; }
  184. .goods-list-item-wrap view:nth-child(2) { height: 80rpx; font-size: 30rpx; padding: 0 20rpx; display: -webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical; }
  185. .goods-list-item-wrap view:nth-child(3){ font-size: 26rpx; padding: 10rpx; color: red; }
  186. </style>