zhaoxiaoqiang
2021-05-17 af0d8cd16a8292959ee47f875b6fda4c71dcf62f
src/views/mine/stores/storeOprs.vue
New file
@@ -0,0 +1,180 @@
<!--
  店员管理-主页
-->
<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>