接口修改

zhaoxiaoqiang

2021-08-31 20365ba048f4042dfdc223cf2a6fa8c2d5a699f3

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

@@ -1,173 +1,151 @@

<!--
    新增门店
-->

<template>
  <div class="stores-add-box h-100-g">

    <v-navbar title="新增门店" fixed></v-navbar>
    <div class="cell-group">
      <v-cell v-model="form.storeName" :max="20" label='门店名称' icon='iconyonghu' placeholder='请输入门店名称'></v-cell>
      <v-cell  label='所在地区' icon='icondingwei' @click.native="isShowArea = true;" placeholder='请选择'>
      <v-cell v-model="form.storeName" :max="100" label="门店名称" icon="iconyonghu" placeholder="请输入门店名称"></v-cell>
      <v-cell label="所在地区" icon="icondingwei" @click.native="isShowArea = true" placeholder="请选择">
        <div slot="v-cell-right" class="flex-center-g">
          <div v-if="form.areaText">{{form.areaText}}</div>
          <div v-else style="color: #a2a2a2">请选择 </div>
          <div v-if="form.areaText">{{ form.areaText }}</div>
          <div v-else style="color: #a2a2a2">请选择</div>
          <svg class="icon" aria-hidden="true" style="width:18px;height:18px;fill:#999;">
            <use xlink:href="#iconyou"></use>
            <use xlink:href="#iconyou" />
          </svg>
        </div>
      </v-cell>
      <v-cell v-model="form.dtlAddr" :max="30" label='详细地址' icon='icontishi' placeholder='请输入详细地址'></v-cell>
      <v-cell v-model="form.dtlAddr" :max="30" label="详细地址" icon="icontishi" placeholder="请输入详细地址"></v-cell>
    </div>

    <div class="cell-group">
      <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.priIdNo" :max="18" label='负责人身份证号' placeholder='请输入身份证号'></v-cell>
      <v-cell v-model="form.outChanNo" :max="20" label='渠道编码' 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.priIdNo" :max="18" label="负责人身份证号" placeholder="请输入身份证号"></v-cell>
      <v-cell v-model="form.outChanNo" :max="20" label="渠道编码" placeholder="请输入渠道编码"></v-cell>
    </div>
    <p class="tip">*该手机号将作为登录用户名，密码将通过短信发至手机</p>

    <div class="cell-group">
      <v-cell v-model="form.priEmail" :max="50" label='联系邮箱' placeholder='请输入邮箱地址'></v-cell>
      <v-cell v-model="form.priEmail" :max="50" label="联系邮箱" placeholder="请输入邮箱地址"></v-cell>
    </div>

    <footer class="flex-center-g footer">
      <van-button class="btn" @click="addStore">新增门店</van-button>
    </footer>


    <van-popup v-model="isShowArea" position="bottom" :close-on-click-overlay="false">
      <van-area ref='Area' :area-list='areaList' @cancel="closeAreaModal" @confirm="setAreaValue"></van-area>
      <van-area ref="Area" :area-list="areaList" @cancel="closeAreaModal" @confirm="setAreaValue"></van-area>
    </van-popup>

  </div>
</template>

