You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
5.4 KiB
130 lines
5.4 KiB
<template>
|
|
<div class="w-full">
|
|
<div class=" m-6 rounded-xl">
|
|
<div class="p-3 w-full bg-white rounded-xl">
|
|
<el-space alignment="flex-end">
|
|
<div class="flex flex-col justify-start items-start">
|
|
<span class="text-sm text-gray-500">关键词</span>
|
|
<el-input size="large" style="width: 300px" v-model="keywords" placeholder="姓名/手机号/身份证/IC卡号筛选"
|
|
@keyup.enter.native="getList(true)"
|
|
clearable/>
|
|
</div>
|
|
<div class="flex flex-col justify-start items-start">
|
|
<span class="text-sm text-gray-500">开卡时间</span>
|
|
<el-date-picker size="large" v-model="createTimeRange" type="daterange" placeholder="开卡时间筛选"></el-date-picker>
|
|
</div>
|
|
<el-button size="large" icon="Search" @click.native="getList(true)" type="primary">
|
|
搜索
|
|
</el-button>
|
|
<el-button size="large" icon="RefreshRight" @click.native="init" type="warning"
|
|
margin-left="mx-4">重置
|
|
</el-button>
|
|
</el-space>
|
|
</div>
|
|
<div class="p-3 w-full rounded-xl mt-4 bg-white">
|
|
<el-table :data="list" stripe v-loading="loading" :height="tableHeight" size="large">
|
|
<el-table-column prop="id" label="IC卡号"/>
|
|
<el-table-column prop="code" label="IC卡编号"/>
|
|
<el-table-column label="用户" v-slot="scope">
|
|
<div>{{ scope.row.username }}</div>
|
|
<div>{{ scope.row.phone }}</div>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="卡名称"/>
|
|
<el-table-column prop="number" label="续卡次数"/>
|
|
<el-table-column prop="name" label="卡类型" v-slot="scope">
|
|
<el-tag v-if="scope.row.type === 1">年卡</el-tag>
|
|
<el-tag v-if="scope.row.type === 2">次卡</el-tag>
|
|
<el-tag v-if="scope.row.type === 3">月卡</el-tag>
|
|
<el-tag v-if="scope.row.type === 4">会员IC卡</el-tag>
|
|
<el-tag v-if="scope.row.type === 5">充值卡</el-tag>
|
|
</el-table-column>
|
|
<el-table-column prop="remainingMoney" label="余额"/>
|
|
<el-table-column prop="price" label="购买价格"/>
|
|
<el-table-column label="可用场馆" v-slot="scope">
|
|
<span>{{ scope.row.siteList.map(item => item.name).join() }}</span>
|
|
</el-table-column>
|
|
<el-table-column prop="num" label="剩余次数"/>
|
|
<el-table-column prop="count" label="总次数"/>
|
|
<el-table-column prop="discount" label="折扣"/>
|
|
<el-table-column prop="month" label="月限"/>
|
|
<el-table-column prop="term" label="年限"/>
|
|
<el-table-column label="付款方式" v-slot="scope">
|
|
<el-tag type="success" v-if="scope.row.payType === 1">微信支付</el-tag>
|
|
<el-tag type="success" v-if="scope.row.payType === 2">支付宝支付</el-tag>
|
|
<el-tag type="success" v-if="scope.row.payType === 3">现金</el-tag>
|
|
<el-tag type="success" v-if="scope.row.payType === 4">POS机刷卡</el-tag>
|
|
<el-tag type="success" v-if="scope.row.payType === 5">平安健康卡</el-tag>
|
|
</el-table-column>
|
|
<el-table-column label="支付状态" v-slot="scope">
|
|
<span class="text-green-500" v-if="scope.row.status === 1">已支付</span>
|
|
<span class="text-red-500" v-if="scope.row.status === 2">未支付</span>
|
|
</el-table-column>
|
|
<el-table-column label="时间" v-slot="scope">
|
|
<div>开卡时间:{{ dayjs(scope.row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
|
|
<div class="text-blue-500">
|
|
过期时间:{{ dayjs(scope.row.expireTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
|
|
</div>
|
|
</el-table-column>
|
|
<el-table-column prop="remark" label="备注"/>
|
|
</el-table>
|
|
|
|
<page :per-page="perPage" :current-page="currentPage" :total="total" @change-size="changeSize"
|
|
@change-page="changePage"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {onMounted, ref} from 'vue'
|
|
import dayjs from "dayjs";
|
|
import {pageCard} from "@/api/icCard.js";
|
|
|
|
const list = ref([])
|
|
const loading = ref(true)
|
|
const perPage = ref(20)
|
|
const total = ref(0)
|
|
const currentPage = ref(1)
|
|
|
|
const changeSize = ({size}) => {
|
|
perPage.value = size
|
|
getList(true)
|
|
}
|
|
|
|
const changePage = ({page}) => {
|
|
currentPage.value = page
|
|
getList()
|
|
}
|
|
|
|
const keywords = ref('')
|
|
const createTimeRange = ref([])
|
|
const getList = async (reload = false) => {
|
|
let createTimeStart = null, createTimeEnd = null, orderTimeStart = null, orderTimeEnd = null
|
|
if (reload) {
|
|
currentPage.value = 1
|
|
loading.value = true
|
|
}
|
|
loading.value = true
|
|
if (createTimeRange.value && createTimeRange.value.length) {
|
|
createTimeStart = dayjs(createTimeRange.value[0]).unix()
|
|
createTimeEnd = dayjs(createTimeRange.value[1] + ' 23:59:59').unix()
|
|
}
|
|
const res = await pageCard({
|
|
page: currentPage.value,
|
|
limit: perPage.value,
|
|
keywords: keywords.value ?? null,
|
|
createTimeStart: createTimeStart ?? null,
|
|
createTimeEnd: createTimeEnd ?? null,
|
|
notZeroNumber: true,
|
|
})
|
|
loading.value = false
|
|
total.value = res.data.count
|
|
list.value = res.data.list
|
|
}
|
|
|
|
const tableHeight = ref(1080)
|
|
onMounted(async () => {
|
|
tableHeight.value = document.body.clientHeight - 260
|
|
await getList()
|
|
})
|
|
</script>
|