myButtons.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <u-popup :show="show" @close="show=false">
  3. <u-button :type="item.btnType" v-if="judge(item)" :text="item.name" @click="action(item)"
  4. v-for="(item,index) in btnList" :key="index"></u-button>
  5. </u-popup>
  6. </template>
  7. <script>
  8. export default {
  9. props: {
  10. btnList: {
  11. type: Array,
  12. default: () => []
  13. },
  14. current: {
  15. type: Object,
  16. default: () => {}
  17. }
  18. },
  19. data() {
  20. return {
  21. show: false,
  22. }
  23. },
  24. computed: {
  25. judge() {
  26. return (item) => {
  27. if (item.judge) {
  28. let is = true
  29. item.judge.forEach(({
  30. key,
  31. value
  32. }) => {
  33. if (!value.includes(this.current[key])) {
  34. is = false
  35. }
  36. })
  37. return is
  38. } else {
  39. return true
  40. }
  41. }
  42. }
  43. },
  44. methods: {
  45. action(item) {
  46. this.show = false
  47. if (item.type == 1) {
  48. uni.navigateTo({
  49. url: item.pageUrl + '?id=' + this.current.id
  50. })
  51. } else {
  52. this.$emit(item.apiName)
  53. }
  54. },
  55. }
  56. }
  57. </script>
  58. <style lang="scss" scoped>
  59. .card_box {
  60. width: 750rpx;
  61. padding: 16rpx 32rpx;
  62. box-sizing: border-box;
  63. border-bottom: 2rpx solid #E1E1E1;
  64. .item_box {
  65. margin-top: 10rpx;
  66. .round {
  67. width: 40rpx;
  68. height: 40rpx;
  69. line-height: 40rpx;
  70. border-radius: 50%;
  71. background: $theme-color;
  72. color: #fff;
  73. text-align: center;
  74. font-size: 20rpx;
  75. }
  76. .orderId {
  77. color: #000;
  78. font-family: PingFang HK;
  79. font-size: 28rpx;
  80. font-style: normal;
  81. font-weight: 600;
  82. }
  83. .item_one {
  84. width: 100%;
  85. font-size: 26rpx;
  86. font-style: normal;
  87. font-weight: 400;
  88. line-height: 38rpx;
  89. word-wrap: break-word;
  90. }
  91. .gylx {
  92. color: $theme-color;
  93. }
  94. .perce50 {
  95. width: 50%;
  96. }
  97. .perce100 {
  98. width: 100% !important;
  99. }
  100. }
  101. }
  102. </style>