feat:账单管理界面

src/views/user-center/bill/modules/bill-search.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { Form } from 'ant-design-vue';
+import type { FormInstance } from 'ant-design-vue';
+
+interface SearchModel {
+  pageNum: number;
+  pageSize: number;
+  userName?: string;
+  type?: number;
+  status?: number;
+}
+
+const props = withDefaults(defineProps<{
+  model: SearchModel;
+}>(), {
+  model: () => ({
+    pageNum: 1,
+    pageSize: 10,
+    userName: '',
+    type: undefined,
+    status: undefined
+  })
+});
+
+const emit = defineEmits<{
+  'update:model': [value: SearchModel];
+  'search': [];
+  'reset': [];
+}>();
+
+const formRef = ref<FormInstance>();
+const { resetFields } = Form.useForm(props.model);
+
+const formModel = computed({
+  get: () => props.model,
+  set: (val: SearchModel) => emit('update:model', val)
+});
+
+function handleReset() {
+  resetFields();
+  emit('reset');
+}
+
+function handleSearch() {
+  emit('search');
+}
+
+const orderTypeOptions = [
+  { label: '套餐订单', value: 0 },
+  { label: '充值订单', value: 1 }
+];
+
+const orderStatusOptions = [
+  { label: '待支付', value: 0 },
+  { label: '已支付', value: 1 },
+  { label: '已取消', value: 2 }
+];
+</script>
+
+<template>
+  <ACard :bordered="false" class="search-card">
+    <AForm
+      ref="formRef"
+      :model="formModel"
+      layout="inline"
+      class="flex flex-wrap gap-16px items-center"
+    >
+      <AFormItem label="用户名">
+        <AInput
+          v-model:value="formModel.userName"
+          placeholder="请输入用户名"
+          allow-clear
+        />
+      </AFormItem>
+      <AFormItem label="订单类型">
+        <ASelect
+          v-model:value="formModel.type"
+          placeholder="请选择订单类型"
+          :options="orderTypeOptions"
+          allow-clear
+          style="width: 200px"
+        />
+      </AFormItem>
+      <AFormItem label="订单状态">
+        <ASelect
+          v-model:value="formModel.status"
+          placeholder="请选择订单状态"
+          :options="orderStatusOptions"
+          allow-clear
+          style="width: 200px"
+        />
+      </AFormItem>
+      <AFormItem class="flex-1 justify-end">
+        <ASpace>
+          <AButton @click="handleReset">重置</AButton>
+          <AButton type="primary" @click="handleSearch">查询</AButton>
+        </ASpace>
+      </AFormItem>
+    </AForm>
+  </ACard>
+</template>
+
+<style scoped>
+.search-card {
+  :deep(.ant-card-body) {
+    padding: 16px;
+  }
+}
+</style>