unopen.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <template>
  2. <uni-popup ref="popupRef">
  3. <view class="unopen-box">
  4. <view class="unopen-title">
  5. 提示
  6. </view>
  7. <view class="unopen-content">
  8. <view class="content" :style="{'text-align': textAlign}">
  9. {{ content }}
  10. </view>
  11. <view class="unopen-btns">
  12. <view v-if="cancelBtn" class="unopen-btn cancel-btn" @click.stop="close()">
  13. {{ cancelBtnTetx }}
  14. </view>
  15. <view class="unopen-btn" @click.stop="confirm()">
  16. {{ confirmBtnTetx }}
  17. </view>
  18. </view>
  19. </view>
  20. </view>
  21. </uni-popup>
  22. </template>
  23. <script>
  24. export default {
  25. name: "unopen",
  26. props: {
  27. title: {
  28. type: String,
  29. default: '提示'
  30. },
  31. cancelBtn: {
  32. type: Boolean,
  33. default: false
  34. },
  35. cancelBtnTetx: {
  36. type: String,
  37. default: '取消'
  38. },
  39. confirmBtnTetx: {
  40. type: String,
  41. default: '确定'
  42. },
  43. textAlign: {
  44. type: String,
  45. default: 'center'
  46. },
  47. content: {
  48. type: String,
  49. default: '暂未开放'
  50. }
  51. },
  52. data() {
  53. return {
  54. };
  55. },
  56. mounted() {
  57. // this.$refs.popupRef.open()
  58. },
  59. methods: {
  60. open() {
  61. this.$nextTick(() => {
  62. this.$refs.popupRef.open();
  63. })
  64. },
  65. close() {
  66. this.$refs.popupRef.close()
  67. },
  68. confirm() {
  69. this.close();
  70. this.$emit('confirm')
  71. }
  72. }
  73. }
  74. </script>
  75. <style lang="scss" scoped>
  76. .unopen-box {
  77. width: 520rpx;
  78. background-color: #fff;
  79. border-radius: 20rpx;
  80. overflow: hidden;
  81. .unopen-title {
  82. height: 90rpx;
  83. font-size: 32rpx;
  84. font-family: PingFang SC, PingFang SC-Bold;
  85. font-weight: 700;
  86. text-align: center;
  87. color: #1a1a1a;
  88. line-height: 90rpx;
  89. letter-spacing: 0.64rpx;
  90. border-bottom: 1rpx solid $border-color4;
  91. }
  92. .unopen-content {
  93. padding: 0 36rpx;
  94. min-height: 140rpx;
  95. .content {
  96. padding: 30rpx 0 50rpx;
  97. font-size: 24rpx;
  98. font-family: PingFang SC, PingFang SC-Regular;
  99. font-weight: 400;
  100. color: #1a1a1a;
  101. // display: flex;
  102. // justify-content: center;
  103. // align-items: center;
  104. }
  105. }
  106. .unopen-btns {
  107. width: 100%;
  108. display: flex;
  109. justify-content: space-between;
  110. align-items: stretch;
  111. .unopen-btn {
  112. flex: 1;
  113. height: 70rpx;
  114. line-height: 70rpx;
  115. background-color: $Theme-Color;
  116. margin-bottom: 40rpx;
  117. color: #fff;
  118. text-align: center;
  119. font-size: 30rpx;
  120. letter-spacing: 1px;
  121. border-radius: 6rpx;
  122. }
  123. .cancel-btn {
  124. margin-right: 40rpx;
  125. border: 1rpx solid $Theme-Color;
  126. background-color: #fff;
  127. color: $Theme-Color;
  128. }
  129. }
  130. }
  131. </style>