<script>
  import { mapState } from 'vuex';
  export default {
    name: "stores-add",
    data(){
      return {
        isShowArea:false,
        Btn:false,
        form:{
          areaText:'',  //地区文字展示
          storeName:'', //门店名称
          dtlAddr:'',   //详细地址
          priName:'',   //负责人姓名
          priEmail:'',  //联系邮箱
          priMblNo:'',  //负责人手机
          priIdNo: '', //身份证号
          provCode: '',
          cityCode: '',
          areaCode: '',
          outChanNo: '',
        },
import { mapState } from "vuex";
export default {
  name: "stores-add",
  data() {
    return {
      isShowArea: false,
      Btn: false,
      form: {
        areaText: "", //地区文字展示
        storeName: "", //门店名称
        dtlAddr: "", //详细地址
        priName: "", //负责人姓名
        priEmail: "", //联系邮箱
        priMblNo: "", //负责人手机
        priIdNo: "", //身份证号
        provCode: "",
        cityCode: "",
        areaCode: "",
        outChanNo: "",
      },

        rule:[
          {key:"storeName",message:"请输入门店名称",type:"isEmpty"},
          {key:"areaText",message:"请选择地址",type:"isEmpty"},
          {key:"dtlAddr",message:"请输入详细地址",type:"isEmpty"},
          {key:"priName",message:"请输入负责人姓名",type:"isEmpty"},
          {key:"priName",message:"请输入正确的负责人姓名",rule:/^[\u4e00-\u9fa50-9a-zA-Z]{1,6}$/},
          {key:"priMblNo",message:"请输入负责人手机号",type:"isEmpty"},
          {key:"priMblNo",message:"请输入正确的手机号",type:"isTel"},
          {key:"priIdNo",message:"请输入负责人身份证号",type:"isEmpty"},
          {key:"priIdNo",message:"请输入正确的身份证号",type:"checkIDCard"},
          {key:"priEmail",message:"请输入联系邮箱",type:"isEmpty"},
          {key:"priEmail",message:"请输入正确的联系邮箱",type:"isEmail"},
        ]

      rule: [{ key: "storeName", message: "请输入门店名称", type: "isEmpty" }, { key: "areaText", message: "请选择地址", type: "isEmpty" }, { key: "dtlAddr", message: "请输入详细地址", type: "isEmpty" }, { key: "priName", message: "请输入负责人姓名", type: "isEmpty" }, { key: "priName", message: "请输入正确的负责人姓名", rule: /^[\u4e00-\u9fa50-9a-zA-Z]{1,6}$/ }, { key: "priMblNo", message: "请输入负责人手机号", type: "isEmpty" }, { key: "priMblNo", message: "请输入正确的手机号", type: "isTel" }, { key: "priIdNo", message: "请输入负责人身份证号", type: "isEmpty" }, { key: "priIdNo", message: "请输入正确的身份证号", type: "checkIDCard" }, { key: "priEmail", message: "请输入联系邮箱", type: "isEmpty" }, { key: "priEmail", message: "请输入正确的联系邮箱", type: "isEmail" }],
    };
  },
  computed: {
    ...mapState(["areaList"]),
  },
  created() {
    this.merId = this.$route.query.merId;
  },
  methods: {
    // 验证form参数
    validatorForm() {
      let v = this.$tool;
      if (v.checkValEmpty(this.form.outChanNo)) {
        v.toast("请输入渠道编码");
        return false;
      }
      return this.$validator(this.form, this.rule).check((item) => {
        this.$notify(item.message);
      });
    },
    computed:{
      ...mapState(['areaList'])

    //关闭地区弹窗
    closeAreaModal() {
      this.isShowArea = false;
      this.$refs.Area.reset();
    },
    created() {
      this.merId = this.$route.query.merId;

    //保存 地区选择
    setAreaValue(arr) {
      this.form.areaText = arr[0].name + "-" + arr[1].name + "-" + arr[2].name;
      this.form.provCode = arr[0].code;
      this.form.cityCode = arr[1].code;
      this.form.areaCode = arr[2].code;
      this.form.provName = arr[0].name;
      this.form.cityName = arr[1].name;
      this.form.areaName = arr[2].name;
      this.isShowArea = false;
      this.$refs.Area.reset();
    },
    methods:{
      // 验证form参数
      validatorForm(){
          let v = this.$tool;
          if(v.checkValEmpty(this.form.outChanNo)){
              v.toast('请输入渠道编码');
              return false;
          }
        return this.$validator(this.form,this.rule).check(item=>{
          this.$notify(item.message)
        })
      },

      //关闭地区弹窗
      closeAreaModal(){
        this.isShowArea = false;
        this.$refs.Area.reset()
      },

      //保存 地区选择
      setAreaValue(arr){
        this.form.areaText = arr[0].name + '-' +arr[1].name +'-'+ arr[2].name;
        this.form.provCode= arr[0].code;
        this.form.cityCode= arr[1].code;
        this.form.areaCode= arr[2].code;
        this.form.provName= arr[0].name;
        this.form.cityName= arr[1].name;
        this.form.areaName= arr[2].name;
        this.isShowArea = false;
        this.$refs.Area.reset()
      },


      // 新增门店
      addStore(){
        if(!this.validatorForm()) return
        if(this.Btn)return
        let list = {
          storeName: this.form.storeName,
          addr:{
            province:{
              code:this.form.provCode,
              name:this.form.provName
            },
            city:{
              code:this.form.cityCode,
              name:this.form.cityName
            },
            area:{
              code:this.form.areaCode,
              name:this.form.areaName
            },
            dtlAddr:this.form.dtlAddr
    // 新增门店
    addStore() {
      if (!this.validatorForm()) return;
      if (this.Btn) return;
      let list = {
        storeName: this.form.storeName,
        addr: {
          province: {
            code: this.form.provCode,
            name: this.form.provName,
          },
          priName: this.form.priName,
          priMblNo: this.form.priMblNo,
          priEmail: this.form.priEmail,
          priIdNo: this.form.priIdNo,
          outChanNo: this.form.outChanNo,
        };
        if(this.merId){
          list.merId = this.merId;
        }
        this.$api.storeAdd(list).then(() => {
          this.$notify('新增成功');
          this.Btn = true;
          setTimeout(() => this.$router.go(-1), 1000);
        });
          city: {
            code: this.form.cityCode,
            name: this.form.cityName,
          },
          area: {
            code: this.form.areaCode,
            name: this.form.areaName,
          },
          dtlAddr: this.form.dtlAddr,
        },
        priName: this.form.priName,
        priMblNo: this.form.priMblNo,
        priEmail: this.form.priEmail,
        priIdNo: this.form.priIdNo,
        outChanNo: this.form.outChanNo,
      };
      if (this.merId) {
        list.merId = this.merId;
      }




    }
  }
      this.$api.storeAdd(list).then(() => {
        this.$notify("新增成功");
        this.Btn = true;
        setTimeout(() => this.$router.go(-1), 1000);
      });
    },
  },
};
</script>

<style scoped lang="less">
.stores-add-box{
.stores-add-box {
  background-color: @c-bg-f5;
  padding-top: 44px;
  .tip {
@@ -176,7 +154,6 @@
    color: @c-text-999;
  }
}


.cell-group {
  margin: 10px 8px 0;
@@ -190,13 +167,10 @@
  border-radius: 22px;
  background-color: @c-bg-default;
  color: @c-text-fff;

}

.footer {
  margin-top: 60px;
  padding-bottom: 30px;
}


</style>