passwordDialog.vue 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <template>
  2. <uni-popup ref="passwordPopup" :animation="false" :is-mask-click="false"
  3. mask-background-color="rgba(0, 0, 0, 0.4)">
  4. <view class="phone-common-dialog">
  5. <view class="common-body-box">
  6. <view class="common-title">修改密码</view>
  7. <view class="common-input-box">
  8. <!-- <view class="form-label-input">
  9. <view class="phone-form-label"><text class="form-label-require">*</text>原密码</view>
  10. <input v-model="data.oldPassWord" placeholder="请输入原密码" />
  11. <icon></icon>
  12. </view>
  13. <view class="form-label-input">
  14. <view class="phone-form-label"><text class="form-label-require">*</text>新密码</view>
  15. <input v-model="data.newPassWord" placeholder="请输入新密码" />
  16. <icon></icon>
  17. </view>
  18. <view class="form-label-input">
  19. <view class="phone-form-label"><text class="form-label-require">*</text>确认密码</view>
  20. <input v-model="data.okPassWord" placeholder="请确认密码" />
  21. <icon></icon>
  22. </view> -->
  23. <view class="common-input-row">
  24. <text class="common-input-label"><text class="common-label-require">*</text>原密码:</text>
  25. <input class="common-input" v-model="data.oldPassWord" placeholder="请输入原密码" />
  26. </view>
  27. <view class="common-input-row">
  28. <text class="common-input-label"><text class="common-label-require">*</text>新密码:</text>
  29. <input class="common-input" v-model="data.newPassWord" placeholder="请输入新密码" />
  30. </view>
  31. <view class="common-input-row">
  32. <text class="common-input-label"><text class="common-label-require">*</text>确认密码:</text>
  33. <input class="common-input" v-model="data.okPassWord" placeholder="请确认密码" />
  34. </view>
  35. </view>
  36. <view class="common-btn-box">
  37. <view class="not-confirm-btn" @click="handleClose">{{notBtn}}</view>
  38. <view class="confirm-btn" @click="confirmBtn">{{okBtn}}</view>
  39. </view>
  40. </view>
  41. </view>
  42. </uni-popup>
  43. </template>
  44. <script setup>
  45. import {ref,reactive} from "vue"
  46. const props = defineProps({
  47. notBtn: {
  48. type: String,
  49. require: true,
  50. default: '取消'
  51. },
  52. okBtn: {
  53. type: String,
  54. require: true,
  55. default: '确认'
  56. },
  57. });
  58. const data = reactive({
  59. okPassWord: '',
  60. oldPassWord: '',
  61. newPassWord: '',
  62. })
  63. const passwordPopup = ref(null); // 索引
  64. const $emit = defineEmits(['confirm-btn'])
  65. // 打开弹窗
  66. function handleShow() {
  67. passwordPopup.value.open();
  68. }
  69. // 取消
  70. function handleClose() {
  71. passwordPopup.value.close();
  72. }
  73. // 确认
  74. function confirmBtn(){
  75. $emit('confirm-btn');
  76. passwordPopup.value.close();
  77. }
  78. defineExpose({
  79. handleShow,
  80. handleClose
  81. })
  82. </script>
  83. <style>
  84. </style>