productContent.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <template>
  2. <view class="introduce-section">
  3. <view class="price-box">
  4. <text class="price-tip">现金</text>
  5. <view class="price">
  6. {{ (goodsObjact.price*1-goodsObjact.max_integral*1).toFixed(2) }}
  7. </view>
  8. <view class="" v-if="isgold == 1" style="color: #ffac60;">
  9. 可获金豆{{goodsObjact.price}}
  10. </view>
  11. <view class="" v-if="goodsObjact.is_integral == 1" style="color: #ffac60; margin-left: 5rpx;">
  12. +金券{{goodsObjact.max_integral}}
  13. </view>
  14. <text class="m-price" v-if="goodsObjact.ot_price*1 >= goodsObjact.price*1">原价¥{{ goodsObjact.ot_price }}</text>
  15. </view>
  16. <text class="title clamp2">{{ goodsObjact.store_name }}</text>
  17. <view class="flex" style="color: #999;font-size: 22rpx;padding-top: 8rpx;">
  18. <view class="">
  19. 销量:{{goodsObjact.sales || '0'}}
  20. </view>
  21. <view class="">
  22. 库存: {{goodsObjact.stock || '0'}}
  23. </view>
  24. </view>
  25. </view>
  26. </template>
  27. <script>
  28. export default {
  29. props: {
  30. goodsObjact: {
  31. type: Object,
  32. default: function() {
  33. return {
  34. percent:1
  35. };
  36. }
  37. },
  38. isgold: {
  39. type: Number,
  40. default: 0
  41. },
  42. },
  43. filters: {
  44. parseIntTo(percent) {
  45. percent = +percent * 100;
  46. if (percent % 1 === 0) {
  47. return percent;
  48. } else {
  49. percent = percent.toFixed(1);
  50. return percent;
  51. }
  52. }
  53. },
  54. data() {
  55. return {};
  56. }
  57. };
  58. </script>
  59. <style lang="scss">
  60. /* 标题简介 */
  61. .introduce-section {
  62. position: relative;
  63. background: #fff;
  64. padding: 26rpx 24rpx 30rpx;
  65. .title {
  66. font-size: 36rpx;
  67. color: $font-color-dark;
  68. .tip-o {
  69. color: #ff3334;
  70. padding-left: 15rpx;
  71. }
  72. }
  73. .shareDate {
  74. position: absolute;
  75. top: 25rpx;
  76. right: 25rpx;
  77. font-size: 26rpx;
  78. color: #3d3f46;
  79. border-radius: 15rpx;
  80. background-color: #ffffff;
  81. height: 60rpx;
  82. line-height: 60rpx;
  83. }
  84. .share-img {
  85. width: 30rpx;
  86. height: 30rpx;
  87. position: relative;
  88. top: 5rpx;
  89. left: 0;
  90. margin-right: 10rpx;
  91. }
  92. .info {
  93. color: #999999;
  94. font-size: 26rpx;
  95. padding-bottom: 15rpx;
  96. }
  97. .progress-box {
  98. width: 260rpx;
  99. position: relative;
  100. margin-top: 15rpx;
  101. line-height: 10px;
  102. .number {
  103. font-size: 17rpx;
  104. position: absolute;
  105. z-index: 999;
  106. top: 3rpx;
  107. left: 15rpx;
  108. color: #ffffff;
  109. }
  110. }
  111. .price-box {
  112. display: flex;
  113. align-items: baseline;
  114. font-size: 26rpx;
  115. color: $uni-color-primary;
  116. }
  117. .price-tip {
  118. color: #FF4C4C;
  119. }
  120. .price {
  121. font-size: 50rpx;
  122. font-family: PingFang SC;
  123. font-weight: 800;
  124. color: #FF4C4C;
  125. }
  126. .m-price {
  127. margin: 0 12rpx;
  128. color: $font-color-light;
  129. text-decoration: line-through;
  130. font-size: 34rpx;
  131. }
  132. }
  133. </style>