<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-19 13:55:57
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-07 11:17:23
|
* @Description:
|
-->
|
<template>
|
<div class="mer-manager-box">
|
<v-navbar title="商户管理" fixed >
|
<template v-slot:right >
|
<div class="flex-center-g" @click="isShowFilter = true;">
|
<span>筛选</span>
|
<svg class="icon" aria-hidden="true" style="width:18px;height:18px;">
|
<use xlink:href="#iconshaixuan"></use>
|
</svg>
|
</div>
|
</template>
|
</v-navbar>
|
<van-search class="search" placeholder="请输入商户名称/负责人电话" @blur="onBlur" v-model="value" shape='round' />
|
<!-- <div class="list-box-div"> -->
|
<hList :defScroll='10' :finished='finished' :loading="loading" @scroll="saleOrderLoad">
|
<div class="item-group">
|
<div class="mer-item flex-between-g" v-for="(item, index) in list" :key="index" @click="goMerDetail(item.merId)">
|
<div class="flex-start-g">
|
<div class="icon-box flex-center-g" :style="{background:$store.state.backColor}">
|
<svg class="icon" aria-hidden="true" style="width:22px;height:22px;fill:#fff;">
|
<use xlink:href="#iconshanghuguanliliebiao"></use>
|
</svg>
|
</div>
|
<div>
|
<p class="name" v-text="item.merName">商户名称</p>
|
<p class="tel" v-text="item.priMblNo">未配置产品</p>
|
<p class="tel" v-text="item.hbStatusName"></p>
|
</div>
|
</div>
|
<van-button :style="{background:$store.state.backColor}" class="btn" @click.stop="goTempDetail(item.merId)" v-if="orgType != 2">产品管理</van-button>
|
</div>
|
</div>
|
</hList>
|
<!-- </div> -->
|
<v-button-circle icon='icondaochu' @click="exportExcel" title='导出'></v-button-circle>
|
|
<van-popup v-model="isShow">
|
<div class="popup-content">
|
<div class="icon-box flex-center-g">
|
<div class="child flex-center-g" :style="{background:$store.state.backColor, opacity: 0.8}">
|
<svg class="icon" aria-hidden="true" style="width:33px;height:27px;fill:#fff;" @click="$router.back()">
|
<use xlink:href="#iconyoujian"></use>
|
</svg>
|
</div>
|
</div>
|
<p class="text">
|
<span class="top">已将信息发送至邮箱，请注意查收</span>
|
<span v-text="userinfo.email || ''">1244667@163.com</span>
|
</p>
|
<van-button class="btn-submit" :style="{color:$store.state.backColor}" @click="isShow=false;">确定</van-button>
|
</div>
|
</van-popup>
|
|
<v-filter v-model="isShowFilter" :areaList="areaList" :hasTime="false" :hasMoney="false" hasCity :belongArr="belongArr" :templateArr="templateArr" @search="init"></v-filter>
|
</div>
|
</template>
|
|
<script>
|
import { mapState,mapGetters } from 'vuex';
|
import {calcAreaTwo} from '@/utils/index';
|
import hList from '@/components/common/h-list.vue'
|
export default {
|
components:{
|
hList,
|
},
|
data() {
|
return {
|
isShow:false,
|
isShowFilter:false,
|
finished:false,
|
loading:false,
|
value:'',
|
list:[],
|
belongArr:[],
|
templateArr:[],
|
|
querys: {
|
orderField: null,
|
order: null,
|
searchKey: null,
|
},
|
areaList:{},
|
Area:[],
|
}
|
},
|
computed:{
|
...mapState(['userinfo']),
|
...mapGetters(['orgType']),
|
// 根据搜索关键字获取 对应的数据
|
calcList(){
|
let v = this.value;
|
let arr = this.list.filter(item=>{
|
return item.merName.indexOf(v) > -1 || item.priMblNo.indexOf(v) > -1;
|
})
|
if(arr){
|
return arr
|
}
|
return this.list;
|
},
|
chanId(){
|
return this.$route.query.chanId || '';
|
}
|
},
|
created(){
|
this.saleOrderLoad()
|
//this.init()
|
this.merInit()
|
this.getArea()
|
},
|
methods: {
|
onBlur(){
|
this.$api.merList({
|
searchKey:this.value
|
}).then(res=>{
|
this.list = res.body
|
})
|
},
|
saleOrderLoad(params={}){
|
if(this.chanId){
|
params.chanList = [this.chanId]
|
}
|
if(this.list.length >= 10){
|
params.merId = this.list[this.list.length-1].merId
|
}
|
this.$api.merList(params).then((res) => {
|
if(res.body.length < 10){
|
this.list = [...this.list,...res.body]
|
this.loading = false
|
this.finished = true
|
}else{
|
this.list = [...this.list,...res.body]
|
this.loading = false
|
this.finished = false
|
}
|
this.isShowFilter = false;
|
}).catch((err) => {
|
|
});
|
},
|
//跳转到商户详情
|
goMerDetail(merId){
|
this.$router.push({
|
path:'/mine/mer-info',
|
query:{
|
merId
|
}
|
})
|
},
|
//跳转到模板详情
|
goTempDetail(merId){
|
this.$router.push({
|
path:'/template/detail',
|
query:{
|
merId
|
}
|
})
|
},
|
parseArea(list,){
|
list.forEach(item=>{
|
let childList = item.childList;
|
this.Area.push({
|
name:item.name,
|
value:item.code
|
})
|
if(Array.isArray(childList)){
|
this.parseArea(childList)
|
}
|
})
|
},
|
getArea(){
|
this.$api.getOrgAreaInfo(2).then(res => {
|
let arr = [];
|
let list = res.body || [];
|
this.parseArea(list)
|
this.areaList = calcAreaTwo(this.Area)
|
console.log(this.areaList)
|
});
|
},
|
merInit(){
|
this.$api.merInitFilter().then(({body}) => {
|
let chanList = body.chanList || [];
|
let templateArr = body.tempList || [];
|
chanList = chanList.map(val => {
|
val.name = val.chanName;
|
val.code = val.chanId;
|
return val;
|
});
|
templateArr = templateArr.map(val => {
|
val.name = val.tempName;
|
val.code = val.id;
|
return val;
|
});
|
this.templateArr = templateArr;
|
if (this.orgType !== 2) {
|
this.belongArr = chanList;
|
}
|
});
|
},
|
init(params={}){
|
if(this.chanId){
|
params.chanList = [this.chanId]
|
}
|
this.$api.merList(params).then((res) => {
|
this.list = res.body || [];
|
this.isShowFilter = false;
|
if(res.body.length < 10){
|
this.finished = true
|
}
|
}).catch((err) => {
|
|
});
|
},
|
exportExcel(){
|
if (!this.list.length) {
|
this.$notify('暂无数据导出');
|
return;
|
}
|
let obj = {
|
...this.querys
|
};
|
this.$api.merExport(obj).then(res => {
|
this.isShow = true;
|
});
|
|
},
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
// .list-box-div{
|
// overflow: scroll;
|
// height: 80vh;
|
// }
|
// .list-box-div::-webkit-scrollbar,.withdrawals-box::-webkit-scrollbar {
|
// display: none;
|
// }
|
.mer-manager-box {
|
background-color: @c-bg-f5;
|
padding-top: 44px;
|
}
|
|
.item-group {
|
background-color: @c-bg-fff;
|
padding-bottom: 25px;
|
}
|
|
.search {
|
padding: 15px 8px;
|
margin-top: 10px;
|
}
|
|
.mer-item {
|
margin: 0 8px 10px;
|
box-shadow: 0px 0px 5px 0px rgba(66, 61, 93, 0.08);
|
border-radius: 3px;
|
background: @c-bg-fff;
|
padding: 0 12px;
|
height: 80px;
|
|
.icon-box {
|
height: 32px;
|
width: 32px;
|
margin-right: 15px;
|
border-radius: 50%;
|
background: @c-bg-black;
|
}
|
|
.name {
|
font-weight: bold;
|
max-width: 170px;
|
}
|
|
.tel {
|
font-size: @font-12;
|
color: @c-text-666;
|
margin-top: 5px;
|
}
|
|
.btn {
|
.lh(25px);
|
padding: 0 12px;
|
background: @c-bg-default;
|
border-radius: 13px;
|
color: @c-text-fff;
|
}
|
}
|
.popup-content{
|
height: 150px;
|
width: 280px;
|
border-radius: 3px;
|
.icon-box{
|
z-index: 99999;
|
height: 64px;
|
width: 64px;
|
position: absolute;
|
left: 50%;
|
background:rgba(66,61,93,0.1);
|
border-radius: 50%;
|
transform: translate(-50%,-50%);
|
|
.child{
|
height: 55px;
|
width: 55px;
|
background:rgba(66,61,93,0.8);
|
border-radius: 50%;
|
}
|
}
|
.text{
|
width: 210px;
|
text-align: center;
|
margin: 0 auto;
|
padding-top: 50px;
|
line-height: 18px;
|
.top{
|
color: @c-text-666;
|
}
|
}
|
.btn-submit{
|
.lh(44px);
|
position: absolute;
|
width: 100%;
|
bottom: 0;
|
color: @c-text-default;
|
}
|
}
|
</style>
|
