auditModal.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <template>
  2. <a-modal
  3. centered
  4. class="audit-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. v-model="isShow"
  8. @cancle="isShow=false"
  9. :width="416">
  10. <a-spin :spinning="spinning" tip="Loading...">
  11. <div class="audit-main">
  12. <a-icon type="question-circle" style="color: #faad14;font-size: 22px;margin-right: 16px;" />
  13. <div class="audit-cont">
  14. <p class="audit-tit">提示</p>
  15. <p class="audit-txt">请点击下方按钮确认操作?</p>
  16. </div>
  17. </div>
  18. <div class="btn-box">
  19. <a-button type="primary" class="button-error" @click="handleAuditFail">审核不通过</a-button>
  20. <a-button type="primary" class="button-info" @click="handleAuditOk">审核通过</a-button>
  21. </div>
  22. </a-spin>
  23. </a-modal>
  24. </template>
  25. <script>
  26. export default {
  27. name: 'AuditModal',
  28. props: {
  29. openModal: { // 弹框显示状态
  30. type: Boolean,
  31. default: false
  32. },
  33. spinning: {
  34. type: Boolean,
  35. default: false
  36. }
  37. },
  38. data () {
  39. return {
  40. isShow: this.openModal // 是否打开弹框
  41. }
  42. },
  43. methods: {
  44. // 审核通过
  45. handleAuditOk () {
  46. this.$emit('ok')
  47. },
  48. // 审核不通过
  49. handleAuditFail () {
  50. this.$emit('fail')
  51. }
  52. },
  53. watch: {
  54. // 父页面传过来的弹框状态
  55. openModal (newValue, oldValue) {
  56. this.isShow = newValue
  57. },
  58. // 重定义的弹框状态
  59. isShow (newValue, oldValue) {
  60. if (!newValue) {
  61. this.$emit('close')
  62. }
  63. }
  64. }
  65. }
  66. </script>
  67. <style lang="less">
  68. .audit-modal{
  69. .ant-modal-body{
  70. padding: 32px 32px 24px;
  71. }
  72. .audit-main{
  73. display: flex;
  74. .audit-cont{
  75. .audit-tit{
  76. color: rgba(0, 0, 0, 0.85);
  77. font-weight: 500;
  78. font-size: 16px;
  79. line-height: 1.4;
  80. margin: 0;
  81. }
  82. .audit-txt{
  83. margin: 8px 0 0;
  84. color: rgba(0, 0, 0, 0.65);
  85. font-size: 14px;
  86. line-height: 1.5;
  87. }
  88. }
  89. }
  90. .btn-box{
  91. text-align: right;
  92. margin-top: 24px;
  93. }
  94. }
  95. </style>