71 lines
1.8 KiB
Vue
71 lines
1.8 KiB
Vue
<!-- 选择商户以及进件渠道 -->
|
|
<template>
|
|
<div class="gyq_container">
|
|
<div class="gyq_content">
|
|
<div class="row">
|
|
<el-form :model="queryForm" inline>
|
|
<el-form-item label="请选择用户">
|
|
<el-input placeholder="用户号/名称/手机号" readonly @click="selectShopsDialogRef?.show()"
|
|
v-model="queryForm.shopName">
|
|
<template #suffix>
|
|
<div class="center">
|
|
<el-icon v-if="queryForm.shopName" @click.stop="queryForm.shopName = ''">
|
|
<CircleCloseFilled />
|
|
</el-icon>
|
|
<el-icon @click="selectShopsDialogRef?.show()" style="cursor: pointer;">
|
|
<Search />
|
|
</el-icon>
|
|
</div>
|
|
</template>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="Plus">新增用户</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
<selectShopsDialog ref="selectShopsDialogRef" @success="selectShopSuccess" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive } from "vue";
|
|
import selectShopsDialog from "./components/selectShopsDialog.vue";
|
|
|
|
const selectShopsDialogRef = ref<InstanceType<typeof selectShopsDialog> | null>(null);
|
|
|
|
const queryForm = ref({
|
|
shopName: ""
|
|
});
|
|
|
|
// 选择商户成功回调
|
|
function selectShopSuccess(shop: any) {
|
|
console.log('选择的商户：', shop);
|
|
queryForm.value.shopName = shop.shopName;
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.gyq_container {
|
|
padding: 14px;
|
|
|
|
.gyq_content {
|
|
padding: 14px;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
&.mt14 {
|
|
margin-top: 14px;
|
|
}
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
</style> |