升档加门店管理新增按钮

zhaoxiaoqiang

2021-11-07 c0457bf3334ca6d7b2db01fa1d6739b48ed3535c

 src/views/user/register-home.vue

@@ -16,90 +16,57 @@
        </div>
      </v-navbar>


      <div class="register-home-box">


        <!-- 步骤一 -->
        <div class="step1" v-if="step == 0">
          <van-field v-model.trim="form.merName" clearable maxlength='80' placeholder="请输入商户名称" />
          <van-field v-model.trim="form.licenseNo" clearable maxlength='20' placeholder="请输入营业执照号" />
          <van-field v-model.trim="form.legalName" clearable maxlength='12' placeholder="请输入法人姓名" />
          <van-field v-model.trim="form.legalIdNo" clearable maxlength='18' placeholder="请输入法人身份证号" />
          <van-field v-model.trim="form.addrText" clearable :readonly="true" right-icon="arrow"
            @click="isShowArea = !isShowArea" placeholder="请选择省市区" />
          <van-field v-model.trim="form.dtlAddr" clearable maxlength='64' placeholder="请输入您的详细地址" />
          <van-field v-model.trim="form.merName" clearable maxlength="80" placeholder="请输入商户名称" />
          <van-field v-model.trim="form.licenseNo" clearable maxlength="20" placeholder="请输入营业执照号" />
          <van-field v-model.trim="form.legalName" clearable maxlength="12" placeholder="请输入法人姓名" />
          <van-field v-model.trim="form.legalIdNo" clearable maxlength="18" placeholder="请输入法人身份证号" />
          <van-field v-model.trim="form.addrText" clearable :readonly="true" right-icon="arrow" @click="isShowArea = !isShowArea" placeholder="请选择省市区" />
          <van-field v-model.trim="form.dtlAddr" clearable maxlength="64" placeholder="请输入您的详细地址" />
          <!-- 扫码进入页面的没有邀请码 -->
          <van-field v-if="ShowqrCode"  v-model.trim="form.inviteCode"
            :placeholder="getQr ? '已扫描':'邀请码'" />
          <van-button :color="$store.state.backColor" class="btn" @click="nextStep">下一步</van-button>
          <!-- <van-cell v-if="ShowqrCode" :readonly="true" :value="form.licenseNo"
            placeholder="邀请码">
          </van-cell> -->
        </div>








        <!-- 步骤二 -->
        <div class="step2" v-if="step == 1">
          <van-field v-model.trim="form.priName" clearable maxlength='12' placeholder="请输入负责人姓名" />
          <van-field v-model.trim="form.priMblNo" type="tel" clearable maxlength='11' placeholder="请输入负责人手机号" />
          <van-field v-model.trim="form.priName" clearable maxlength="12" placeholder="请输入负责人姓名" />
          <van-field v-model.trim="form.priMblNo" type="tel" clearable maxlength="11" placeholder="请输入负责人手机号" />

          <div class="tips" :style="{color:$store.state.backColor}">*该手机号将作为登录用户名，密码将通过短信下发至手机</div>
          <div class="tips" :style="{ color: $store.state.backColor }">*该手机号将作为登录用户名，密码将通过短信下发至手机</div>

          <van-field style="margin-top: 0.3rem" v-model.trim="form.priEmail" clearable placeholder="请输入联系人邮箱" />


          <van-button :color="$store.state.backColor" class="btn" @click="nextStep">下一步</van-button>
        </div>








        <!-- 步骤三 -->
        <div class="step3" v-if="step == 2">

          <div>
            <p class="content-box">
              <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;【审慎阅读】</b>您的申请注册流程中点击同意前，应当认真阅读以下协议。请您务必审慎阅读、充分理解协议中相关条款内容。阅读协议的过程中，<u>如果您不同意相关协议或其中任何条款规定，您应立即停止注册程序。</u>
            </p>
            <div class="agreement-title" :style="{color:$store.state.backColor}"  @click="showAgreementFunc(1)">《平台使用协议》</div>
            <p class="content-box"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;【审慎阅读】</b>您的申请注册流程中点击同意前，应当认真阅读以下协议。请您务必审慎阅读、充分理解协议中相关条款内容。阅读协议的过程中，<u>如果您不同意相关协议或其中任何条款规定，您应立即停止注册程序。</u></p>
            <div class="agreement-title" :style="{ color: $store.state.backColor }" @click="showAgreementFunc(1)">《平台使用协议》</div>
            <!--<div class="agreement-title" @click="showAgreementFunc(2)">《智分期商户协议》</div>-->
          </div>

          <van-button :color="$store.state.backColor" class="btn" @click="nextStep">{{ saveText }}</van-button>
        </div>








      </div>

      <van-popup v-model="ShowAgreen">
        <div class="agreenBox">
          <div class="agreen-html" v-html="Agreend"></div>
          <div class="close-agreen" @click="ShowAgreen = false">
            <van-icon name="close" :color="$store.state.backColor"/>
            <van-icon name="close" :color="$store.state.backColor" />
          </div>
        </div>
      </van-popup>


      <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>
    <div style="font-size: 12px; color: #666;text-align: center;width: 100%;margin-top: 20px;">
