优化订单列表

2024-02-22 14:56:35 +08:00
parent 7af9be8c53
commit 681d16c0a1
3 changed files with 130 additions and 33 deletions
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "vue-admin",
 	"private": true,
-	"version": "1.3.10",
+	"version": "1.3.12",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
--- a/src/views/order/order_list.vue
+++ b/src/views/order/order_list.vue
@@ -1,8 +1,13 @@
 <template>
    <div class="card">
        <el-space>
-            <el-input v-model="tableOptions.phone" placeholder="请输入手机号" style="width: 200px;" />
-            <el-input v-model="tableOptions.name" placeholder="请输入姓名" style="width: 200px;" />
+            <el-input v-model="tableOptions.orderNo" placeholder="请输入订单号" style="width: 200px;" />
+            <el-select v-model="tableOptions.status" placeholder="请选择状态">
+                <el-option :label="item.label" :value="item.state" v-for="item in status" :key="item.state"></el-option>
+            </el-select>
+            <el-select v-model="tableOptions.payType" placeholder="请选择支付类型">
+                <el-option :label="item.label" :value="item.key" v-for="item in payTypes" :key="item.key"></el-option>
+            </el-select>
            <el-button type="primary" icon="Search" @click="searchHandle">搜索</el-button>
            <el-button icon="RefreshRight" @click="resizeTable">重置</el-button>
        </el-space>
@@ -85,48 +90,136 @@
        </div>
        <div class="mt15">
            <el-pagination layout="prev, pager, next, total, sizes, jumper" background
-                v-model:current-page="tableOptions.pageNum" v-model:page-size="tableOptions.pageSzie"
-                :page-size="tableOptions.pageSzie" :page-sizes="[10, 20, 30, 50]" :total="tableOptions.total"
+                v-model:current-page="tableOptions.pageNum" v-model:page-size="tableOptions.pageSize"
+                :page-size="tableOptions.pageSize" :page-sizes="[10, 20, 30, 50]" :total="tableOptions.total"
                @size-change="paginationChange" @current-change="paginationChange" />
        </div>
    </div>
 </template>

 <script setup>
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { dayjs, ElMessage } from 'element-plus';
 import { queryOrder } from '@/api/shop.js'

+const payTypes = ref([
+    {
+        key: 'alipay',
+        label: '支付宝App支付'
+    },
+    {
+        key: 'alipay_qr',
+        label: '支付宝正扫'
+    },
+    {
+        key: 'alipay_wap',
+        label: '支付宝H5支付'
+    },
+    {
+        key: 'alipay_lite',
+        label: '支付宝小程序支付'
+    },
+    {
+        key: 'alipay_pub',
+        label: '支付宝生活号支付'
+    },
+    {
+        key: 'alipay_scan',
+        label: '支付宝反扫'
+    },
+    {
+        key: 'wx_pub',
+        label: '微信公众号支付'
+    },
+    {
+        key: 'wx_lite',
+        label: '微信小程序支付'
+    },
+    {
+        key: 'wx_scan',
+        label: '微信反扫'
+    },
+    {
+        key: 'union',
+        label: '银联云闪付App'
+    },
+    {
+        key: 'union_qr',
+        label: '银联云闪付正扫'
+    },
+    {
+        key: 'union_wap',
+        label: '银联云闪付H5支付'
+    },
+    {
+        key: 'union_scan',
+        label: '银联云闪付反扫'
+    },
+    {
+        key: 'union_online',
+        label: '银联H5支付'
+    },
+    {
+        key: 'union_checkout',
+        label: '银联统一收银台支付'
+    },
+    {
+        key: 'fast_pay',
+        label: '快捷支付'
+    },
+    {
+        key: 'b2c',
+        label: '个人网银支付'
+    }
+])
+
+const status = ref([
+    {
+        state: 0,
+        label: '交易失败'
+    },
+    {
+        state: 1,
+        label: '交易成功'
+    },
+    {
+        state: 2,
+        label: '退款成功'
+    },
+    {
+        state: 3,
+        label: '退款失败'
+    },
+    {
+        state: 4,
+        label: '退款中'
+    },
+    // {
+    //     state: 5,
+    //     label: '待付款'
+    // },
+    {
+        state: 6,
+        label: '部分退款'
+    },
+    {
+        state: 7,
+        label: '待支付'
+    }
+])
+
 const table = ref(null)

 function filterPayType(type) {
-    const m = {
-        alipay: '支付宝App支付',
-        alipay_qr: '支付宝正扫',
-        alipay_wap: '支付宝H5支付',
-        alipay_lite: '支付宝小程序支付',
-        alipay_pub: '支付宝生活号支付',
-        alipay_scan: '支付宝反扫',
-        wx_pub: '微信公众号支付',
-        wx_lite: '微信小程序支付',
-        wx_scan: '微信反扫',
-        union: '银联云闪付App',
-        union_qr: '银联云闪付正扫',
-        union_wap: '银联云闪付H5支付',
-        union_scan: '银联云闪付反扫',
-        union_online: '银联H5支付',
-        union_checkout: '银联统一收银台支付',
-        fast_pay: '快捷支付',
-        b2c: '个人网银支付'
-    }
-    return m[type] || type
+    return type ? payTypes.value.find(item => item.key == type).label : type
 }

 // 表格参数
 const tableOptions = reactive({
    loading: true,
-    phone: '',
-    name: '',
+    status: '',
+    orderNo: '',
+    payType: '',
    list: [],
    total: 0,
    pageNum: 1,
@@ -135,8 +228,9 @@ const tableOptions = reactive({

 // 重置表格
 function resizeTable() {
-    tableOptions.phone = ''
-    tableOptions.name = ''
+    tableOptions.orderNo = ''
+    tableOptions.status = ''
+    tableOptions.payType = ''
    searchHandle()
 }

@@ -156,7 +250,10 @@ async function getUserMarkAjax() {
    try {
        const res = await queryOrder({
            page: tableOptions.pageNum,
-            pageSize: tableOptions.pageSize
+            pageSize: tableOptions.pageSize,
+            orderNo: tableOptions.orderNo,
+            status: tableOptions.status,
+            payType: tableOptions.payType
        })
        tableOptions.loading = false
        tableOptions.list = res.list
--- a/src/views/organization/appkey.vue
+++ b/src/views/organization/appkey.vue
@@ -1,11 +1,11 @@
 <template>
    <div class="card">
-        <el-space>
+        <!-- <el-space>
            <el-input v-model="tableOptions.phone" placeholder="请输入手机号" style="width: 200px;" />
            <el-input v-model="tableOptions.name" placeholder="请输入姓名" style="width: 200px;" />
            <el-button type="primary" icon="Search" @click="searchHandle">搜索</el-button>
            <el-button icon="RefreshRight" @click="resizeTable">重置</el-button>
-        </el-space>
+        </el-space> -->
        <div class="table mt15">
            <el-table ref="table" :data="tableOptions.list" border height="100%" v-loading="tableOptions.loading">
                <el-table-column prop="organNo" label="商户号"></el-table-column>