merchantSearch.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <!-- 商户管理 - 搜索弹窗 -->
  3. <div class="codeSearch flex-col">
  4. <van-popup v-model:show="sheetShow" round class="codeSearchPopup">
  5. <div class="content">
  6. <van-form @submit="onSubmit">
  7. <van-field
  8. v-model="name"
  9. name="name"
  10. :label="$t('merchantManage.userNameLabel')"
  11. :placeholder="$t('merchantManage.userNamePlaceholder')"
  12. />
  13. <van-field
  14. v-model="userName"
  15. name="userName"
  16. :label="$t('merchantManage.userLoginNameLabel')"
  17. :placeholder="$t('merchantManage.userLoginNamePlaceholder')"
  18. />
  19. <!-- 操作 -->
  20. <van-row justify="space-around" style="padding: 1em;">
  21. <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;" native-type="submit">{{$t('merchantManage.clickQuery')}}</van-button>
  22. </van-row>
  23. </van-form>
  24. </div>
  25. </van-popup>
  26. </div>
  27. </template>
  28. <script>
  29. import { ref } from 'vue';
  30. export default {
  31. name: 'merchantSearch',
  32. components: {},
  33. setup(prop, context) {
  34. const sheetShow = ref(false);
  35. const showSearch = () => { sheetShow.value = true; };
  36. const name = ref('');
  37. const userName = ref('');
  38. // 提交搜索表单触发搜索
  39. const onSubmit = () => {
  40. const searchParam = {};
  41. searchParam.name = name.value;
  42. searchParam.userName = userName.value;
  43. context.emit('search', searchParam);
  44. sheetShow.value = false;
  45. }
  46. return {
  47. sheetShow,
  48. showSearch,
  49. name,
  50. userName,
  51. onSubmit
  52. };
  53. },
  54. };
  55. </script>
  56. <style lang="less" scoped>
  57. .codeSearch {
  58. width: 100%;
  59. /deep/ .codeSearchPopup { width: 90%; }
  60. .content { padding-top: 1em; }
  61. .field .van-field__label { width: auto; }
  62. }
  63. </style>