pengda
1 month ago
7 changed files with 3898 additions and 7394 deletions
File diff suppressed because it is too large
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,272 @@ |
|||||
|
<template> |
||||
|
<aside class="sidebar"> |
||||
|
<ul> |
||||
|
<li v-for="(item, index) in menuList" :key="item.path"> |
||||
|
<div :class="[$route.path == item.path ? 'active' : '', 'flex', $route.path == item.path ? curIndex = index : '']" |
||||
|
@click="gotoPath(item.path,index)"> |
||||
|
<img v-if="$route.path == item.path" :src="item.imgActive" alt=""> |
||||
|
<img v-else :src="item.img" alt=""> |
||||
|
{{ item.name }} |
||||
|
</div> |
||||
|
<p :class="['flex', activeFloor == item1.desc ? 'curActive' : '']" |
||||
|
v-for="(item1) in item.list" @click="setActiveCur(item1.desc,item)" :key="item1.name">{{ item1.name }}</p> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</aside> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
// :class="[$route.path != item.path ? 'not-point' : '', 'flex', activeFloor == item1.desc ? 'curActive' : '']" |
||||
|
import { mapState } from 'vuex'; |
||||
|
import store from '../../store'; |
||||
|
export default { |
||||
|
name: 'Sidebar', |
||||
|
props: { |
||||
|
// menuList: { |
||||
|
// type: Array, |
||||
|
// required: true |
||||
|
// }, |
||||
|
// activeFloor:{ |
||||
|
// type:String |
||||
|
// }, |
||||
|
// curIndex:{ |
||||
|
// type:Number |
||||
|
// } |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeFloor: null, |
||||
|
curIndex: 0, |
||||
|
scrollLock: false, |
||||
|
menuList: [ |
||||
|
{ |
||||
|
name: '总利润', |
||||
|
img: require('@/assets/super/ranking-menu.svg'), |
||||
|
imgActive: require('@/assets/super/ranking-menu.svg'), |
||||
|
list: [ |
||||
|
{ |
||||
|
name: '年排行', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage1' |
||||
|
}, |
||||
|
{ |
||||
|
name: '月排行', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage2' |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '产品', |
||||
|
img: require('@/assets/super/ranking-menu.svg'), |
||||
|
imgActive: require('@/assets/super/ranking-menu.svg'), |
||||
|
list: [ |
||||
|
{ |
||||
|
name: '毛利润排行', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage4' |
||||
|
}, |
||||
|
{ |
||||
|
name: '订单数排行', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage5' |
||||
|
}, |
||||
|
{ |
||||
|
name: '退单数排行', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage6' |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '代理商', |
||||
|
img: require('@/assets/super/ranking-menu.svg'), |
||||
|
imgActive: require('@/assets/super/ranking-menu.svg'), |
||||
|
list: [ |
||||
|
{ |
||||
|
name: '毛利润排行', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage9' |
||||
|
}, |
||||
|
{ |
||||
|
name: '充值排行', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage10' |
||||
|
}, |
||||
|
{ |
||||
|
name: '新加盟', |
||||
|
path: '/super/ranking/yearProfit', |
||||
|
desc: 'siteMessage11' |
||||
|
}, |
||||
|
] |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// console.log(this.curIndex,'this.curIndex'); |
||||
|
this.activeFloor = this.menuList[this.curIndex]['list'][0]['desc']; |
||||
|
this.calculateFloorOffsets(); |
||||
|
this.$nextTick(() => { |
||||
|
// console.log(this.$parent.$refs.scrollContainer, 'this.$refs.scrollContainer--'); |
||||
|
}) |
||||
|
this.$parent.$refs.scrollContainer.addEventListener('scroll', this.handleScroll); |
||||
|
}, |
||||
|
created() { |
||||
|
// console.log(this.$parent.$refs.scrollContainer,'this.$refs.sc--rollContainer--'); |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
this.$parent.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll); |
||||
|
}, |
||||
|
methods: { |
||||
|
calculateFloorOffsets() { |
||||
|
this.menuList.forEach(item => { |
||||
|
item.list.forEach(every => { |
||||
|
const el = document.getElementById(every.desc); |
||||
|
if (el) { |
||||
|
every.offsetTop = el.offsetTop; |
||||
|
} |
||||
|
}) |
||||
|
}); |
||||
|
}, |
||||
|
handleScroll() { |
||||
|
if (this.scrollLock) return |
||||
|
const scrollContainer = this.$parent.$refs.scrollContainer; |
||||
|
const scrollHeight = scrollContainer.scrollTop; |
||||
|
let activeFloor = this.menuList[this.curIndex]['list'][0]['desc']; |
||||
|
this.menuList[this.curIndex]['list'].forEach(item => { |
||||
|
if (scrollHeight + 72 >= item.offsetTop) { |
||||
|
activeFloor = item.desc; // 更新当前激活的楼层ID |
||||
|
} else { |
||||
|
return false; // 一旦找到第一个小于当前滚动位置的楼层，停止循环 |
||||
|
} |
||||
|
}); |
||||
|
this.activeFloor = activeFloor; // 更新数据以触发视图更新 |
||||
|
}, |
||||
|
setActiveCur(dom,item) { |
||||
|
if(this.$route.path != item.path){ |
||||
|
this.$router.push(item.path) |
||||
|
store.commit('SET_PAGETITLE', item.name); |
||||
|
} |
||||
|
setTimeout(()=>{ |
||||
|
this.activeFloor = dom; |
||||
|
this.setHighActive(dom) |
||||
|
},500) |
||||
|
}, |
||||
|
gotoPath(path,index) { |
||||
|
if(this.$route.path != path){ |
||||
|
this.curIndex = index |
||||
|
this.scrollLock = false; |
||||
|
this.handleScroll() |
||||
|
// 重置页面滚动高度 |
||||
|
const dom = document.getElementById('main-content') |
||||
|
dom.scrollTop = 0 |
||||
|
this.$router.push(path) |
||||
|
} |
||||
|
}, |
||||
|
activeArea(type) { |
||||
|
console.log(type); |
||||
|
}, |
||||
|
setHighActive(dom) { |
||||
|
this.scrollLock = true; |
||||
|
const ele = document.getElementById(dom) |
||||
|
if(!ele)return |
||||
|
ele.classList.add('ceshi') |
||||
|
ele.scrollIntoView({ behavior: 'smooth', block: 'start' }) |
||||
|
setTimeout(() => { |
||||
|
ele.classList.remove('ceshi') |
||||
|
}, 1000) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.sidebar { |
||||
|
width: 158px; |
||||
|
padding: 21px; |
||||
|
box-sizing: border-box; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11); |
||||
|
} |
||||
|
|
||||
|
.ceshi { |
||||
|
// animation: fadeInOut 2s infinite; |
||||
|
} |
||||
|
|
||||
|
ul { |
||||
|
list-style: none; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.not-point { |
||||
|
pointer-events: none; |
||||
|
/* 阻止鼠标事件 */ |
||||
|
opacity: 0.5; |
||||
|
/* 可选，降低透明度以视觉上表示不可用 */ |
||||
|
cursor: not-allowed; |
||||
|
/* 改变鼠标光标样式，表示不可用 */ |
||||
|
} |
||||
|
|
||||
|
li { |
||||
|
margin-bottom: 10px; |
||||
|
|
||||
|
div { |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #1E2226; |
||||
|
margin: 11px 0; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
img { |
||||
|
margin-right: 6px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
margin: 9px 0; |
||||
|
letter-spacing: 0.08em; |
||||
|
line-height: 18px; |
||||
|
color: #8A9099; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
&:hover { |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.curActive { |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* { |
||||
|
display: block; |
||||
|
padding: 8px 12px; |
||||
|
text-decoration: none; |
||||
|
color: #333; |
||||
|
border-radius: 4px; |
||||
|
} */ |
||||
|
/* |
||||
|
:hover { |
||||
|
background: #e0e0e0; |
||||
|
} */ |
||||
|
|
||||
|
.active { |
||||
|
font-weight: bold; |
||||
|
letter-spacing: 0.08em; |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
|
||||
|
.item-active { |
||||
|
color: #006AFF; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
.exact-active { |
||||
|
background: #1976d2; |
||||
|
color: white; |
||||
|
} */ |
||||
|
</style> |
||||
@ -0,0 +1,54 @@ |
|||||
|
<template> |
||||
|
<div class="siteSetting-wrap"> |
||||
|
<RankingLeftMenu /> |
||||
|
<!--:menuList="menuList" :activeFloor="activeFloor" :curIndex="curIndex" --> |
||||
|
<!-- 主内容区域 --> |
||||
|
<main class="main-content" ref="scrollContainer"> |
||||
|
<router-view></router-view> |
||||
|
<Footer></Footer> |
||||
|
</main> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import Footer from '@/components/Footer.vue'; |
||||
|
import RankingLeftMenu from '@/components/super/RankingLeftMenu.vue' |
||||
|
export default { |
||||
|
// 站点设置 |
||||
|
name: '', |
||||
|
props: [''], |
||||
|
components: { |
||||
|
Footer, |
||||
|
RankingLeftMenu, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
path:'' |
||||
|
} |
||||
|
}, |
||||
|
mounted(){ |
||||
|
this.path =this.$route.path; |
||||
|
console.log(this.$route.path,'090-9090'); |
||||
|
// this.$refs.scrollContainer.scrollTo(0) |
||||
|
}, |
||||
|
methods: { |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.siteSetting-wrap { |
||||
|
display: flex; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
// .sidebar { |
||||
|
// width: 250px; |
||||
|
// background: #f5f5f5; |
||||
|
// padding: 20px; |
||||
|
// } |
||||
|
|
||||
|
.main-content { |
||||
|
flex: 1; |
||||
|
padding: 12px; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,166 @@ |
|||||
|
<template> |
||||
|
<div class="demo-wrap min-flex-right"> |
||||
|
<div class="flex-between"> |
||||
|
<h2>总利润 - 年排行</h2> |
||||
|
<el-form :model="form"> |
||||
|
<GuipSelect v-model="form.payword" :defaultValue="form.payword" prop="payword" width="100%" |
||||
|
:options="options_payword" /> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class=" flex-common" id=""> |
||||
|
<el-form> |
||||
|
<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" |
||||
|
style="width: 100%" :key="random()"> |
||||
|
<el-table-column type="index" label="排序" width="100"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.sort }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- 其他列 --> |
||||
|
<el-table-column prop="name" label="年份"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ scope.row.value_1 }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="count" label="总利润/元" sortable> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
{{ scope.row.value_2 }} |
||||
|
{{scope.row.value }}%上年持平 |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column prop="count" label="代理商排行"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div class="flex"> |
||||
|
{{ scope.row.value_1 }} |
||||
|
<span class="flex"><img class="edit_icon" src="../../../assets/site/form_link.svg" alt=""></span> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' |
||||
|
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" |
||||
|
:total="tableData.length"> |
||||
|
</el-pagination> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import GuipSelect from '@/components/GuipSelect.vue' |
||||
|
export default { |
||||
|
// 站点设置 |
||||
|
name: '', |
||||
|
props: [''], |
||||
|
components: { |
||||
|
GuipSelect, |
||||
|
// GuipSelectFilter, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
phoneService: [ |
||||
|
{ |
||||
|
text: '不限', |
||||
|
value: '0' |
||||
|
}, |
||||
|
{ |
||||
|
text: 'H5', |
||||
|
value: '1' |
||||
|
}, |
||||
|
{ |
||||
|
text: '小程序', |
||||
|
value: '2' |
||||
|
}, |
||||
|
{ |
||||
|
text: 'H5以及小程序', |
||||
|
value: '3' |
||||
|
}, |
||||
|
], |
||||
|
currentPage: 1, //当前页 |
||||
|
pageSize: 20, //每页的容量 |
||||
|
total: 0, //列表总数 |
||||
|
options_payword: [ |
||||
|
{ |
||||
|
label: '按篇', value: '0' |
||||
|
}, |
||||
|
{ |
||||
|
label: '按字符', value: '1' |
||||
|
}, |
||||
|
], |
||||
|
options: [ |
||||
|
{ label: '选项1', value: '1' }, |
||||
|
{ label: '选项2', value: '2' }, |
||||
|
{ label: '选项3', value: '3' }, |
||||
|
// 更多选项... |
||||
|
], |
||||
|
filteredOptions: this.options, |
||||
|
|
||||
|
phoneServicelist: |
||||
|
{ |
||||
|
0: '不限', |
||||
|
1: ' H5', |
||||
|
2: '小程序', |
||||
|
3: '无手机服务' |
||||
|
|
||||
|
}, |
||||
|
tableData: [], |
||||
|
form: { |
||||
|
payword: '0', |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// this.$refs.scrollContainer.scrollTo(0) |
||||
|
this.getRankingData(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getRankingData(){ |
||||
|
const that = this |
||||
|
this.$http('POST', this.reqUri + '/super/ajax_get_rank_detail',{ |
||||
|
rank_type:1, |
||||
|
}).then(response => { |
||||
|
that.tableData = response.data.list |
||||
|
console.log(response.data.list, '0001') |
||||
|
}) |
||||
|
.catch(error => { |
||||
|
console.error(error, '-----') |
||||
|
}) |
||||
|
}, |
||||
|
// 列筛选 |
||||
|
filterHandler(value, row, column) { |
||||
|
// console.log(value, row, column,'======'); |
||||
|
const property = column['property']; |
||||
|
if (value == 0) { |
||||
|
return row[property] != value |
||||
|
} |
||||
|
return row[property] === value; |
||||
|
}, |
||||
|
// 自定义搜索筛选 |
||||
|
customFilter(keyword, options) { |
||||
|
if (!keyword) return options |
||||
|
return options.filter(item => { |
||||
|
// 自定义筛选逻辑 |
||||
|
return item.label.includes(keyword) || item.value.includes(keyword) |
||||
|
}) |
||||
|
}, |
||||
|
handleSizeChange(val) { |
||||
|
this.pageSize = val |
||||
|
}, |
||||
|
handleCurrentChange(val) { |
||||
|
this.currentPage = val |
||||
|
}, |
||||
|
random() { |
||||
|
var randomNumber = Math.random(); |
||||
|
return randomNumber |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
.demo-wrap { |
||||
|
width: 100%; |
||||
|
letter-spacing: 0.08em; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue