|
|
@@ -2,25 +2,43 @@
|
|
|
<div class="app-container">
|
|
|
<div class="el-container-md">
|
|
|
|
|
|
- <el-form :model="queryParams" class="live-goods-css" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
|
|
|
- <el-form-item label="商品名称" prop="keywords" >
|
|
|
+ <el-form :model="queryParams" class="live-goods-css" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
|
|
|
+ <el-form-item label="直播名称" prop="liveName">
|
|
|
<el-input
|
|
|
- v-model="queryParams.keywords"
|
|
|
- placeholder="请输入商品名称"
|
|
|
- clearable
|
|
|
- size="small"
|
|
|
- @keyup.enter.native="handleQuery"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="上下架" prop="status" >
|
|
|
- <el-input
|
|
|
- v-model="queryParams.status"
|
|
|
- placeholder="请输入直播间状态"
|
|
|
+ v-model="queryParams.liveName"
|
|
|
+ placeholder="请输入直播名称"
|
|
|
clearable
|
|
|
size="small"
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
+<!-- <el-form-item label="用户名称" prop="userName">-->
|
|
|
+<!-- <el-input-->
|
|
|
+<!-- v-model="queryParams.userName"-->
|
|
|
+<!-- placeholder="请输入用户名称"-->
|
|
|
+<!-- clearable-->
|
|
|
+<!-- size="small"-->
|
|
|
+<!-- @keyup.enter.native="handleQuery"-->
|
|
|
+<!-- />-->
|
|
|
+<!-- </el-form-item>-->
|
|
|
+<!-- <el-form-item label="销售名称" prop="companyUserName">-->
|
|
|
+<!-- <el-input-->
|
|
|
+<!-- v-model="queryParams.companyUserName"-->
|
|
|
+<!-- placeholder="请输入销售名称"-->
|
|
|
+<!-- clearable-->
|
|
|
+<!-- size="small"-->
|
|
|
+<!-- @keyup.enter.native="handleQuery"-->
|
|
|
+<!-- />-->
|
|
|
+<!-- </el-form-item>-->
|
|
|
+<!-- <el-form-item label="公司名称" prop="companyName">-->
|
|
|
+<!-- <el-input-->
|
|
|
+<!-- v-model="queryParams.companyName"-->
|
|
|
+<!-- placeholder="请输入公司名称"-->
|
|
|
+<!-- clearable-->
|
|
|
+<!-- size="small"-->
|
|
|
+<!-- @keyup.enter.native="handleQuery"-->
|
|
|
+<!-- />-->
|
|
|
+<!-- </el-form-item>-->
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
@@ -44,73 +62,95 @@
|
|
|
>
|
|
|
<!-- 题干列:显示试题的主要内容 -->
|
|
|
<el-table-column
|
|
|
- prop="orderId"
|
|
|
- label="订单id"
|
|
|
+ prop="liveId"
|
|
|
+ label="直播ID"
|
|
|
show-overflow-tooltip
|
|
|
></el-table-column>
|
|
|
|
|
|
<el-table-column
|
|
|
- prop="orderCode"
|
|
|
- label="订单号"
|
|
|
+ prop="liveName"
|
|
|
+ label="直播名称"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column
|
|
|
- prop="userName"
|
|
|
- label="用户名称"
|
|
|
+ prop="companyName"
|
|
|
+ label="公司名称"
|
|
|
></el-table-column>
|
|
|
|
|
|
+<!-- <el-table-column-->
|
|
|
+<!-- prop="companyId"-->
|
|
|
+<!-- label="公司ID"-->
|
|
|
+<!-- ></el-table-column>-->
|
|
|
+
|
|
|
<el-table-column
|
|
|
- prop="userPhone"
|
|
|
- label="用户电话"
|
|
|
+ prop="companyUserId"
|
|
|
+ label="销售ID"
|
|
|
></el-table-column>
|
|
|
-
|
|
|
<el-table-column
|
|
|
- prop="totalPrice"
|
|
|
- label="总价格"
|
|
|
+ prop="companyUserName"
|
|
|
+ label="销售名称"
|
|
|
></el-table-column>
|
|
|
-
|
|
|
<el-table-column
|
|
|
- prop="payPrice"
|
|
|
- label="支付价格"
|
|
|
+ prop="liveNum"
|
|
|
+ label="邀请人数"
|
|
|
></el-table-column>
|
|
|
|
|
|
<el-table-column
|
|
|
- prop="isPay"
|
|
|
- label="是否支付"
|
|
|
- >
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-tag type="success" v-if="scope.row.isPay == 1">已支付</el-tag>
|
|
|
- <el-tag type="info" v-if="scope.row.isPay == 0">未支付</el-tag>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="status"
|
|
|
- label="订单状态"
|
|
|
+ label="操作"
|
|
|
+ width="120"
|
|
|
+ align="center"
|
|
|
>
|
|
|
<template slot-scope="scope">
|
|
|
- <el-tag v-if="scope.row.status == -1">申请退款</el-tag>
|
|
|
- <el-tag v-if="scope.row.status == -2">退货成功</el-tag>
|
|
|
- <el-tag v-if="scope.row.status == 0">已取消</el-tag>
|
|
|
- <el-tag v-if="scope.row.status == 1">待支付</el-tag>
|
|
|
- <el-tag v-if="scope.row.status == 2">代发货</el-tag>
|
|
|
- <el-tag v-if="scope.row.status == 3">待收货</el-tag>
|
|
|
- <el-tag v-if="scope.row.status == 4">待评价</el-tag>
|
|
|
- <el-tag v-if="scope.row.status == 5">已完成</el-tag>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="mini"
|
|
|
+ @click="handleDetail(scope.row)"
|
|
|
+ >查看详情</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="companyUserId"
|
|
|
- label="销售id"
|
|
|
- ></el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="companyUserName"
|
|
|
- label="销售名称"
|
|
|
- ></el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="companyName"
|
|
|
- label="公司名称"
|
|
|
- ></el-table-column>
|
|
|
+
|
|
|
+<!-- <el-table-column-->
|
|
|
+<!-- prop="payPrice"-->
|
|
|
+<!-- label="支付价格"-->
|
|
|
+<!-- ></el-table-column>-->
|
|
|
+
|
|
|
+<!-- <el-table-column-->
|
|
|
+<!-- prop="isPay"-->
|
|
|
+<!-- label="是否支付"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <template slot-scope="scope">-->
|
|
|
+<!-- <el-tag type="success" v-if="scope.row.isPay == 1">已支付</el-tag>-->
|
|
|
+<!-- <el-tag type="info" v-if="scope.row.isPay == 0">未支付</el-tag>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-table-column>-->
|
|
|
+<!-- <el-table-column-->
|
|
|
+<!-- prop="status"-->
|
|
|
+<!-- label="订单状态"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <template slot-scope="scope">-->
|
|
|
+<!-- <el-tag v-if="scope.row.status == -1">申请退款</el-tag>-->
|
|
|
+<!-- <el-tag v-if="scope.row.status == -2">退货成功</el-tag>-->
|
|
|
+<!-- <el-tag v-if="scope.row.status == 0">已取消</el-tag>-->
|
|
|
+<!-- <el-tag v-if="scope.row.status == 1">待支付</el-tag>-->
|
|
|
+<!-- <el-tag v-if="scope.row.status == 2">代发货</el-tag>-->
|
|
|
+<!-- <el-tag v-if="scope.row.status == 3">待收货</el-tag>-->
|
|
|
+<!-- <el-tag v-if="scope.row.status == 4">待评价</el-tag>-->
|
|
|
+<!-- <el-tag v-if="scope.row.status == 5">已完成</el-tag>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-table-column>-->
|
|
|
+<!-- <el-table-column-->
|
|
|
+<!-- prop="companyUserId"-->
|
|
|
+<!-- label="销售id"-->
|
|
|
+<!-- ></el-table-column>-->
|
|
|
+<!-- <el-table-column-->
|
|
|
+<!-- prop="companyUserName"-->
|
|
|
+<!-- label="销售名称"-->
|
|
|
+<!-- ></el-table-column>-->
|
|
|
+<!-- <el-table-column-->
|
|
|
+<!-- prop="companyName"-->
|
|
|
+<!-- label="公司名称"-->
|
|
|
+<!-- ></el-table-column>-->
|
|
|
|
|
|
|
|
|
|
|
|
@@ -126,13 +166,57 @@
|
|
|
style="margin-top: 20px;"
|
|
|
/>
|
|
|
|
|
|
+ <!-- 详情抽屉 -->
|
|
|
+ <el-drawer
|
|
|
+ title="直播间用户详情"
|
|
|
+ :visible.sync="drawerVisible"
|
|
|
+ direction="rtl"
|
|
|
+ size="50%"
|
|
|
+ >
|
|
|
+ <div v-if="detailInfo" style="padding: 20px;">
|
|
|
+ <el-descriptions :column="2" border>
|
|
|
+ <el-descriptions-item label="直播间ID">{{ detailInfo.liveId }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="直播间名称">{{ detailInfo.liveName }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="销售ID">{{ detailInfo.companyUserId }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="销售名称">{{ detailInfo.companyUserName }}</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="进入用户数" :span="2">{{ detailList.length }} 人</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+
|
|
|
+ <el-divider></el-divider>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="detailList"
|
|
|
+ style="width: 100%"
|
|
|
+ v-loading="detailLoading"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="userId"
|
|
|
+ label="用户ID"
|
|
|
+ width="100"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="userName"
|
|
|
+ label="用户名称"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="firstEntryTime"
|
|
|
+ label="进入时间"
|
|
|
+ width="180"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ formatDateTime(scope.row.firstEntryTime) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import {liveProfitList} from '@/api/live/liveProfit';
|
|
|
+import {liveProfitList, liveProfitDetail} from '@/api/live/liveProfit';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -141,46 +225,89 @@ export default {
|
|
|
queryParams: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
- keywords: null,
|
|
|
- status: null,
|
|
|
- liveId: null,
|
|
|
- desc: null,
|
|
|
- createTime: null,
|
|
|
- updateTime: null,
|
|
|
+ orderCode: null,
|
|
|
+ userName: null,
|
|
|
+ companyUserName: null,
|
|
|
+ companyName: null,
|
|
|
},
|
|
|
// 数据列表
|
|
|
dataList:[],
|
|
|
total:0,
|
|
|
// 显示搜索条件
|
|
|
showSearch: true,
|
|
|
+ // 抽屉相关
|
|
|
+ drawerVisible: false,
|
|
|
+ detailLoading: false,
|
|
|
+ detailInfo: null,
|
|
|
+ detailList: [],
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
this.getList();
|
|
|
},
|
|
|
- mounted() {
|
|
|
- this.loading = false;
|
|
|
- },
|
|
|
methods: {
|
|
|
getList(){
|
|
|
+ this.loading = true;
|
|
|
liveProfitList(this.queryParams).then(res=>{
|
|
|
this.dataList = res.rows;
|
|
|
this.total = res.total;
|
|
|
- })
|
|
|
+ this.loading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
},
|
|
|
/** 搜索按钮操作 */
|
|
|
handleQuery() {
|
|
|
this.queryParams.pageNum = 1;
|
|
|
- this.loading = true
|
|
|
- // listLiveGoods(this.queryParams).then(response => {
|
|
|
- // this.goodsLiveList = response.rows
|
|
|
- // this.goodsLiveTotal = response.total
|
|
|
- // this.loading = false
|
|
|
- // })
|
|
|
+ this.getList();
|
|
|
},
|
|
|
/** 重置按钮操作 */
|
|
|
resetQuery() {
|
|
|
- this.$refs.queryForm.resetFields();
|
|
|
+ this.queryParams = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ orderCode: null,
|
|
|
+ userName: null,
|
|
|
+ companyUserName: null,
|
|
|
+ companyName: null,
|
|
|
+ };
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ /** 查看详情 */
|
|
|
+ handleDetail(row) {
|
|
|
+ this.drawerVisible = true;
|
|
|
+ this.detailLoading = true;
|
|
|
+ this.detailInfo = {
|
|
|
+ liveId: row.liveId,
|
|
|
+ liveName: row.liveName,
|
|
|
+ companyUserId: row.companyUserId,
|
|
|
+ companyUserName: row.companyUserName
|
|
|
+ };
|
|
|
+ this.detailList = [];
|
|
|
+
|
|
|
+ liveProfitDetail(row.liveId, row.companyUserId).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.detailList = res.data || [];
|
|
|
+ } else {
|
|
|
+ this.$modal.msgError(res.msg || '获取详情失败');
|
|
|
+ }
|
|
|
+ this.detailLoading = false;
|
|
|
+ }).catch(() => {
|
|
|
+ this.detailLoading = false;
|
|
|
+ this.$modal.msgError('获取详情失败');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 格式化日期时间 */
|
|
|
+ formatDateTime(dateTime) {
|
|
|
+ if (!dateTime) return '';
|
|
|
+ const date = new Date(dateTime);
|
|
|
+ const year = date.getFullYear();
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
|
+ const day = String(date.getDate()).padStart(2, '0');
|
|
|
+ const hours = String(date.getHours()).padStart(2, '0');
|
|
|
+ const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
|
+ const seconds = String(date.getSeconds()).padStart(2, '0');
|
|
|
+ return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
},
|
|
|
},
|
|
|
}
|