Skip to content

E
ElectricitySheep
Commit 633e56ed authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改1千2

parent 6bef4dc6
Hide whitespace changes
Inline Side-by-side
Showing with 672 additions and 635 deletions
src/components/zanIndex.vue
View file @ 633e56ed
<style>
.zanTotalTop{
padding:18px 20px;
background: #fff;
border-bottom:1px solid #EBEEF5;
}
.zanIndex_Second{
background-color: #fff;
position: relative;
padding-bottom: 50px;
margin: 10px 0;
border: 1px solid #EBEEF5;
}
.searchDiv{
display:flex;
flex-direction: row;
padding:15px;
overflow: hidden;
}
.searchDiv .el-date-editor .el-range-separator{
width:6%;
}
.zanIndex .el-input__inner{
height:32px;
line-height: 32px;
padding:0 10px;
}
.zanIndex .el-input__icon {
line-height: 32px;
}
.searchDiv>div{
margin-right:5px;
}
.zanIndex .zanIndex_Second .el-tabs__nav-scroll{
width:120px;
margin-left:30px;
}
.zanIndex .zanIndex_Second .el-tabs__nav-wrap::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #E4E7ED;
z-index: 1;
height:1px;
}
.zanIndex .el-tabs__item{
height:32px;
line-height: 32px;
}
.zanIndex .clean{
color: #92959B;
margin-left: 30px;
cursor: pointer;
font-size: 15px;
}
.searchDiv>div:last-child{
height:32px;
line-height: 32px;
}
.num-info{
display: flex;
width: 100%;
height: 60px;
font-size: 28px;
color: #303133;
}
.num-info .num-info-item:first-of-type {
border-left: 0;
}
.num-info .num-info-item:first-of-type {
border-left: 0;
}
.info-item-name {
font-size: 16px;
color: #92959B;
}
.num-info .num-info-item {
text-align: center;
width: 20%;
border-left: 1px dashed #EFF1F7;
}
.zanIndexThrid{
border: 1px solid #EBEEF5;
background-color: #FFF;
color: #303133;
-webkit-transition: .3s;
transition: .3s;
border-radius:4px;
overflow: hidden;
}
.el-card_header{
position: relative;
padding: 18px 20px;
border-bottom: 1px solid #EBEEF5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tab-pay {
position: absolute;
bottom: -15px;
right: 50px;
}
.tab-pay .el-tabs__item {
height: 56px;
line-height: 56px;
}
.el-tabs__nav-wrap::after{
background-color: transparent;
}
.zanIndex .el-card__body{
padding:20px;
}
.pay-info {
padding: 40px 0;
display: flex;
justify-content: space-between;
}
.pay-info .pay-info-item.active {
border: 1px solid #3399FF;
}
.info-item-name {
font-size: 16px;
color: #92959B;
}
.pay-info .pay-info-item {
padding-top: 45px;
width: 22%;
margin: 0 1.5%;
text-align: center;
font-size: 26px;
border: 1px solid #EBEEF5;
border-radius: 10px;
height: 150px;
position: relative;
cursor: pointer;
}
.pay-info .pay-info-item.active img {
position: absolute;
top: 0;
left: 0;
display: block;
}
.pay-info .pay-info-item img {
display: none;
}
.zantable-area{
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.zantable-area .el-card {
width: 49.5%;
color: #303133;
border: 1px solid #EBEEF5;
background-color: #FFF;
color: #303133;
-webkit-transition: .3s;
transition: .3s;
border-radius: 4px;
overflow: hidden;
}
.el-zanIndex_btmheader{
padding: 14px 20px;
}
.el-zanIndex_btmheader span{
/* float:left; */
height: 32px;
line-height: 32px;
}
.ZexportBtn{
padding:0 10px;
float:right;
}
.table_Inner{
padding:20px;
}
.rankIng{
padding:0 10px;
text-align: center;
}
.table_Inner table th{
background: rgb(243, 245, 246);
color:rgb(48, 49, 51);
padding-left:10px;
border-bottom:1px solid #EBEEF5;
}
.text-omit {
width: 380px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table_Inner .el-table .cell {
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
word-break: break-all;
line-height: 23px;
}
.table_Inner .el-table_1_column_1{
text-align: center;
}
.table_Inner .el-table_1_column_2{
padding-left:0;
}
.table2 .is-leaf:first-child{
text-align: center;
}
.Zheader_image{
width: 32px;
height: 32px;
margin-right: 10px;
float: left;
}
.Zheader_image img{
width:100%;
height:100%;
}
.nameList{
height: 32px;
line-height: 32px;
display: inline-block;
width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zantable-area .el-table__row{
height:63px;
}
.echarts-title {
color: #92959B;
display: flex;
font-size: 16px;
margin-left: 45px;
}
.echarts-title-item {
margin-right: 45px;
display: flex;
align-items: center;
}
.echarts-title-item .echarts-title-icon {
height: 16px;
width: 16px;
margin-right: 10px;
background-color: #3399ff;
}
.zanTotalTop {
padding: 18px 20px;
background: #fff;
border-bottom: 1px solid #EBEEF5;
}
.zanIndex_Second {
background-color: #fff;
position: relative;
padding-bottom: 50px;
margin: 10px 0;
border: 1px solid #EBEEF5;
}
.searchDiv {
display: flex;
flex-direction: row;
padding: 15px;
overflow: hidden;
}
.searchDiv .el-date-editor .el-range-separator {
width: 6%;
}
.zanIndex .el-input__inner {
height: 32px;
line-height: 32px;
padding: 0 10px;
}
.zanIndex .el-input__icon {
line-height: 32px;
}
.searchDiv>div {
margin-right: 5px;
}
.zanIndex .zanIndex_Second .el-tabs__nav-scroll {
width: 120px;
margin-left: 30px;
}
.zanIndex .zanIndex_Second .el-tabs__nav-wrap::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #E4E7ED;
z-index: 1;
height: 1px;
}
.zanIndex .el-tabs__item {
height: 32px;
line-height: 32px;
}
.zanIndex .clean {
color: #92959B;
margin-left: 30px;
cursor: pointer;
font-size: 15px;
}
.searchDiv>div:last-child {
height: 32px;
line-height: 32px;
}
.num-info {
display: flex;
width: 100%;
height: 60px;
font-size: 28px;
color: #303133;
}
.num-info .num-info-item:first-of-type {
border-left: 0;
}
.num-info .num-info-item:first-of-type {
border-left: 0;
}
.info-item-name {
font-size: 16px;
color: #92959B;
}
.num-info .num-info-item {
text-align: center;
width: 20%;
border-left: 1px dashed #EFF1F7;
}
.zanIndexThrid {
border: 1px solid #EBEEF5;
background-color: #FFF;
color: #303133;
-webkit-transition: .3s;
transition: .3s;
border-radius: 4px;
overflow: hidden;
}
.el-card_header {
position: relative;
padding: 18px 20px;
border-bottom: 1px solid #EBEEF5;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tab-pay {
position: absolute;
bottom: -15px;
right: 50px;
}
.tab-pay .el-tabs__item {
height: 56px;
line-height: 56px;
}
.el-tabs__nav-wrap::after {
background-color: transparent;
}
.zanIndex .el-card__body {
padding: 20px;
}
.pay-info {
padding: 40px 0;
display: flex;
justify-content: space-between;
}
.pay-info .pay-info-item.active {
border: 1px solid #3399FF;
}
.info-item-name {
font-size: 16px;
color: #92959B;
}
.pay-info .pay-info-item {
padding-top: 45px;
width: 22%;
margin: 0 1.5%;
text-align: center;
font-size: 26px;
border: 1px solid #EBEEF5;
border-radius: 10px;
height: 150px;
position: relative;
cursor: pointer;
}
.pay-info .pay-info-item.active img {
position: absolute;
top: 0;
left: 0;
display: block;
}
.pay-info .pay-info-item img {
display: none;
}
.zantable-area {
margin-top: 20px;
display: flex;
justify-content: space-between;
}
.zantable-area .el-card {
width: 49.5%;
color: #303133;
border: 1px solid #EBEEF5;
background-color: #FFF;
color: #303133;
-webkit-transition: .3s;
transition: .3s;
border-radius: 4px;
overflow: hidden;
}
.el-zanIndex_btmheader {
padding: 14px 20px;
}
.el-zanIndex_btmheader span {
/* float:left; */
height: 32px;
line-height: 32px;
}
.ZexportBtn {
padding: 0 10px;
float: right;
}
.table_Inner {
padding: 20px;
}
.rankIng {
padding: 0 10px;
text-align: center;
}
.table_Inner table th {
background: rgb(243, 245, 246);
color: rgb(48, 49, 51);
padding-left: 10px;
border-bottom: 1px solid #EBEEF5;
}
.text-omit {
width: 380px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.table_Inner .el-table .cell {
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
word-break: break-all;
line-height: 23px;
}
.table_Inner .el-table_1_column_1 {
text-align: center;
}
.table_Inner .el-table_1_column_2 {
padding-left: 0;
}
.table2 .is-leaf:first-child {
text-align: center;
}
.Zheader_image {
width: 32px;
height: 32px;
margin-right: 10px;
float: left;
}
.Zheader_image img {
width: 100%;
height: 100%;
}
.nameList {
height: 32px;
line-height: 32px;
display: inline-block;
width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zantable-area .el-table__row {
height: 63px;
}
.echarts-title {
color: #92959B;
display: flex;
font-size: 16px;
margin-left: 45px;
}
.echarts-title-item {
margin-right: 45px;
display: flex;
align-items: center;
}
.echarts-title-item .echarts-title-icon {
height: 16px;
width: 16px;
margin-right: 10px;
background-color: #3399ff;
}
</style>
<template>
<div class="zanIndex">
<div class="zanTotalTop">数据概况</div>
<div class="zanIndex_Second">
<div class="searchDiv">
<div>
<el-select v-model="searchMsg.plat" class="w120">
<el-option label="全部平台" :value='0'></el-option>
<el-option label="微信" :value='1'></el-option>
<el-option label="支付宝" :value='2'></el-option>
<el-option label="抖音/头条" :value='3'></el-option>
<el-option label="百度" :value='4'></el-option>
</el-select>
</div>
<div>
<el-select v-model="searchMsg.plat2" filterable class="w160">
<el-option label="全部" :value='0'></el-option>
</el-select>
</div>
<div style="margin-right:50px;">
<el-date-picker
class="indataPicker"
type="daterange"
v-model="searchMsg.dateArr"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="7日" name="first"></el-tab-pane>
<el-tab-pane label="30日" name="second"></el-tab-pane>
</el-tabs>
</div>
<div>
<span class="clean">清空筛选</span>
</div>
</div>
<div class="num-info">
<div class="num-info-item">
<div>1094</div>
<div class="info-item-name">
<span>用户数</span>
<el-tooltip class="item" effect="dark" content="统计全平台用户数，不随店铺的更改而更改" placement="bottom">
<i class="el-icon-question"></i>
</el-tooltip>
</div>
</div>
<div class="num-info-item">
<div>103</div>
<div class="info-item-name">商品数</div>
</div>
<div class="num-info-item">
<div>477</div>
<div class="info-item-name">订单数</div>
</div>
<div class="num-info-item">
<div>41</div>
<div class="info-item-name">待发货订单数</div>
</div>
<div class="num-info-item">
<div>0</div>
<div class="info-item-name">维权订单数</div>
</div>
</div>
<div class="zanIndex">
<div class="zanTotalTop">数据概况</div>
<div class="zanIndex_Second">
<div class="searchDiv">
<div>
<el-select v-model="searchMsg.plat" class="w120">
<el-option label="全部平台" :value='0'></el-option>
<el-option label="微信" :value='1'></el-option>
<el-option label="支付宝" :value='2'></el-option>
<el-option label="抖音/头条" :value='3'></el-option>
<el-option label="百度" :value='4'></el-option>
</el-select>
</div>
<div class="zanIndexThrid">
<div class="el-card_header">
<div>
<span>销售情况</span>
</div>
<div class="tab-pay">
<el-tabs v-model="activeSell">
<el-tab-pane label="昨日" name="first"></el-tab-pane>
<el-tab-pane label="7日" name="second"></el-tab-pane>
</el-tabs>
<div>
<el-select v-model="searchMsg.plat2" filterable class="w160">
<el-option label="全部" :value='0'></el-option>
</el-select>
</div>
<div style="margin-right:50px;">
<el-date-picker class="indataPicker" type="daterange" v-model="searchMsg.dateArr" range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</div>
<div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="7日" name="first"></el-tab-pane>
<el-tab-pane label="30日" name="second"></el-tab-pane>
</el-tabs>
</div>
<div>
<span class="clean">清空筛选</span>
</div>
</div>
<div class="num-info">
<div class="num-info-item">
<div>1094</div>
<div class="info-item-name">
<span>用户数</span>
<el-tooltip class="item" effect="dark" content="统计全平台用户数，不随店铺的更改而更改" placement="bottom">
<i class="el-icon-question"></i>
</el-tooltip>
</div>
</div>
<div class="num-info-item">
<div>103</div>
<div class="info-item-name">商品数</div>
</div>
<div class="num-info-item">
<div>477</div>
<div class="info-item-name">订单数</div>
</div>
<div class="num-info-item">
<div>41</div>
<div class="info-item-name">待发货订单数</div>
</div>
<div class="num-info-item">
<div>0</div>
<div class="info-item-name">维权订单数</div>
</div>
</div>
</div>
<div class="zanIndexThrid">
<div class="el-card_header">
<div>
<span>销售情况</span>
</div>
<div class="tab-pay">
<el-tabs v-model="activeSell">
<el-tab-pane label="昨日" name="first"></el-tab-pane>
<el-tab-pane label="7日" name="second"></el-tab-pane>
</el-tabs>
</div>
</div>
<div class="el-card__body">
<div class="pay-info">
<div class="pay-info-item" :class="{'active':isShowOrder}" @click="filterOrder()">
<img src="../assets/img/active.png" alt="" />
<div>24</div>
<div class="info-item-name">支付订单数</div>
</div>
<div class="pay-info-item" :class="{'active':isShowMoney}" @click="filterMoney()">
<img src="../assets/img/active.png" alt="" />
<div>5456.00</div>
<div class="info-item-name">支付金额</div>
</div>
<div class="pay-info-item" :class="{'active':isShowPay}" @click="filterPay()">
<img src="../assets/img/active.png" alt="" />
<div>24</div>
<div class="info-item-name">支付人数</div>
</div>
<div class="pay-info-item" :class="{'active':isShowPayNum}" @click="filterPayNum()">
<img src="../assets/img/active.png" alt="" />
<div>24</div>
<div class="info-item-name">支付件数</div>
</div>
</div>
<div class="echarts-title">
<div class="echarts-title-item" v-if="isShowOrder">
<div class="echarts-title-icon"></div>
<div>支付订单数</div>
</div>
<div class="echarts-title-item" v-if="isShowMoney">
<div class="echarts-title-icon" style="background-color: rgb(255, 163, 96);"></div>
<div>支付金额</div>
</div>
<div class="echarts-title-item" v-if="isShowPay">
<div class="echarts-title-icon" style="background-color: rgb(75, 194, 130);"></div>
<div>支付人数</div>
</div>
<div class="echarts-title-item" v-if="isShowPayNum">
<div class="echarts-title-icon" style="background-color: rgb(255, 133, 133);"></div>
<div>支付件数</div>
</div>
</div>
<div class="myecharts" ref="myecharts" style="height:300px;">
</div>
</div>
</div>
<div class="zantable-area">
<div class="el-card">
<div class="el-zanIndex_btmheader">
<span>商品购买力TOP排行</span>
<el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button>
</div>
<div class="table_Inner">
<el-table :data="tableData" style="width: 100%">
<el-table-column label="排名" width="120">
<template slot-scope="scope">
<div class="rankIng">
<template v-if="scope.$index+1<4">
<img v-if="scope.$index==0" src="../assets/img/first.png" />
<img v-if="scope.$index==1" src="../assets/img/sec.png" />
<img v-if="scope.$index==2" src="../assets/img/third.png" />
</template>
<template v-else>
<span>{{getNumber(scope.$index+1)}}</span>
</template>
</div>
</div>
<div class="el-card__body">
<div class="pay-info">
<div class="pay-info-item" :class="{'active':isShowOrder}" @click="filterOrder()">
<img src="../assets/img/active.png" alt=""/>
<div>24</div>
<div class="info-item-name">支付订单数</div>
</div>
<div class="pay-info-item" :class="{'active':isShowMoney}" @click="filterMoney()">
<img src="../assets/img/active.png" alt=""/>
<div>5456.00</div>
<div class="info-item-name">支付金额</div>
</div>
<div class="pay-info-item" :class="{'active':isShowPay}" @click="filterPay()">
<img src="../assets/img/active.png" alt=""/>
<div>24</div>
<div class="info-item-name">支付人数</div>
</div>
<div class="pay-info-item" :class="{'active':isShowPayNum}" @click="filterPayNum()">
<img src="../assets/img/active.png" alt=""/>
<div>24</div>
<div class="info-item-name">支付件数</div>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="商品" width="400">
<template slot-scope="scope">
<div class="text-omit">
{{scope.row.name}}
</div>
<div class="echarts-title">
<div class="echarts-title-item" v-if="isShowOrder">
<div class="echarts-title-icon"></div>
<div>支付订单数</div>
</div>
<div class="echarts-title-item" v-if="isShowMoney">
<div class="echarts-title-icon" style="background-color: rgb(255, 163, 96);"></div>
<div>支付金额</div>
</div>
<div class="echarts-title-item" v-if="isShowPay">
<div class="echarts-title-icon" style="background-color: rgb(75, 194, 130);"></div>
<div>支付人数</div>
</div>
<div class="echarts-title-item" v-if="isShowPayNum">
<div class="echarts-title-icon" style="background-color: rgb(255, 133, 133);"></div>
<div>支付件数</div>
</div>
</template>
</el-table-column>
<el-table-column prop="sales" label="销售额" sortable width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.sales}}
</div>
<div class="myecharts" ref="myecharts" style="height:300px;">
</template>
</el-table-column>
<el-table-column prop="Numer" sortable label="销量" width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.Numer}}
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="el-card">
<div class="el-zanIndex_btmheader">
<span>用户购买力TOP排行</span>
<el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button>
</div>
<div class="zantable-area">
<div class="el-card">
<div class="el-zanIndex_btmheader">
<span>商品购买力TOP排行</span>
<el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button>
<div class="table_Inner table2">
<el-table :data="tableData" style="width: 100%">
<el-table-column label="排名" width="120">
<template slot-scope="scope">
<div class="rankIng">
<template v-if="scope.$index+1<4">
<img v-if="scope.$index==0" src="../assets/img/first.png" />
<img v-if="scope.$index==1" src="../assets/img/sec.png" />
<img v-if="scope.$index==2" src="../assets/img/third.png" />
</template>
<template v-else>
<span>{{getNumber(scope.$index+1)}}</span>
</template>
</div>
<div class="table_Inner">
<el-table :data="tableData" style="width: 100%">
<el-table-column
label="排名"
width="120">
<template slot-scope="scope">
<div class="rankIng">
<template v-if="scope.$index+1<4">
<img v-if="scope.$index==0" src="../assets/img/first.png"/>
<img v-if="scope.$index==1" src="../assets/img/sec.png"/>
<img v-if="scope.$index==2" src="../assets/img/third.png"/>
</template>
<template v-else>
<span>{{getNumber(scope.$index+1)}}</span>
</template>
</div>
</template>
</el-table-column>
<el-table-column
prop="name"
label="商品"
width="400">
<template slot-scope="scope">
<div class="text-omit">
{{scope.row.name}}
</div>
</template>
</el-table-column>
<el-table-column
prop="sales"
label="销售额"
sortable
width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.sales}}
</div>
</template>
</el-table-column>
<el-table-column
prop="Numer"
sortable
label="销量"
width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.Numer}}
</div>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="name" label="用户" width="400">
<template slot-scope="scope">
<div class="Zheader_image">
<img src="../assets/img/id-card.png" alt="" />
</div>
</div>
<div class="el-card">
<div class="el-zanIndex_btmheader">
<span>用户购买力TOP排行</span>
<el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button>
<span class="nameList">印象日本地接～谢军</span>
</template>
</el-table-column>
<el-table-column prop="sales" label="支付金额" sortable width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.sales}}
</div>
<div class="table_Inner table2">
<el-table :data="tableData" style="width: 100%">
<el-table-column
label="排名"
width="120">
<template slot-scope="scope">
<div class="rankIng">
<template v-if="scope.$index+1<4">
<img v-if="scope.$index==0" src="../assets/img/first.png"/>
<img v-if="scope.$index==1" src="../assets/img/sec.png"/>
<img v-if="scope.$index==2" src="../assets/img/third.png"/>
</template>
<template v-else>
<span>{{getNumber(scope.$index+1)}}</span>
</template>
</div>
</template>
</el-table-column>
<el-table-column
prop="name"
label="用户"
width="400">
<template slot-scope="scope">
<div class="Zheader_image">
<img src="../assets/img/id-card.png" alt=""/>
</div>
<span class="nameList">印象日本地接～谢军</span>
</template>
</el-table-column>
<el-table-column
prop="sales"
label="支付金额"
sortable
width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.sales}}
</div>
</template>
</el-table-column>
<el-table-column
prop="Numer"
sortable
label="支付件数"
width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.Numer}}
</div>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column prop="Numer" sortable label="支付件数" width="150">
<template slot-scope="scope">
<div style="padding-left:10px;">
{{scope.row.Numer}}
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeName:'first',
activeSell:'first',
activeName: 'first',
activeSell: 'first',
//过滤支付订单数
isShowOrder:true,
isShowOrder: true,
//过滤支付金额
isShowMoney:true,
isShowMoney: true,
//过滤支付人数
isShowPay:true,
isShowPay: true,
//过滤支付件数
isShowPayNum:true,
isShowPayNum: true,
searchMsg: {
plat:0,
plat2:0,
dateArr:[]
plat: 0,
plat2: 0,
dateArr: []
},
//商品购买力data
tableData:[{
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23450.00',
Numer:'109',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23440.00',
Numer:'108',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer:'107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23420.00',
Numer:'105',
},{
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer:'107',
},{
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer:'107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer:'107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer:'107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer:'107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer:'107',
tableData: [{
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23450.00',
Numer: '109',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23440.00',
Numer: '108',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23420.00',
Numer: '105',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer: '107',
}, {
name: '1KG新鲜羊肚菌 顺丰省内包邮 48小时内发货 每日新鲜采摘 赞羊严选 【湖北暂不发货】',
sales: '23430.00',
Numer: '107',
}]
};
},
created() {
},
created() {},
methods: {
handleClick(){
},
//数字加0
getNumber(num){
let str='';
if(num<10){
str = '0'+num
}else{
str=num;
handleClick() {},
//数字加0
getNumber(num) {
let str = '';
if (num < 10) {
str = '0' + num
} else {
str = num;
}
return str;
},
//过滤支付订单数
filterOrder() {
this.isShowOrder = !this.isShowOrder;
},
//过滤支付金额
filterMoney() {
this.isShowMoney = !this.isShowMoney
},
//过滤支付人数
filterPay() {
this.isShowPay = !this.isShowPay
},
//过滤支付件数
filterPayNum() {
this.isShowPayNum = !this.isShowPayNum
},
//初始化图标
initMap() {
var myChart = this.$echarts.init(this.$refs.myecharts);
var option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '0',
right: '1%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
axisLine: { //y轴
show: false,
},
axisLabel: {
formatter: function () {
return "";
}
},
type: 'value',
splitLine: { //网格线
lineStyle: {
type: 'dashed' //设置网格线类型 dotted：虚线 solid:实线
},
show: true //隐藏或显示
}
return str;
},
//过滤支付订单数
filterOrder(){
this.isShowOrder=!this.isShowOrder;
},
//过滤支付金额
filterMoney(){
this.isShowMoney=!this.isShowMoney
},
//过滤支付人数
filterPay(){
this.isShowPay=!this.isShowPay
},
//过滤支付件数
filterPayNum(){
this.isShowPayNum=!this.isShowPayNum
},
},
series: [{
name: '支付订单数',
type: 'line',
stack: '总量',
color: '#3399ff',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '支付金额',
type: 'line',
stack: '总量',
color: 'rgb(255, 163, 96)',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '支付人数',
type: 'line',
stack: '总量',
color: 'rgb(75, 194, 130)',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '支付件数',
type: 'line',
stack: '总量',
color: 'rgb(255, 133, 133)',
data: [320, 332, 301, 334, 390, 330, 320]
},
]
};
myChart.setOption(option, true);
},
TestMall() {
this.apipost("/api/Mall/GetHome", {
MiniAppId: "wxacd9f8cc3480d29e"
}, res => {
console.log("TestMall", res.data.data);
if (res.data.resultCode == 1) {
//初始化图标
initMap(){
var myChart = this.$echarts.init(this.$refs.myecharts);
var option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '0',
right: '1%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
            axisLine:{ //y轴
show:false,
},
axisLabel : {
formatter: function(){
return "";
}
},
type: 'value',
splitLine :{ //网格线
lineStyle:{
type:'dashed' //设置网格线类型 dotted：虚线 solid:实线
},
show:true //隐藏或显示
}
},
series: [
{
name: '支付订单数',
type: 'line',
stack: '总量',
color: '#3399ff',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '支付金额',
type: 'line',
stack: '总量',
color: 'rgb(255, 163, 96)',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '支付人数',
type: 'line',
stack: '总量',
color: 'rgb(75, 194, 130)',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '支付件数',
type: 'line',
stack: '总量',
color:'rgb(255, 133, 133)',
data: [320, 332, 301, 334, 390, 330, 320]
},
]
};
myChart.setOption(option, true);
}
} else {
this.Info(res.data.message);
}
})
},
TestCenter() {
this.apipost("/api/Mall/GetUserCenter", {
MiniAppId: "wxacd9f8cc3480d29e"
}, res => {
console.log("TestCenter", res.data.data);
if (res.data.resultCode == 1) {
} else {
this.Info(res.data.message);
}
})
},
},
mounted() {
this.initMap();
this.TestMall();
this.initMap();
}
};
</script>
\ No newline at end of file
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment