<!--
|
|
门店管理-主页
|
|
-->
|
<template>
|
<div class="stores-box h-100-g">
|
<v-navbar title="门店管理" fixed></v-navbar>
|
<van-search class="search" placeholder="请输入门店名称/负责人姓名/负责人手机号/渠道编码" v-model="value" shape='round' @search="onSearch" />
|
<div class="item-box">
|
<van-list v-model="loading" :finished="finished" immediate-check='false' offset="50" finished-text="没有更多了" @load="onLoad">
|
<div class="stores-item flex-start-g" v-for="(item, index) in list" :key="index" @click="go(item.storeId)">
|
<p class="icon-box flex-center-g">
|
<svg class="icon" aria-hidden="true" style="width:25px;height:25px;fill:#fff">
|
<use xlink:href="#iconyonghu"></use>
|
</svg>
|
</p>
|
<div>
|
<p class="name" v-text="item.storeName || ''">门店名称</p>
|
<p class="c-text-666-g font-12-g" v-text="item.priMblNo || ''">13586695442</p>
|
</div>
|
<van-button :style="{background:$store.state.backColor}" class="opr-btn" @click.stop="goStoreOprs(item.storeId)" v-if="orgType != 2">店员管理</van-button>
|
</div>
|
</van-list>
|
</div>
|
|
<van-button class="btn" @click="$router.push(`/mine/stores-add?merId=${merId}`)" v-if="orgType!=1">
|
<div class="inner">
|
<van-icon name="plus" />
|
<span class="text">新增</span>
|
</div>
|
</van-button>
|
|
</div>
|
</template>
|
|
<script>
|
import { mapState, mapGetters } from "vuex";
|
export default {
|
name: "stores",
|
data() {
|
return {
|
value: '',
|
list: [],
|
loading: false,
|
finished: false,
|
storeId: '',
|
merId: '',
|
}
|
},
|
computed: {
|
...mapState(['userinfo']),
|
...mapGetters(["orgType"]),
|
},
|
created() {
|
this.merId = this.$route.query.merId ? this.$route.query.merId : this.userinfo.orgId;
|
this.init();
|
},
|
methods: {
|
init() {
|
this.loading = true
|
let objForm = {}
|
if (this.orgType == 1 && !this.$route.query.merId) {
|
objForm = {
|
searchKey: this.value,
|
// storeId: this.storeId,
|
}
|
} else {
|
objForm = {
|
searchKey: this.value,
|
// storeId: this.storeId,
|
merId: this.merId,
|
}
|
}
|
this.$api.storeStoreList(objForm).then((res) => {
|
if (res.body.storeList.length < 10) {
|
this.list = [...this.list, ...res.body.storeList]
|
this.storeId = ''
|
this.finished = true
|
this.loading = false
|
} else {
|
this.list = [...this.list, ...res.body.storeList]
|
this.storeId = this.list[this.list.length - 1].storeId
|
this.finished = false
|
this.loading = false
|
}
|
})
|
},
|
goStoreOprs(storeId) {
|
this.$router.push({
|
path: '/mine/storesOprs',
|
query: {
|
storeId: storeId
|
}
|
})
|
},
|
go(id) {
|
this.$router.push({ path: '/mine/stores-detail', query: { storeId: id } });
|
},
|
|
onLoad() {
|
this.init()
|
},
|
onSearch(val) {
|
this.list = []
|
this.loading = true
|
let objForm = {}
|
if (this.orgType == 1 && !this.$route.query.merId) {
|
objForm = {
|
searchKey: this.value,
|
// storeId: this.storeId,
|
}
|
} else {
|
objForm = {
|
searchKey: this.value,
|
// storeId: this.storeId,
|
merId: this.merId,
|
}
|
}
|
this.$api.storeStoreList(objForm).then(res => {
|
if (res.body.storeList.length < 10) {
|
this.list = [...this.list, ...res.body.storeList]
|
this.storeId = ''
|
this.finished = true
|
this.loading = false
|
} else {
|
this.list = [...this.list, ...res.body.storeList]
|
this.storeId = this.list[this.list.length - 1].storeId
|
this.finished = false
|
this.loading = false
|
}
|
})
|
}
|
|
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.stores-box {
|
background-color: @c-bg-f5;
|
padding-top: 44px;
|
|
.btn {
|
position: fixed;
|
width: 50px;
|
height: 50px;
|
padding: 0;
|
right: 8px;
|
bottom: 68px;
|
border-radius: 50%;
|
color: @c-text-f5;
|
z-index: @zIndex-50;
|
box-shadow: 0px 5px 9px 0px rgba(80, 47, 183, 0.2);
|
background: linear-gradient(
|
0deg,
|
rgba(106, 79, 188, 1),
|
rgba(137, 110, 219, 1)
|
);
|
|
.inner {
|
display: flex;
|
flex-direction: column;
|
}
|
|
.text {
|
.lh(15px);
|
}
|
}
|
|
//搜索框
|
.search {
|
margin-top: 10px;
|
padding: 15px 8px;
|
}
|
|
.item-box {
|
background-color: @c-bg-fff;
|
padding-bottom: 25px;
|
}
|
|
.stores-item {
|
height: 67px;
|
margin: 0 8px 10px;
|
padding-left: 12px;
|
box-shadow: 0px 0px 5px 0px rgba(66, 61, 93, 0.08);
|
border-radius: 3px;
|
|
.icon-box {
|
width: 32px;
|
height: 32px;
|
margin-right: 15px;
|
border-radius: 50%;
|
background-color: @c-bg-black;
|
}
|
|
.name {
|
margin-bottom: 5px;
|
font-weight: bold;
|
width: 200px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
|
.opr-btn {
|
.lh(25px);
|
margin-right: 0px;
|
padding: 0 12px;
|
background: @c-bg-default;
|
border-radius: 13px;
|
color: @c-text-fff;
|
}
|
}
|
}
|
</style>
|
