productItem.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <view class="product-item">
  3. <view>
  4. <u-image :src="item.productImage+'?x-oss-process=image/resize,p_30'" height="140px" width="100%"></u-image>
  5. <view class="back-price" v-if="item.promoRuleValue">返<text>{{item.promoRuleValue}}</text>元</view>
  6. <view class="product-code ellipsis-one">{{item.productCode}}</view>
  7. </view>
  8. <view>
  9. <view class="product-name ellipsis-two">{{item.productName}}</view>
  10. <view class="product-guige ellipsis-two">{{item.productOrigCode}}</view>
  11. <view class="product-button">
  12. <view class="price-txt">¥<text>{{item.cost}}</text></view>
  13. <view>
  14. <u-button v-if="!checked" @click="addToCat(item)" :throttle-time="50" size="mini" type="primary" shape="circle"><u-icon name="plus"></u-icon></u-button>
  15. <u-button v-else :throttle-time="50" @click="addToCat(item)" size="mini" type="success" shape="circle"><u-icon name="plus"></u-icon>{{item.qty}}</u-button>
  16. </view>
  17. </view>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. export default {
  23. name: 'productItem',
  24. props: {
  25. item: {
  26. type: Object,
  27. default: () => ({})
  28. },
  29. checked:{
  30. type: Boolean,
  31. default: false
  32. }
  33. },
  34. data() {
  35. return {
  36. }
  37. },
  38. methods: {
  39. addToCat(item){
  40. this.$emit('chooseProduct',item)
  41. }
  42. },
  43. }
  44. </script>
  45. <style lang="less">
  46. .product-item{
  47. background: #ffffff;
  48. border-radius: 10upx;
  49. box-shadow: 1px 1px 3px #EEEEEE;
  50. height: 100%;
  51. display: flex;
  52. flex-direction: column;
  53. > view{
  54. &:first-child{
  55. position: relative;
  56. overflow: hidden;
  57. border-bottom: 1px solid #eee;
  58. .product-code{
  59. color: #666;
  60. position: absolute;
  61. width: 100%;
  62. left:0;
  63. bottom:0;
  64. background: rgba(255,255,255,0.7);
  65. text-align: center;
  66. }
  67. }
  68. &:last-child{
  69. padding: 20rpx 20rpx 70rpx 20rpx;
  70. position: relative;
  71. flex-grow: 1;
  72. .product-name{
  73. font-size: 28rpx;
  74. font-weight: 900;
  75. color: #666;
  76. }
  77. .product-guige{
  78. margin: 10rpx 0 20rpx 0;
  79. color: #2196F3;
  80. text{
  81. margin-right: 10rpx;
  82. }
  83. }
  84. }
  85. .product-button{
  86. display: flex;
  87. justify-content: space-between;
  88. align-items: center;
  89. position: absolute;
  90. bottom: 20rpx;
  91. left: 0;
  92. width: 100%;
  93. padding: 0 20rpx;
  94. }
  95. .cart-add{
  96. padding: 6rpx 15rpx;
  97. border-radius: 30rpx;
  98. background: #2196F3;
  99. color: #fff;
  100. display: flex;
  101. align-items: center;
  102. justify-content: center;
  103. font-size: 24rpx;
  104. }
  105. .colr-add{
  106. background: #2196F3;
  107. padding: 10rpx 20rpx;
  108. }
  109. .colr-checks{
  110. background: #00aa00;
  111. }
  112. }
  113. }
  114. </style>