115 lines
3.0 KiB
Vue
115 lines
3.0 KiB
Vue
<template>
|
|
<el-form inline>
|
|
<el-form-item label="状态">
|
|
<el-select v-model="status" placeholder="请选择" style="width: 240px">
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button @click="getList()" type="primary">搜索</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table :data="tableData" border style="width: 100%">
|
|
<el-table-column prop="out_trade_no" label="订单号" width="180" />
|
|
<el-table-column prop="product_name" label="产品名" width="180" />
|
|
<el-table-column prop="total_amount" label="价格" width="100">
|
|
<template #default="scope">
|
|
<div>{{ scope.row.total_amount }}元</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="create_time" label="创建时间" />
|
|
<el-table-column prop="payment_time" label="支付时间" />
|
|
<el-table-column label="状态">
|
|
<template #default="scope">
|
|
<el-tag v-if="scope.row.payment_status == 'Unpaid'" type="primary">未支付</el-tag>
|
|
<el-tag v-if="scope.row.payment_status == 'Paid'" type="success">已支付</el-tag>
|
|
<el-tag v-if="scope.row.payment_status == 'USERPAYING'" type="info">支付中</el-tag>
|
|
<el-tag v-if="scope.row.payment_status == 'Refunded'" type="warning">已退款</el-tag>
|
|
<el-tag v-if="scope.row.payment_status == 'Close'" type="warning">已关闭</el-tag>
|
|
<el-tag v-if="scope.row.payment_status == 'Failed' || scope.row.payment_status == 'REVOKED'"
|
|
type="danger">支付失败</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
</el-table>
|
|
<div class="flex-c-c mt20">
|
|
<el-pagination v-model:current-page="page" v-model:page-size="pageSize" layout=" prev, pager, next" :total="count"
|
|
background @current-change="handleCurrentChange" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, onMounted } from "vue";
|
|
import { orderList } from "@/utils/api.ts"
|
|
|
|
onMounted(() => {
|
|
getList();
|
|
});
|
|
|
|
const tableData = ref([])
|
|
const count = ref(0)
|
|
const page = ref(1)
|
|
const pageSize = ref(20)
|
|
const status = ref("")
|
|
|
|
const options = [
|
|
{
|
|
label: "全部",
|
|
value: "0"
|
|
}, {
|
|
label: "未支付",
|
|
value: "Unpaid"
|
|
},
|
|
{
|
|
label: "已支付",
|
|
value: "Paid"
|
|
},
|
|
{
|
|
label: "支付失败",
|
|
value: "PAYERROR"
|
|
},
|
|
{
|
|
label: "已退款",
|
|
value: "Refunded"
|
|
},
|
|
{
|
|
label: "已关闭",
|
|
value: "Close"
|
|
},
|
|
|
|
]
|
|
|
|
const handleCurrentChange = (val: number) => {
|
|
page.value = val
|
|
getList()
|
|
}
|
|
|
|
/**
|
|
* @title 获取订单列表
|
|
*/
|
|
const getList = async () => {
|
|
const params = {
|
|
page: 1,
|
|
size: 20,
|
|
}
|
|
if (status.value&&status.value!='0') {
|
|
params.payment_status = status.value
|
|
}
|
|
const { code, body: { records, total } } = await orderList(params)
|
|
if (code == 200) {
|
|
tableData.value = records
|
|
count.value = total
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.flex-c-c {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.mt20 {
|
|
margin-top: 20px;
|
|
}
|
|
</style> |