升档加门店管理新增按钮

zhaoxiaoqiang

2021-11-07 c0457bf3334ca6d7b2db01fa1d6739b48ed3535c

 src/views/mine/stores/stores.vue

@@ -5,20 +5,13 @@
-->
<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"/>
    <v-navbar title="门店管理1" 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"
      >
      <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" >
            <svg class="icon" aria-hidden="true" style="width:25px;height:25px;fill:#fff">
              <use xlink:href="#iconyonghu"></use>
            </svg>
          </p>
@@ -31,176 +24,199 @@
      </van-list>
    </div>

    <van-button class="btn" @click="$router.push(`/mine/stores-add?merId=${merId}`)">
    <van-button class="btn" @click="$router.push(`/mine/stores-add?merId=${merId}`)" v-if='isShowAdd'>
      <div class="inner">
        <van-icon name="plus"/>
        <van-icon name="plus" />
        <span class="text">新增</span>
      </div>
    </van-button>


  </div>
</template>

<script>
import { mapState } from 'vuex';
  export default {
    name: "stores",
    data() {
      return {
        value: '',
        list:[],
        loading:false,
        finished:false,
        storeId:'',
        merId:'',
      }
    },
    computed:{
      ...mapState(['userinfo'])
    },
    created(){
      this.merId = this.$route.query.merId?this.$route.query.merId:this.userinfo.orgId;
      this.init();
    },
    methods: {
      init(){
        this.loading = true
        this.$api.storeStoreList({
          searchKey:this.value,
          storeId:this.storeId,
          merId:this.merId,
        }).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
        this.$api.storeStoreList({
          searchKey:this.value,
          merId:this.merId,
        }).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
          }
        })
      }


import { mapState, mapGetters } from "vuex";
export default {
  name: "stores",
  data() {
    return {
      value: '',
      list: [],
      loading: false,
      finished: false,
      storeId: '',
      merId: '',
      merIdType:''//区分当前是商户进入当前页面或者门店进入当前页面
    }
  },
  computed: {
    ...mapState(['userinfo']),
    ...mapGetters(["orgType"]),
    isShowAdd(){
      return (this.orgType==1&&this.merIdType)||this.orgType==3;
    }
  },
  created() {
    this.merId = this.$route.query.merId ? this.$route.query.merId : this.userinfo.orgId;
    this.merIdType = this.$route.query.merId;
    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;

    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)
    );

    .btn {
      position: fixed;
      width: 50px;
      height: 50px;
      padding: 0;
      right: 8px;
      bottom: 68px;
    .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%;
      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);
      }
      background-color: @c-bg-black;
    }

    //搜索框
    .search {
      margin-top: 10px;
      padding: 15px 8px;
    .name {
      margin-bottom: 5px;
      font-weight: bold;
      width: 200px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }


    .item-box {
      background-color: @c-bg-fff;
      padding-bottom: 25px;
    .opr-btn {
      .lh(25px);
      margin-right: 0px;
      padding: 0 12px;
      background: @c-bg-default;
      border-radius: 13px;
      color: @c-text-fff;
    }


    .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>