@@ -109,317 +76,292 @@
</template>

<script>
  import createUserProtocol from '@/utils/createUserProtocol';
  import {
    SET_APP_LOADING
  } from '@/store/mutations-types';
  import {
    mapState,
    mapMutations
  } from 'vuex';
  export default {
    name: "register-home",
    data() {
      return {
        form: {
          //第一步
          inviteCode: '', //邀请码
          merName: '', //商户名称
          licenseNo: '', //营业执照号
          legalName: '', //法人姓名
          legalIdNo: '', //法人身份证号
          orgId: '',
          orgType: '',
          // orgId: '100001',
          // orgType: '1',
          dtlAddr: '',
          addr: {
            province: {
              code: '',
              name: ''
            },
            city: {
              code: '',
              name: ''
            },
            area: {
              code: '',
              name: ''
            },
            dtlAddr: '' //详细地址
          },
          addrText: '',


          //第二步
          priName: '', //负责人姓名
          priMblNo: '', //请输入负责人手机号
          priEmail: '', //请输入联系人邮箱

          protocol: ''
        },
        isShowArea: false,
        getQr: false,

        saveText: '下一步',
        step: 0,
        ShowAgreen: false,
        Agreend: '',


        ShowqrCode:true,

        //第一步验证
        ruleOne: [
          {
            key: "legalName",
            message: "请输入法人代表姓名",
            type: "isEmpty"
          },
          {
            key: "legalIdNo",
            message: "请输入法人代表身份证号",
            type: "isEmpty"
          },
          {
            key: "legalIdNo",
            message: "请输入正确的身份证号",
            type: "isIdCard"
          },
          {
            key: "addrText",
            message: "请选择省市区",
            type: "isEmpty"
          },
          {
            key: "dtlAddr",
            message: "请输入详细地址",
            rule: /\S/
          },
        ],




        //第二步验证
        ruleTwo: [{
            key: "priName",
            message: "请输入负责人姓名",
            type: "isEmpty"
          },
          {
            key: "priMblNo",
            message: "请输入负责人手机号",
            type: "isEmpty"
          },
          {
            key: "priMblNo",
            message: "请输入正确的负责人手机号",
            type: "isTel"
          },
          {
            key: "priEmail",
            message: "请输入联系人邮箱",
            type: "isEmpty"
          },
          {
            key: "priEmail",
            message: "请输入正确的联系人邮箱",
            type: "isEmail"
          },
        ],



      }
    },
    computed: {
      ...mapState(['areaList']),
      orgId() {
        return this.$route.query.orgId || '';
      }
    },
    created() {
      console.log(localStorage.sib_mer_sysPlat == 'undefined')
      if(this.$route.query.orgId){
        this.form.orgId = this.$route.query.orgId || '';
        this.form.orgType = this.$route.query.orgType || '';
        this.ShowqrCode = false;
      }
      this.initWXToken(location.origin + location.pathname);
    },
    methods: {
      ...mapMutations([SET_APP_LOADING]),
      back() {
        if (this.step === 0) {
          this.$router.go(-1)
        }
        this.step--;
      },

      //显示协议
      showAgreementFunc(which) {
        this.ShowAgreen = true;
        let protocol = createUserProtocol(this.form); //协议二
        this.form.protocol = protocol;
        which === 1 ? this.Agreend = agreement5 : this.Agreend = protocol;
      },

      // 验证form参数
      validatorForm(rule = []) {
        return this.$validator(this.form, rule).check(item => {
          this.$notify(item.message)
        })
      },

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


      //保存 地区选择
      setAreaValue(arr) {
        this.form.addrText = arr[0].name + '-' + arr[1].name + '-' + arr[2].name;
        this.form.addr = {
import createUserProtocol from "@/utils/createUserProtocol";
import { SET_APP_LOADING } from "@/store/mutations-types";
import { mapState, mapMutations } from "vuex";
export default {
  name: "register-home",
  data() {
    return {
      form: {
        //第一步
        inviteCode: "", //邀请码
        merName: "", //商户名称
        licenseNo: "", //营业执照号
        legalName: "", //法人姓名
        legalIdNo: "", //法人身份证号
        orgId: "",
        orgType: "",
        // orgId: '100001',
        // orgType: '1',
        dtlAddr: "",
        addr: {
          province: {
            code: arr[0].code,
            name: arr[0].name
            code: "",
            name: "",
          },
          city: {
            code: arr[1].code,
            name: arr[1].name
            code: "",
            name: "",
          },
          area: {
            code: arr[2].code,
            name: arr[2].name
            code: "",
            name: "",
          },
        }
        this.isShowArea = false;
        this.$refs.Area.reset()
          dtlAddr: "", //详细地址
        },
        addrText: "",

        //第二步
        priName: "", //负责人姓名
        priMblNo: "", //请输入负责人手机号
        priEmail: "", //请输入联系人邮箱

        protocol: "",
      },
      isShowArea: false,
      getQr: false,

      saveText: "下一步",
      step: 0,
      ShowAgreen: false,
      Agreend: "",

      ShowqrCode: true,

      nextStep() {
      //第一步验证
      ruleOne: [
        {
          key: "legalName",
          message: "请输入法人代表姓名",
          type: "isEmpty",
        },
        {
          key: "legalIdNo",
          message: "请输入法人代表身份证号",
          type: "isEmpty",
        },
        {
          key: "legalIdNo",
          message: "请输入正确的身份证号",
          type: "isIdCard",
        },
        {
          key: "addrText",
          message: "请选择省市区",
          type: "isEmpty",
        },
        {
          key: "dtlAddr",
          message: "请输入详细地址",
          rule: /\S/,
        },
      ],

        /**
         *  第一步
         * */
        if (this.step === 0) {
          if (!this.validatorForm(this.ruleOne)) return
          // if(!this.$route.query.orgId){
          //   if (!this.getQr) {
          //     this.$notify('请识别二维码');
          //     return;
          //   }
          // }
      //第二步验证
      ruleTwo: [
        {
          key: "priName",
          message: "请输入负责人姓名",
          type: "isEmpty",
        },
        {
          key: "priMblNo",
          message: "请输入负责人手机号",
          type: "isEmpty",
        },
        {
          key: "priMblNo",
          message: "请输入正确的负责人手机号",
          type: "isTel",
        },
        {
          key: "priEmail",
          message: "请输入联系人邮箱",
          type: "isEmpty",
        },
        {
          key: "priEmail",
          message: "请输入正确的联系人邮箱",
          type: "isEmail",
        },
      ],
    };
  },
  computed: {
    ...mapState(["areaList"]),
    orgId() {
      return this.$route.query.orgId || "";
    },
  },
  created() {
    if (this.$route.query.orgId) {
      this.form.orgId = this.$route.query.orgId || "";
      this.form.orgType = this.$route.query.orgType || "";
      this.ShowqrCode = false;
    }
    this.form.inviteCode = 158875;
    this.initWXToken(location.origin + location.pathname);
  },
  methods: {
    ...mapMutations([SET_APP_LOADING]),
    back() {
      if (this.step === 0) {
        this.$router.go(-1);
      }
      this.step--;
    },

    //显示协议
    showAgreementFunc(which) {
      this.ShowAgreen = true;
      let protocol = createUserProtocol(this.form); //协议二
      this.form.protocol = protocol;
      which === 1 ? (this.Agreend = agreement5) : (this.Agreend = protocol);
    },

    // 验证form参数
    validatorForm(rule = []) {
      return this.$validator(this.form, rule).check((item) => {
        this.$notify(item.message);
      });
    },

    //关闭地区弹窗
    closeAreaModal() {
      this.isShowArea = false;
      this.$refs.Area.reset();
    },
    //保存 地区选择
    setAreaValue(arr) {
      this.form.addrText = arr[0].name + "-" + arr[1].name + "-" + arr[2].name;
      this.form.addr = {
        province: {
          code: arr[0].code,
          name: arr[0].name,
        },
        city: {
          code: arr[1].code,
          name: arr[1].name,
        },
        area: {
          code: arr[2].code,
          name: arr[2].name,
        },
      };
      this.isShowArea = false;
      this.$refs.Area.reset();
    },
    nextStep() {
      /**
       *  第一步
       * */
      if (this.step === 0) {
        if (!this.validatorForm(this.ruleOne)) return;
        // if(!this.$route.query.orgId){
        //   if (!this.getQr) {
        //     this.$notify('请识别二维码');
        //     return;
        //   }
        // }
      }
      /**
       *  第二步
       * */
      if (this.step === 1) {
        if (!this.validatorForm(this.ruleTwo)) return;
        this.saveText = "同意协议";
      }

      /**
       *  第三步
       * */
      if (this.step === 2) {
        this.form.addr.dtlAddr = this.form.dtlAddr;
        this.form.protocol = createUserProtocol(this.form); //协议二
        let sysPlat = localStorage.sib_mer_sysPlat;
        if (sysPlat === "undefined" || sysPlat === "1") {
          sysPlat = 1;
        }


        /**
         *  第二步
         * */
        if (this.step === 1) {
          if (!this.validatorForm(this.ruleTwo)) return
          this.saveText = '同意协议';
        if (sysPlat === "2") {
          sysPlat = 2;
        }



        /**
         *  第三步
         * */
        if (this.step === 2) {
          this.form.addr.dtlAddr = this.form.dtlAddr
          this.form.protocol = createUserProtocol(this.form); //协议二
          let sysPlat = localStorage.sib_mer_sysPlat
          if (sysPlat === 'undefined' || sysPlat === '1') {
            sysPlat = 1
          }
          if (sysPlat === '2') {
            sysPlat = 2
          }
          this.form.sysPlat = sysPlat
          console.log(this.form);
          this.$api.merRegist(this.form).then(res => {
        this.form.sysPlat = sysPlat;
        this.$api
          .merRegist(this.form)
          .then((res) => {
            this.$toast.success(`注册成功,请耐心等待审核！`);
            if(sessionStorage.isddxt == 1){
              this.$router.push('/?platNo=ddxt');
            }else{
              this.$router.push('/');
            if (sessionStorage.isddxt == 1) {
              this.$router.push("/?platNo=ddxt");
            } else {
              this.$router.push("/");
            }

          }).catch(err=>{
          })
          .catch((err) => {
            this.step -= 1;
          });
        }
        this.step++;
      },
      }
      this.step++;
    },



      //代理所属渠道
      getRegIDAndType() {
        let _this = this;
        console.log('js 调用原生android 方法=====》');
        window.sessionStorage.removeItem('scene_regInfos');
        if (window.android && window.android.fetchQrCode) {
          _this.SET_APP_LOADING(true);
          window.android.fetchQrCode();
          let count = 0;
          let setInterId = setInterval(function () {
            let _tempStr = window.sessionStorage.getItem(
              'scene_regInfos'
            );
            count++;
            if (_tempStr && _tempStr.length > 0) {
              // QRGoBack 这个值不能修改这里的只是和android 值同步的
              if (_tempStr == 'QRGoBack') {
                // _this.getQr = false;
                _this.SET_APP_LOADING(false);
              } else {
                _tempStr = JSON.parse(_tempStr);
                _this.form.orgId = _tempStr.orgId;
                _this.form.orgType = _tempStr.orgType;
                if(_tempStr.orgId){
                  // _this.ShowqrCode = false;
                }
                _this.getQr = true;
                _this.SET_APP_LOADING(false);
    //代理所属渠道
    getRegIDAndType() {
      let _this = this;
      window.sessionStorage.removeItem("scene_regInfos");
      if (window.android && window.android.fetchQrCode) {
        _this.SET_APP_LOADING(true);
        window.android.fetchQrCode();
        let count = 0;
        let setInterId = setInterval(function() {
          let _tempStr = window.sessionStorage.getItem("scene_regInfos");
          count++;
          if (_tempStr && _tempStr.length > 0) {
            // QRGoBack 这个值不能修改这里的只是和android 值同步的
            if (_tempStr == "QRGoBack") {
              // _this.getQr = false;
              _this.SET_APP_LOADING(false);
            } else {
              _tempStr = JSON.parse(_tempStr);
              _this.form.orgId = _tempStr.orgId;
              _this.form.orgType = _tempStr.orgType;
              if (_tempStr.orgId) {
                // _this.ShowqrCode = false;
              }
              clearInterval(setInterId);
              _this.getQr = true;
              _this.SET_APP_LOADING(false);
            }
          }, 60);
        } else {
          wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              if (result && (result + '').indexOf('orgId') > -1) {
                result = JSON.parse(result);
                _this.form.orgId = result.orgId;
                _this.form.orgType = result.orgType;
                if(result.orgId){
                  // _this.ShowqrCode = false;
                }
                _this.getQr = true;
              } else {
                _this.$notify('无效的二维码');
            clearInterval(setInterId);
          }
        }, 60);
      } else {
        wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function(res) {
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            if (result && (result + "").indexOf("orgId") > -1) {
              result = JSON.parse(result);
              _this.form.orgId = result.orgId;
              _this.form.orgType = result.orgType;
              if (result.orgId) {
                // _this.ShowqrCode = false;
              }
              _this.getQr = true;
            } else {
              _this.$notify("无效的二维码");
            }
          });
        }
      },
          },
        });
      }
    },


      initWXToken(parUrl) {
        this.$api.getTokenInfo({
          url: parUrl
        }).then(
          function (res) {
    initWXToken(parUrl) {
      this.$api
        .getTokenInfo({
          url: parUrl,
        })
        .then(
          function(res) {
            if (res.errorCode === 0) {
              // 第二步骤   只需要首页地址分享 ,需要在每次变化时调用
              wx.config({
@@ -428,88 +370,77 @@
                timestamp: res.body.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.body.nonceStr, // 必填，生成签名的随机串
                signature: res.body.signature, // 必填，签名，见附录1
                jsApiList: [
                  'checkJsApi',
                  'scanQRCode',
                  'getLocation'
                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                jsApiList: ["checkJsApi", "scanQRCode", "getLocation"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
              });
            }
          },
          function (error) {
          function(error) {
            if (error.response) {
              console.log(error.response);
            }
          }
        );
      }

    }
  }
    },
  },
};
</script>

<style scoped lang="less">
  .agreement-title {
    margin-top: 25px;
.agreement-title {
  margin-top: 25px;
  color: @c-default;
}

.agreenBox {
  width: 80vw;
  height: 70vh;
  padding: 60px 20px 30px 20px;
  position: relative;
}

.agreen-html {
  width: 100%;
  height: 100%;
  overflow: scroll;
  box-sizing: border-box;
}

.close-agreen {
  .lh(30px);
  .flex(center, center);

  .van-icon {
    font-size: @font-16;
  }
}

.register-home {
  padding-top: 44px;
  padding-bottom: 100px;

  .van-cell {
    margin-top: 10px;
  }

  .register-home-box {
    padding: 10px 20px 50px;
  }

  .tips {
    font-size: @font-12;
    padding-left: 0.32rem;
    margin-top: 8px;
    color: @c-default;
  }


  .agreenBox {
    width: 80vw;
    height: 70vh;
    padding: 60px 20px 30px 20px;
    position: relative;
  .btn {
    width: 340px;
    height: 44px;
    border: none;
    margin: 40px auto;
    font-size: @font-16;
    border-radius: 22px;
    background-color: @c-bg-default;
    color: @c-text-fff;
  }

  .agreen-html {
    width: 100%;
    height: 100%;
    overflow: scroll;
    box-sizing: border-box;
  }


  .close-agreen {
    .lh(30px);
    .flex(center, center);

    .van-icon {
      font-size: @font-16;
    }
  }


  .register-home {
    padding-top: 44px;
    padding-bottom: 100px;

    .van-cell {
      margin-top: 10px;
    }

    .register-home-box {
      padding: 10px 20px 50px;


    }

    .tips {
      font-size: @font-12;
      padding-left: 0.32rem;
      margin-top: 8px;
      color: @c-default;
    }

    .btn {
      width: 340px;
      height: 44px;
      border: none;
      margin: 40px auto;
      font-size: @font-16;
      border-radius: 22px;
      background-color: @c-bg-default;
      color: @c-text-fff;
    }
  }
}
</style>