Skip to content

E
ElectricitySheep
Commit 9b1240ae authored by zhengke's avatar zhengke
Browse files
Options

修改增加页面

parent 7bb153c0
Hide whitespace changes
Inline Side-by-side
Showing with 784 additions and 8 deletions
src/assets/css/zkcss.css
View file @ 9b1240ae
......@@ -10,9 +10,16 @@
font-size: 14px;
margin-top: 15px;
}
input, textarea, select{
outline: none !important;
box-shadow: none;
}
.w120{
width:120px;
}
.w160{
width:160px;
}
\ No newline at end of file
}
.w400{
width:400px;
}
\ No newline at end of file
src/components/StoreDesign/navigationIcon.vue 0 → 100644
View file @ 9b1240ae
<template>
<div class="navigation">
<template v-if="isShowAdd">
<div class="head-title">
导航图标列表
<el-button @click="isShowAdd=false" style="float:right;margin-top: -5px;" size="small" type="primary">添加导航图标</el-button>
</div>
<div class="content">
<div>
<div class="searchInput">
<el-input style="display:inline-block;width:225px;height:30px"
placeholder="请输入搜索内容"
v-model="value"
size="small"
clearable>
</el-input>
<span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
</div>
</div>
<el-table
:data="tableData"
v-loading="loading"
border
style="width: 100%;margin:20px 0">
<el-table-column
prop="ID"
label="ID"
width="100">
</el-table-column>
<el-table-column
prop="address"
width="120"
label="名称">
</el-table-column>
<el-table-column
prop="name"
label="导航图标"
width="80">
</el-table-column>
<el-table-column
prop="name"
label="导航链接">
</el-table-column>
<el-table-column
prop="name"
label="排序"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="是否显示"
width="120">
</el-table-column>
<el-table-column
prop="address"
width="220"
label="操作">
</el-table-column>
</el-table>
<el-pagination style="text-align:right"
background
@current-change="handleCurrentChange"
:page-size="msg.pageSize"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
</template>
<template v-else>
<div class="head-title">
<span @click="isShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">导航图标列表</span><span style="margin:0 9px;color:#C0C4CC">/</span><span>导航图标编辑</span>
</div>
<div class="content">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="80px" style="padding:0 20px;">
<el-form-item label="名称" prop="name">
<el-input v-model="addMsg.name" class="w400" size="small" placeholder="请输入名称" maxlength="20" />
</el-form-item>
<el-form-item label="排序" prop="Sort">
<el-input type="text" v-model="addMsg.Sort" size="small" class="w400" placeholder="请输入排序" maxlength="20" />
</el-form-item>
<el-form-item label="导航图标" prop="img">
<div>
<el-tooltip class="item" effect="dark" content="建议尺寸:88*88" placement="top-start">
<el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
:show-file-list="false" :http-request="UploadImage">
<el-button size="small">选择文件</el-button>
</el-upload>
</el-tooltip>
</div>
<div class="navImg">
<img v-if="addMsg.img" :src="addMsg.img" alt="" />
<img v-else src="../../assets/img/default.png" alt=""/>
</div>
</el-form-item>
<el-form-item label="导航链接" prop="link">
<el-input type="password" v-model="addMsg.link" class="w400" size="small" maxlength="100" />
<el-button plain size="small">选择链接</el-button>
</el-form-item>
<el-form-item label="是否显示">
<el-switch v-model="addMsg.isShow" ></el-switch>
</el-form-item>
</el-form>
</div>
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存</el-button>
</template>
</div>
</template>
<script>
export default {
data() {
let validataImg = (rule, value, callback) => {
if (this.addMsg.img == '') {
return callback(new Error('请选择导航图标'));
} else {
callback();
}
}
return {
loading:false,
dialogVisible:false,
value:'',
options:[],
tableData:[
{ID:'111'}
],
msg:{
pageIndex:1,
pageSize:15,
},
total:0,
isShowAdd:true,
addMsg:{
name:'',
Sort:100,
img:'',
link:'',
isShow:true
},
rules: {
name: [{
required: true,
message: "请输入导航名称",
trigger: "blur"
}],
Sort: [{
required: true,
message: "请输入导航排序",
trigger: "blur"
}],
img:[{
validator: validataImg,
trigger: "blur",
required: true
}],
link: [{
required: true,
message: "请选择导航链接",
trigger: "blur"
}]
},
};
},
created() {
},
methods: {
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
getList(){
},
//上传图片
UploadImage(file) {
this.UploadFileToTencent(this.FileType().UserImg, file.file, res => {
if (res.resultCode == 1) {
this.addMsg.img = res.FileUrl;
}
})
},
submitform(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.saveMsg();
} else {
return false;
}
});
},
//保存
saveMsg(){
}
},
mounted() {
}
};
</script>
<style>
.navImg{
width:80px;
height:80px;
}
.navImg img{
width:100%;
height:100%;
}
.navigation .blue{
color:#409EFF;
}
.navigation .content .searchInput{
border: 1px solid #DCDFE6;
border-radius: 4px;
}
.navigation .content .searchInput .el-input__inner{
border:none;outline:none;
height: 30px;
line-height: 30px;
}
.navigation .content .searchInput{
line-height: normal;
display: inline-table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
width:250px;
margin-right: 20px;
}
.navigation .content{
background: #fff;
margin-top:10px;
padding: 20px;
box-sizing: border-box;
}
</style>
src/components/mall.vue
View file @ 9b1240ae
......@@ -234,6 +234,7 @@
flex-wrap: wrap;
align-items: center;
width: 300px;
float:right;
}
.marinRightList ul {
......@@ -284,7 +285,7 @@
<div class="is-show-menu-2" v-if="isShowOne" @click="showTwo=true,isShowOne=false">>></div>
<div class="leftMenu1">
<div class="aside-logo">
<div class="asideInner">{{currentUser.MallName}}</div>
<div class="asideInner" @click="CommonJump('zanIndex'),firstCked=0,showTwo=false">{{currentUser.MallName}}</div>
</div>
<ul>
<li class="menu-item" @mouseover="mouseOver(item)" @mouseout="mouseOutMenu()" v-for="(item,index) in MenuList"
......@@ -411,7 +412,7 @@
mouseOutMenu() {
this.MenuList.forEach(item => {
if (item.MenuId == this.firstCked) {
//this.secondItem = item;
this.secondItem = item;
}
})
},
......
src/components/zanIndex.vue
View file @ 9b1240ae
......@@ -15,6 +15,10 @@
display:flex;
flex-direction: row;
padding:15px;
overflow: hidden;
}
.searchDiv .el-date-editor .el-range-separator{
width:6%;
}
.zanIndex .el-input__inner{
height:32px;
......@@ -27,11 +31,11 @@
.searchDiv>div{
margin-right:5px;
}
.zanIndex .el-tabs__nav-scroll{
.zanIndex .zanIndex_Second .el-tabs__nav-scroll{
width:120px;
margin-left:30px;
}
.zanIndex .el-tabs__nav-wrap::after {
.zanIndex .zanIndex_Second .el-tabs__nav-wrap::after {
content: "";
position: absolute;
left: 0;
......@@ -78,6 +82,172 @@
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-card__header{
padding: 14px 20px;
}
.el-card__header 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">
......@@ -101,8 +271,8 @@
<div style="margin-right:50px;">
<el-date-picker
class="indataPicker"
v-model="dateArr"
type="daterange"
v-model="searchMsg.dateArr"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
......@@ -123,10 +293,207 @@
<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-card__header">
<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>
</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>
</div>
</div>
<div class="el-card">
<div class="el-card__header">
<span>用户购买力TOP排行</span>
<el-button type="primary" class="ZexportBtn" size="mini">导出TOP100</el-button>
</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>
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -134,11 +501,62 @@
data() {
return {
activeName:'first',
activeSell:'first',
//过滤支付订单数
isShowOrder:true,
//过滤支付金额
isShowMoney:true,
//过滤支付人数
isShowPay:true,
//过滤支付件数
isShowPayNum:true,
searchMsg: {
plat:0,
plat2:0,
dateArr:''
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',
}]
};
},
created() {
......@@ -147,10 +565,108 @@
methods: {
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 //隐藏或显示
}
},
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);
}
},
mounted() {
this.initMap();
}
};
......
src/main.js
View file @ 9b1240ae
......@@ -7,6 +7,8 @@ import router from './router'
import ajaxPlug from './plug/index'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import echarts from 'echarts'
Vue.use(ElementUI);
import commonUtils from './assets/utils/commonUtils'
......@@ -14,6 +16,8 @@ Vue.commonUtils = Vue.prototype.$commonUtils=commonUtils
Vue.config.productionTip = false
Vue.http = Vue.prototype.$http = axios
Vue.prototype.$echarts = echarts
Vue.use(ajaxPlug)
/* eslint-disable no-new */
new Vue({
......
src/router/index.js
View file @ 9b1240ae
......@@ -100,6 +100,12 @@ export default new Router({
name: 'basicSetUp',
component: resolve => require(['@/components/setup/basicSetUp'], resolve),
},
//店铺管理 导航图标
{
path: '/navigationIcon',
name: 'navigationIcon',
component: resolve => require(['@/components/StoreDesign/navigationIcon'], resolve),
}
]
},
......
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