dialog-Search.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <dialog-base ref="baseDialog" title="搜索">
  3. <view class="list-container">
  4. <input class="input-control" v-model="keywork" placeholder='批次号/产品描述/箱号' />
  5. <view class="login-btn uni-row" @click="handleConfirm"><text class="label">确认</text></view>
  6. </view>
  7. </dialog-base>
  8. </template>
  9. <script setup>
  10. import {
  11. ref,
  12. getCurrentInstance
  13. } from 'vue'
  14. import {
  15. defineProps
  16. } from 'vue'
  17. const baseDialog = ref(null)
  18. const keywork = ref("");
  19. const emit = defineEmits(["search"]);
  20. function open() {
  21. resetPage();
  22. baseDialog.value.open();
  23. init();
  24. }
  25. function resetPage() {
  26. keywork.value = ''
  27. }
  28. defineExpose({
  29. open
  30. })
  31. function close() {
  32. baseDialog.value.close()
  33. }
  34. function handleConfirm() {
  35. emit('search', keywork.value)
  36. close()
  37. }
  38. function init() {
  39. }
  40. </script>
  41. <style lang="scss">
  42. .dialog-body {
  43. .msg {
  44. height: 300rpx;
  45. justify-content: center;
  46. align-items: center;
  47. }
  48. .btn-container {
  49. margin-top: 32rpx;
  50. .btn {
  51. flex: 1;
  52. margin: 0 10rpx;
  53. }
  54. }
  55. .input-control {
  56. border: 1px solid #666666;
  57. padding: 16rpx 24rpx;
  58. font-size: 32rpx;
  59. margin-top: 40rpx;
  60. }
  61. .login-btn {
  62. // background-color: #999999;
  63. background-color: #1684fc;
  64. margin-top: 32rpx;
  65. justify-content: center;
  66. padding: 16rpx 0;
  67. .label {
  68. font-size: 40rpx;
  69. color: #FFFFFF;
  70. }
  71. }
  72. }
  73. </style>