<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-15 10:57:51
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-11-17 16:03:20
|
* @Description: 代理 审批页面
|
-->
|
<template>
|
<div class="approve-box">
|
<v-navbar title="审批" fixed >
|
</v-navbar>
|
<div class="fixed-top">
|
<nav class="nav text-center-g flex-center-g" :style="{background:$store.state.lastColor}">
|
<div class="child flex-start-g">
|
<div class="flex-1-g" :class="navIndex===0?'active':''" @click="setNavIndex(0)">待审批</div>
|
<div class="flex-1-g" :class="navIndex===1?'active':''" @click="setNavIndex(1)">已通过</div>
|
<div class="flex-1-g" :class="navIndex===2?'active':''" @click="setNavIndex(2)">已拒绝</div>
|
</div>
|
</nav>
|
<van-search class="search icons-ser" placeholder="请输入商户名称/负责人电话" v-model="searchKey" shape='round' @search="init">
|
<!--<template slot="left-icon">-->
|
<!--<div class="">-->
|
<!--<svg class="icon" aria-hidden="true" style="width:20px;height:20px;">-->
|
<!--<use xlink:href="#iconsousuo"></use>-->
|
<!--</svg>-->
|
<!--</div>-->
|
<!--</template>-->
|
</van-search>
|
</div>
|
|
|
<hList @scroll="saleOrderLoad" :defScroll='10' :finished='finished' :loading="loading" height="74vh">
|
<div class="list-box">
|
<div class="mer-item flex-between-g" v-for="(item, index) in calcList" :key="index" @click="goMerDetail(item.merId)">
|
<div class="flex-start-g">
|
<div class="icon-box flex-center-g" :style="{background:$store.state.lastColor}">
|
<svg class="icon" aria-hidden="true" style="width:22px;height:22px;fill:#fff;">
|
<use xlink:href="#iconshanghuguanliliebiao"></use>
|
</svg>
|
</div>
|
<div >
|
<p class="name text-clip-g" style="max-width:170px;">{{item.merName}}</p>
|
<p class="tel">{{ navIndex ===1 ?item.tempName : item.priMblNo}}</p>
|
</div>
|
</div>
|
<!-- v-if="item.hidden!==0" -->
|
<van-button class="btn" :style="{background:$store.state.backColor}" @click.stop="openModal(item)">{{navIndex ===1 ? '产品管理' :'审批'}}</van-button>
|
</div>
|
</div>
|
</hList>
|
<van-popup v-model="isShow">
|
<div class="modal">
|
<div class="top flex-center-g" :style="{background:$store.state.lastColor}">
|
<van-icon class="cross" name="cross" color='#fff' size='25px' @click="isShow = false;" />
|
<svg class="icon" aria-hidden="true" style="width:85px;height:95px;">
|
<use xlink:href="#iconshenpidanchuang"></use>
|
</svg>
|
</div>
|
<footer class="footer text-center-g">
|
<p class="name text-clip-g ">{{merName}}</p>
|
<p class="c-text-999-g">请确认商户审批结果</p>
|
<div>
|
<van-button :style="{background:$store.state.backColor}" class="btn" @click="submit(3)">拒绝</van-button>
|
<van-button :style="{background:$store.state.backColor}" class="btn btn-default" @click="submit(1)">同意</van-button>
|
</div>
|
</footer>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import Template_detail from "../template/detail";
|
import hList from '../../components/common/h-list';
|
export default {
|
components: {Template_detail,hList},
|
data() {
|
return {
|
isShow: false,
|
navIndex: 0,
|
finished:false,
|
loading:false,
|
searchKey: '',
|
list:[
|
{
|
arr:[],
|
},
|
{
|
arr:[],
|
},
|
{
|
arr:[],
|
},
|
],
|
merId:'',
|
merName:''
|
}
|
},
|
computed:{
|
calcList(){
|
return this.list[this.navIndex].arr;
|
}
|
},
|
created(){
|
this.init()
|
},
|
methods: {
|
saleOrderLoad(){
|
let merId = ''
|
var myArr = this.list[this.navIndex].arr
|
|
if(this.list[this.navIndex].arr.length >= 10){
|
merId = myArr[myArr.length-1].merId
|
}
|
this.$api.getAuditList({
|
auditStatus:this.navIndex,
|
searchKey:this.searchKey,
|
merId:merId
|
}).then((res) => {
|
let {merList} = res.body;
|
if(this.navIndex===0){
|
merList = merList.map(item=>{
|
if(item.canAudit ===0){
|
item.hidden = 0;
|
}
|
return item
|
})
|
}
|
if(merList.length < 10){
|
this.list[this.navIndex].arr = [...myArr,...merList]
|
this.loading = false
|
this.finished = true
|
}else{
|
this.list[this.navIndex].arr = [...myArr,...merList]
|
this.loading = false
|
this.finished = false
|
}
|
}).catch((err) => {
|
|
});
|
},
|
//跳转到商户详情
|
goMerDetail(merId){
|
this.$router.push(`/mine/mer-info?merId=${merId}`)
|
},
|
//打开审批弹窗 已通过的产品跳转到 产品管理页面
|
openModal(item){
|
if(this.navIndex!==1){
|
this.merId = item.merId;
|
this.merName = item.merName;
|
this.isShow=true;
|
}else{
|
this.$router.push(`/template/detail?merId=${item.merId}`)
|
}
|
},
|
//审批
|
submit(status){
|
this.$api.merAudit({
|
merId: this.merId,
|
status
|
}).then(res => {
|
this.$notify('审批完成！')
|
this.isShow = false;
|
});
|
},
|
// 获取列表数据
|
init(){
|
this.$api.getAuditList({
|
auditStatus:this.navIndex,
|
searchKey:this.searchKey
|
}).then((res) => {
|
let {merList} = res.body;
|
if(merList.length < 10){
|
this.finished = true
|
}
|
if(this.navIndex===0){
|
merList = merList.map(item=>{
|
if(item.canAudit ===0){
|
item.hidden = 0;
|
}
|
return item
|
})
|
}
|
this.list[this.navIndex].arr = merList;
|
}).catch((err) => {
|
|
});
|
},
|
setNavIndex(index) {
|
this.finished = false;
|
this.loading = false;
|
this.navIndex = index;
|
this.init()
|
}
|
},
|
}
|
</script>
|
<style lang="less" scoped>
|
.approve-box {
|
//padding-bottom: 40px;
|
padding-top: 105px;
|
}
|
|
.list-box{
|
background-color: @c-bg-fff;
|
//padding-bottom: 10px;
|
padding-top: 5px;
|
}
|
|
|
.fixed-top {
|
position: fixed;
|
top: 0;
|
width: 100%;
|
z-index: @zIndex-10;
|
}
|
|
.search {
|
padding: 15px 8px;
|
}
|
|
.nav {
|
height: 44px;
|
background-color: @c-bg-black;
|
font-weight: bold;
|
|
.child {
|
width: 360px;
|
margin: 0 auto;
|
background-color: @c-bg-555;
|
border-radius: 16px;
|
}
|
|
.flex-1-g {
|
.lh(32px);
|
color: @c-text-fff;
|
opacity: 0.4;
|
|
&.active {
|
opacity: 1;
|
border-radius: 16px;
|
background-color: @c-bg-fff;
|
color: @c-text-black;
|
}
|
}
|
}
|
|
.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: 67px;
|
|
.icon-box {
|
height: 32px;
|
width: 32px;
|
margin-right: 15px;
|
border-radius: 50%;
|
background: @c-bg-black;
|
}
|
|
.name {
|
font-weight: bold;
|
}
|
|
.tel {
|
font-size: @font-12;
|
color: @c-text-666;
|
margin-top: 5px;
|
}
|
|
.btn {
|
.lh(28px);
|
padding: 0 13px;
|
background: @c-bg-default;
|
border-radius: 13px;
|
color: @c-text-fff;
|
}
|
}
|
|
.modal {
|
width: 280px;
|
|
.top {
|
position: relative;
|
height: 115px;
|
background-color: @c-bg-black;
|
align-items: flex-end;
|
|
.cross {
|
position: absolute;
|
top: 5px;
|
right: 5px;
|
|
}
|
}
|
|
.footer {
|
height: 125px;
|
|
.name {
|
.lh(17px);
|
margin: 23px 13px 13px;
|
}
|
|
.btn {
|
.lh(36px);
|
margin: 25px 10px 0;
|
width: 110px;
|
border-radius: 18px;
|
background-color: @c-bg-eee;
|
color: @c-text-666;
|
|
&.btn-default {
|
background-color: @c-bg-default;
|
color: @c-text-fff;
|
}
|
}
|
}
|
}
|
</style>
|
