一张订单图做一个小项目九

接下来完成订单页面   里面需要选择甲方 乙方  然后生成订单  订单中有很多种类商品  所以订单页面如下

选择甲方以后 显示甲方信息

选择确定甲方信息以后

最后下一步就去选择种类

文件目录如下  view中

components组件中结构如下

分别代码如下

//Order.vue中做好step组件  和  parta和partb的模块

<template>
    <div>
  <el-steps :active="active" finish-status="success">
  <el-step title="选择甲方" icon="el-icon-edit"></el-step>
  <el-step title="选择乙方" icon="el-icon-edit"></el-step>
  <el-step title="选择产品" icon="el-icon-edit"></el-step>
  </el-steps>
    <div v-if="active==0">
        <select-parta @next="next"></select-parta>
    </div>
     <div v-else-if="active==1">
        <select-partb @next="next"></select-partb>
    </div>
    <div v-else-if="active=2">
         订单页面
    </div>

    </div>
</template>
<script>
import  selectParta from  "../components/order/Parta"
import  selectPartb from  "../components/order/Partb"
  export default {
    data() {
      return {
        active: 0
      };
    },
    components:{
        "select-parta":selectParta,
        "select-partb":selectPartb
    },
    methods: {
      next() {
          this.active++;
          if(this.active>2){
              return false;
          }
        //if (this.active++ > 2) this.active = 0;
      }
    }
  }
</script>

//components/order/Parta.vue中   里面有  子父组件的通信

<template>
  <div style="float:left;" >
    <el-select v-model="value" placeholder="请选择"   @change = "changeItem()">
      <el-option
        v-for="item in list"
        :key="item._id"
        :label="item.partaname"
        :value="item._id"
      >
      </el-option>
    </el-select>
  <div v-show="value">
     <br/>
    <el-row type="flex"  justify="start">
      <el-col :span="24">
        <div class="grid-content bg-purple">
             <el-tag>
            电话:{{this.tel}}
             </el-tag>
        </div>
      </el-col>
    </el-row>
    <br/>
    <el-row type="flex" justify="start">
      <el-col :span="24" >
        <div class="grid-content bg-purple">
          <el-tag>
            日期:{{new Date(this.date).dateFormat("yyyy年mm月dd日")}}
          </el-tag>
        </div>
      </el-col>
    </el-row>
    <el-button style="margin-top: 12px;" type="success" @click="gotoPartb">确定甲方信息</el-button>
  </div>
  </div>
</template>
<script>
 //数据不多偷个懒 直接用列表的接口
import partaInfo from "../../model/parta";
import  {mapMutations} from "vuex";
export default {
  data() {
    return {
      value: "",
      list: [],
      partaname:"",
      tel:"",
      date:""
    };
  },
  methods:{
    ...mapMutations(["initPartaInfo"]),
      changeItem(){
         this.list.forEach(item=>{
             if(item._id==this.value){
                 //console.log(item);
                 this.partaname = item.partaname;
                 this.tel = item.tel;
                 this.date = item.date;
             }
         })
      },
      gotoPartb(){
        //完成parta的选择去partb
          this.initPartaInfo({
            partaid:this.value,
            partaname:this.partaname,
            tel:this.tel,
            date:this.date
          });
          this.$emit("next");
      }
  },
  mounted() {
    partaInfo.list().then(result => {
     // console.log(result.data.msg);
      this.list = result.data.msg;
    });
  }
};
</script>

//components/order/Partb.vue中 

<template>
  <div>
    <el-select v-model="value" placeholder="请选择"   @change = "changeItem()">
      <el-option
        v-for="item in list"
        :key="item._id"
        :label="item.partbname"
        :value="item._id"
      >
      </el-option>
    </el-select>
  <div v-show="value">
     <br/>
    <el-row type="flex"  justify="start">
      <el-col :span="24">
        <div class="grid-content bg-purple">
             <el-tag>
            电话:{{this.fax}}
             </el-tag>
        </div>
      </el-col>
    </el-row>
    <el-button style="margin-top: 12px;" type="success" @click="gotoPartb">确定乙方信息</el-button>
  </div>
  </div>
</template>
<script>
 //数据不多偷个懒 直接用列表的接口
import partbInfo from "../../model/partb";
import  {mapMutations} from "vuex";
export default {
  data() {
    return {
      value: "",
      list: [],
      partbname:"",
      fax:""
    };
  },
  methods:{
    ...mapMutations(["initPartbInfo"]),
      changeItem(){
         this.list.forEach(item=>{
             if(item._id==this.value){
                 //console.log(item);
                 this.partbname = item.partbname;
                 this.fax = item.fax;
             }
         })
      },
      gotoPartb(){
        //完成parta的选择去partb
          this.initPartbInfo({
            partbid:this.value,
            partbname:this.partbname,
            fax:this.fax
          });
          this.$emit("next");
      }
  },
  mounted() {
    partbInfo.list().then(result => {
     // console.log(result.data.msg);
      this.list = result.data.msg;
    });
  }
};
</script>

vuex中补充全局信息

    partainfo:{},//选择的甲方信息
    partbinfo:{},//选择的乙方信息
  },
  mutations: {
    initPartaInfo(state,info){
        state.partainfo = {...info};
    },