123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <template>
- <!-- 商户管理 - 搜索弹窗 -->
- <div class="codeSearch flex-col">
- <van-popup v-model:show="sheetShow" round class="codeSearchPopup">
- <div class="content">
- <van-form @submit="onSubmit">
- <van-field
- v-model="name"
- name="name"
- :label="$t('merchantManage.userNameLabel')"
- :placeholder="$t('merchantManage.userNamePlaceholder')"
- />
- <van-field
- v-model="userName"
- name="userName"
- :label="$t('merchantManage.userLoginNameLabel')"
- :placeholder="$t('merchantManage.userLoginNamePlaceholder')"
- />
- <!-- 操作 -->
- <van-row justify="space-around" style="padding: 1em;">
- <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;" native-type="submit">{{$t('merchantManage.clickQuery')}}</van-button>
- </van-row>
- </van-form>
- </div>
- </van-popup>
- </div>
- </template>
- <script>
- import { ref } from 'vue';
- export default {
- name: 'merchantSearch',
- components: {},
- setup(prop, context) {
- const sheetShow = ref(false);
- const showSearch = () => { sheetShow.value = true; };
- const name = ref('');
- const userName = ref('');
- // 提交搜索表单触发搜索
- const onSubmit = () => {
- const searchParam = {};
- searchParam.name = name.value;
- searchParam.userName = userName.value;
- context.emit('search', searchParam);
- sheetShow.value = false;
- }
- return {
- sheetShow,
- showSearch,
- name,
- userName,
- onSubmit
- };
- },
- };
- </script>
- <style lang="less" scoped>
- .codeSearch {
- width: 100%;
- /deep/ .codeSearchPopup { width: 90%; }
- .content { padding-top: 1em; }
- .field .van-field__label { width: auto; }
- }
- </style>
|