门店名称长度限制，以及升档

zhaoxiaoqiang

2021-08-30 151dcafcc9b5a91b544b65bd6a0e822cbd60e19b

门店名称长度限制，以及升档

 src/views/main/product.vue

@@ -7,7 +7,6 @@
 -->
<template>
  <div class="product-box h-100-g">

    <nav class="product-title">
      产品管理
    </nav>
@@ -17,217 +16,198 @@
      <p>支付宝扫码收款</p>
    </div>


    <div class="product-list grid">
      <div class="list-title">办理分期</div>
      <div class="item flex-center-g" @click="handlerClick(item)" v-for="(item, index) in menu" :key="index" :class="item.icon.replace('#','')">
        <div class="text-center-g" >
          <svg class="icon"  aria-hidden="true" :style="{fill:item.color}">
      <div class="item flex-center-g" @click="handlerClick(item)" v-for="(item, index) in menu" :key="index" :class="item.icon.replace('#', '')">
        <div class="text-center-g">
          <svg class="icon" aria-hidden="true" :style="{ fill: item.color }">
            <use :xlink:href="item.icon"></use>
          </svg>
          <p class="label">{{item.label}}</p>
          <p class="label">{{ item.label }}</p>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "product",
    data() {
      return {
        // 菜单栏
        menu: [
          {
            icon: '#iconxinyongkafenqi',
            label: '信用卡分期',
            path: '',
            color:'#896EDB'
export default {
  name: "product",
  data() {
    return {
      // 菜单栏
      menu: [
        {
          icon: "#iconxinyongkafenqi",
          label: "信用卡分期",
          path: "",
          color: "#896EDB",
        },
        {
          icon: "#iconhuabeifenqi",
          label: "花呗分期",
          color: "#896EDB",
        },
        {
          icon: "#iconshoujifenqi",
          label: "手机分期",
          color: "#896EDB",
        },
        {
          icon: "#icongoujizhijiang",
          label: "购机直降",
          color: "#ccc",
        },
        {
          icon: "#iconzhixianghua",
          label: "智享花",
          color: "#896EDB",
        },
        {
          icon: "#iconzhixianghua",
          label: "信用购",
          color: "#896EDB",
        },
        {
          icon: "#icondangmianfu",
          label: "商户收款",
          color: "#ccc",
        },
        {
          icon: "#iconhuabeiheyueji",
          label: "花呗合约机",
          color: "#896EDB",
        },
        {
          icon: "#iconhuabeitie",
          label: "花呗提额",
          color: "#896EDB",
        },
      ],
    };
  },
  created() {
    // this.openAuto();
  },
  methods: {
    openAuto() {
      let openId = window.localStorage.getItem("pOpenId");
      let codeId = window.localStorage.getItem("pCodeId");
      alert("openId:" + openId);
      alert("codeId:" + codeId);
      if (codeId == undefined) {
        var strUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + "wx594ab33e0466eccf" + "&redirect_uri=" + "https%3a%2f%2fsie.jycash.cn%2fsib_wx_scoren%2f%23%2f" + "&response_type=code&scope=snsapi_userinfo" + "#wechat_redirect";
        window.location.href = strUrl;
      } else if (openId == undefined) {
        this.$api.getWeChatUserInfo({ code: codeId }).then(
          (res) => {
            let openId = res.body;
            window.localStorage.setItem("pOpenId", openId);
            this.$api.setUserOpenId({ openId: openId }).then(
              (res) => {
                alert("updateOpenId:" + openId);
              },
              (error) => {
                statusCodeManage.showTipOfStatusCode(error, this);
              }
            );
          },
          {
            icon: '#iconhuabeifenqi',
            label: '花呗分期',
            color:'#896EDB'
          },
          {
            icon: '#iconshoujifenqi',
            label: '手机分期',
            color:'#896EDB'
          },
          {
            icon: '#icongoujizhijiang',
            label: '购机直降',
            color:'#ccc'
          },
          {
            icon: '#iconzhixianghua',
            label: '智享花',
            color:'#896EDB'
          },
          {
            icon: '#iconzhixianghua',
            label: '信用购',
            color:'#896EDB'
          },
          {
            icon: '#icondangmianfu',
            label: '商户收款',
            color:'#ccc'
          },
          {
            icon: '#iconhuabeiheyueji',
            label: '花呗合约机',
            color:'#896EDB'
          },
          {
            icon: '#iconhuabeitie',
            label: '花呗提额',
            color:'#896EDB'
          },

        ]
          (error) => {
            statusCodeManage.showTipOfStatusCode(error, this);
          }
        );
      }
    },
    created() {
       // this.openAuto();
    handlerClick(item) {
      if (item.path) {
        this.$router.push(item.path);
        return false;
      }

      switch (item.label) {
        case "信用卡分期":
          this.Click_XYK();
          break;
        case "花呗分期":
          this.Click_HBFQ();
          break;
      }
    },
    methods: {
        openAuto(){
            let openId = window.localStorage.getItem("pOpenId");
            let codeId = window.localStorage.getItem("pCodeId");
            alert("openId:"+openId);
            alert("codeId:"+codeId);
            if(codeId == undefined) {
                var strUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + "wx594ab33e0466eccf" +
                    "&redirect_uri=" + "https%3a%2f%2fsie.jycash.cn%2fsib_wx_scorem%2f%23%2f" + "&response_type=code&scope=snsapi_userinfo" + "#wechat_redirect";
                window.location.href = strUrl;
            }else if(openId ==  undefined){
                this.$api.getWeChatUserInfo({"code":codeId}).then(
                    res => {
                        let openId = res.body;
                        window.localStorage.setItem("pOpenId",openId);
                        this.$api.setUserOpenId({"openId":openId}).then(
                            res => {
                                alert("updateOpenId:"+ openId);
                            },
                            error => {
                                statusCodeManage.showTipOfStatusCode(error, this);
                            }
                        );
                    },
                    error => {
                        statusCodeManage.showTipOfStatusCode(error, this);
                    }
                );
            }
        },
      handlerClick(item) {
        if (item.path) {
          this.$router.push(item.path);
          return false;
        }

        switch (item.label) {
          case '信用卡分期':
            this.Click_XYK();
            break;
          case '花呗分期':
            this.Click_HBFQ();
            break;
        }
      },
    //信用卡分期点击
    Click_XYK() {},


      //信用卡分期点击
      Click_XYK() {

      },

      //花呗分期
      Click_HBFQ() {
      },


    }
  }
    //花呗分期
    Click_HBFQ() {},
  },
};
</script>

<style scoped lang="less">
  .product-box {
      padding-bottom: 100px;
.product-box {
  padding-bottom: 100px;

    //产品标题
    .product-title {
      .lh(44px);
      background: @c-black;
      font-size: @font-16;
      color: @c-fff;
      font-weight: bold;
      text-align: center;
    }


    .alipay{
      width: 360px;
      margin: 0 auto;
      .flex(center,center,warp,column);
      margin-top: 20px;
      min-height: 130px;
      background-color: @c-fff;
      .van-icon{
        font-size: 55px;
        margin-bottom: 15px;
        color: @c-default;
      }
      p{
        font-size: @font-12;
        color: @c-default;
      }
    }


    //产品列表
    .grid {
      margin: 15px auto 0 auto;
      width: 360px;
      background-color: @c-bg-fff;
      .flex(flex-start, center, wrap);
      z-index: @zIndex-20;
      box-shadow: 0 8px 20px 0 rgba(66, 61, 93, 0.05);
      border-radius: 3px;
      .item {
        width: 120px;
        height: 122px;
      }
      .icon{
        width:35px;
        height:35px;
       /* fill:@c-default;*/
      }
      .label {
        margin-top: 15px;
        color: @c-text-666;
      }
    }



    .list-title{
      width: 100%;
      .lh(44px);
      padding-left: 25px;
      border-bottom: 1px solid #c7c7c7;
    }


    //单独修改某一单元格样式
    .iconshoujifenqi{

    }



  //产品标题
  .product-title {
    .lh(44px);
    background: @c-black;
    font-size: @font-16;
    color: @c-fff;
    font-weight: bold;
    text-align: center;
  }

  .alipay {
    width: 360px;
    margin: 0 auto;
    .flex(center, center, warp, column);
    margin-top: 20px;
    min-height: 130px;
    background-color: @c-fff;
    .van-icon {
      font-size: 55px;
      margin-bottom: 15px;
      color: @c-default;
    }
    p {
      font-size: @font-12;
      color: @c-default;
    }
  }

  //产品列表
  .grid {
    margin: 15px auto 0 auto;
    width: 360px;
    background-color: @c-bg-fff;
    .flex(flex-start, center, wrap);
    z-index: @zIndex-20;
    box-shadow: 0 8px 20px 0 rgba(66, 61, 93, 0.05);
    border-radius: 3px;
    .item {
      width: 120px;
      height: 122px;
    }
    .icon {
      width: 35px;
      height: 35px;
      /* fill:@c-default;*/
    }
    .label {
      margin-top: 15px;
      color: @c-text-666;
    }
  }

  .list-title {
    width: 100%;
    .lh(44px);
    padding-left: 25px;
    border-bottom: 1px solid #c7c7c7;
  }

  //单独修改某一单元格样式
  .iconshoujifenqi {
  }
}
</style>

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

 src/views/user/loginByWx.vue

@@ -9,35 +9,13 @@
  <div class="login-by-wx">
    <div class="height-44" v-if="showContent">登录</div>
    <div class="info-box" v-if="showContent">
      <van-field
        v-model="phoneNum"
        type="tel"
        clearable
        maxlength="11"
        left-icon="phone-o left-icon"
        placeholder="请输入手机号码"
      />
      <van-field
        v-model="code"
        type="number"
        clearable
        maxlength="4"
        left-icon="envelop-o left-icon"
        input-align="left"
        placeholder="请输入短信验证码"
      >
      <van-field v-model="phoneNum" type="tel" clearable maxlength="11" left-icon="phone-o left-icon" placeholder="请输入手机号码" />
      <van-field v-model="code" type="number" clearable maxlength="4" left-icon="envelop-o left-icon" input-align="left" placeholder="请输入短信验证码">
        <template #button>
          <van-button color="#896EDB" style="width:60px" size="mini" @click="getCode" :disabled="isDisabled" plain type="info">{{btnText}}</van-button>
          <van-button color="#896EDB" style="width:60px" size="mini" @click="getCode" :disabled="isDisabled" plain type="info">{{ btnText }}</van-button>
        </template>
      </van-field>
      <van-button
        round
        type="info"
        color="#896EDB"
        style="width: 100%; margin-top: 150px"
        @click="loginhanld"
        >登录</van-button
      >
      <van-button round type="info" color="#896EDB" style="width: 100%; margin-top: 150px" @click="loginhanld">登录</van-button>
    </div>
    <div v-if="!showContent"></div>
  </div>
@@ -45,9 +23,9 @@
<script>
import LoginBox from "../../components/common/h-login-box.vue";
import { GoWeChat } from "../../utils/wechat";
import { mapActions } from 'vuex';
import Vue from 'vue';
import { Toast } from 'vant';
import { mapActions } from "vuex";
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);
export default {
@@ -63,20 +41,19 @@
      showContent: false, //显示内容或者输入框
      urlCode: "", //授权后回调链接上截取的code值
      timer: "", //定时器
      isDisabled:false,
      isDisabled: false,
    };
  },
  created() {

    if(!sessionStorage.sib_wx_merId || typeof sessionStorage.sib_wx_merId == 'undefined'){
      sessionStorage.sib_wx_merId = location.href.split('?')[1].split('=')[1]
    if (!sessionStorage.sib_wx_merId || typeof sessionStorage.sib_wx_merId == "undefined") {
      sessionStorage.sib_wx_merId = location.href.split("?")[1].split("=")[1];
    }
    clearTimeout(this.timer);
    this.urlCode = this.getUrlCode("code");
    this.init();
  },
  methods: {
    ...mapActions(['loginByOpenId']),
    ...mapActions(["loginByOpenId"]),
    /**
     * @description:初始化授权
     * @returns void
@@ -87,49 +64,47 @@
      // 模拟数据本地调试
      // this.openId = "oJbj21YwUatdNaYf3iEPwwGtWuUg";
      //this.urlCode = "021qXn000q9GCK1xU7300xMP1p0qXn0A";
      if (
        (!this.openId && !this.urlCode) ||
        (typeof this.openId == "undefined" && !this.urlCode)
      ) {
      if ((!this.openId && !this.urlCode) || (typeof this.openId == "undefined" && !this.urlCode)) {
        let url = location.host;
        // url = "t.finlean.com";
        var str = encodeURIComponent(`https://${url}/sib_wx_scorem/#/loginByWx`);
        var str = encodeURIComponent(`https://${url}/sib_wx_scoren/#/loginByWx`);
        var fn = new GoWeChat("wx594ab33e0466eccf", str);
        fn.gocontract();
      } else {
        if(!this.openId && this.urlCode){
          this.$api.getWeChatUserInfo({
            code:this.urlCode
          }).then(res=>{
            this.openId = res.body
        if (!this.openId && this.urlCode) {
          this.$api
            .getWeChatUserInfo({
              code: this.urlCode,
            })
            .then((res) => {
              this.openId = res.body;

            this.showContent = true;
          })
        }
        else if(this.openId && !this.urlCode){
          this.$api.checkOpenIdIsBind({
            wechatOpenId:this.openId,
            merId:sessionStorage.sib_wx_merId
          }).then(res=>{
              this.showContent = true;
              if(res.body.isBind === 1){
                  localStorage.sib_wx_mblNo = res.body.mblNo
                  localStorage.sib_wx_userId = res.body.userId
                  this.loginByOpenId({
                      vm: this,
                      loginType:2,
                      verCode:this.code,
                      mblNo:res.body.mblNo,
                      merId:sessionStorage.sib_wx_merId,
                      wechatOpenId:this.openId,
                      userId:res.body.userId
                  })
                  // this.$router.push('/mine/toggle-identity?title=选择门店')
            });
        } else if (this.openId && !this.urlCode) {
          this.$api
            .checkOpenIdIsBind({
              wechatOpenId: this.openId,
              merId: sessionStorage.sib_wx_merId,
            })
            .then((res) => {
              this.showContent = true;
              if (res.body.isBind === 1) {
                localStorage.sib_wx_mblNo = res.body.mblNo;
                localStorage.sib_wx_userId = res.body.userId;
                this.loginByOpenId({
                  vm: this,
                  loginType: 2,
                  verCode: this.code,
                  mblNo: res.body.mblNo,
                  merId: sessionStorage.sib_wx_merId,
                  wechatOpenId: this.openId,
                  userId: res.body.userId,
                });
                // this.$router.push('/mine/toggle-identity?title=选择门店')
              }
          })
            });
        }


      }
    },
    /**
@@ -137,13 +112,7 @@
     * @returns void
     * **/
    getUrlCode(name) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
      return decodeURIComponent((new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(location.href) || [, ""])[1].replace(/\+/g, "%20")) || null;
    },
    /**
     * @description:倒计时
@@ -154,38 +123,38 @@
      time = time - 1;
      if (time === 0) {
        clearTimeout(this.timer);
        this.btnText = '重新获取'
        this.isDisabled = false
        this.btnText = "重新获取";
        this.isDisabled = false;
      } else {
        this.isDisabled = true
        this.isDisabled = true;
        this.timer = setTimeout(() => {
          this.btnText = `${time}S`;
          this.timeOut(time);
        }, 1000);
      }
    },
    loginhanld(){
    loginhanld() {
      let v = this.$tool;
      if(v.checkValEmpty(this.phoneNum)){
        Toast.fail('请输入手机号');
      if (v.checkValEmpty(this.phoneNum)) {
        Toast.fail("请输入手机号");
        return;
      }
      if(!v.checkPhone(this.phoneNum)){
        Toast.fail('请输入姓名');
      if (!v.checkPhone(this.phoneNum)) {
        Toast.fail("请输入姓名");
        return;
      }
      if(v.checkValEmpty(this.code)){
        Toast.fail('请输入验证码');
      if (v.checkValEmpty(this.code)) {
        Toast.fail("请输入验证码");
        return;
      }
      this.loginByOpenId({
          vm: this,
          loginType:1,
          verCode:this.code,
          mblNo:this.phoneNum,
          merId:sessionStorage.sib_wx_merId,
          wechatOpenId:this.openId
      })
        vm: this,
        loginType: 1,
        verCode: this.code,
        mblNo: this.phoneNum,
        merId: sessionStorage.sib_wx_merId,
        wechatOpenId: this.openId,
      });

      // this.$api.loginByOpenId({
      //   loginType:1,
@@ -200,14 +169,16 @@
      //   this.$router.push('/mine/toggle-identity?title=选择门店')
      // })
    },
    getCode(){
      this.$api.userSendMsg({
        verCodeType:2,
        mblNo:this.phoneNum
      }).then(res=>{
        this.timeOut(60)
      })
    }
    getCode() {
      this.$api
        .userSendMsg({
          verCodeType: 2,
          mblNo: this.phoneNum,
        })
        .then((res) => {
          this.timeOut(60);
        });
    },
  },
};
</script>

 src/views/user/register-home.vue

@@ -16,18 +16,15 @@
        </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.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.dtlAddr" clearable maxlength="64" placeholder="请输入您的详细地址" />
          <!-- 扫码进入页面的没有邀请码 -->
          <van-button :color="$store.state.backColor" class="btn" @click="nextStep">下一步</van-button>
          <!-- <van-cell v-if="ShowqrCode" :readonly="true" :value="form.licenseNo"
@@ -35,35 +32,23 @@
          </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>

@@ -75,14 +60,13 @@
        <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;">
@@ -92,305 +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() {
      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 = {
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: "",
      },
      nextStep() {
      isShowArea: false,
      getQr: false,

        /**
         *  第一步
         * */
        if (this.step === 0) {
          if (!this.validatorForm(this.ruleOne)) return
          // if(!this.$route.query.orgId){
          //   if (!this.getQr) {
          //     this.$notify('请识别二维码');
          //     return;
          //   }
          // }
      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() {
    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
          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;
        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({
@@ -399,87 +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) {
            }
          }
        );
      }

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

 webpack.common.js

@@ -6,124 +6,123 @@
 * @Description:
 */
//  webpack通用配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const vuxLoader = require('vux-loader');
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const vuxLoader = require("vux-loader");
let env = process.env.NODE_ENV;
//打包地址
let srcUrl = '/sib_wx_scorem/'
let srcUrl = "/sib_wx_scoren/";
module.exports = {
    entry: {
        index: "./src/index.js",
  entry: {
    index: "./src/index.js",
  },
  output: {
    filename: "js/[name].js",
    path: path.resolve(__dirname, "dist"),
    publicPath: env ? "/sib_wx_scoren/" : "/", //根据线上项目路径更改 /projectpath
  },
  /**防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖，
   * 简而言之：就是使用cdn~不打包这些变量引用的文件，生成环境时需要在index.html中手动引入cdn
   */
  externals: {
    vue: "Vue",
    axios: "axios",
    vuex: "Vuex",
    router: "VueRouter",
  },
  resolve: {
    extensions: [".vue", ".js", ".less"],
    alias: {
      //别名配置
      "@": path.resolve(__dirname, "src"),
    },
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: env ? '/sib_wx_scorem/' : '/' //根据线上项目路径更改 /projectpath
    },
    /**防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖，
     * 简而言之：就是使用cdn~不打包这些变量引用的文件，生成环境时需要在index.html中手动引入cdn
     */
    externals: {
        vue: "Vue",
        axios: "axios",
        vuex: "Vuex",
        router: "VueRouter",
    },
    resolve: {
        extensions: ['.vue', '.js', '.less'],
        alias: { //别名配置
            "@": path.resolve(__dirname, 'src')
        }
    },
    module: {
        rules: [{
                test: /\.(svg|ttf|eot|woff)\??.*$/,
                loader: "url-loader?limit=10000"
  },
  module: {
    rules: [
      {
        test: /\.(svg|ttf|eot|woff)\??.*$/,
        loader: "url-loader?limit=10000",
      },
      {
        test: /\.css$/,
        use: [env ? MiniCssExtractPlugin.loader : "vue-style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: [
          env ? MiniCssExtractPlugin.loader : "vue-style-loader",
          "css-loader",
          "postcss-loader", //posscss-loader顺序一定要在less-loader前面~不然无法解析
          "less-loader",
          // 全局注入less变量，在所有vue组件中可使用
          // 不能写不接受变量的死类名在这些文件里，不然每个vue文件都会注入这些css类，打包后增加css体积！
          {
            loader: "style-resources-loader",
            options: {
              patterns: [path.resolve(__dirname, "src/style/mixins.less")],
            },
            {
                test: /\.css$/,
                use: [
                    env ? MiniCssExtractPlugin.loader : "vue-style-loader",
                    'css-loader',
                    "postcss-loader",
                ],
          },
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)/, //处理图片
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 100000,
              outputPath: "img/",
              // publicPath: `${srcUrl}img`
              publicPath: `/img`,
            },
            {
                test: /\.less$/,
                use: [
                    env ? MiniCssExtractPlugin.loader : "vue-style-loader",
                    'css-loader',
                    "postcss-loader", //posscss-loader顺序一定要在less-loader前面~不然无法解析
                    'less-loader',
                    // 全局注入less变量，在所有vue组件中可使用
                    // 不能写不接受变量的死类名在这些文件里，不然每个vue文件都会注入这些css类，打包后增加css体积！
                    {
                        loader: 'style-resources-loader',
                        options: {
                            patterns: [
                                path.resolve(__dirname, 'src/style/mixins.less'),
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)/, //处理图片
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 100000,
                        outputPath: 'img/',
                        // publicPath: `${srcUrl}img`
                        publicPath: `/img`
                    }
                }]
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        // @vue/babel-preset-jsx  vue jsx语法支持
                        presets: ['@babel/preset-env', '@vue/babel-preset-jsx'],
                        plugins: ["dynamic-import-webpack"], //import 函数支持，需要安装
                        // plugins: ["@babel/plugin-transform-runtime"]
                    }
                }
            },
        ]
    },
    plugins: [
        // 静态目录
        new CopyPlugin([{
            from: path.resolve(__dirname, 'static'),
            to: 'static',
        }, ]),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html', //以这个文件作为模板
            filename: 'index.html', //打包后的文件名
            title: 'Vue_webpack',
            hash: true,
            minify: {
                removeComments: true, //移除注释
                collapseWhitespace: true,
                removeEmptyAttributes: true, //移除空属性
                removeAttributeQuotes: true //移除属性html标签属性的引号 ""
            },
        }),
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            // @vue/babel-preset-jsx  vue jsx语法支持
            presets: ["@babel/preset-env", "@vue/babel-preset-jsx"],
            plugins: ["dynamic-import-webpack"], //import 函数支持，需要安装
            // plugins: ["@babel/plugin-transform-runtime"]
          },
        },
      },
    ],
}

  },
  plugins: [
    // 静态目录
    new CopyPlugin([
      {
        from: path.resolve(__dirname, "static"),
        to: "static",
      },
    ]),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: "./public/index.html", //以这个文件作为模板
      filename: "index.html", //打包后的文件名
      title: "Vue_webpack",
      hash: true,
      minify: {
        removeComments: true, //移除注释
        collapseWhitespace: true,
        removeEmptyAttributes: true, //移除空属性
        removeAttributeQuotes: true, //移除属性html标签属性的引号 ""
      },
    }),
  ],
};

// module.exports = vuxLoader.merge(webpackConfig, {
//     plugins: [{