productItemSkline.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <template>
  2. <view
  3. class="product-list"
  4. >
  5. <view
  6. class="product-item"
  7. :style="{width:itemWidth+'px',marginTop:gap+'px'}"
  8. v-for="(item,index) in list"
  9. :key="item.id" >
  10. <view @click="toDetail(item)">
  11. <image mode="aspectFit" :src="item.productImage+'?x-oss-process=image/resize,p_30'" style="height: 140px;width: 100%;"></image>
  12. <view class="product-code"><text :max-lines="1" overflow="ellipsis">{{item.productCode}}</text></view>
  13. </view>
  14. <view>
  15. <view class="product-name">{{item.productName}}</view>
  16. <view class="product-guige"><text :max-lines="2" overflow="ellipsis">{{item.productOrigCode}}</text></view>
  17. <view class="product-button">
  18. <view class="price-txt">¥<text>{{Number(item.cost).toFixed(2).toString().split('.')[0]}}</text>.{{Number(item.cost).toFixed(2).toString().split('.')[1]}}</view>
  19. <view class="flex align_center rebate-tag" v-if="index==1">
  20. 返<text>{{item.promoRuleValue}}</text>元
  21. </view>
  22. <view class="flex align_center rebate-tag" v-if="index==2">
  23. 买3赠2
  24. </view>
  25. <view class="flex align_center tejia-tag" v-if="index==3">
  26. 特价<text>¥20</text>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. export default {
  35. name: 'productItemSkline',
  36. props: {
  37. list: {
  38. type: Array,
  39. default: () => []
  40. },
  41. index:{
  42. type: [Number,String],
  43. default: 0
  44. },
  45. gap:{
  46. type: [Number,String],
  47. default: 10
  48. },
  49. itemWidth:{
  50. type: [Number,String],
  51. default: 0
  52. }
  53. },
  54. data() {
  55. return {
  56. }
  57. },
  58. methods: {
  59. toDetail(item){
  60. uni.navigateTo({
  61. url:'/pagesB/shopiing/productDetail?sn='+item.productSn
  62. })
  63. this.$emit('detail',item)
  64. }
  65. },
  66. }
  67. </script>
  68. <style lang="less">
  69. .product-list{
  70. display:flex;
  71. flex-wrap: wrap;
  72. justify-content: space-between;
  73. padding: 0 2%;
  74. }
  75. .product-item{
  76. background: #ffffff;
  77. border-radius: 10upx;
  78. box-shadow: 1px 1px 3px #EEEEEE;
  79. width: 48%;
  80. margin: 10px 0 0 0;
  81. display: flex;
  82. flex-direction: column;
  83. .price-txt{
  84. color: red;
  85. display: flex;
  86. align-items: baseline;
  87. font-size: 12px;
  88. text{
  89. font-size: 36rpx;
  90. }
  91. }
  92. > view{
  93. &:first-child{
  94. position: relative;
  95. overflow: hidden;
  96. .product-code{
  97. color: #666;
  98. position: absolute;
  99. width: 100%;
  100. left:0;
  101. bottom:0;
  102. background: rgba(255,255,255,0.7);
  103. text-align: center;
  104. }
  105. }
  106. &:last-child{
  107. position: relative;
  108. flex-grow: 1;
  109. padding: 10px 10px 35px;
  110. .product-name{
  111. font-size: 28rpx;
  112. color: #333;
  113. }
  114. .product-guige{
  115. margin: 10rpx 0;
  116. color: #2196F3;
  117. }
  118. }
  119. .product-button{
  120. position: absolute;
  121. left: 5%;
  122. bottom: 0;
  123. width: 90%;
  124. padding: 5px 0 10px;
  125. display: flex;
  126. align-items: center;
  127. .rebate-tag{
  128. background: #ffe7df;
  129. color: #E91E63;
  130. padding: 2px 5px;
  131. font-size: 10px;
  132. border-radius: 3px;
  133. margin-left: 6px;
  134. }
  135. .tejia-tag{
  136. color: #E91E63;
  137. margin-left: 6px;
  138. font-size: 12px;
  139. text{
  140. font-size: 12px;
  141. color: #999;
  142. margin-left: 5px;
  143. }
  144. }
  145. }
  146. }
  147. }
  148. </style>