1、弹窗里面嵌套路由，项目总结-vue-insurance-web-官网（yezhuwuyou）

1、我的订单列表-申请修改流程


这个流程是几个弹窗，里面的内容有很多步骤，是靠路由实现的

		 <el-dialog
	        class="correction"
	        :visible.sync="correctionDialogVisible"
	        :before-close="handleClose"
	        :close-on-click-modal="false"
	        width="1182px">
	        <div class="stepBox">
	          <div class="step-1" :class="{active:stepIndex > 0}">
	            <p>1</p>
	            <p>填写修改信息</p>
	          </div>
	          <div class="step-dot" :class="{active:stepIndex > 0}">...</div>
	          <div class="step-2" :class="{active:stepIndex > 1}">
	            <p>2</p>
	            <p>上传材料</p>
	          </div>
	          <div class="step-dot" :class="{active:stepIndex >1}">...</div>
	          <div class="step-3" :class="{active:stepIndex > 2}">
	            <p>3</p>
	            <p>修改完成</p>
	          </div>
	        </div>
	        <div slot="title" class="correction-title">修改流程</div>
	        <nuxt-child :orderId="orderId" :insuranceProductType="insuranceProductType" :id="correctId" @changeId="(e)=> { correctId = e }" @changeStepIndex="(e) =>{ stepIndex = e }" @on-close="handleClose" :detail="childDetail" @setDetail="(e)=>{childDetail = e}"></nuxt-child>
	      </el-dialog>
	

		 <nuxt-child :orderId="orderId" :insuranceProductType="insuranceProductType" :id="correctId" @changeId="(e)=> { correctId = e }" @changeStepIndex="(e) =>{ stepIndex = e }" @on-close="handleClose" :detail="childDetail" @setDetail="(e)=>{childDetail = e}"></nuxt-child>

@changeId="(e)=> { correctId = e }" 这个函数在firstStep.vue文件里面，是第一步的操作
 this.$emit("changeId",res.data.id)
 firstStep.vue文件：
		 this.$axios({
      url: "/api/order/v1/correct/add",
      method: "post",
      data: body
    })
    .then(res => {
        this.$emit("changeId",res.data.id)
        this.$router.push({
          path: "/myInsurance/secondStep"
        });
    })
    .catch(err => {
      this.$message({
        message: err.message,
        type: "error"
      });
    });



	@changeStepIndex="(e) =>{ stepIndex = e }"这个函数在每一个步骤的文件中都有：
	判断步骤到了第几步
	 mounted(){
    this.$emit("changeStepIndex",2);
}

	 @setDetail="(e)=>{childDetail = e}"这个操作是获取详情
	   this.$emit("setDetail", res.data);
	  firstStep.vue文件：
	   getInfoDetail() {
  this.$axios({
    url: "/api/order/v1/correct/detail",
    params: {
      orderId: this.orderId
    }
  }).then(res => {
      this.detail = res.data;
      this.$emit("setDetail", res.data);
    })
    .catch(err => {
      this.$message({
        message: err.message,
        type: "error"
      });
    });
},