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