code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-21 10:25:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit message

Browse Source
This commit is contained in:
Chopper
2021-05-13 10:56:04 +08:00
commit ec3e958037
728 changed files with 132685 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
manager/src/views/home/home.scss Normal file
View File

@@ -0,0 +1,222 @@
.card {
margin: 10px 10px 20px;
padding: 0 20px 20px;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 0.4em;
}
h4 {
margin: 20px 0;
font-size: 18px;
}
/deep/ .ivu-icon {
margin-left: 40px;
margin-right: 40px;
}
.count-item,
.todo-item {
height: 84px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.4em;
flex: 1;
font-weight: bold;
margin-right: 20px;
}
.todo-item {
flex-direction: column;
background: #ebebeb88;
.counts {
margin: 4px 0;
color: $theme_color;
}
> div {
margin: 4px 0;
}
}
.todo-item,
.count-item,
.today-item,
.charts,
.transform {
transition: 0.35s;
}
.todo-item:hover,
.count-item:hover,
.today-item:hover,
.charts:hover,
.transform:hover {
cursor: pointer;
transform: translateY(-10px);
z-index: 99;
}
.count-item {
transition: 0.35s;
cursor: pointer;
color: #fff;
justify-content: flex-start;
}
.count-item:nth-of-type(1) {
background-image: linear-gradient(109.6deg, rgba($color: #ff7171, $alpha: 0.6) 11.2%, #ff7171 100.2%);
box-shadow: 1px 3px 12px rgba($color: #ff7171, $alpha: 0.3);
}
.count-item:nth-of-type(2) {
background-image: linear-gradient(109.6deg, rgba($color: #ffaa71, $alpha: 0.6) 11.2%, #ffaa71 100.2%);
box-shadow: 1px 3px 12px rgba($color: #ffaa71, $alpha: 0.3);
}
.count-item:nth-of-type(3) {
background-image: linear-gradient(109.6deg, rgba($color: #93b5e1, $alpha: 0.6) 11.2%, #93b5e1 100.2%);
box-shadow: 1px 3px 12px rgba($color: #93b5e1, $alpha: 0.3);
}
.count-item:nth-of-type(4) {
background-image: linear-gradient(109.6deg, rgba($color: #848ccf, $alpha: 0.6) 11.2%, #848ccf 100.2%);
box-shadow: 1px 3px 12px rgba($color: #848ccf, $alpha: 0.3);
}
.counts {
line-height: 1;
font-size: 21px;
}
.flow-box-item {
> .counts {
color: #ffaa71;
}
}
.count-list {
}
.flow-list {
height: 330px;
}
.svg {
width: 20px;
height: 20px;
}
.flow-item {
display: flex;
flex: 1;
}
.flow {
background: #ebebeb88 !important;
border: none;
padding: 0;
}
.flow-member {
width: 200px;
margin-right: 20px;
font-weight: bold;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
> div {
font-size: 18px;
margin-top: 20px;
}
> span {
color: #ffaa71;
font-size: 43px;
letter-spacing: 3px;
margin-top: 90px;
font-style: italic;
}
}
.flow-box {
padding-top: 20px;
width: 400px;
justify-content: space-between;
margin: 10px 0 20px;
> .flow-box-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 15px;
margin: 0 20px;
> div {
margin: 4px 0;
}
}
}
.flow-box-splice {
background: #fff;
width: 190px;
margin-right: 20px;
padding: 20px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
> div {
margin: 4px 0;
}
> .counts {
color: #ffaa71;
}
flex-direction: column;
}
.flow-box-splice:nth-last-of-type(1) {
margin-right: 0;
}
.flow-splice {
}
.flow-box-splice,
.flow-member,
.card,
.today-box,
.flow-wrapper {
box-shadow: 1px 3px 12px rgba($color: #e7e7e7, $alpha: 0.3);
border-radius: 0.4em;
box-shadow: 1px 3px 12px rgba($color: #e7e7e7, $alpha: 0.3);
}
.flow-wrapper {
background: #fff;
padding: 0 30px;
}
.today-box {
flex: 3;
background: #fff;
margin-left: 20px;
padding: 0 30px;
}
.today-item {
width: 30%;
margin-bottom: 20px;
border-radius: 0.4em;
font-weight: bold;
background: #ebebeb88;
padding: 20px;
> span {
color: $theme_color;
font-size: 21px;
}
}
.charts {
margin: 10px 10px 20px;
padding: 20px 20px 20px;
background: #fff;
}
.chart-item {
width: 48%;
margin-right: 1%;
}
.today-list {
justify-content: space-between;
flex-wrap: wrap;
}

492
manager/src/views/home/home.vue Normal file
View File

@@ -0,0 +1,492 @@
<template>
<div>
<!-- 统计 -->
<div class="card">
<h4>
基本信息
</h4>
<div class="count-list flex">
<div class="count-item" @click="navigateTo('managerGoods')">
<div>
<Icon class="icon" size="31" type="md-photos" />
</div>
<div>
<div class="counts">{{homeData.goodsNum ||0}}</div>
<div>商品数量</div>
</div>
</div>
<div class="count-item" @click="navigateTo('memberList')">
<div>
<Icon class="icon" size="31" type="md-person" />
</div>
<div>
<div class="counts">{{homeData.memberNum ||0}}</div>
<div>会员数量</div>
</div>
</div>
<div class="count-item" @click="navigateTo('orderList')">
<div>
<Icon class="icon" size="31" type="md-list" />
</div>
<div>
<div class="counts">{{homeData.orderNum ||0}}</div>
<div>订单数量</div>
</div>
</div>
<div class="count-item" @click="navigateTo('shopList')">
<div>
<Icon class="icon" size="31" type="ios-stats" />
</div>
<div>
<div class="counts">{{homeData.storeNum ||0}}</div>
<div>店铺数量</div>
</div>
</div>
</div>
</div>
<!-- 今日待办 -->
<div class="card">
<h4>今日待办</h4>
<div class="todo-list flex">
<div class="todo-item" @click="navigateTo('applyGoods')">
<div class="counts">{{$store.state.notices.goods || 0}}</div>
<div>待审核商品</div>
</div>
<div class="todo-item" @click="navigateTo('shopAuth')">
<div class="counts">{{$store.state.notices.store|| 0}}</div>
<div>待审核店铺</div>
</div>
<div class="todo-item" @click="navigateTo('orderComplaint')">
<div class="counts">{{$store.state.notices.complain|| 0}}</div>
<div>待审核投诉</div>
</div>
<div class="todo-item" @click="navigateTo('afterSaleOrder')">
<div class="counts">{{$store.state.notices.refund|| 0}}</div>
<div>待审核售后</div>
</div>
<div class="todo-item" @click="navigateTo('distribution')">
<div class="counts">{{$store.state.notices.distributionCash|| 0}}</div>
<div>待审核分销提现</div>
</div>
<div class="todo-item" @click="navigateTo('billList')">
<div class="counts">{{$store.state.notices.waitPayBill|| 0}}</div>
<div>待审核分账</div>
</div>
</div>
</div>
<!-- 今日，流量概括 -->
<div class="card flow">
<div class="flow-list flex">
<div class="flow-item ">
<div class="flow-member">
<div>
当前在线人数
</div>
<span>
{{homeData.currentNumberPeopleOnline || 0}}
</span>
</div>
<div class="flow-wrapper">
<h4>
流量概括
</h4>
<div class="card flow-box flex">
<div class="flow-box-item">
<div>
今日访客数
</div>
<div class="counts">
{{homeData.todayUV || 0}}
</div>
</div>
<div class="flow-box-item">
<div>
昨日访客数
</div>
<div class="counts">
{{homeData.yesterdayUV || 0}}
</div>
</div>
</div>
<div class="flow-splice flex">
<div class="flow-box-splice">
<div>
前七日访客数
</div>
<div class="counts">
{{homeData.lastSevenUV || 0}}
</div>
</div>
<div class="flow-box-splice">
<div>
前三十日访客数
</div>
<div class="counts">
{{homeData.lastThirtyUV || 0}}
</div>
</div>
</div>
</div>
</div>
<div class="today-box">
<h4> 今日概括</h4>
<div class="today-list flex">
<div class="today-item">
<div>今日订单数</div>
<span>{{homeData.todayOrderNum}}</span>
</div>
<div class="today-item">
<div>今日交易额</div>
<span>￥{{homeData.todayOrderPrice | unitPrice }}</span>
</div>
<div class="today-item">
<div>今日新增店铺</div>
<span>{{homeData.todayStoreNum || 0}}</span>
</div>
<div class="today-item">
<div>今日新增会员数</div>
<span>{{homeData.todayMemberNum || 0}}</span>
</div>
<div class="today-item">
<div>今日上架商品数量</div>
<span>{{homeData.todayGoodsNum || 0}}</span>
</div>
<div class="today-item">
<div>今日新增评论</div>
<span>{{homeData.todayMemberEvaluation || 0}}</span>
</div>
</div>
</div>
</div>
</div>
<!-- chart -->
<div class="charts flex">
<div class="chart-item">
<h4>流量统计</h4>
<div id="pvChart"></div>
</div>
<div class="chart-item">
<h4>交易统计</h4>
<div id="orderChart"></div>
</div>
</div>
<!-- top10商品 -->
<div class="card transform">
<h4>热卖商品TOP10</h4>
<Table stripe :columns="tophotGoodsColumns" :data="topHotGoodsData"></Table>
</div>
<!-- top10店铺 -->
<div class="card transform">
<h4>热卖店铺TOP10</h4>
<Table stripe :columns="tophotShopsColumns" :data="topHotShopsData"></Table>
</div>
</div>
</template>
<script>
import { homeStatistics, hotGoods, hotShops, getNoticePage } from "@/api/index";
import show from "./show.vue";
import * as API_Goods from "@/api/goods";
import { Chart } from "@antv/g2";
import * as API_Member from "@/api/member";
import Cookies from "js-cookie";
export default {
name: "home",
components: {
show,
},
data() {
return {
tophotShopsColumns: [
{
type: "index",
width: 100,
title: "排名",
align: "center",
},
{
title: "店铺名称",
key: "storeName",
},
{
title: "价格",
key: "price",
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.price, "￥")
);
},
},
{
title: "销量",
key: "num",
width: 100,
sortable: true,
},
],
tophotGoodsColumns: [
{
type: "index",
width: 100,
title: "排名",
align: "center",
},
{
title: "商品名称",
key: "goodsName",
},
{
title: "价格",
key: "price",
render: (h, params) => {
return h(
"div",
this.$options.filters.unitPrice(params.row.price, "￥")
);
},
},
{
title: "销量",
key: "num",
width: 100,
sortable: true,
},
],
topHotGoodsData: [], //热卖商品集合
topHotShopsData: [], //热卖店铺集合
awaitTodoData: "", //今日待办集合
homeData: "",
username: "",
pvChart: "",
orderChart: "",
params: {
searchType: "LAST_SEVEN",
},
// 订单传参
orderParams: {
searchType: "LAST_SEVEN", // TODAY , YESTERDAY , LAST_SEVEN , LAST_THIRTY
year: "",
shopId: "",
memberId: "",
},
};
},
computed: {
currNav() {
return this.$store.state.app.currNav;
},
avatarPath() {
return localStorage.avatorImgPath;
},
},
methods: {
navigateTo(name) {
this.$router.push({
name,
});
},
// top10热卖商品
async toHotGoods() {
let res = await hotGoods();
res.success ? (this.topHotGoodsData = res.result) : "";
},
// top10热卖店铺
async topHotShops() {
let res = await hotShops();
res.success ? (this.topHotShopsData = res.result) : "";
},
// 今日待办
async awaitTodo() {
let res = await getNoticePage();
res.success ? (this.awaitTodoData = res.result) : "";
},
async getHomeData() {
let res = await homeStatistics();
if (res.success) {
if (
res.result.todayOrderPrice &&
res.result.todayOrderPrice != "null"
) {
res.result.todayOrderPrice = parseInt(res.result.todayOrderPrice);
} else {
res.result.todayOrderPrice = 0;
}
this.homeData = res.result;
}
},
// 实例化订单图表
async initOrderChartList(name) {
const res = await API_Goods.getOrderChart(this.orderParams);
if (res.success) {
this.chartList = res.result;
if (!this.orderChart) {
this.orderChart = new Chart({
container: "orderChart",
autoFit: true,
height: 500,
padding: [70, 35, 70, 35],
});
}
this.initOrderChart(); //订单表
}
},
initOrderChart() {
// 默认已经加载 legend-filter 交互
let data = this.chartList;
data.forEach((item) => {
item.createTime = item.createTime.split(" ")[0];
item.title = "交易额";
});
this.orderChart.data(data);
this.orderChart.tooltip({
showCrosshairs: true,
shared: true,
});
this.orderChart
.line()
.position("createTime*price")
.label("price")
.color("title")
.shape("smooth");
this.orderChart
.point()
.position("createTime*price")
.label("price")
.color("title")
.shape("circle")
.style({
stroke: "#fff",
lineWidth: 1,
});
this.orderChart.render();
},
// 浏览量统计图
initPvChart() {
let uv = [];
let pv = [];
this.data.forEach((item) => {
uv.push({
date: item.date,
uvNum: item.uvNum,
title: "访客数UV",
pv: item.uvNum,
});
pv.push({
date: item.date,
pvNum: item.pvNum,
pv: item.pvNum,
title: "浏览量PV",
});
});
let data = [...uv, ...pv];
this.pvChart.data(data);
this.pvChart.scale({
activeQuantity: {
range: [0, 1],
nice: true,
},
});
this.pvChart.tooltip({
showCrosshairs: true,
shared: true,
});
this.pvChart
.line()
.position("date*pv")
.color("title")
.label("pv")
.shape("smooth");
this.pvChart
.point()
.position("date*pv")
.color("title")
.label("pv")
.shape("circle")
.style({
stroke: "#fff",
lineWidth: 1,
});
this.pvChart.render();
},
// 浏览量
async getPvChart() {
API_Member.getStatisticsList(this.params).then((res) => {
if (res.result) {
this.data = res.result;
if (!this.pvChart) {
this.pvChart = new Chart({
container: "pvChart",
autoFit: true,
height: 500,
padding: [70, 35, 70, 35],
});
}
this.initPvChart();
}
});
},
// 初始化信息
init() {
if (Cookies.get("userInfo")) {
let userInfo = JSON.parse(Cookies.get("userInfo"));
this.username = userInfo.username;
}
this.toHotGoods();
this.topHotShops();
this.awaitTodo();
this.getHomeData();
this.getPvChart();
this.initOrderChartList();
},
},
mounted() {
this.init();
},
};
</script>
<style lang="scss" scoped>
@import "./home.scss";
</style>

88
manager/src/views/home/show.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<div>
<Card>
<Row>
<Form
ref="searchForm"
inline
:label-width="70"
@keydown.enter.native="handleGo"
>
<Form-item label="链接地址" prop="url">
<Input type="text" v-model="url" placeholder="http://" clearable style="width: 350px" />
</Form-item>
<Form-item style="margin-left:-50px;">
<Button @click="handleGo" type="primary" icon="ios-send" style="margin-right:5px">前往</Button>
<Button @click="handleOpen" icon="md-open">新窗口中打开</Button>
</Form-item>
</Form>
</Row>
<Divider style="margin-top:-10px;margin-bottom:0px;" />
<Row>
<div style="position:relative;">
<iframe
id="iframe"
:src="go"
frameborder="0"
width="100%"
:height="height"
scrolling="auto"
></iframe>
<Spin fix size="large" v-if="loading"></Spin>
</div>
</Row>
</Card>
</div>
</template>
<script>
export default {
name: "show",
data() {
return {
loading: false,
go: "",
url: "",
html: "",
height: "525px"
};
},
computed: {
currNav() {
return this.$store.state.app.currNav;
}
},
methods: {
initUrl() {
let url;
if (this.currNav == "doc") {
url = "https://www.kancloud.cn/lili/lili/content";
}
if (url) {
this.url = url;
this.go = url;
}
},
handleGo() {
let url = this.url;
this.go = this.url;
},
handleOpen() {
window.open(this.url);
}
},
watch: {
currNav(v, oldV) {
this.initUrl();
}
},
mounted() {
// 计算高度
let height = document.documentElement.clientHeight;
this.height = Number(height - 217) + "px";
this.initUrl();
}
};
</script>