|
|
@@ -0,0 +1,245 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="flex">
|
|
|
+ <el-card class="box-card">
|
|
|
+ <template #header>
|
|
|
+ <div class="flex items-center card-header">
|
|
|
+ <span>今日充值</span>
|
|
|
+ <el-tooltip placement="top">
|
|
|
+ <template #content>
|
|
|
+ 当前推广链接的状态<br />
|
|
|
+ 启用：当前推广ID已绑定回传配置<br />
|
|
|
+ 禁用：当前推广ID未绑定回传配置
|
|
|
+ </template>
|
|
|
+ <el-icon>
|
|
|
+ <InfoFilled />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="money-wrapper">￥890</div>
|
|
|
+ <div class="flex items-center justify-around">
|
|
|
+ <div>
|
|
|
+ <p class="text-lg font-bold">普通充值</p>
|
|
|
+ <div><span class="text-sm">已支付：</span><span class="text-base">25单</span></div>
|
|
|
+ <div><span class="text-sm">未支付：</span><span class="text-base">4单</span></div>
|
|
|
+ <div><span class="text-sm">支付率：</span><span class="text-base">83.33%</span></div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p class="text-lg font-bold">会员充值</p>
|
|
|
+ <div><span class="text-sm">已支付：</span><span class="text-base">25单</span></div>
|
|
|
+ <div><span class="text-sm">未支付：</span><span class="text-base">4单</span></div>
|
|
|
+ <div><span class="text-sm">支付率：</span><span class="text-base">83.33%</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <Search :search="search" :reset="resetQuery">
|
|
|
+ <template v-slot:body>
|
|
|
+ <el-form-item label="短剧名称" prop="trade_no">
|
|
|
+ <el-input v-model="query.trade_no" placeholder="请输入短剧名称" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="时间">
|
|
|
+ <el-date-picker unlink-panels clearable @change="timeChange" format="YYYY/MM/DD" value-format="YYYY-MM-DD"
|
|
|
+ v-model="query.time" type="daterange" :shortcuts="shortcuts" range-separator="To" start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template v-slot:extra_button>
|
|
|
+ <exportExcel api="channel/order_list" sheet_name="订单列表" :title_obj="titleObj"
|
|
|
+ :extro_params="{ is_export: true, ...query }">
|
|
|
+ </exportExcel>
|
|
|
+ </template>
|
|
|
+ </Search>
|
|
|
+ <div style="margin:8px 0;">
|
|
|
+ <el-card shadow="hover" :body-style="{ padding: '20px' }">
|
|
|
+ <div class="stat-wrapper">
|
|
|
+ <div>所选时间段内累计充值金额:
|
|
|
+ <span class="ml-2 mr-4 stat">{{ statisticalData.yesterday_total_coins || '暂无数据' }}</span>
|
|
|
+ </div>
|
|
|
+ <div>累计充值笔数:
|
|
|
+ <span class="ml-2 mr-4 stat">{{ statisticalData.yesterday_available_amount || '暂无数据' }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div class="table-default">
|
|
|
+ <el-table :data="tableData" class="mt-3" v-loading="loading">
|
|
|
+ <el-table-column prop="id" label="时间" />
|
|
|
+ <el-table-column prop="miniprogram_name" label="优化师" min-width="200px" />
|
|
|
+ <el-table-column prop="miniprogram_name" label="小程序名称" min-width="200px" />
|
|
|
+ <el-table-column label="充值金额">
|
|
|
+ <template #header>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <span>充值金额</span>
|
|
|
+ <el-tooltip placement="top">
|
|
|
+ <template #content>
|
|
|
+ 当前推广链接的状态<br />
|
|
|
+ 启用：当前推广ID已绑定回传配置<br />
|
|
|
+ 禁用：当前推广ID未绑定回传配置
|
|
|
+ </template>
|
|
|
+ <el-icon>
|
|
|
+ <InfoFilled />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="wrapper">
|
|
|
+ <div>充值金额</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="充值笔数">
|
|
|
+ <template #header>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <span>充值笔数</span>
|
|
|
+ <el-tooltip placement="top">
|
|
|
+ <template #content>
|
|
|
+ 当前推广链接的状态<br />
|
|
|
+ 启用：当前推广ID已绑定回传配置<br />
|
|
|
+ 禁用：当前推广ID未绑定回传配置
|
|
|
+ </template>
|
|
|
+ <el-icon>
|
|
|
+ <InfoFilled />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="wrapper">
|
|
|
+ <div>充值笔数</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="新增用户充值总额">
|
|
|
+ <template #header>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <span>新增用户充值总额</span>
|
|
|
+ <el-tooltip placement="top">
|
|
|
+ <template #content>
|
|
|
+ 当前推广链接的状态<br />
|
|
|
+ 启用：当前推广ID已绑定回传配置<br />
|
|
|
+ 禁用：当前推广ID未绑定回传配置
|
|
|
+ </template>
|
|
|
+ <el-icon>
|
|
|
+ <InfoFilled />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="wrapper">
|
|
|
+ <div>新增用户充值总额</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="普通充值">
|
|
|
+ <el-table-column prop="name" label="金额" width="120">
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="支付订单数">
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="会员充值">
|
|
|
+ <el-table-column prop="name" label="金额" width="120">
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="支付订单数">
|
|
|
+
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <Paginate />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { shortcuts } from '@/utils/shortcuts'
|
|
|
+import { useRouter, useRoute } from 'vue-router'
|
|
|
+import { InfoFilled } from '@element-plus/icons-vue';
|
|
|
+import { useGetList } from '@/hook/curd/useGetList';
|
|
|
+import { titleObj } from "./excelTitle"
|
|
|
+import moment from 'moment';
|
|
|
+const start_date = moment().startOf('month').format('YYYY-MM-DD')
|
|
|
+const end_date = moment().endOf('month').format('YYYY-MM-DD')
|
|
|
+const statisticalData = ref({})
|
|
|
+const api = 'channel/order_list';
|
|
|
+const router = useRouter()
|
|
|
+const route = useRoute()
|
|
|
+const { data, query, search, reset, loading } = useGetList(api);
|
|
|
+const rolesIdentify = inject('rolesIdentify')
|
|
|
+
|
|
|
+const timeChange = (e: object) => {
|
|
|
+ console.log(e, 'timeChangetimeChangetimeChange');
|
|
|
+ if (query.value.time) {
|
|
|
+ const timeArr = toRaw(e);
|
|
|
+ query.value.created_at_start = timeArr[0]
|
|
|
+ query.value.created_at_end = timeArr[1]
|
|
|
+ } else {
|
|
|
+ delete query.value.created_at_start
|
|
|
+ delete query.value.created_at_end
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const resetQuery = () => {
|
|
|
+ reset()
|
|
|
+}
|
|
|
+
|
|
|
+const tableData = computed(() => data.value?.data);
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ search();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.box-card {
|
|
|
+ width: 300px;
|
|
|
+ margin: 8px;
|
|
|
+
|
|
|
+ .money-wrapper {
|
|
|
+ height: 50px;
|
|
|
+ width: 100%;
|
|
|
+ color: #ed892c;
|
|
|
+ font-size: 26px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.stat-wrapper {
|
|
|
+ display: flex;
|
|
|
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
|
+
|
|
|
+ .stat {
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 550;
|
|
|
+ padding: 0 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.table-default {
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ .set-warpper {
|
|
|
+ height: 60px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrapper {
|
|
|
+ margin: 8px;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
