行情期限-主页面与排序

src/main.js

@@ -3,9 +3,11 @@ import App from './App.vue'
 import router from './router'
 // 导入 Element Plus 样式和组件
 import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
 // 导入 Element Plus 图标
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+// 全局中文
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import 'element-plus/dist/index.css'
 import 'normalize.css';
 
 const app = createApp(App)
@@ -14,7 +16,9 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 
-app.use(ElementPlus)
+app.use(ElementPlus, {
+  locale: zhCn,
+})
 app.use(router)
 
 app.mount('#app')

src/views/UserPermissions/Market.vue

@@ -1,13 +1,392 @@
 <template>
-  <div>111111</div>
+  <div class="page-container">
+    <!-- 搜索区域 -->
+    <div class="search-container">
+      <div class="search-form">
+        <div class="search-item">
+          <span class="form-label">账号</span>
+          <el-input 
+            v-model="searchForm.dccode" 
+            placeholder="请输入账号" 
+            clearable
+            style="height: 36px; width: 140px;"
+          />
+        </div>
+        <div class="search-item">
+          <span class="form-label">姓名</span>
+          <el-input 
+            v-model="searchForm.dcname" 
+            placeholder="请输入姓名" 
+            clearable
+            style="height: 36px; width: 180px;"
+          />
+        </div>
+        <div class="search-item">
+          <span class="form-label">地区</span>
+          <el-select 
+            v-model="searchForm.market" 
+            placeholder="请选择地区" 
+            clearable
+            style="height: 36px; width: 160px;"
+            :loading="isRegionLoading"
+          >
+            <el-option 
+              v-for="region in regionList" 
+              :key="region.value" 
+              :label="region.label" 
+              :value="region.value" 
+            />
+          </el-select>
+        </div>
+        <div class="search-item">
+          <span class="form-label">注册方式</span>
+          <el-input 
+            v-model="searchForm.register_type" 
+            placeholder="请输入手机号/邮箱" 
+            clearable
+            style="height: 36px; width: 220px;" 
+          />
+        </div>
+        <div class="button-group">
+          <el-button type="primary" @click="search">搜索</el-button>
+          <el-button type="danger" @click="enableAccess">开通权限</el-button>
+          <el-button type="success" @click="exportExcel">导出Excel列表</el-button>
+          <el-button color="#626aef" @click="exportList">查看导出列表</el-button>
+          <el-button type="primary" @click="resetBn">重置</el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 数据 -->
+    <el-table 
+      :data="tableData" 
+      style="width: 100%; margin-top: 20px;"
+      header-cell-class-name="table-header" 
+      @sort-change="handleSortChange"
+      :default-sort="{ prop: null, order: null }"
+      class="table-rounded" 
+      :loading="tableLoading" 
+    >
+      <el-table-column prop="id" label="序号" align="center" header-align="center" type="index" width="60"/>
+      <el-table-column prop="dccode" label="账号" align="center" header-align="center"/>
+      <el-table-column prop="dcname" label="姓名" align="center" header-align="center" width="150"/>
+      <el-table-column prop="market" label="地区" align="center" header-align="center"/>
+      <el-table-column prop="phone" label="电话" align="center" header-align="center"/>
+      <el-table-column prop="email" label="邮箱" align="center" header-align="center" width="200"/>
+      <el-table-column prop="created_at" label="注册时间" align="center" header-align="center" sortable="custom" width="200"/>
+      <el-table-column prop="expire_time" label="到期时间" align="center" header-align="center" sortable="custom" width="200"/>
+      <el-table-column label="操作" width="180" align="center" header-align="center">
+        <template #default="scope">
+          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button type="text" @click="handleLog(scope.row.id)">操作日志</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页组件 -->
+    <div class="demo-pagination-block">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="10"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total= "datatotal"
+      />
+    </div>
+  </div>
 </template>
 
