1
0

app-price.vue 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <view class="app-price t-omit" :class="sign !== 'gift' ? theme+'-m-text ' + theme : userTheme+'-color ' + userTheme" v-if="actual.price != -1">
  3. <text :class="actual.type">{{actual.price}}</text>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. props: {
  9. max: {
  10. type: String,
  11. default() {
  12. return '-1';
  13. }
  14. },
  15. min: {
  16. type: String,
  17. default() {
  18. return '-1';
  19. }
  20. },
  21. defaultPrice: {
  22. type: String,
  23. default() {
  24. return '-1';
  25. }
  26. },
  27. price: {
  28. type: [String, Number],
  29. default() {
  30. return '-1';
  31. }
  32. },
  33. type: {
  34. type: String,
  35. default() {
  36. return 'text-price'; // 目前支持text-price和text-price-all
  37. }
  38. },
  39. theme: String,
  40. userTheme: String,
  41. sign: String
  42. },
  43. data() {
  44. return {
  45. priceType: this.type,
  46. }
  47. },
  48. computed: {
  49. actual() {
  50. let actualPrice = -1;
  51. let price = -1;
  52. let min = -1;
  53. let max = -1;
  54. let defaultPrice = -1;
  55. let type = this.type;
  56. if (this.price !== 'undefined') {
  57. price = Number(this.price);
  58. }
  59. if (this.min !== 'undefined') {
  60. min = Number(this.min);
  61. }
  62. if (this.max !== 'undefined') {
  63. max = Number(this.max);
  64. }
  65. if (this.defaultPrice !== 'undefined') {
  66. defaultPrice = Number(this.defaultPrice);
  67. }
  68. if (!isNaN(price) && price >= 0) {
  69. actualPrice = price;
  70. } else if (max > min && min >= 0) {
  71. actualPrice = min + '-' + max;
  72. } else if (max === min && min >= 0) {
  73. actualPrice = min;
  74. } else if (defaultPrice >= 0) {
  75. actualPrice = defaultPrice;
  76. }
  77. if (actualPrice === 0) {
  78. actualPrice = '免费';
  79. type = '';
  80. }
  81. return {
  82. price: actualPrice,
  83. type: type
  84. };
  85. }
  86. }
  87. }
  88. </script>
  89. <style scoped lang="scss">
  90. .text-price::before {
  91. content: '¥';
  92. font-size: 60%;
  93. }
  94. .text-price-all::before {
  95. content: '¥';
  96. font-size: 95%;
  97. }
  98. </style>