添加选择体检机构

.gitignore

+.DS_Store
+node_modules
+/dist
+.history
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

src/views/flow/index.vue

@@ -29,7 +29,9 @@
         </div>
       </div>
 
-      <div class="right">step</div>
+      <div class="right">
+         <component :is="'selectInstitution'"></component>
+      </div>
     </div>
     <a-button type="primary" @click="onSubmit">下一步</a-button>
     <div class="btn"></div>
@@ -37,15 +39,20 @@
 </template>
 
 <script>
+import selectInstitution from './selectInstitution.vue';
 export default {
   name: "componentName",
-  components: {},
+  components: {
+    selectInstitution
+  },
   props: {},
   data() {
     return {};
   },
 
-  methods: {},
+  methods: {
+    onSubmit() {}
+  },
 };
 </script>
 
@@ -97,6 +104,9 @@ export default {
       border-radius: 8px;
       padding: 19px 24px 30px 12px;
     }
+    .right {
+      margin-left: 30px;
+    }
   }
 }
 </style>

src/views/flow/selectInstitution.vue

+<template>
+    <div class="institution">
+        <!-- 请选择体检地区 -->
+        <div class="area">
+            <div class="title">
+                <div class="type"><span class="point"></span> 请选择体检地区</div>
+            </div>
+            <ul class="area_box">
+                <li>
+                    <label>省：</label>
+                    <a-select style="width:120px">
+                        <a-select-option v-for="(item) in provinceList" :key="item" :value="item">{{item}}</a-select-option>
+                    </a-select>
+                </li>
+                <li>
+                    <label>市：</label>
+                    <a-select style="width:120px">
+                        <a-select-option v-for="(item) in provinceList" :key="item" :value="item">{{item}}</a-select-option>
+                    </a-select>
+                </li>
+                <li>
+                    <label>区：</label>
+                    <a-select style="width:120px">
+                        <a-select-option v-for="(item) in areaList" :key="item" :value="item">{{item}}</a-select-option>
+                    </a-select>
+                </li>
+            </ul>
+        </div>
+        <!-- 请选择体检机构 -->
+        <div class="mechanism">
+            <div class="title">
+                <div class="type"><span class="point"></span> 请选择体检机构</div>
+            </div>
+            <div class="mechanism_box">
+                <span v-for="(item, index) in mechanismList" :key="index" :class="index === selectIndex ? 'active' : ''" @click="clickTab(index)">{{item}}</span>
+            </div>
+        </div>
+        <!-- 请选择体检地区 -->
+        <div class="hospital">
+            <div class="title">
+                <div class="type"><span class="point"></span> 请选择体检中心</div>
+            </div>
+            <ul class="hospital_box">
+                <li v-for="(item, index) in hospitalList" :key="index">
+                    <div>
+                        <p class="top">{{item.name}}</p>
+                        <p class="bottom">{{item.address}}</p>
+                    </div>
+                    <button :class="item.isDisabled ? 'btn disabled' : 'btn'" @click="openDatePicker(item)">选择体检日期</button>
+                </li>
+            </ul>
+        </div>
+        <div class="mask" v-if="datePickShow">
+            <reserve-date ref="reserveDate1" @confirmDate="getConfirm" @cancleDate="getCancle" @changeDay="(date)=>{ return dateChange(date, 0); }" /> 
+        </div>
+    </div>
+</template>
+
+<script>
+import reserveDate from '../../components/reserve-date'
+export default {
+  name: "selectInstitution",
+  components: {
+      reserveDate
+  },
+  props: {},
+  data() {
+    return {
+        datePickShow: false,
+        selectIndex: 0,
+        provinceList: ['上海市'],
+        provinceList: ['上海市'],
+        areaList: ['静安区'],
+        mechanismList: ['全部', '慈铭', '美年'],
+        hospitalList: [
+            {
+                name: '上海张江分院',
+                address: '上海市浦东新区海科路777号'
+            },
+            {
+                name: '上海张江分院',
+                address: '上海市浦东新区海科路777号'
+            },
+            {
+                name: '上海张江分院',
+                address: '上海市浦东新区海科路777号'
+            },
+            {
+                isDisabled: true,
+                name: '上海张江分院',
+                address: '上海市浦东新区海科路777号'
+            },
+        ]
+    };
+  },
+
+  methods: {
+      // 选择体检机构
+      clickTab(index) {
+          this.selectIndex = index;
+      },
+      // 打开日期弹框
+      openDatePicker(item) {
+          if (item.isDisabled) {
+              return;
+          }
+          this.datePickShow = true;
+      },
+      getConfirm(val) {
+          this.datePickShow = false;
+      },
+      getCancle(val) {
+         this.datePickShow = false;
+      },
+      dateChange(date, type) {
+          console.log(date)
+      }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.mask {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.institution{
+    padding: 19.5px 14.5px 33.5px 14.5px;
+    background-color: white;
+    width: 760px;
+    margin: 0 auto;
+    font-size: 14px;
+    color: #333;
+    .title {
+        .point {
+            display: inline-block;
+            border-radius: 5px;
+            width: 6px;
+            height: 6px;
+            background-color: #3f7ffb;
+            margin-right: 6px;
+            position: relative;
+            top: -1px;
+        }
+        .type {
+            font-size: 14px;
+            font-weight: bold;
+        }
+        .item-container {
+        margin-top: 8.5px;
+        }
+    }
+    .area_box {
+        display: flex;
+        justify-content: space-between;
+        margin: 25px 0px 45px 0px;
+        label {
+            color: #aaa;
+        }
+    }
+    .mechanism_box {
+        display: flex;
+        flex-wrap: wrap;
+        margin: 25px 0px 45px 0px;
+        align-items: center;
+        span {
+            display: inline-block;
+            height: 42px;
+            line-height: 42px;
+            padding: 0 38px;
+            background: #FAFAFA;
+            border-radius: 4px;
+            margin-right: 20px;
+        }
+        span.active {
+            background: #D2D2D2;
+        }
+    }
+    .hospital_box {
+        margin: 25px 0px 45px 0px;
+        li {
+            display: flex;
+            height: 98px;
+            align-items: center;
+            justify-content: space-between;
+            background: #FAFAFA;
+            padding: 28px 24px;
+            margin-bottom: 12px;
+            .top {
+                font-size: 14px;
+                color: #333;
+            }
+            .bottom {
+                color: #999;
+                font-size: 13px;
+            }
+            .btn {
+                outline: none;
+                border: none;
+                background: linear-gradient(87deg, #FFCB00, #FFB219);
+                width: 110px;
+                height: 40px;
+                border-radius: 4px;
+                color: #fff;
+            }
+            .btn.disabled {
+                background: #E2E2E2;
+            }
+        }
+    }
+}
+</style>