代理新增编辑门店信息功能完成

zhouhao

2021-11-03 91ca5d3a9d43f1b73fe6ff1b8a0d5dda599fbb7d

代理新增编辑门店信息功能完成

 src/api/index.js

@@ -124,6 +124,11 @@
  merAudit(data) {
    return $http.post("/merchant/audit", data);
  },
  
  //更新商户信息
  updateMer(data) {
    return $http.post("/merchant/updateMer", data);
  },

  // /merchant/auditList

@@ -150,7 +155,7 @@
  },
  //编辑门店
  storeEdit(data) {
    return $http.post("/store/edit", data);
    return $http.post("/store/update", data);
  },
  //添加门店
  storeAdd(data) {

 src/store/index.js

@@ -304,6 +304,14 @@
                            path: '/user/register'
                        });
                    }
                    if (orgType === 1) {   // 代理角色新增门店管理功能
                        userPage.push({
                            powerId: 100004,
                            icon: 'iconshanghuguanli',
                            label: '门店管理',
                            path: '/mine/stores'
                        });
                    }
                    commit(SET_FOOTER_NAV, footernav);
                    commit(SET_USER_PAGE, userPage);
                    commit(SET_USER_INFO, data.body);

 src/views/mine/mer/mer-info.vue

@@ -7,7 +7,7 @@
 -->
<template>
    <div class="mer-info-box h-100-g">
        <v-navbar title="商户信息" fixed></v-navbar>
        <v-navbar title="商户信息"  fixed rightText="保存" @right-click="Save"></v-navbar>

        <div class="content">
            <div class="cell-group">
@@ -15,7 +15,7 @@
                <v-cell v-model="info.merName" :Show_input="false" label='商户名称' icon='iconmobanguanliliebiao' readonly placeholder='请输入营业执照号' @click.native="copyText"></v-cell>
                <v-cell v-model="info.licenseNo" :Show_input="false" label='营业执照号' icon='iconyinhangka' readonly placeholder='请输入身份证号'></v-cell>
                <v-cell v-model="Addrs" :Show_input="false" label='所在地区' icon='icondingwei' readonly placeholder='请选择'></v-cell>
                <v-cell v-model="info.addr.dtlAddr" :Show_input="false" label='详细地址' icon='icontishi' readonly placeholder='请输入详细地址'></v-cell>
                <v-cell v-model="info.addr.dtlAddr"  label='详细地址' icon='icontishi' placeholder='请输入详细地址'></v-cell>
            </div>

            <div class="cell-group">
@@ -119,7 +119,12 @@
                    // on cancel
                });
            },

          Save(){  //保存
               if(this.info.addr.dtlAddr=='' || this.info.addr.dtlAddr==null ) return  this.$notify({ type: 'danger', message: '请输入详细地址！' }) 
                this.$api.updateMer({merId:this.$route.query.merId,addr:{...this.info.addr}}).then(res=>{
                     this.$notify_success('更新商户信息成功！')
                })
          }
        }
    }
</script>

 src/views/mine/stores/stores-detail.vue

@@ -16,10 +16,10 @@
    </div>

    <div class="cell-group">
      <v-cell v-model="form.priName" :max="6" label="负责人姓名" :readonly="true" placeholder="负责人姓名"></v-cell>
      <v-cell v-model="form.priMblNo" :max="11" type="tel" label="负责人手机号" :readonly="true" placeholder="负责人手机号"></v-cell>
      <v-cell v-model="form.priEmail" :max="50" label="联系邮箱" :readonly="true" placeholder="联系邮箱"></v-cell>
      <v-cell v-model="form.priIdNo" :max="18" label="负责人身份证号" :readonly="true" placeholder="负责人身份证号"></v-cell>
      <v-cell v-model="form.priName" :max="6" label="负责人姓名"  placeholder="负责人姓名"></v-cell>
      <v-cell v-model="form.priMblNo" :max="11" type="tel" label="负责人手机号"  placeholder="负责人手机号"></v-cell>
      <v-cell v-model="form.priEmail" :max="50" label="联系邮箱"  placeholder="联系邮箱"></v-cell>
      <v-cell v-model="form.priIdNo" :max="18" label="负责人身份证号"  placeholder="负责人身份证号"></v-cell>
      <v-cell v-model="form.outChanNo" :max="18" label="渠道编码" :readonly="true" placeholder="渠道编码"></v-cell>
    </div>

@@ -145,6 +145,10 @@
          },
          dtlAddr: this.form.dtlAddr,
        },
          priEmail:this.form.priEmail,
          priIdNo:this.form.priIdNo,
          priMblNo:this.form.priMblNo,
          priName:this.form.priName,
        storeId: this.$route.query.storeId,
      };


 src/views/mine/stores/stores.vue

@@ -6,19 +6,12 @@
<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"/>
    <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,184 @@
      </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="orgType!=1">
      <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: '',
    }
  },
  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) {
        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
      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
        }
      })
    }


  }
}
</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>