wk-popup-expiration.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <template>
  2. <view class="wk-popup-expiration">
  3. <view class="content">
  4. <image :src="$static('images/expiration_remind.png')" mode="" class="img" />
  5. <view class="content-title">
  6. 到期预警
  7. </view>
  8. <view class="content-text">
  9. <view>管理员您好:</view>
  10. <view class="text">
  11. 您的云服务将于{{ expirationInfo.endTime }}正式到期,截止目前仅剩{{ expirationInfo.endDay }}天未续费的云服务到期后将无法正常登录使用,为了保证正常使用,请及时续费!如果已经启动付费流程,请忽略此条信息
  12. </view>
  13. </view>
  14. <view class="ignore-btn" @click="ignoreRemind">
  15. 忽略
  16. </view>
  17. </view>
  18. <view class="close-btn" @click="handleClose">
  19. <text class="wk wk-close" />
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. import { IgnoreCompanyStatus } from '../../api/admin'
  25. import { mapGetters, mapMutations } from 'vuex'
  26. export default {
  27. name: 'WkPopupExpiration',
  28. inject: ['popup'],
  29. computed: {
  30. ...mapGetters({
  31. expirationInfo: 'user/expirationInfo'
  32. })
  33. },
  34. methods: {
  35. ...mapMutations({
  36. setExpirationStatus: 'user/SET_EXPIRATION'
  37. }),
  38. /**
  39. * 点击关闭
  40. */
  41. handleClose() {
  42. this.setExpirationStatus(false)
  43. this.popup.close()
  44. },
  45. /**
  46. * 忽略提醒
  47. */
  48. ignoreRemind() {
  49. IgnoreCompanyStatus()
  50. this.handleClose()
  51. }
  52. }
  53. }
  54. </script>
  55. <style scoped lang="scss">
  56. .wk-popup-expiration {
  57. width: 532rpx;
  58. color: $dark;
  59. margin: auto;
  60. .content {
  61. width: 100%;
  62. background-color: white;
  63. border-radius: 38rpx;
  64. overflow: hidden;
  65. .img {
  66. width: 100%;
  67. height: 272rpx;
  68. }
  69. .content-title {
  70. font-size: $wk-font-large;
  71. font-weight: 500;
  72. text-align: center;
  73. margin-top: 20rpx;
  74. }
  75. .content-text {
  76. font-size: $wk-font-base;
  77. line-height: 1.7;
  78. color: $gray;
  79. padding: 0 46rpx;
  80. margin-top: 10rpx;
  81. .text {
  82. text-indent: 56rpx;
  83. margin-top: 5rpx;
  84. }
  85. }
  86. .ignore-btn {
  87. width: 50%;
  88. height: 70rpx;
  89. font-size: $wk-font-medium;
  90. text-align: center;
  91. line-height: 70rpx;
  92. color: $gray;
  93. border: 1rpx solid #cccccc;
  94. border-radius: 70rpx;
  95. margin: 20rpx auto 30rpx;
  96. }
  97. }
  98. .close-btn {
  99. width: 66rpx;
  100. height: 66rpx;
  101. color: white;
  102. border: 2rpx solid white;
  103. border-radius: 50%;
  104. margin: 50rpx auto 0;
  105. @include center;
  106. .wk-close {
  107. font-size: 36rpx;
  108. line-height: normal;
  109. vertical-align: middle;
  110. }
  111. }
  112. }
  113. </style>