waterfall-item.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <view class="waterfall-item-container">
  3. <!-- <view class="waterfall-item" @tap="onTap">
  4. <image :src="params.url" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
  5. <view class="content">
  6. <view>{{params.title}}</view>
  7. <view class="money">{{params.money}}元</view>
  8. <view style="margin: 0 0 8rpx 0;">
  9. <text class="label">{{params.label}}</text>
  10. </view>
  11. <view class="shop-name">{{params.shop}}</view>
  12. </view>
  13. </view> -->
  14. <view class="waterfall-item-container" >
  15. <view class="contentItem" @tap="onTap(params.money)">
  16. <image :src="params.url" mode="widthFix" @load="emitHeight" @error="emitHeight"></image>
  17. <view class="itemName">{{params.label}}</view>
  18. <view class="itemPrice">{{params.money}}积分</view>
  19. </view>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. name:"helangWaterfallItem",
  26. options:{
  27. virtualHost: true
  28. },
  29. props:{
  30. params:{
  31. type: Object,
  32. default(){
  33. return {}
  34. }
  35. },
  36. tag:{
  37. type:String | Number,
  38. default:''
  39. },
  40. index:{
  41. type:Number,
  42. default:-1
  43. }
  44. },
  45. data() {
  46. return {
  47. };
  48. },
  49. methods:{
  50. // 发出组件高度信息,在此处可以区分正确和错误的加载,给予错误的提示图片
  51. emitHeight(e){
  52. const query = uni.createSelectorQuery().in(this);
  53. query.select('.waterfall-item-container').boundingClientRect(data => {
  54. let height = Math.floor(data.height);
  55. this.$emit("height",height,this.$props.tag);
  56. }).exec();
  57. },
  58. onTap(id){
  59. this.$emit("click",this.$props.index,this.$props.tag);
  60. console.log(id)
  61. uni.navigateTo({
  62. url:'/pages/my/integral/integralOrder'
  63. })
  64. }
  65. }
  66. }
  67. </script>
  68. <style lang="scss" scoped>
  69. // .waterfall-item{
  70. // padding: 16rpx;
  71. // background-color: #fff;
  72. // border-radius: 4px;
  73. // font-size: 28rpx;
  74. // color: #666;
  75. // image{
  76. // display: block;
  77. // width: 100%;
  78. // // 默认设置一个图片的大约值
  79. // height: 350rpx;
  80. // }
  81. // .content{
  82. // margin-top: 16rpx;
  83. // .money{
  84. // color: #fa3534;
  85. // margin-top: 8rpx;
  86. // }
  87. // .label{
  88. // background-color: #fa3534;
  89. // color: #fff;
  90. // font-size: 20rpx;
  91. // padding: 4rpx 16rpx;
  92. // border-radius: 20rpx;
  93. // }
  94. // .shop-name{
  95. // font-size: 20rpx;
  96. // color: #999;
  97. // }
  98. // }
  99. // }
  100. .waterfall-item-container{
  101. display: flex;
  102. flex-wrap: wrap;
  103. box-sizing: border-box;
  104. .contentItem{
  105. width: 332rpx;
  106. // height: 100%;
  107. background: #FFFFFF;
  108. box-sizing: border-box;
  109. box-shadow: 0px 4rpx 8rpx 0px rgba(0,0,0,0.04);
  110. border-radius: 12rpx;
  111. image{
  112. width: 100%;
  113. height: 100%;
  114. }
  115. .itemName{
  116. margin:0 18rpx 10rpx 22rpx ;
  117. font-size: 28rpx;
  118. font-family: PingFang-SC-Bold, PingFang-SC;
  119. font-weight: bold;
  120. color: #333333;
  121. }
  122. .itemPrice{
  123. margin-left: 22rpx;
  124. font-size: 28rpx;
  125. font-family: PingFang-SC-Bold, PingFang-SC;
  126. font-weight: bold;
  127. color: #FF6200;
  128. }
  129. }
  130. }
  131. </style>