deliciousList.wxml 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!--pages/deliciousList.wxml-->
  2. <view class="head-bg">
  3. <image style="width:100%;height: 375rpx" src="{{imgUrl}}list_bg.png"></image>
  4. </view>
  5. <scroll-view style="background-color: #F5F5F5;" scroll-x class="tab" scroll-with-animation="true" scroll-into-view="item{{currentTab < 2 ? 0 : currentTab - 1 }}">
  6. <view id="item{{index}}" wx:for="{{canteenList}}" wx:key="index" class="tab-item {{currentTab === index?'active' : ''}}" bindtap="tabNav" data-index="{{index}}">
  7. {{item.canteenName}}美味榜
  8. </view>
  9. </scroll-view>
  10. <!-- 内容 -->
  11. <view class="swiper-content">
  12. <view wx:if="{{isLoading}}" style="display: flex;justify-content: center;align-items: center;height: 100%;">
  13. <t-loading style="padding-bottom: 200rpx;" theme="spinner" size="64rpx" text="加载中..." inheritColor></t-loading>
  14. </view>
  15. <view wx:elif="{{canteenList.length < 1}}" style="display: flex;justify-content: center;align-items: center;height: 100%;">
  16. <t-empty style="padding-bottom: 100rpx;" icon="info-circle-filled" description="暂无数据" />
  17. </view>
  18. <swiper wx:else current="{{currentTab}}" bindchange="handleSwiper">
  19. <swiper-item wx:for="{{canteenList}}" wx:key="index">
  20. <scroll-view scroll-y="true" style="height: 100%;padding:0;margin:0;">
  21. <view class="content">
  22. <view hidden="{{!item.deliciousList[0]}}" class="cont-width first">
  23. <view class="cont-bg" style="background-image:{{ item.deliciousList[0].dishesPic ? 'url(' + baseUrl + item.deliciousList[0].dishesPic +')' : 'url(' + imgUrl + 'cont_bg.png)' }}">
  24. <view class="number" style="background-image: url({{imgUrl}}top1.png);">
  25. <view>TOP</view>
  26. <view>——</view>
  27. <view>01</view>
  28. </view>
  29. </view>
  30. <view class="stars">
  31. <span style="margin-right: 20rpx;font-size: 27rpx;font-weight: 600;letter-spacing: 3rpx;">{{item.deliciousList[0].dishesName}}</span>
  32. <image wx:key="index" wx:for="{{item.deliciousList[0].score}}" src="{{imgUrl}}stars1.png"></image>
  33. <image wx:key="index" wx:for="{{5 - item.deliciousList[0].score}}" src="{{imgUrl}}stars2.png"></image>
  34. </view>
  35. <view class="quality" style="font-size: 23rpx;letter-spacing: 1rpx;">此菜品上周共获得<span style="color: #F58E3C;">{{item.deliciousList[0].compliment}}</span>次点赞,获得<span style="color: #F58E3C;">{{item.deliciousList[0].commentCount}}</span>次评论</view>
  36. <view class="comments">
  37. <view style="width: 18%;font-size: 24rpx;letter-spacing: 1rpx;">最新评论:</view>
  38. <view style="width: 82%;font-size: 24rpx;letter-spacing: 1rpx;" class="content-text">“{{item.deliciousList[0].evaluation}}”</view>
  39. </view>
  40. <view class="btn">
  41. <view bindtap="toComment" data-data="{{item.deliciousList[0]}}">点击查看</view>
  42. </view>
  43. </view>
  44. <view hidden="{{!item.deliciousList[1]}}" class="cont-width second">
  45. <view class="cont-bg" style="background-image:{{ item.deliciousList[1].dishesPic ? 'url(' + baseUrl + item.deliciousList[1].dishesPic +')' : 'url(' + imgUrl + 'cont_bg.png)' }}">
  46. <view class="number" style="background-image: url({{imgUrl}}top2.png);">
  47. <view>TOP</view>
  48. <view>——</view>
  49. <view>02</view>
  50. </view>
  51. </view>
  52. <view class="stars">
  53. <span style="margin-right: 20rpx;font-size: 27rpx;font-weight: 600;letter-spacing: 3rpx;">{{item.deliciousList[1].dishesName}}</span>
  54. <image wx:key="index" wx:for="{{item.deliciousList[1].score}}" src="{{imgUrl}}stars1.png"></image>
  55. <image wx:key="index" wx:for="{{5 - item.deliciousList[1].score}}" src="{{imgUrl}}stars2.png"></image>
  56. </view>
  57. <view class="quality" style="font-size: 23rpx;letter-spacing: 1rpx;">此菜品上周共获得<span style="color: #F58E3C;">{{item.deliciousList[1].compliment}}</span>次点赞,获得<span style="color: #F58E3C;">{{item.deliciousList[1].commentCount}}</span>次评论</view>
  58. <view class="comments">
  59. <view style="width: 18%;font-size: 24rpx;letter-spacing: 1rpx;">最新评论:</view>
  60. <view style="width: 82%;font-size: 24rpx;letter-spacing: 1rpx;" class="content-text">“{{item.deliciousList[1].evaluation}}”</view>
  61. </view>
  62. <view class="btn">
  63. <view bindtap="toComment" data-data="{{item.deliciousList[1]}}">点击查看</view>
  64. </view>
  65. </view>
  66. <view hidden="{{!item.deliciousList[2]}}" class="cont-width third">
  67. <view class="cont-bg" style="background-image:{{ item.deliciousList[2].dishesPic ? 'url(' + baseUrl + item.deliciousList[2].dishesPic +')' : 'url(' + imgUrl + 'cont_bg.png)' }}">
  68. <view class="number" style="background-image: url({{imgUrl}}top3.png);">
  69. <view>TOP</view>
  70. <view>——</view>
  71. <view>03</view>
  72. </view>
  73. </view>
  74. <view class="stars">
  75. <span style="margin-right: 20rpx;font-size: 27rpx;font-weight: 600;letter-spacing: 3rpx;">{{item.deliciousList[2].dishesName}}</span>
  76. <image wx:key="index" wx:for="{{item.deliciousList[2].score}}" src="{{imgUrl}}stars1.png"></image>
  77. <image wx:key="index" wx:for="{{5 - item.deliciousList[2].score}}" src="{{imgUrl}}stars2.png"></image>
  78. </view>
  79. <view class="quality" style="font-size: 23rpx;letter-spacing: 1rpx;">此菜品上周共获得<span style="color: #F58E3C;">{{item.deliciousList[2].compliment}}</span>次点赞,获得<span style="color: #F58E3C;">{{item.deliciousList[2].commentCount}}</span>次评论</view>
  80. <view class="comments">
  81. <view style="width: 18%;font-size: 24rpx;letter-spacing: 1rpx;">最新评论:</view>
  82. <view style="width: 82%;font-size: 24rpx;letter-spacing: 1rpx;" class="content-text">“{{item.deliciousList[2].evaluation}}”</view>
  83. </view>
  84. <view class="btn">
  85. <view bindtap="toComment" data-data="{{item.deliciousList[2]}}">点击查看</view>
  86. </view>
  87. </view>
  88. </view>
  89. </scroll-view>
  90. </swiper-item>
  91. </swiper>
  92. </view>
  93. <!-- 内容结尾 -->