shengJiDialog.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <!-- 中弹窗 二行文字 -->
  2. <template>
  3. <uni-popup ref="tipMiddlePopup" :animation="false" :is-mask-click="false"
  4. mask-background-color="rgba(255, 255, 255, 0.6);">
  5. <view class="phone-common-dialog">
  6. <view class="common-body-box">
  7. <view class="common-title">{{title}}</view>
  8. <view class="common-content">{{content}}</view>
  9. <view class="common-btn-box" style="position: relative">
  10. <view v-if="closeFlag" class="not-confirm-btn" @click="handleClose"></view>
  11. <view class="confirm-btn no-border-btn" @click="confirmBtn">确认</view>
  12. <view v-if="showTip" @click="handleShowImage" style="position: absolute;right: 0;top: 16rpx">
  13. <uni-icons type="info" size="30"></uni-icons>
  14. </view>
  15. </view>
  16. </view>
  17. </view>
  18. </uni-popup>
  19. <!-- 自定义预览弹窗 -->
  20. <uni-popup ref="previewPopup" type="center" :safe-area="false" :is-mask-click="false">
  21. <view class="custom-preview" style="position: relative">
  22. <image
  23. src="/static/images/login/ggg.gif"
  24. mode="widthFix"
  25. class="preview-image"
  26. />
  27. <view class="close-btn" @click="handleCloseImg" style="position: absolute;top: -30px;right: 5px">
  28. <text class="close-icon" style="color:#fff">关闭</text>
  29. </view>
  30. </view>
  31. </uni-popup>
  32. </template>
  33. <script setup>
  34. import { ref } from 'vue';
  35. const props = defineProps({
  36. title: {
  37. type: String,
  38. default: '提示'
  39. },
  40. closeFlag: {
  41. type: Boolean,
  42. default: true
  43. },
  44. content: {
  45. type: String,
  46. require: true,
  47. default: ''
  48. },
  49. notClose: {
  50. type: Boolean,
  51. default: false
  52. },
  53. showTip: {
  54. type: Boolean,
  55. default: false
  56. }
  57. });
  58. const tipMiddlePopup = ref(null); // 索引
  59. const previewPopup = ref(null)
  60. const $emit = defineEmits(['confirm-btn'])
  61. // 打开弹窗
  62. function handleShow() {
  63. tipMiddlePopup.value.open();
  64. }
  65. // 取消
  66. function handleClose() {
  67. tipMiddlePopup.value.close();
  68. }
  69. // 确认
  70. function confirmBtn(){
  71. $emit('confirm-btn');
  72. if (!props.notClose) {
  73. tipMiddlePopup.value.close();
  74. }
  75. }
  76. function handleCloseImg() {
  77. previewPopup.value.close()
  78. }
  79. function handleShowImage() {
  80. previewPopup.value.open()
  81. // uni.previewImage({
  82. // urls: ['/static/images/login/ggg.gif'],
  83. // });
  84. }
  85. defineExpose({
  86. handleShow,
  87. handleClose
  88. })
  89. </script>
  90. <style>
  91. </style>