合并

src/views/flow/components/combo.vue

+<template>
+  <div class="combo">
+    <div class="title"><span class="point"></span>请选择套餐</div>
+    <a-radio-group
+      class="items-radios"
+      v-if="combos.type === '1'"
+      v-model="value"
+      @change="onChange"
+    >
+      <ul class="items">
+        <li class="item" v-for="(item, index) in combos.items" :key="index">
+          <a-radio :style="radioStyle" :value="item.id">
+            {{ item.title }}
+          </a-radio>
+        </li>
+      </ul>
+    </a-radio-group>
+
+    <ul class="items">
+      <li>
+        <a-checkbox-group
+          :options="combos2.items"
+          v-model="chkvalue"
+          @change="onChange"
+        >
+        </a-checkbox-group>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "componentName",
+  components: {},
+  props: {},
+  data() {
+    return {
+      value: 1,
+      chkvalue: [],
+      combos: {
+        type: "2",
+        items: [
+          {
+            id: 0,
+            title: "21招商信诺-银保客户-豪华套餐女未婚",
+          },
+          {
+            id: 1,
+            title: "22招商信诺-银保客户-豪华套餐女未婚",
+          },
+          {
+            id: 2,
+            title: "23招商信诺-银保客户-豪华套餐女未婚",
+          },
+          {
+            id: 3,
+            title: "24招商信诺-银保客户-豪华套餐女未婚",
+          },
+        ],
+      },
+      combos2: {
+        type: "1",
+        items: [
+          {
+            value: 0,
+            label: "21招商信诺-银保客户-豪华套餐女未婚",
+          },
+          {
+            value: 1,
+            label: "22招商信诺-银保客户-豪华套餐女未婚",
+          },
+          {
+            value: 2,
+            label: "23招商信诺-银保客户-豪华套餐女未婚",
+          },
+          {
+            value: 3,
+            label: "24招商信诺-银保客户-豪华套餐女未婚",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    onChange(checkedValues) {
+      console.log("checked = ", checkedValues);
+      console.log("value = ", this.chkvalue);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.combo {
+  .items-radios {
+    margin-top: 20px;
+  }
+  .items {
+    width: 400px;
+    .item {
+      background: #fafafa;
+      border-radius: 2px;
+      width: 400px;
+      margin-top: 20px;
+      height: 36px;
+      line-height: 36px;
+      font-size: 12px !important;
+      padding-left: 10px;
+      ::v-deep .ant-radio-wrapper {
+        font-size: 12px;
+      }
+    }
+  }
+  ::v-deep .ant-checkbox-group-item {
+    background: #fafafa;
+    border-radius: 2px;
+    width: 400px;
+    margin-top: 20px;
+    height: 36px;
+    line-height: 36px;
+    font-size: 12px !important;
+    padding-left: 10px;
+  }
+  .point {
+    display: inline-block;
+    border-radius: 5px;
+    width: 6px;
+    height: 6px;
+    background-color: #3f7ffb;
+    margin-right: 6px;
+    position: relative;
+    top: -1px;
+  }
+}
+</style>

src/views/flow/components/detail.vue

+<template>
+  <div class="detail">
+    <div class="title"><span class="point"></span>预约详情</div>
+    <ul class="items">
+      <li>
+        <div class="label">已选套餐：</div>
+        <div class="content">21招商信诺-银保客户-豪华套餐女未婚</div>
+      </li>
+      <li>
+        <div class="label">已选体检中心：</div>
+        <div class="content">上海虹桥分院</div>
+      </li>
+      <li>
+        <div class="label">已选体检中心地址：</div>
+        <div class="content">上海虹桥分院</div>
+      </li>
+      <li>
+        <div class="label">已选体检中心地址：</div>
+        <div class="content">2021-11-20</div>
+      </li>
+    </ul>
+    <div class="tips">
+      <img :src="tips" alt="" />
+      <span class="desc"
+        >请耐心等待体检确认，预约成功后将发送短信给您，如需改约请致电客服</span
+      >
+    </div>
+    <div class="btns">
+      <a-button type="primary" disabled> 预约中 </a-button>
+      <a-button type="primary"> 回首页 </a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "componentName",
+  components: {},
+
+  data() {
+    return {
+      tips: require("../../../assets/imgs/detail/tips.png"),
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.detail {
+  .point {
+    display: inline-block;
+    border-radius: 5px;
+    width: 6px;
+    height: 6px;
+    background-color: #3f7ffb;
+    margin-right: 6px;
+    position: relative;
+    top: -1px;
+  }
+  .btns {
+    text-align: right;
+    padding-right: 10px;
+    margin-top: 15px;
+    .ant-btn {
+      &:nth-child(1) {
+        margin-right: 30px;
+        font-size: 12px;
+        color: white;
+        border: none;
+      }
+    }
+  }
+  .tips {
+    padding-left: 8px;
+    img {
+      position: relative;
+      top: -1px;
+    }
+    .desc {
+      color: #cccccc;
+      font-size: 12px;
+      margin-left: 4px;
+    }
+  }
+  .items {
+    margin-top: 15px;
+    padding-left: 10px;
+    li {
+      margin-top: 15px;
+    }
+    .label {
+      font-size: 12px;
+      color: #aaaaaa;
+    }
+    .content {
+      width: 400px;
+      color: #333333;
+      font-size: 12px;
+      line-height: 40px;
+      background: #fafafa;
+      margin-top: 4px;
+      border-radius: 2px;
+      position: relative;
+      left: -10px;
+      padding-left: 10px;
+    }
+  }
+}
+</style>

src/views/flow/index.vue

@@ -30,28 +30,39 @@
       </div>
 
       <div class="right">
-         <component :is="'selectInstitution'"></component>
+        <Combos v-if="!next" />
+        <Detail />
+        <SelectInstitution />
       </div>
     </div>
-    <a-button type="primary" @click="onSubmit">下一步</a-button>
-    <div class="btn"></div>
+    <div class="btn">
+      <a-button type="primary" @click="nextStep" v-if="!next">下一步</a-button>
+    </div>
   </div>
 </template>
 
 <script>
-import selectInstitution from './selectInstitution.vue';
+
+import SelectInstitution from './selectInstitution.vue';
+import Combos from "./components/combo.vue";
+import Detail from "./components/detail.vue";
+
 export default {
   name: "componentName",
   components: {
-    selectInstitution
+    Combos,
+    Detail,
+    SelectInstitution
   },
   props: {},
   data() {
-    return {};
+    return {
+      next: true,
+    };
   },
 
   methods: {
-    onSubmit() {}
+    nextStep() {},
   },
 };
 </script>
@@ -59,7 +70,15 @@ export default {
 <style lang="less" scoped>
 .flow {
   background: #fafafa;
+  min-height: calc(100vh - 300px);
+  .btn {
+    text-align: center;
+    position: relative;
+    left: 360px;
+    top: 20px;
+  }
   .content {
+    padding-top: 20px;
     .point {
       display: inline-block;
       border-radius: 5px;
@@ -73,6 +92,7 @@ export default {
     display: flex;
     justify-content: center;
     .left {
+      max-height: 350px;
       .reset {
         text-align: center;
         margin-top: 25px;
@@ -102,7 +122,11 @@ export default {
       background: white;
       box-shadow: 0px 7px 14px 1px rgba(223, 223, 219, 0.18);
       border-radius: 8px;
-      padding: 19px 24px 30px 12px;
+      padding: 19px 24px 30px 14px;
+      margin-left: 24px;
+    }
+    .right {
+      padding-left: 24px;
     }
     .right {
       margin-left: 30px;