unopen.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <uni-popup ref="popupRef">
  3. <view class="unopen-box">
  4. <view class="unopen-title">
  5. {{ title }}
  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. dataVal:null
  55. };
  56. },
  57. mounted() {
  58. // this.$refs.popupRef.open()
  59. },
  60. methods: {
  61. open(val) {
  62. this.dataVal = val
  63. this.$nextTick(() => {
  64. this.$refs.popupRef.open();
  65. })
  66. },
  67. close() {
  68. this.$refs.popupRef.close()
  69. },
  70. confirm() {
  71. this.close();
  72. this.$emit('confirm' , this.dataVal)
  73. }
  74. }
  75. }
  76. </script>
  77. <style lang="scss" scoped>
  78. .unopen-box {
  79. width: 520rpx;
  80. background-color: #fff;
  81. border-radius: 20rpx;
  82. overflow: hidden;
  83. .unopen-title {
  84. height: 90rpx;
  85. font-size: 32rpx;
  86. font-family: PingFang SC, PingFang SC-Bold;
  87. font-weight: 700;
  88. text-align: center;
  89. color: #1a1a1a;
  90. line-height: 90rpx;
  91. letter-spacing: 0.64rpx;
  92. border-bottom: 1rpx solid $border-color4;
  93. }
  94. .unopen-content {
  95. padding: 0 36rpx;
  96. min-height: 140rpx;
  97. .content {
  98. padding: 30rpx 0 50rpx;
  99. font-size: 24rpx;
  100. font-family: PingFang SC, PingFang SC-Regular;
  101. font-weight: 400;
  102. color: #1a1a1a;
  103. // display: flex;
  104. // justify-content: center;
  105. // align-items: center;
  106. }
  107. }
  108. .unopen-btns {
  109. width: 100%;
  110. display: flex;
  111. justify-content: space-between;
  112. align-items: stretch;
  113. .unopen-btn {
  114. flex: 1;
  115. height: 70rpx;
  116. line-height: 70rpx;
  117. background-color: $Theme-Color;
  118. margin-bottom: 40rpx;
  119. color: #fff;
  120. text-align: center;
  121. font-size: 30rpx;
  122. letter-spacing: 1px;
  123. border-radius: 6rpx;
  124. }
  125. .cancel-btn {
  126. margin-right: 40rpx;
  127. border: 1rpx solid $Theme-Color;
  128. background-color: #fff;
  129. color: $Theme-Color;
  130. }
  131. }
  132. }
  133. </style>