zhangqi
/
acupuncture_admin
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

组件更新

zq-ui
pengda 8 months ago
parent
bea80334ee
commit
0635e58a12
4 changed files with 530 additions and 396 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/assets/super/select-active.svg
  2. 197
      src/views/super/Ranking/RankBatchList.vue
  3. 147
      src/views/super/Ranking/RankDetail.vue
  4. 9
      src/views/super/Ranking/Ranking.vue

1
src/assets/super/select-active.svg
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><g></g><g><path d="M13.5732,5.315390953125Q13.6985,5.197082953125,13.7668,5.0388329531250005Q13.835,4.880582953125,13.835,4.708251953125Q13.835,4.626011653125,13.819,4.545351953125Q13.8029,4.464691953125,13.7714,4.388710953125Q13.74,4.3127309531249995,13.6943,4.244350953125Q13.6486,4.175970953125,13.5904,4.117817953125Q13.5323,4.059664953125,13.4639,4.013974953125Q13.3955,3.968284953125,13.3195,3.936812953125Q13.2436,3.905340953125,13.1629,3.889295953125Q13.0822,3.873251953125,13,3.873251953125Q12.90746,3.873251953125,12.81716,3.8935169531250002Q12.72686,3.913781953125,12.64319,3.953328953125Q12.55951,3.992875953125,12.48654,4.049783953125Q12.41356,4.106692953125,12.35481,4.178200953125L7.06803,9.842611953125001L3.542182,7.198221953125Q3.428807,7.101421953125,3.288942,7.049841953125Q3.149076,6.998251953125,3,6.998251953125Q2.9177597,6.998251953125,2.8371,7.014291953124999Q2.75644,7.030341953125,2.680459,7.061811953125Q2.604479,7.093281953125,2.536099,7.138971953125Q2.4677189999999998,7.184661953125,2.409566,7.242821953125Q2.351413,7.300971953125,2.305723,7.369351953124999Q2.260033,7.437731953125001,2.228561,7.513711953125Q2.197089,7.589691953125,2.181044,7.6703519531249995Q2.165,7.7510119531249995,2.165,7.833251953125Q2.165,7.937161953125,2.190469,8.037911953125Q2.215938,8.138651953125,2.265322,8.230081953125Q2.314706,8.321511953125,2.384993,8.398041953125Q2.45528,8.474581953125,2.542182,8.531551953125L6.66667,11.624921953125Q6.72781,11.670781953125001,6.796279999999999,11.704751953125001Q6.864739999999999,11.738721953125001,6.93825,11.759671953125Q7.01175,11.780621953125,7.08784,11.787851953125Q7.16393,11.795081953124999,7.24006,11.788351953125Q7.31619,11.781621953125,7.38983,11.761151953125001Q7.46347,11.740681953125,7.53216,11.707161953125Q7.60084,11.673641953125,7.66229,11.628181953125Q7.72373,11.582721953124999,7.77588,11.526851953125L13.5732,5.315390953125Z" fill-rule="evenodd" fill="#006AFF" fill-opacity="1"/></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

197
src/views/super/Ranking/RankBatchList.vue
View File

