# 组件文档
## WaterfallFlow 瀑布流组件
- 属性 
    | 属性值       | 说明             | 种类   | 是否必填 | 默认值                                                    |
    | ------------ | ---------------- | ------ | -------- | --------------------------------------------------------- |
    | videoList    | 视频列表         | Array  | 是       | 无                                                        |
    | options      | 配置项           | Object | 是       | {finished: false, //是否完成 isLoading: false //是否加载} |
    | finishedText | 没有数据提示文字 | String | 否       | 没有更多了~                                               |
- 方法
    | 方法名 | 说明                          | 参数           |
    | ------ | ----------------------------- | -------------- |
    | load   | 页面触底回调,用来获取新的数据 | 无             |
    | click  | 列表项点击事件                | 列表项对象参数 |

### demo示例

```vue
<template>
<div>
  <WaterfallFlow
    :videoList="VideoList"
    @load="GetVideoList"
    :options="{
          isLoading:loading,
          finished:finished,
    }"
    @click="jumpTo"
    ></WaterfallFlow>
</div>
</template>

<script>
import WaterfallFlow from "@/components/WaterfallFlow"; //瀑布流
export default {
    components: { WaterfallFlow },
    data(){
        return {
            VideoList:[
                {
                    CoverMap:'封面图',
                    CurriculumName:'视频标题',
                    HeadImg:'医生图像',
                    TeacherName:'医生姓名',
                    ... //看组件  api文档
                }
            ],
            isLoading:false,
            finished:false,
        }
    },
    methods:{
        GetVideoList(){

        },
        jumpTo(obj){

        }
    }
}
</script>
```
    
## TabBAr 底部导航组件

- 属性
    | 属性值 | 说明     | 种类   | 是否必填 | 默认值      |
    | ------ | -------- | ------ | -------- | ----------- |
    | active | 当前页面 | string | 否       | PatientUser |
- 修改底部导航栏
    - 在app.vue修改, 添加修改页面在tabShow修改
    
    ```vue
    <template>
    <!-- app.vue -->
    <TabBar :active="active" v-if="tabShow"></TabBar>
    </template>
    <script>
        import TabBar from "@/components/TabBar";
        export default {
            name: "app",
            components: { TabBar },
            data() {
                return {
                    active: "", //tab页面
                };
            },
            watch: {
                $route(to, from) {
                    if (to.meta.title) {
                        this.active = to.name;
                        document.title = to.meta.title;
                    }
                }
            },
            computed: {
                // 显示导航
                tabShow() {
                    let active = this.active;
                    return (
                        active == "specialist" ||
                        active == "test" ||
                        active == "healthyVideo" ||
                        active == "PatientUser"
                    );
                }
            }
        };
    </script>
    ```

  - 在TabBar组件中修改 按照格式添加删除页面
  ```vue
  <template>
      <div>
          <van-tabbar
              v-model="activeType"
              active-color="#00a0e9"
              inactive-color="#666666"
              :z-index="999"
          >
              <!--        info="1" -->
              <van-tabbar-item
                  name="specialist"
                  :icon="require('@/assets/images/nav/1.png')"
                  to="/specialist"
                  safe-area-inset-bottom="true"
                  class="item"
                  :class="{active:activeType=='specialist'}"
              >专家到家</van-tabbar-item>

              <van-tabbar-item
                  name="test"
                  :icon="require('@/assets/images/nav/2.png')"
                  to="/test"
                  safe-area-inset-bottom="true"
                  class="item"
                  :class="{active:activeType=='test'}"
              >药房</van-tabbar-item>

              <van-tabbar-item
                  name="healthyVideo"
                  :icon="require('@/assets/images/nav/3.png')"
                  to="/healthyVideo"
                  safe-area-inset-bottom="true"
                  class="item"
                  :class="{active:activeType=='healthyVideo'}"
              >健康视频</van-tabbar-item>

              <van-tabbar-item
                  name="PatientUser"
                  :icon="require('@/assets/images/nav/4.png')"
                  to="/PatientUser"
                  safe-area-inset-bottom="true"
                  class="item"
                  :class="{active:activeType=='PatientUser'}"
              >个人中心</van-tabbar-item>
          </van-tabbar>
      </div>
  </template>
  ```

## Cropper  裁剪图片上传组件
- 属性
    | 属性值 | 说明         | 种类    | 是否必填 | 默认值 |
    | ------ | ------------ | ------- | -------- | ------ |
    | show   | 是否显示     | Boolean | 是       | true   |
    | imgUrl | 预览图片地址 | String  | 是       | 无     |

- 方法
    | 方法名  | 说明             | 参数     |
    | ------- | ---------------- | -------- |
    | cancel  | 取消上传         | 无       |
    | confirm | 图片上传成功确认 | 图片对象 |

- demo示例
```vue
<template>
  <Cropper
        :show="fileOption.show"
        :imgUrl="fileOption.img"
        @cancel="cancelUpLoad"
        @confirm="confirmUpLoad"
    ></Cropper>
</template>
<script>
    import Cropper from "@/components/Cropper.vue"; //裁剪组件
         data() {
            return {
                fileOption: {
                    img: "",
                    show: false
                }
            };
        },
        components: {
            Cropper
        },
        created(){
            this.fileOption = {
                img:'//img.360lj.com/im/111.png',
                show:true
            }
        },
        methods:{
            cancelUpLoad(){},
            confirmUpLoad(imgFile){}
        }
</script>

```


## ChooseHospital 选择医院组件

- 方法
    | 方法名  | 说明               | 参数           |
    | ------- | ------------------ | -------------- |
    | cancel  | 取消关闭组件       | 无             |
    | confirm | 确认搜索点击的医院 | 选中医院的信息 |

- demo 示例
```vue
<template>
    <div>
         <van-popup
            v-model="HospitalShow"
            get-container="body"
            position="bottom"
            style="height:100%"
        >
            <ChooseHospital @cancel="HospitalShow=false" @confirm="confirmHospital"></ChooseHospital>
        </van-popup>
    </div>
</template>
<script>
    import ChooseHospital from "@/components/ChooseHospital.vue"; //选择医院
    export default {
        data() {
            return {
                /** 选择医院 on*/
                HospitalShow: false,
                /** 选择医院 off */
            };
        },
        components: { ChooseHospital},
        methods: {
            // 确认医院
            confirmHospital(dataObj) {
                console.log(dataObj)
                this.HospitalShow = false;
            },
        }
    };
</script>
```

## ChooseDepartment 选择科室组件
- 属性
    | 方法名 |   说明   |  种类   | 默认  |
    | :----: | :------: | :-----: | :---: |
    |  show  | 控制显示 | Boolean | true  |

- 方法
    | 方法名  | 说明         | 参数                               |
    | ------- | ------------ | ---------------------------------- |
    | cancel  | 取消关闭     | 无                                 |
    | confirm | 确认医院科室 | { id: '科室id', text: '科室文字' } |

- demo 示例
```vue
<template>
    <div>
        <!-- 选择科室 -->
        <van-popup v-model="departmentShow" get-container="body" position="bottom">
            <ChooseDepartment @cancel="departmentShow=false" @confirm="confirmDepartment"></ChooseDepartment>
        </van-popup>
    </div>
</template>
<script>
    import ChooseDepartment from "@/components/ChooseDepartment.vue"; //选择科室
    export default {
        data() {
            return {
                // 科室组件参数
                departmentShow: false, // 科室组件显示
                // 科室组件提示文本
                departmentObj: {
                    id: -1,
                    text: "选择科室"
                },
            };
        },
        components: { ChooseDepartment},
        methods: {
            // 选择科室
            confirmDepartment(data) {
                this.departmentShow = false;
                
                if (data.id == -1) data.text = "选择科室";
                this.departmentObj = data;
                console.log(data);
            },
        }
    };
</script>
```

## DownTime 倒计时展示状态组件
- 属性
    | Props |   说明   |  种类   | 默认  |
    | :----: | :------: | :-----: | :---: |
    |  AppointmentsStartTime  | 预告开始时间 | String | ''  |
    |  AppointmentsEndTime  | 预告结束时间 | String | ''  |
    |  VisitStartTime  | 报名开始时间 | String | ''  |
    |  VisitEndTime  | 报名结束时间 | String | ''  |

- 一场坐诊完整流程： 义诊预告开始 -> 义诊预告结束/报名中 -> 报名已结束 -> 即将开始（报名结束后是准备阶段） -> 坐诊中 ->坐诊已结束

- 调用
```
<DownTime
    :VisitStartTime="item.VisitStartTime"
    :VisitEndTime="item.VisitEndTime"
    :AppointmentsStartTime="item.AppointmentsStartTime"
    :AppointmentsEndTime="item.AppointmentsEndTime"
></DownTime>
```
- 展示效果
- ![](../assets/5.png)

## Map 获取用户经纬度并展示当前位置组件
- 属性
    | Props |   说明   |  种类   | 默认  |
    | :----: | :------: | :-----: | :---: |
    |  isShow  | 是否展示地图 | Boolean | true  |
- 方法
    | 名称 | 参数 | 返回值 |
    | getLocation | | 位置信息 |