app-order-goods-info.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. <template>
  2. <view class="app-order-goods-info">
  3. <view class='dir-left-nowrap item-box' :style="{'margin-bottom': isLastOne ? '24rpx' : 0}">
  4. <image class='img box-grow-0' mode='aspectFill' :src='goods.pic_url'></image>
  5. <view class='box-grow-1'>
  6. <view class='goods-name'>{{goods.name}}</view>
  7. <view class='attr'>规格:
  8. <text v-for='item in goods.attr_list' :key='item.id'>{{item.attr_name}}</text>
  9. </view>
  10. <view class='dir-left-nowrap'>
  11. <view class='box-grow-1 goods-num'>x{{goods.num}}</view>
  12. <view class='box-grow-0' v-if="plugin == 'composition'">
  13. <view class='main-right price delete-price'>
  14. ¥{{goods.total_price}}
  15. </view>
  16. </view>
  17. <view class='box-grow-0 dir-left-nowrap' v-else>
  18. <view v-if="pluginData && pluginData.exchange_list && pluginData.exchange_list.length" class="price">{{pluginData.exchange_list[pluginIndex].value}}{{pluginData.price_name}}+</view>
  19. <view class='main-right price'>
  20. ¥{{pluginData.price_list ? pluginData.price_list[pluginIndex].value : goods.total_price}}
  21. </view>
  22. </view>
  23. <view class="share-price" v-if="isShare">佣金¥{{sharePrice?sharePrice:0}}</view>
  24. </view>
  25. <view class="composition-price" v-if="plugin == 'composition'">
  26. 搭配套餐价<text>¥{{goods.total_price}}</text>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. export default {
  34. name: 'app-order-goods-info',
  35. data() {
  36. return {}
  37. },
  38. props: {
  39. goods: {
  40. type: Object,
  41. default: {}
  42. },
  43. plugin: {
  44. type: String,
  45. default: ''
  46. },
  47. sharePrice: {
  48. type: String,
  49. default: ''
  50. },
  51. isLastOne: {
  52. type: Boolean,
  53. default: true
  54. },
  55. isShare: {
  56. type: Boolean,
  57. default: false
  58. },
  59. pluginData: {
  60. type: Object,
  61. default: {}
  62. },
  63. pluginIndex: {
  64. type: Number,
  65. default: 0,
  66. }
  67. },
  68. }
  69. </script>
  70. <style scoped lang="scss">
  71. .app-order-goods-info {
  72. font-size: 24#{rpx};
  73. width: 100%;
  74. .img {
  75. width: 160#{rpx};
  76. height: 160#{rpx};
  77. margin-right: 20#{rpx};
  78. flex-shrink: 0;
  79. }
  80. .item-box {
  81. width: 100%;
  82. margin-bottom: 24#{rpx};
  83. }
  84. .label {
  85. color: $uni-general-color-two;
  86. }
  87. .price {
  88. color: $uni-important-color-black;
  89. &.delete-price {
  90. text-decoration: line-through;
  91. }
  92. }
  93. .composition-price {
  94. text-align: right;
  95. font-size: #{22rpx};
  96. color: #999999;
  97. text {
  98. font-size: #{28rpx};
  99. color: #353535;
  100. margin-left: #{8rpx};
  101. }
  102. }
  103. .goods-num {
  104. font-size: $uni-font-size-weak-one;
  105. color: $uni-general-color-two;
  106. }
  107. .attr {
  108. width: 450#{rpx};
  109. margin: 10#{rpx} 0;
  110. color: $uni-general-color-two;
  111. font-size: $uni-font-size-weak-one;
  112. display: inline-block;
  113. white-space: nowrap;
  114. overflow: hidden;
  115. text-overflow: ellipsis;
  116. text {
  117. margin-right: 10#{rpx};
  118. }
  119. }
  120. .goods-name {
  121. color: $uni-important-color-black;
  122. font-size: $uni-font-size-general-two;
  123. word-break: break-all;
  124. text-overflow: ellipsis;
  125. display: -webkit-box;
  126. -webkit-box-orient: vertical;
  127. -webkit-line-clamp: 2;
  128. overflow: hidden;
  129. }
  130. .share-price{
  131. position: absolute;
  132. right: 0;
  133. bottom: 16px;
  134. font-size: 22rpx;
  135. }
  136. }
  137. </style>