<template>
|
<div class="UserDetail">
|
<div class="header">
|
<span class="iconfont" @click="back"></span> 用户列表
|
</div>
|
<div class="content">
|
<div class="title">基本信息</div>
|
<div class="infoArea">
|
<div class="infoItem">
|
<div class="label">用户名</div>
|
<div class="data">{{ userInfo.username }}</div>
|
</div>
|
<div class="infoItem">
|
<div class="label">姓名/联系人</div>
|
<div class="data">{{ userInfo.trueName }}</div>
|
</div>
|
<div class="infoItem">
|
<div class="label">公司名称</div>
|
<div class="data">{{ userInfo.companyName }}</div>
|
</div>
|
<div class="infoItem">
|
<div class="label">来源</div>
|
<div class="data">
|
{{ userInfo.source == 0 ? "自行注册" : "手动添加" }}
|
</div>
|
</div>
|
<div class="infoItem">
|
<div class="label">邮箱</div>
|
<div class="data">{{ userInfo.email }}</div>
|
</div>
|
<div class="infoItem">
|
<div class="label">地区</div>
|
<div class="data">
|
{{ userInfo.provinceName + "-" + userInfo.areaName }}
|
</div>
|
</div>
|
<div class="infoItem">
|
<div class="label">注册时间</div>
|
<div class="data">{{ userInfo.createTime }}</div>
|
</div>
|
<div class="infoItem">
|
<div class="label">手机号</div>
|
<div class="data">{{ userInfo.phoneNum }}</div>
|
</div>
|
<div class="infoItem">
|
<div class="label">行业</div>
|
<div class="data">{{ userInfo.industryName }}</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="content">
|
<div class="title">统计数据</div>
|
<div class="table-area">
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
:data="statisticData"
|
tooltip-effect="dark"
|
:fit="true"
|
>
|
<el-table-column
|
prop="totalOrderMoney"
|
label="累计消费金额"
|
></el-table-column>
|
|
<el-table-column prop="orderNum" label="订单数量"></el-table-column>
|
<el-table-column prop="devNum" label="设备总量/x86架构/ARM">
|
</el-table-column>
|
<el-table-column prop="sdkNum" label="购买算法数量"></el-table-column>
|
<el-table-column prop="appNum" label="购买应用数量"></el-table-column>
|
<el-table-column prop="time" label="平均登录时长"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<div class="content">
|
<div class="title">设备管理开通状态</div>
|
<div class="table-area">
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
:data="menuList"
|
tooltip-effect="dark"
|
:fit="true"
|
>
|
<el-table-column label="序号" width="68">
|
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
|
</el-table-column>
|
<el-table-column prop="appName" label="应用名称"></el-table-column>
|
<el-table-column prop="type" label="开通状态">
|
<template slot-scope="scope">
|
<div
|
class="deviceStatus"
|
:class="{ green: scope.row.status == 0 }"
|
>
|
{{ scope.row.status == 0 ? "已开通" : "未开通" }}
|
</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column prop="openTime" label="开通时间"></el-table-column>
|
<el-table-column prop="lastTime" label="到期时间"> </el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<div class="content">
|
<div class="title">订单记录</div>
|
<div class="table-area orderArea">
|
<el-table
|
id="multipleTable"
|
ref="multipleTable"
|
:data="orderList"
|
tooltip-effect="dark"
|
:fit="true"
|
>
|
<el-table-column label="序号" width="68">
|
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
|
</el-table-column>
|
<el-table-column prop="sn" label="订单编号"></el-table-column>
|
<el-table-column label="产品名称">
|
<template slot-scope="scope">
|
{{ scope.row.products[0].productName }}
|
</template>
|
</el-table-column>
|
<el-table-column label="订单类型">
|
<template slot-scope="scope">
|
{{ scope.row.products[0].productTypeName }}
|
</template>
|
</el-table-column>
|
<el-table-column label="订单来源">
|
<template slot-scope="scope">
|
<div>
|
{{ scope.row.source == 0 ? "激活码下载" : "订单购买" }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
<el-table-column prop="status" label="订单状态">
|
<template slot-scope="scope">
|
<div class="orderStatus" v-if="scope.row.orderStatus == -1">
|
已取消
|
</div>
|
<div class="orderStatus" v-if="scope.row.orderStatus == 0">
|
未下单
|
</div>
|
<div class="orderStatus" v-if="scope.row.orderStatus == 1">
|
待支付
|
</div>
|
<div class="orderStatus green" v-if="scope.row.orderStatus == 2">
|
已支付
|
</div>
|
<div class="orderStatus" v-if="scope.row.orderStatus == 11">
|
支付凭证待审核
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="激活码">
|
<template slot-scope="scope">
|
{{ scope.row.products[0].activateCode }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="orderMoney" label="金额"> </el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<div class="control" @click="checkDetail(scope.row)">
|
查看详情
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
findUserList,
|
userInfoStatistic,
|
devInfoStatistic,
|
findAllOrder,
|
} from "@/api/user";
|
|
export default {
|
created() {
|
this.getUserList();
|
this.getStatistic();
|
this.getDevInfo();
|
this.getOrder();
|
},
|
data() {
|
return {
|
userInfo: {},
|
statisticData: [
|
{
|
totalOrderMoney: "33,223元",
|
orderNum: "23",
|
devNum: "2/2/0",
|
sdkNum: "12",
|
appNum: "1",
|
time: "-",
|
},
|
],
|
menuList: [],
|
orderList: [],
|
};
|
},
|
methods: {
|
async getUserList() {
|
const res = await findUserList({
|
page: 1,
|
size: 1,
|
type: +this.$route.query.type,
|
startTime: "",
|
endTime: "",
|
inputText: this.$route.query.username,
|
});
|
if (res && res.success) {
|
this.userInfo = res.data.list[0];
|
}
|
if (this.userInfo.menuNames) {
|
let menuArr = this.userInfo.menuNames.split(",");
|
menuArr.forEach((item) => {
|
let obj = {
|
appName: item,
|
openTime: this.userInfo.authTime,
|
};
|
let dateList = this.userInfo.authTime.split("-");
|
console.log(dateList[0]);
|
dateList[0] =
|
parseInt(dateList[0]) + parseInt(this.userInfo.authDuration);
|
console.log(dateList[0]);
|
obj.lastTime = dateList.join("-");
|
var date1 = new Date();
|
var date2 = new Date(obj.lastTime);
|
obj.status = date2 - date1 > 0 ? 0 : 1;
|
|
this.menuList.push(obj);
|
});
|
}
|
},
|
async getStatistic() {
|
const res = await userInfoStatistic({
|
userId: this.$route.query.userId,
|
startTime: "",
|
endTime: "",
|
inputText: "",
|
productBaseId: "0",
|
orderName: "",
|
orderType: "",
|
orderStatus: 0,
|
});
|
if (res && res.success) {
|
this.statisticData[0].totalOrderMoney = res.data.totalOrderMoney;
|
this.statisticData[0].orderNum = res.data.orderNum;
|
this.statisticData[0].sdkNum = res.data.sdkNum;
|
this.statisticData[0].appNum = res.data.appNum;
|
}
|
},
|
async getDevInfo() {
|
const res = await devInfoStatistic({
|
userId: this.$route.query.userId,
|
});
|
if (res && res.success) {
|
this.statisticData[0].devNum =
|
res.data.total + "/" + res.data.x86_total + "/" + res.data.arm_total;
|
}
|
},
|
async getOrder() {
|
const res = await findAllOrder({
|
userId: this.$route.query.userId,
|
startTime: "",
|
endTime: "",
|
inputText: "",
|
productBaseId: "0",
|
orderName: "",
|
orderType: "",
|
orderStatus: 0,
|
page: 1,
|
size: 1000,
|
});
|
if (res && res.success) {
|
this.orderList = res.data.list;
|
}
|
},
|
back() {
|
this.$router.push("/Layout/UserList");
|
},
|
checkDetail(row) {
|
this.$router.push({
|
path: "/Layout/OrderDetail",
|
query: {
|
id: row.id,
|
},
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.UserDetail {
|
background-color: rgb(243, 245, 248);
|
.header {
|
margin-bottom: 24px;
|
padding: 0 24px;
|
height: 50px;
|
font-size: 16px;
|
color: #666666;
|
line-height: 50px;
|
background: #ffffff;
|
vertical-align: middle;
|
font-weight: 700;
|
|
.iconfont {
|
margin-right: 10px;
|
font-size: 18px;
|
cursor: pointer;
|
}
|
}
|
|
.content {
|
margin: 0 24px 24px 24px;
|
padding: 20px;
|
background-color: #fff;
|
|
.title {
|
padding-left: 10px;
|
height: 20px;
|
font-size: 16px;
|
font-weight: 700;
|
color: #3d3d3d;
|
border-left: 4px solid #0064ff;
|
}
|
|
.infoArea {
|
display: flex;
|
flex-wrap: wrap;
|
|
.infoItem {
|
display: flex;
|
margin-top: 30px;
|
width: 320px;
|
font-size: 14px;
|
color: #3d3d3d;
|
font-weight: 700;
|
|
.label {
|
width: 90px;
|
font-weight: 400;
|
color: #666666;
|
}
|
}
|
}
|
|
.orderArea {
|
overflow-y: auto;
|
max-height: 500px;
|
}
|
|
.control {
|
color: #0064ff;
|
cursor: pointer;
|
}
|
|
.deviceStatus {
|
color: #ff9600;
|
}
|
|
.orderStatus {
|
color: #ff4a32;
|
}
|
|
.green {
|
color: #36b24a;
|
}
|
}
|
}
|
</style>
|