-<script>
-export default {
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
 
-}
+// 搜索表单
+const searchForm = reactive({
+  dccode: '',
+  dcname: '',
+  market: '',
+  register_type: ''
+});
+
+// 排序参数
+const sortProp = ref(null);
+const sortOrder = ref(null);
+
+// 表格数据
+const tableData = ref([
+  {
+    "id": 3,
+    "dccode": "DC44972906",
+    "dcname": "qwdasdas",
+    "market": "越南",
+    "phone_country": "+86",
+    "phone": "17861484999",
+    "email": "q61w4588746@163.com",
+    "created_at": "2025-10-30 16:56:44",
+    "expire_time": "2099-12-31 23:59:59"
+  },
+  {
+    "id": 2,
+    "dccode": "DC73412532",
+    "dcname": "S1wire",
+    "market": "中国",
+    "phone_country": "+86",
+    "phone": "1831572969",
+    "email": "91224746@163.com",
+    "created_at": "2025-10-29 19:54:48",
+    "expire_time": "2099-12-31 23:59:59"
+  },
+  {
+    "id": 1,
+    "dccode": "DC30454647",
+    "dcname": "EthanAZ",
+    "market": "中国",
+    "phone_country": "+86",
+    "phone": "18315796169",
+    "email": "91224588746@163.com",
+    "created_at": "2025-10-29 18:47:43",
+    "expire_time": "2026-01-01 19:02:46"
+  }
+]);
+const tableLoading = ref(false);
+const datatotal = ref(0)
+
+// 分页参数
+const currentPage = ref(1); // 对应分页当前页
+const pageSize = ref(10);  // 对应分页每页条数
+
+// 地区下拉框相关
+const regionList = ref([
+  { label: '香港', value: '香港' },
+  { label: '马来西亚', value: '马来西亚' },
+  { label: '泰国', value: '泰国' },
+  { label: '新加坡', value: '新加坡' },
+  { label: '越南', value: '越南' }
+]);
+const isRegionLoading = ref(false);
+
+// 获取地区列表
+const fetchRegionList = async () => {
+  try {
+    isRegionLoading.value = true;
+    // 下面添加方法
+
+  } catch (error) {
+    console.error('获取地区列表失败：', error);
+    regionList.value = [];
+  } finally {
+    isRegionLoading.value = false;
+  }
+};
+
+// 获取表格数据
+const fetchTableData = async () => {
+  try {
+    tableLoading.value = true;
+    const requestParams = {
+      dccode: searchForm.dccode,
+      dcname: searchForm.dcname,
+      market: searchForm.market,
+      register_type: searchForm.register_type,
+      sort_field: sortProp.value,
+      sort_order: sortOrder.value,
+      page: currentPage.value,
+      page_size: pageSize.value     
+    };
+    datatotal.value = 3;
+    
+  } catch (error) {
+    console.error('获取表格数据失败：', error);
+    tableData.value = [];
+  } finally {
+    tableLoading.value = false;
+  }
+};
+
+// 组件挂载时：获取地区列表 + 初始化表格数据
+onMounted(() => {
+  fetchRegionList();
+  fetchTableData();
+});
+
+// 搜索按钮
+const search = () => {
+  currentPage.value = 1; 
+  fetchTableData();
+};
+
+// 开通权限按钮
+const enableAccess = () => {
+  console.log('开通权限操作');
+};
+
+// 导出Excel列表按钮
+const exportExcel = () => {
+  console.log('导出Excel列表');
+};
+
+// 查看导出列表按钮
+const exportList = () => {
+  console.log('查看导出列表');
+};
+
+// 重置按钮
+const resetBn = () => {
+  searchForm.dccode = '';
+  searchForm.dcname = '';
+  searchForm.market = '';
+  searchForm.register_type = '';
+  sortProp.value = null;
+  sortOrder.value = null;
+  currentPage.value = 1; 
+  pageSize.value = 10; 
+  fetchTableData();
+  console.log('表单已重置，排序已取消');
+};
+
+// 编辑
+const handleEdit = (row) => {
+  console.log('编辑用户：', row);
+};
+
+// 操作日志
+const handleLog = (id) => {
+  console.log('操作日志：', id);
+};
+
+// 分页方法
+const handleSizeChange = (val) => {
+  pageSize.value = val;
+  fetchTableData();
+  console.log(`每页 ${val} 条`);
+};
+
+const handleCurrentChange = (val) => {
+  currentPage.value = val;
+  fetchTableData();
+  console.log(`当前页: ${val}`);
+};
+
+// 排序事件
+const handleSortChange = (sort) => {
+  const { prop, order } = sort;
+  // 仅允许created_at（注册时间）和expire_time（到期时间）排序
+  if (!['created_at', 'expire_time'].includes(prop)) return;
+
+  // 覆盖排序状态（实现二选一）
+  sortProp.value = prop; // 保存当前排序字段
+  sortOrder.value = order; // 保存当前排序方式
+  
+  fetchTableData(); 
+  console.log(`排序字段：${sortProp.value}，排序方式：${sortOrder.value}`);
+};
 </script>
 
-<style>
+<style scoped>
+/* 父容器 */
+.page-container {
+  position: relative;
+  min-height: 600px; 
+}
+
+/* 搜索区域 */
+.search-container {
+  display: flex;
+  height: 67px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 8px;
+  background: #FEFAF9;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); 
+  padding: 0 15px;
+  margin-bottom: 20px; 
+}
+
+/* 搜索表单 */
+.search-form {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 15px;
+  flex-wrap: nowrap;
+}
+
+/* 单个搜索项 */
+.search-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* 搜索标签文字 */
+.form-label {
+  font-weight: 800 !important;
+  font-size: 15px;
+  text-align: left;
+  color: #333;
+}
+
+/* 按钮组 */
+.button-group {
+  display: flex;
+  align-items: center;
+  gap: 0px !important;
+  margin-left: auto;
+}
+
+/* 按钮样式 */
+.button-group .el-button {
+  padding: 6px 10px !important;
+  font-size: 14px !important;
+  height: 36px !important;
+}
 
+/* 表格样式 */
+.table-rounded {
+  border-radius: 12px !important;
+  overflow: hidden !important;
+  border: 1px solid #e4e7ed !important;
+}
+
+.table-header {
+  text-align: center !important;
+  font-weight: 800 !important;
+  font-size: 15px !important;
+  color: #333 !important;
+  background-color: #f8f9fa !important;
+}
+
+.el-table__cell {
+  border-right: none !important;
+  border-bottom: 1px solid #e4e7ed !important;
+}
+
+.el-table__header th.el-table__cell {
+  border-right: none !important;
+  border-bottom: 1px solid #e4e7ed !important;
+}
+
+.el-table__row:hover .el-table__cell {
+  background-color: #fafafa !important;
+}
+
+/* 分页组件样式 */
+.demo-pagination-block {
+  display: flex;
+  width: 100%;
+  height: 44px;
+  padding: 0 16px;
+  align-items: center;
+  gap: 16px;
+  position: absolute;
+  margin-top: 10px;
+  border-radius: 0 0 3px 3px;
+  border-top: 1px solid #EAEAEA;
+  background: #FEFBFB;
+  box-sizing: border-box;
+}
 </style>