New file |
| | |
| | | <!-- |
| | | |
| | | 店员管理-主页 |
| | | |
| | | --> |
| | | <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.id)"> |
| | | <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.name || ''">店员名称</p> |
| | | <p class="c-text-666-g font-12-g" v-text="item.mblNo || ''">13586695442</p> |
| | | </div> |
| | | </div> |
| | | </van-list> |
| | | </div> |
| | | <van-button class="btn" @click="goAdd"> |
| | | <div class="inner"> |
| | | <van-icon name="plus"/> |
| | | <span class="text">新增</span> |
| | | </div> |
| | | </van-button> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "stores", |
| | | data() { |
| | | return { |
| | | value: '', |
| | | list:[], |
| | | loading:false, |
| | | finished:false, |
| | | storeId:'', |
| | | queryStoreId:"" |
| | | } |
| | | }, |
| | | |
| | | created(){ |
| | | this.queryStoreId =this.$route.query.storeId; |
| | | this.init(); |
| | | }, |
| | | methods: { |
| | | init(){ |
| | | this.loading = true |
| | | this.$api.storeStorePersonList({ |
| | | searchKey:this.value, |
| | | orgId:this.queryStoreId, |
| | | }).then((res) => { |
| | | if(res.body.length < 10){ |
| | | this.list = [...this.list,...res.body] |
| | | this.storeId = '' |
| | | this.finished = true |
| | | this.loading = false |
| | | }else{ |
| | | this.list = [...this.list,...res.body] |
| | | this.storeId = this.list[this.list.length-1].storeId |
| | | this.finished = false |
| | | this.loading = false |
| | | } |
| | | }) |
| | | }, |
| | | go(id) { |
| | | this.$router.push({path:'/mine/storeOprs-detail',query:{mgrId:id,storeId:this.queryStoreId}}); |
| | | }, |
| | | goAdd(){ |
| | | console.log(this.storeId) |
| | | this.$router.push({path:'/mine/storeOprs-add',query:{storeId:this.queryStoreId}}) |
| | | }, |
| | | onLoad(){ |
| | | this.init() |
| | | }, |
| | | onSearch(val){ |
| | | this.list = [] |
| | | this.loading = true |
| | | this.$api.storeStorePersonList({ |
| | | searchKey:this.value, |
| | | orgId:this.queryStoreId, |
| | | }).then(res=>{ |
| | | if(res.body.length < 10){ |
| | | this.list = [...this.list,...res.body] |
| | | this.storeId = '' |
| | | this.finished = true |
| | | this.loading = false |
| | | }else{ |
| | | this.list = [...this.list,...res.body] |
| | | 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; |
| | | box-sizing: border-box; |
| | | .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; |
| | | } |
| | | } |
| | | |
| | | |
| | | } |
| | | </style> |