digital-medicine-front/src/views/dgtmedicine/model/MemberPayLog.vue

<template>
    <div class="flex1 ov-hd">
        <vxe-table :loading="loading" border :data="list">
            <vxe-column title="订单号" field="id" min-width="100" :formatter="colNoData" />
            <vxe-column title="会员名称" field="cpyName" min-width="100" :formatter="colNoData" />
            <vxe-column title="会员级别" field="vipLevelDesc" width="100" :formatter="colNoData" />
            <vxe-column title="缴费金额" width="120" :formatter="colNoData">
                <template #default="{ row }">{{ row.paymentAmount }}元</template>
            </vxe-column>
            <vxe-column title="邮箱" field="email" min-width="100" :formatter="colNoData" />
            <vxe-column title="缴费人" field="createName" min-width="100" :formatter="colNoData" />
            <vxe-column title="缴费时间" field="createTime" width="170" :formatter="colNoData" />
            <vxe-column title="发票" width="100" :formatter="colNoData">
                <template #default="{ row }">{{ +row.invoiceStatus ? '已开票' : '待开票' }}</template>
            </vxe-column>
            <vxe-column title="操作" class-name="small-padding fixed-width">
                <template #default="{ row }">
                    <el-button v-if="+row.invoiceStatus" style="color: #999;" tag="a" text :underline="false" type="primary" :href="row.invoiceUrlAddr" target="_blank">查看发票</el-button>
                    <el-button v-else type="primary" text @click="clickRowEdit(row)">上传发票</el-button>
                </template>
            </vxe-column>
        </vxe-table>
    </div>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    <uploadInvoiceForm v-if="showInvoice" v-model:show="showInvoice" :info="rowInfo"></uploadInvoiceForm>
</template>
<script setup name="Pay-log" lang="ts">
import { colNoData } from '@/utils/noData';
import { listVipPayment } from '@/api/dgtmedicine/vipPayment/index';
import { DateRange } from '@/views/models/index';
import { uploadInvoiceForm } from '../model/index';
const { query }: any = useRoute()
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const list = ref<any[]>([]);
const loading = ref(true);
const showSearch = ref(true);
const showInvoice = ref(false);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const data = reactive<any>({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateRange: [],
        id: '',
        startDate: '',
        endDate: '',
    }
});
const { queryParams } = toRefs(data);
/** 点击行上传发票 */
const rowInfo = ref<any>({});
const clickRowEdit = (row: any) => {
    rowInfo.value = row;
    showInvoice.value = true;
};
/** 查询会员信息列表 */
const getList = async () => {
    loading.value = true;
    const res = await listVipPayment({ ...queryParams.value, memberId: query?.memberId });
    list.value = res.rows;
    total.value = res.total;
    loading.value = false;
};

/** 搜索按钮操作 */
const handleQuery = (level?: any) => {
    queryParams.value.pageNum = 1;
    getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    queryParams.value.startDate = '';
    queryParams.value.endDate = '';
    handleQuery();
};


onMounted(() => {
    getList();
});
</script>