chooseProductItemSkline.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <template>
  2. <block>
  3. <view class="choose-product-item"
  4. v-for="(item, dix) in list"
  5. :key="item.id"
  6. >
  7. <view>
  8. <view class="choose-product-item-img">
  9. <image mode="aspectFit" :src="item.productImage+'?x-oss-process=image/resize,p_30'" style="width: 100%;height: 180rpx;"></image>
  10. <view class="back-price" v-if="item.promoRuleValue">返<text>{{item.promoRuleValue}}</text>元</view>
  11. <view class="choose-product-item-left-info-code ellipsis-one">{{item.productCode}}</view>
  12. </view>
  13. <view class="choose-product-item-info">
  14. <view class="choose-product-item-left-info-name ellipsis-two">{{item.productName}}</view>
  15. <view class="choose-product-item-left-info-guige ellipsis-two">{{item.productOrigCode}}</view>
  16. <view class="choose-product-item-left-info-price">
  17. <view class="price-txt">¥<text>{{item.cost}}</text></view>
  18. <view>
  19. <uni-number-box v-if="!edit" v-model="item.qty" :min="1" :max="999999" @change="v=>{changeQty(v,item.id)}"></uni-number-box>
  20. <view v-else class="edit-qty">
  21. X <text>{{item.qty}}</text>
  22. <image src="../static/del.png" style="width: 30px;height: 30px;" mode="aspectFit" @click="remove(item.id)"></image>
  23. </view>
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. </block>
  30. </template>
  31. <script>
  32. import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
  33. export default {
  34. name: 'chooseProductItemSkline',
  35. components: {
  36. uniNumberBox
  37. },
  38. props: {
  39. index: {
  40. type: Number,
  41. default: 0
  42. },
  43. list: {
  44. type: Array,
  45. default: () => []
  46. },
  47. edit: {
  48. type: Boolean,
  49. default: false
  50. }
  51. },
  52. data() {
  53. return {
  54. }
  55. },
  56. methods: {
  57. changeQty(e, id) {
  58. this.$emit('changeQty', e, id)
  59. },
  60. remove(id){
  61. this.$emit('remove',id)
  62. }
  63. }
  64. }
  65. </script>
  66. <style lang="less">
  67. .choose-product-item{
  68. display: flex;
  69. align-items: center;
  70. justify-content: space-between;
  71. padding: 10px;
  72. border-bottom: 1px solid #eee;
  73. .price-txt{
  74. color: red;
  75. display: flex;
  76. align-items: center;
  77. text{
  78. font-size: 36rpx;
  79. }
  80. }
  81. > view{
  82. display: flex;
  83. align-items: center;
  84. justify-content: space-between;
  85. flex-grow: 1;
  86. width: 100%;
  87. }
  88. .choose-product-item-img{
  89. margin-right: 20rpx;
  90. width: 30%;
  91. position: relative;
  92. overflow: hidden;
  93. border: 1px solid #eee;
  94. padding: 10rpx;
  95. .no-txt{
  96. position: absolute;
  97. top: 10rpx;
  98. left: 10rpx;
  99. height: 30rpx;
  100. min-width: 30rpx;
  101. background: #9E9E9E;
  102. color: #fff;
  103. text-align: center;
  104. line-height: 30rpx;
  105. border-radius: 5rpx;
  106. z-index: 100;
  107. }
  108. .back-price{
  109. zoom: calc(0.8);
  110. padding: 6rpx 65rpx;
  111. background: rgba(255 ,87 ,34 , 1);
  112. position: absolute;
  113. top: 18rpx;
  114. right: -45rpx;
  115. color: #fff;
  116. z-index: 2;
  117. font-size: 20rpx;
  118. text-align: center;
  119. transform: rotate(40deg);
  120. display: flex;
  121. align-items: center;
  122. text{
  123. font-size: 28rpx;
  124. margin: 0 5rpx;
  125. }
  126. }
  127. .choose-product-item-left-info-code{
  128. color: #666;
  129. position: absolute;
  130. width: 100%;
  131. left:0;
  132. bottom:0;
  133. background: rgba(255,255,255,0.7);
  134. text-align: center;
  135. }
  136. }
  137. .choose-product-item-info{
  138. margin-right: 10rpx;
  139. width: 70%;
  140. flex-grow: 1;
  141. .choose-product-item-left-info-price{
  142. display: flex;
  143. align-items:center;
  144. justify-content: space-between;
  145. >view{
  146. &:last-child{
  147. display: flex;
  148. align-items:center;
  149. }
  150. }
  151. .edit-qty{
  152. display: flex;
  153. align-items:center;
  154. justify-content: space-between;
  155. color: #999;
  156. font-size: 12px;
  157. > text{
  158. color: #666;
  159. font-size: 14px;
  160. }
  161. image{
  162. margin-left: 20px;
  163. }
  164. }
  165. }
  166. .choose-product-item-left-info-name{
  167. font-size: 28rpx;
  168. font-weight: 900;
  169. color: #666;
  170. }
  171. .choose-product-item-left-info-guige{
  172. color: #2196F3;
  173. margin: 10rpx 0;
  174. text{
  175. margin-right: 10rpx;
  176. }
  177. }
  178. }
  179. }
  180. </style>