@ -2,58 +2,101 @@
<div class="demo-wrap min-flex-right"> <div class="demo-wrap min-flex-right">
<div class="flex-between"> <div class="flex-between">
<h2>{{ pageTitle }}</h2> <h2>{{ pageTitle }}</h2>
<CustomDropdown ref="dropdownRef" :placeholder="'（'+viewDesc[this.view]+')'+text" width="280px"> <CustomDropdown ref="dropdownRef"
<DateSelect slot="normal" :view="view" v-model="selectedDate" @update-count="handleUpdateView" @change="handleDateChange" /> :placeholder="'（'+viewDesc[this.view]+')'+text"
width="280px">
<DateSelect slot="normal"
:view="view"
v-model="selectedDate"
@update-count="handleUpdateView"
@change="handleDateChange"/>
</CustomDropdown> </CustomDropdown>
</div> </div>
<div class=" flex-common" id=""> <div class=" flex-common" id="">
<el-form> <el-form>
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> <el-table :data="tableData"
style="width: 100%"
@sort-change="handleSortChange"
@cell-mouse-enter="handleRowHover">
<el-table-column prop="sort" label="排序" width="100"></el-table-column> <el-table-column prop="sort" label="排序" width="100"></el-table-column>
<el-table-column v-if="(dataRank == 1 || dataRank == 2) && (dataType == 'ver_type' || dataType == 'check_type')" prop="name" :key="selectedType" :label="type_select[selectedType]"> <el-table-column
v-if="(dataRank == 1 || dataRank == 2) && (dataType == 'ver_type' || dataType == 'check_type')"
prop="name"
:key="selectedType"
:label="type_select[selectedType]">
<template slot="header"> <template slot="header">
<el-select class="custom-select" v-model="selectedType" @change="changeRankType"> <el-select class="custom-select" v-model="selectedType" @change="changeRankType">
<el-option v-for="(item,type) in type_select" :key="type" :label="item" :value="type"></el-option> <el-option v-for="(item,type) in type_select"
:key="type"
:label="item"
:value="type">
</el-option>
</el-select> </el-select>
</template> </template>
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.name }} {{ scope.row.name }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column v-else prop="name" :label="type_desc[dataType]" width="150"></el-table-column> <el-table-column v-else prop="name" :label="type_desc[dataType]" width="150"></el-table-column>
<el-table-column v-for="(field, index) in valueFields" :key="field" :label="labels[index]" :prop="String(index + 1)" sortable="custom"> <el-table-column v-for="(field, index) in valueFields"
:key="field"
:label="labels[index]"
:prop="String(index + 1)"
sortable="custom">
<template v-if="index == 3 && dataRank == 1 && type != 'agent'" v-slot="{ row, $index }"> <template v-if="index == 3 && dataRank == 1 && type != 'agent'" v-slot="{ row, $index }">
<el-popover v-model="row.id_popover" placement="top" trigger="manual" :ref="`popover-${$index}`" @show="popshow"> <el-popover v-model="row.id_popover"
placement="top"
trigger="manual"
:ref="`popover-${$index}`"
@show="popshow">
<div class="pop-wrap"> <div class="pop-wrap">
<div class="flex-between flex pop-top"> <div class="flex-between flex pop-top">
<h3>{{ text }} {{ row.name }} <span @click="goLookMoreData(row.id)">查看更多</span></h3> <h3>
<span class="flex point" @click="closePop(row,'id')">关闭 <img src="@/assets/register/close.svg" alt=""></span> {{ text }} {{ row.name }}
<span @click="goLookMoreData(row.id)">查看更多</span>
</h3>
<span class="flex point" @click="closePop(row,'id')">
关闭<img src="@/assets/register/close.svg">
</span>
</div> </div>
<el-table :data="tableData1" style="width: 100%"> <el-table :data="tableData1" style="width: 100%">
<el-table-column prop="value_1" width="208" label="日期"></el-table-column> <el-table-column prop="value_1" width="208" label="日期"></el-table-column>
<el-table-column width="348" :label="rank_type_desc[dataRank]"> <el-table-column width="348" :label="rank_type_desc[dataRank]">
<template slot-scope="scope"> <template slot-scope="scope">
<div class="flex"> <div class="flex">
{{ scope.row.value_2 }} {{ scope.row.value_2 }}
<template v-if="Object.keys(growth_list1).length > 0"> <template v-if="Object.keys(growth_list1).length > 0">
<span class="flex growth-text" v-if="growth_list1[scope.row.id]"> <span v-if="growth_list1[scope.row.id]"
class="flex growth-text">
<span v-if="growth_list1[scope.row.id].value>0"> <span v-if="growth_list1[scope.row.id].value>0">
<span class="growth-up"> <span class="growth-up">
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="">{{growth_list1[scope.row.id].value}}% <img class="edit_icon"
src="@/assets/super/growth-up.svg">
{{ growth_list1[scope.row.id].value }}%
</span>同比上年 </span>同比上年
</span> </span>
<span v-if="growth_list1[scope.row.id].value<0"> <span v-if="growth_list1[scope.row.id].value<0">
<span class="growth-down"> <span class="growth-down">
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="">{{growth_list1[scope.row.id].value}}% <img class="edit_icon"
src="@/assets/super/growth-down.svg">
{{ growth_list1[scope.row.id].value }}%
</span>同比上年 </span>同比上年
</span> </span>
<span v-if="growth_list1[scope.row.id].value==0"> <span v-if="growth_list1[scope.row.id].value==0">
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="">同比上年持平 <img class="edit_icon"
src="@/assets/super/growth-flat.svg">同比上年持平
</span> </span>
</span> </span>
<span class="flex growth-text" v-else>上年无数据</span> <span v-else class="flex growth-text">上年无数据</span>
</template> </template>
</div> </div>
</template> </template>
@ -67,23 +110,25 @@
<template v-if="growth_list[row.id] && growth_list[row.id][field]"> <template v-if="growth_list[row.id] && growth_list[row.id][field]">
<span v-if="growth_list[row.id][field].value > 0" class="growth-text"> <span v-if="growth_list[row.id][field].value > 0" class="growth-text">
<span class="growth-up"> <span class="growth-up">
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="" /> <img class="edit_icon" src="@/assets/super/growth-up.svg"/>
{{ growth_list[row.id][field].value }}% {{ growth_list[row.id][field].value }}%
</span>同比上年 </span>同比上年
</span> </span>
<span v-else-if="growth_list[row.id][field].value < 0" class="growth-text"> <span v-else-if="growth_list[row.id][field].value < 0" class="growth-text">
<span class="growth-down"> <span class="growth-down">
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="" /> <img class="edit_icon" src="@/assets/super/growth-down.svg"/>
{{ growth_list[row.id][field].value }}% {{ growth_list[row.id][field].value }}%
</span>同比上年 </span>同比上年
</span> </span>
<span v-else class="growth-text"> <span v-else class="growth-text">
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="" />同比上年持平 <img class="edit_icon" src="@/assets/super/growth-flat.svg"/>同比上年持平
</span> </span>
</template> </template>
<span v-else class="growth-text">上年无数据</span> <span v-else class="growth-text">上年无数据</span>
</template> </template>
<img @click="handleClick(row, $index, 'id')" v-if="show_detail_index == row.sort" class="detail_icon" src="@/assets/super/list-detail.svg" alt=""> <img v-if="show_detail_index == row.sort"
@click="handleClick(row, $index, 'id')"
class="detail_icon" src="@/assets/super/list-detail.svg">
</div> </div>
</el-popover> </el-popover>
</template> </template>
@ -94,21 +139,19 @@
<template v-if="growth_list[scope.row.id] && growth_list[scope.row.id][field]"> <template v-if="growth_list[scope.row.id] && growth_list[scope.row.id][field]">
<span v-if="growth_list[scope.row.id][field].value > 0" class="growth-text"> <span v-if="growth_list[scope.row.id][field].value > 0" class="growth-text">
<span class="growth-up"> <span class="growth-up">
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="" /> <img class="edit_icon" src="@/assets/super/growth-up.svg"/>
{{ growth_list[scope.row.id][field].value }}% {{ growth_list[scope.row.id][field].value }}%
</span>同比上年
</span> </span>
同比上年 <span v-else-if="growth_list[scope.row.id][field].value < 0"
</span> class="growth-text">
<span v-else-if="growth_list[scope.row.id][field].value < 0" class="growth-text">
<span class="growth-down"> <span class="growth-down">
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="" /> <img class="edit_icon" src="@/assets/super/growth-down.svg"/>
{{ growth_list[scope.row.id][field].value }}% {{ growth_list[scope.row.id][field].value }}%
</span> </span>同比上年
同比上年
</span> </span>
<span v-else class="growth-text"> <span v-else class="growth-text">
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="" /> <img class="edit_icon" src="@/assets/super/growth-flat.svg"/>同比上年持平
同比上年持平
</span> </span>
</template> </template>
<span v-else class="growth-text">上年无数据</span> <span v-else class="growth-text">上年无数据</span>
@ -117,8 +160,12 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange' <el-pagination background
:current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" @size-change='handleSizeChange'
@current-change='handleCurrentChange'
:current-page="currentPage"
:page-size=pageSize
layout="prev, pager, next,jumper"
:total="total"> :total="total">
</el-pagination> </el-pagination>
</el-form> </el-form>
@ -126,7 +173,6 @@
</div> </div>
</template> </template>
<script> <script>
// import GuipForm from '@/components/GuipForm.vue'
import DateSelect from '@/components/super/DateSelect.vue'; import DateSelect from '@/components/super/DateSelect.vue';
import CustomDropdown from '@/components/CustomDropdown.vue'; import CustomDropdown from '@/components/CustomDropdown.vue';
@ -195,8 +241,7 @@ export default {
mounted() { mounted() {
this.init() this.init()
}, },
computed: { computed: {},
},
watch: { watch: {
'$route'() { '$route'() {
this.init() this.init()
@ -204,12 +249,11 @@ export default {
}, },
methods: { methods: {
init() { init() {
this.text = this.getNowDate()//初始赋值 this.text = this.getNowDate()
this.dataType = this.type this.dataType = this.type
this.dataRank = this.rank_type this.dataRank = this.rank_type
this.getRankingData(); // 每次路由变化都重新获取数据 this.getRankingData();
}, },
handleUpdateView(newView) { handleUpdateView(newView) {
this.view = newView; this.view = newView;
@ -320,8 +364,12 @@ export default {
this.setLabelText(); this.setLabelText();
if (this.dataType == 'agent') { if (this.dataType == 'agent') {
if (this.dataRank == 4) {
this.getAgentRecharge()
} else {
this.getAgentRanking() this.getAgentRanking()
} }
}
if (this.dataType == 'ver_type') { if (this.dataType == 'ver_type') {
this.getVerRanking() this.getVerRanking()
} }
@ -331,8 +379,8 @@ export default {
}, },
setLabelText() { setLabelText() {
const date = new Date(this.text); const date = new Date(this.text);
const year = date.getFullYear(); // 2025 const year = date.getFullYear();
const month = date.getMonth() + 1; // 3 (表示3月) const month = date.getMonth() + 1;
this.labels = []; this.labels = [];
if (this.view === 'year') { if (this.view === 'year') {
@ -350,11 +398,11 @@ export default {
} }
}, },
getAgentRanking() { getAgentRanking() {
//代理商排行
const that = this const that = this
//充值排行 this.$http('POST', '/supernew/ajax_get_agent_batch_list', {
if(that.dataRank == 4){
this.$http('POST', '/supernew/ajax_get_rank_recharge', {
date: that.text, date: that.text,
rank_type: that.dataRank,
sortBy: that.sortBy, sortBy: that.sortBy,
sortOrder: that.sortOrder, sortOrder: that.sortOrder,
cur_page: that.currentPage, cur_page: that.currentPage,
@ -368,12 +416,12 @@ export default {
}).catch(error => { }).catch(error => {
console.error(error, 'error') console.error(error, 'error')
}) })
return },
} getAgentRecharge() {
//充值排行
this.$http('POST', '/supernew/ajax_get_agent_batch_list', { const that = this
this.$http('POST', '/supernew/ajax_get_rank_recharge', {
date: that.text, date: that.text,
rank_type: that.dataRank,
sortBy: that.sortBy, sortBy: that.sortBy,
sortOrder: that.sortOrder, sortOrder: that.sortOrder,
cur_page: that.currentPage, cur_page: that.currentPage,
@ -389,6 +437,7 @@ export default {
}) })
}, },
getVerRanking() { getVerRanking() {
//品牌排行
const that = this const that = this
this.$http('POST', '/supernew/ajax_get_ver_batch_list', { this.$http('POST', '/supernew/ajax_get_ver_batch_list', {
date: that.text, date: that.text,
@ -409,6 +458,7 @@ export default {
}) })
}, },
getTypeRanking() { getTypeRanking() {
//产品排行
const that = this const that = this
this.$http('POST', '/supernew/ajax_get_type_batch_list', { this.$http('POST', '/supernew/ajax_get_type_batch_list', {
date: that.text, date: that.text,
@ -463,28 +513,36 @@ export default {
padding: 0 5px; padding: 0 5px;
color: #22C55E; color: #22C55E;
} }
.growth-down { .growth-down {
padding: 0 5px; padding: 0 5px;
color: #EF4444; color: #EF4444;
} }
.growth-text { .growth-text {
color: #9CA3AF; color: #9CA3AF;
padding-left: 5px; padding-left: 5px;
} }
.edit_icon { .edit_icon {
padding: 0 5px; padding: 0 5px;
vertical-align: middle; vertical-align: middle;
} }
.demo-wrap { .demo-wrap {
width: 100%; width: 100%;
letter-spacing: 0.08em; letter-spacing: 0.08em;
} }
.custom-select { .custom-select {
width: 120px; width: 210px;
border: none; border: none;
border-radius: 0; border-radius: 0;
font-size: 14px; font-size: 14px;
line-height: 18px;
height: 30px;
} }
.custom-select ::v-deep(.el-input__inner) { .custom-select ::v-deep(.el-input__inner) {
background: none; background: none;
border: 1px solid transparent; border: 1px solid transparent;
@ -495,6 +553,7 @@ export default {
font-weight: bold; font-weight: bold;
padding: 0; padding: 0;
} }
.custom-select ::v-deep(.el-input:focus-within) { .custom-select ::v-deep(.el-input:focus-within) {
background: none; background: none;
border-color: #F5F7FA !important; border-color: #F5F7FA !important;
@ -503,6 +562,42 @@ export default {
outline: none; outline: none;
} }
.el-select-dropdown__item {
color: #1E2226;
margin: 0 12px;
padding: 0 12px;
}
.el-select-dropdown__item:first-child {
margin-top: 6px;
}
.el-select-dropdown__item:last-child {
margin-bottom: 6px;
}
.el-select-dropdown__item:hover {
background: #F6F7FA;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
.el-select-dropdown__item.selected::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url('../../../assets/super/select-active.svg');
background-size: contain;
background-repeat: no-repeat;
opacity: 1;
}
.detail_icon { .detail_icon {
vertical-align: text-top; vertical-align: text-top;
padding-left: 5px; padding-left: 5px;
@ -511,22 +606,15 @@ export default {
::v-deep .el-popover.el-popper { ::v-deep .el-popover.el-popper {
padding: 20px; padding: 20px;
} }
.pop-wrap { .pop-wrap {
// width: 596px;
// height: 320px;
/* 自动布局 */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// padding: 20px;
gap: 20px; gap: 20px;
box-sizing: border-box; box-sizing: border-box;
// background: #FFFFFF;
/* 阴影/常规阴影 */
// box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
.pop-top { .pop-top {
h3 { h3 {
/* body/body 1_bold */
font-family: Microsoft YaHei UI; font-family: Microsoft YaHei UI;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
@ -543,6 +631,7 @@ export default {
color: #006AFF; color: #006AFF;
} }
} }
img { img {
width: 20px; width: 20px;
height: 20px; height: 20px;

147
src/views/super/Ranking/RankDetail.vue
View File

@ -2,20 +2,33 @@
<div class="demo-wrap min-flex-right"> <div class="demo-wrap min-flex-right">
<div class="flex-between"> <div class="flex-between">
<h2>{{ filterTitle ? filterTitle : pageTitle }}</h2> <h2>{{ filterTitle ? filterTitle : pageTitle }}</h2>
<CustomDropdown ref="dropdownRef" :placeholder="'（'+viewDesc[this.view]+')'+text" width="280px" v-if="showDateSelect"> <CustomDropdown v-if="showDateSelect"
<DateSelect slot="normal" :view="view" :onlyYear="onlyYear" v-model="selectedDate" @update-count="handleUpdateView" @change="handleDateChange" /> ref="dropdownRef"
:placeholder="'（'+viewDesc[this.view]+')'+text"
width="280px">
<DateSelect slot="normal"
:view="view"
:onlyYear="onlyYear"
v-model="selectedDate"
@update-count="handleUpdateView"
@change="handleDateChange"/>
</CustomDropdown> </CustomDropdown>
</div> </div>
<div class=" flex-common" v-if="type == 'year'"> <div class=" flex-common" v-if="type == 'year'">
<el-form> <el-form>
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> <el-table :data="tableData"
style="width: 100%"
@sort-change="handleSortChange"
@cell-mouse-enter="handleRowHover">
<el-table-column prop="sort" label="排序" width="100"></el-table-column> <el-table-column prop="sort" label="排序" width="100"></el-table-column>
<!-- 其他列 -->
<el-table-column prop="1" label="年份" sortable="custom"> <el-table-column prop="1" label="年份" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.value_1 }} {{ scope.row.value_1 }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="2" :label="rank_type_desc[dataRank]" sortable="custom"> <el-table-column prop="2" :label="rank_type_desc[dataRank]" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.value_2 }} {{ scope.row.value_2 }}
@ -24,11 +37,21 @@
<el-table-column label="代理商排行"> <el-table-column label="代理商排行">
<template v-slot="{ row, $index }"> <template v-slot="{ row, $index }">
<el-popover v-model="row.id_popover" placement="top" trigger="manual" :ref="`popover-${$index}`" @show="popshow"> <el-popover v-model="row.id_popover"
placement="top"
trigger="manual"
:ref="`popover-${$index}`"
@show="popshow">
<div class="pop-wrap"> <div class="pop-wrap">
<div class="flex-between flex pop-top"> <div class="flex-between flex pop-top">
<h3>{{ row.value_1 }} {{rank_type_desc[dataRank]}}<span @click="goLookMoreData(row.value_1)">查看更多</span></h3> <h3>
<span class="flex point" @click="closePop(row,'id')">关闭 <img src="@/assets/register/close.svg" alt=""></span> {{ row.value_1 }} {{ rank_type_desc[dataRank] }}
<span @click="goLookMoreData(row.value_1)">查看更多</span>
</h3>
<span class="flex point" @click="closePop(row,'id')">
关闭<img src="@/assets/register/close.svg">
</span>
</div> </div>
<el-table :data="tableData1" style="width: 100%"> <el-table :data="tableData1" style="width: 100%">
<el-table-column prop="sort" width="100" label="排行"></el-table-column> <el-table-column prop="sort" width="100" label="排行"></el-table-column>
@ -36,11 +59,15 @@
<el-table-column prop="value_1" width="348" label="销售额"></el-table-column> <el-table-column prop="value_1" width="348" label="销售额"></el-table-column>
</el-table> </el-table>
</div> </div>
<!-- 触发弹框的按钮 -->
<span v-if="top_list[row.id]" slot="reference"> <span v-if="top_list[row.id]" slot="reference">
No.1 {{ top_list[row.id]['name'] }} No.1 {{ top_list[row.id]['name'] }}
<img @click="handleClick(row, $index, 'id')" v-if="show_detail_index == row.sort" class="detail_icon" src="@/assets/super/list-detail.svg" alt=""> <img v-if="show_detail_index == row.sort"
@click="handleClick(row, $index, 'id')"
class="detail_icon"
src="@/assets/super/list-detail.svg">
</span> </span>
<span v-else slot="reference">暂无排行</span>
</el-popover> </el-popover>
</template> </template>
</el-table-column> </el-table-column>
@ -50,9 +77,13 @@
<div class=" flex-common" v-if="type == 'month'"> <div class=" flex-common" v-if="type == 'month'">
<el-form> <el-form>
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> <el-table :data="tableData"
style="width: 100%"
@sort-change="handleSortChange"
@cell-mouse-enter="handleRowHover">
<el-table-column prop="sort" label="排序" width="100"></el-table-column> <el-table-column prop="sort" label="排序" width="100"></el-table-column>
<!-- 其他列 -->
<el-table-column prop="1" label="月份" sortable="custom"> <el-table-column prop="1" label="月份" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.value_1 }} {{ scope.row.value_1 }}
@ -63,19 +94,21 @@
<template slot-scope="scope"> <template slot-scope="scope">
<div class="flex"> <div class="flex">
{{ scope.row.value_2 }} {{ scope.row.value_2 }}
<span class="flex growth-text" v-if="growth_list[scope.row.id]"> <span v-if="growth_list[scope.row.id]" class="flex growth-text">
<span v-if="growth_list[scope.row.id].value>0"> <span v-if="growth_list[scope.row.id].value>0">
<span class="growth-up"> <span class="growth-up">
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="">{{growth_list[scope.row.id].value}}% <img class="edit_icon" src="@/assets/super/growth-up.svg">
{{ growth_list[scope.row.id].value }}%
</span>同比上年 </span>同比上年
</span> </span>
<span v-if="growth_list[scope.row.id].value<0"> <span v-if="growth_list[scope.row.id].value<0">
<span class="growth-down"> <span class="growth-down">
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="">{{growth_list[scope.row.id].value}}% <img class="edit_icon" src="@/assets/super/growth-down.svg">
{{ growth_list[scope.row.id].value }}%
</span>同比上年 </span>同比上年
</span> </span>
<span v-if="growth_list[scope.row.id].value==0"> <span v-if="growth_list[scope.row.id].value==0">
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="">同比上年持平 <img class="edit_icon" src="@/assets/super/growth-flat.svg">同比上年持平
</span> </span>
</span> </span>
<span class="flex growth-text" v-else>上年无数据</span> <span class="flex growth-text" v-else>上年无数据</span>
@ -85,11 +118,20 @@
<el-table-column label="代理商排行"> <el-table-column label="代理商排行">
<template v-slot="{ row, $index }"> <template v-slot="{ row, $index }">
<el-popover v-model="row.id_popover" placement="top" trigger="manual" :ref="`popover-${$index}`" @show="popshow"> <el-popover v-model="row.id_popover"
placement="top"
trigger="manual"
:ref="`popover-${$index}`"
@show="popshow">
<div class="pop-wrap"> <div class="pop-wrap">
<div class="flex-between flex pop-top"> <div class="flex-between flex pop-top">
<h3>{{ row.value_1 }} {{rank_type_desc[dataRank]}}<span @click="goLookMoreData(row.value_1)">查看更多</span></h3> <h3>
<span class="flex point" @click="closePop(row,'id')">关闭 <img src="@/assets/register/close.svg" alt=""></span> {{ row.value_1 }} {{ rank_type_desc[dataRank] }}
<span @click="goLookMoreData(row.value_1)">查看更多</span>
</h3>
<span class="flex point" @click="closePop(row,'id')">
关闭<img src="@/assets/register/close.svg">
</span>
</div> </div>
<el-table :data="tableData1" style="width: 100%"> <el-table :data="tableData1" style="width: 100%">
<el-table-column prop="sort" width="100" label="排行"></el-table-column> <el-table-column prop="sort" width="100" label="排行"></el-table-column>
@ -97,12 +139,13 @@
<el-table-column prop="value_1" width="348" label="销售额"></el-table-column> <el-table-column prop="value_1" width="348" label="销售额"></el-table-column>
</el-table> </el-table>
</div> </div>
<!-- 触发弹框的按钮 -->
<span v-if="top_list[row.id]" slot="reference"> <span v-if="top_list[row.id]" slot="reference">
No.1 {{ top_list[row.id]['name'] }} No.1 {{ top_list[row.id]['name'] }}
<img @click="handleClick(row, $index, 'id')" v-if="show_detail_index == row.sort" class="detail_icon" src="@/assets/super/list-detail.svg" alt=""> <img v-if="show_detail_index == row.sort"
@click="handleClick(row, $index, 'id')"
class="detail_icon" src="@/assets/super/list-detail.svg">
</span> </span>
<span slot="reference" v-else>暂无排行</span> <span v-else slot="reference">暂无排行</span>
</el-popover> </el-popover>
</template> </template>
</el-table-column> </el-table-column>
@ -117,9 +160,13 @@
</div> </div>
<el-form> <el-form>
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> <el-table :data="tableData"
style="width: 100%"
@sort-change="handleSortChange"
@cell-mouse-enter="handleRowHover">
<el-table-column prop="sort" label="排序"></el-table-column> <el-table-column prop="sort" label="排序"></el-table-column>
<!-- 其他列 -->
<el-table-column prop="1" label="日期" sortable="custom"> <el-table-column prop="1" label="日期" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.value_1 }} {{ scope.row.value_1 }}
@ -131,22 +178,24 @@
<div class="flex"> <div class="flex">
{{ scope.row.value_2 }} {{ scope.row.value_2 }}
<template v-if="Object.keys(growth_list).length > 0"> <template v-if="Object.keys(growth_list).length > 0">
<span class="flex growth-text" v-if="growth_list[scope.row.id]"> <span v-if="growth_list[scope.row.id]" class="flex growth-text">
<span v-if="growth_list[scope.row.id].value>0"> <span v-if="growth_list[scope.row.id].value>0">
<span class="growth-up"> <span class="growth-up">
<img class="edit_icon" src="@/assets/super/growth-up.svg" alt="">{{growth_list[scope.row.id].value}}% <img class="edit_icon" src="@/assets/super/growth-up.svg">
{{ growth_list[scope.row.id].value }}%
</span>同比上年 </span>同比上年
</span> </span>
<span v-if="growth_list[scope.row.id].value<0"> <span v-if="growth_list[scope.row.id].value<0">
<span class="growth-down"> <span class="growth-down">
<img class="edit_icon" src="@/assets/super/growth-down.svg" alt="">{{growth_list[scope.row.id].value}}% <img class="edit_icon" src="@/assets/super/growth-down.svg">
{{ growth_list[scope.row.id].value }}%
</span>同比上年 </span>同比上年
</span> </span>
<span v-if="growth_list[scope.row.id].value==0"> <span v-if="growth_list[scope.row.id].value==0">
<img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="">同比上年持平 <img class="edit_icon" src="@/assets/super/growth-flat.svg">同比上年持平
</span> </span>
</span> </span>
<span class="flex growth-text" v-else>上年无数据</span> <span v-else class="flex growth-text">上年无数据</span>
</template> </template>
</div> </div>
</template> </template>
@ -157,20 +206,27 @@
<div class=" flex-common" v-if="type == 'agentnew'"> <div class=" flex-common" v-if="type == 'agentnew'">
<el-form> <el-form>
<el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover"> <el-table :data="tableData"
style="width: 100%"
@sort-change="handleSortChange"
@cell-mouse-enter="handleRowHover">
<el-table-column prop="1" label="加盟时间" sortable="custom"> <el-table-column prop="1" label="加盟时间" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.regtime }} {{ scope.row.regtime }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="nick" label="代理商昵称"></el-table-column> <el-table-column prop="nick" label="代理商昵称"></el-table-column>
<el-table-column prop="real_name" label="负责人"></el-table-column> <el-table-column prop="real_name" label="负责人"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column> <el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="2" label="账户余额" sortable="custom"> <el-table-column prop="2" label="账户余额" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.remain_money }} {{ scope.row.remain_money }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="3" label="累计总额/元" sortable="custom"> <el-table-column prop="3" label="累计总额/元" sortable="custom">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.total_money }} {{ scope.row.total_money }}
@ -182,7 +238,6 @@
</div> </div>
</template> </template>
<script> <script>
// import GuipForm from '@/components/GuipForm.vue'
import DateSelect from '@/components/super/DateSelect.vue'; import DateSelect from '@/components/super/DateSelect.vue';
import CustomDropdown from '@/components/CustomDropdown.vue'; import CustomDropdown from '@/components/CustomDropdown.vue';
@ -243,8 +298,7 @@ export default {
mounted() { mounted() {
this.init() this.init()
}, },
computed: { computed: {},
},
watch: { watch: {
'$route'() { '$route'() {
this.init() this.init()
@ -252,9 +306,8 @@ export default {
}, },
methods: { methods: {
init() { init() {
if(this.showDateSelect){ this.text = ""
this.text = this.getNowYear()//初始赋值 if (this.showDateSelect) this.text = this.getNowYear()
}
this.dataRank = this.rank_type this.dataRank = this.rank_type
this.aid = this.$route.query.aid this.aid = this.$route.query.aid
this.ver_type = this.$route.query.ver_type this.ver_type = this.$route.query.ver_type
@ -265,10 +318,9 @@ export default {
if (this.type == 'agentnew') { if (this.type == 'agentnew') {
this.getAgentNew() this.getAgentNew()
return } else {
}
this.getRankingDetail() this.getRankingDetail()
}
}, },
handleUpdateView(newView) { handleUpdateView(newView) {
this.view = newView; this.view = newView;
@ -319,6 +371,7 @@ export default {
}); });
// 打开当前行的弹框 // 打开当前行的弹框
row[type + '_popover'] = true; row[type + '_popover'] = true;
this.getRankingList({date: row.value_1}); this.getRankingList({date: row.value_1});
}, },
popshow() { popshow() {
@ -356,7 +409,7 @@ export default {
}, },
getRankingDetail(obj) { getRankingDetail(obj) {
const that = this const that = this
that.tableData1 = [] that.tableData = []
this.$http('POST', '/supernew/ajax_get_rank_detail', { this.$http('POST', '/supernew/ajax_get_rank_detail', {
rank_type: that.dataRank, rank_type: that.dataRank,
aid: that.aid, aid: that.aid,
@ -380,6 +433,7 @@ export default {
}, },
getRankingList(obj) { getRankingList(obj) {
const that = this const that = this
that.tableData1 = []
this.$http('POST', '/supernew/ajax_get_agent_rank_list', { this.$http('POST', '/supernew/ajax_get_agent_rank_list', {
rank_type: that.dataRank, rank_type: that.dataRank,
cur_page: 1, cur_page: 1,
@ -395,6 +449,7 @@ export default {
}, },
getAgentNew(obj) { getAgentNew(obj) {
const that = this const that = this
that.tableData = []
this.$http('POST', '/supernew/ajax_new_agent_list', { this.$http('POST', '/supernew/ajax_new_agent_list', {
...obj ...obj
}).then(response => { }).then(response => {
@ -413,18 +468,22 @@ export default {
padding: 0 5px; padding: 0 5px;
color: #22C55E; color: #22C55E;
} }
.growth-down { .growth-down {
padding: 0 5px; padding: 0 5px;
color: #EF4444; color: #EF4444;
} }
.growth-text { .growth-text {
color: #9CA3AF; color: #9CA3AF;
padding-left: 5px; padding-left: 5px;
} }
.edit_icon { .edit_icon {
padding: 0 5px; padding: 0 5px;
vertical-align: middle; vertical-align: middle;
} }
.demo-wrap { .demo-wrap {
width: 100%; width: 100%;
letter-spacing: 0.08em; letter-spacing: 0.08em;
@ -438,22 +497,15 @@ export default {
::v-deep .el-popover.el-popper { ::v-deep .el-popover.el-popper {
padding: 20px; padding: 20px;
} }
.pop-wrap { .pop-wrap {
// width: 596px;
// height: 320px;
/* 自动布局 */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// padding: 20px;
gap: 20px; gap: 20px;
box-sizing: border-box; box-sizing: border-box;
// background: #FFFFFF;
/* 阴影/常规阴影 */
// box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
.pop-top { .pop-top {
h3 { h3 {
/* body/body 1_bold */
font-family: Microsoft YaHei UI; font-family: Microsoft YaHei UI;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
@ -470,6 +522,7 @@ export default {
color: #006AFF; color: #006AFF;
} }
} }
img { img {
width: 20px; width: 20px;
height: 20px; height: 20px;

9
src/views/super/Ranking/Ranking.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div class="siteSetting-wrap"> <div class="siteSetting-wrap">
<RankingLeftMenu /> <RankingLeftMenu />
<!--:menuList="menuList" :activeFloor="activeFloor" :curIndex="curIndex" -->
<!-- 主内容区域 --> <!-- 主内容区域 -->
<main class="main-content" ref="scrollContainer"> <main class="main-content" ref="scrollContainer">
<router-view></router-view> <router-view></router-view>
@ -27,8 +26,6 @@ export default {
}, },
mounted(){ mounted(){
this.path =this.$route.path; this.path =this.$route.path;
console.log(this.$route.path,'090-9090');
// this.$refs.scrollContainer.scrollTo(0)
}, },
methods: { methods: {
} }
@ -40,12 +37,6 @@ export default {
height: 100%; height: 100%;
} }
// .sidebar {
// width: 250px;
// background: #f5f5f5;
// padding: 20px;
// }
.main-content { .main-content {
flex: 1; flex: 1;
padding: 12px; padding: 12px;

Write Preview
Loading…
Cancel
Save