123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438 |
- <template>
- <div class="page_patientManagement">
- <!-- <div class="header">
- <el-input
- placeholder=" 姓名 / 首拼 / 透析号"
- prefix-icon="el-icon-search"
- v-model="searchVal"
- ></el-input>
- </div>
- <div class="searchList">
- <van-tabs
- v-model="active"
- title-active-color="#000000"
- title-inactive-color="#3C3C3C"
- @click="getType"
- >
- <van-tab title="全部">
- <van-list
- v-model="loading"
- :finished="finished"
- finished-text="没有更多了"
- loading-text="加载中..."
- @load="onLoad"
- :immediate-check="false"
- >
- <van-cell>
- <template slot="title">
- <div
- class="searchOne"
- v-for="(item, index) in list"
- :key="index"
- >
- <img :src="item.avatar" alt />
- <span>{{ item.name }}</span>
- </div>
- </template>
- </van-cell>
- </van-list>
- </van-tab>
- <van-tab title="血透">
- <van-list
- v-model="loading"
- :finished="finished"
- loading-text="加载中..."
- finished-text="没有更多了"
- @load="onLoad"
- immediate-check
- >
- <van-cell>
- <template slot="title">
- <div
- class="searchOne"
- v-for="(item, index) in list"
- :key="index"
- @click="toPatientDetail(item.id, item.user_org_id)"
- >
- <img :src="item.avatar" alt />
- <span>{{ item.name }}</span>
- </div>
- </template>
- </van-cell>
- </van-list>
- </van-tab>
- <van-tab title="慢病">
- <van-list
- v-model="loading"
- :finished="finished"
- loading-text="加载中..."
- finished-text="没有更多了"
- @load="onLoad"
- immediate-check
- >
- <van-cell>
- <template slot="title">
- <div
- class="searchOne"
- v-for="(item, index) in list"
- :key="index"
- @click="toPatientDetail(item.id, item.user_org_id)"
- >
- <img :src="item.avatar" alt />
- <span>{{ item.name }}</span>
- </div>
- </template>
- </van-cell>
- </van-list>
- </van-tab>
- <van-tab title="会员">
- <van-list
- v-model="loading"
- :finished="finished"
- loading-text="加载中..."
- finished-text="没有更多了"
- @load="onLoad"
- immediate-check
- >
- <van-cell>
- <template slot="title">
- <div
- class="searchOne"
- v-for="(item, index) in list"
- :key="index"
- @click="toPatientDetail(item.id, item.user_org_id)"
- >
- <img :src="item.avatar" alt />
- <span>{{ item.name }}</span>
- </div>
- </template>
- </van-cell>
- </van-list>
- </van-tab>
- <van-tab title="电商">电商</van-tab>
- </van-tabs>
- </div>
- <div class="add" @click="ToAddPatient()">
- <img src="../../assets/images/add.png" alt />
- </div>-->
- <van-sticky>
- <div class="patientManagementTitle">
- <i class="iconfont icon-zuojiantou jiantou"></i>
- <span class="titleName">患者中心</span>
- <div class="iconBox">
- <i class="iconfont icon-sousuo iconOne"></i>
- <van-icon class="iconOne add" name="add-o" />
- </div>
- </div>
- </van-sticky>
- <div class="searchBox">
- <van-search v-model="value" placeholder="搜索患者透析号/姓名/首拼" />
- </div>
- <div class="chooseBox">
- <van-tabs v-model="active" sticky>
- <van-tab title="标签 1">
- <div class="toolBox">
- <div class="toolOne" @click="typeShow = true">
- <div style="display: flex;align-items: center;">
- {{ type }}
- <van-icon name="arrow-down" />
- </div>
- </div>
- <div class="toolOne" @click="typeShow = true">
- <div style="display: flex;align-items: center;">
- {{ type }}
- <van-icon name="arrow-down" />
- </div>
- </div>
- </div>
- <div class="patientBox">
- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
- <div class="patientOne" v-for="item in list" :key="item">
- <img src="../../assets/images/one.jpg" alt />
- <p>名字</p>
- </div>
- </van-list>
- </div>
- </van-tab>
- <van-tab title="标签 2">内容 2</van-tab>
- <van-tab title="标签 3">内容 3</van-tab>
- <van-tab title="标签 4">内容 4</van-tab>
- </van-tabs>
- </div>
- <!-- 弹出层 -->
- <div>
- <van-popup v-model="typeShow" position="bottom" :style="{ height: '40%' }">
- <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
- </van-popup>
- <van-popup v-model="startShow" position="bottom" :style="{ height: '40%' }">
- <van-datetime-picker
- v-model="currentDate"
- type="date"
- :min-date="minDate"
- :max-date="maxDate"
- @confirm="getstartTime"
- @cancel="startShow = false"
- />
- </van-popup>
- <van-popup v-model="endShow" position="bottom" :style="{ height: '40%' }">
- <van-datetime-picker
- v-model="currentDate"
- type="date"
- :min-date="minDate"
- :max-date="maxDate"
- @confirm="getstartTime2"
- @cancel="endShow = false"
- />
- </van-popup>
- <van-action-sheet v-model="newShow" :actions="actions" cancel-text="取消" @cancel="onCancel" />
- </div>
- </div>
- </template>
-
- <script>
- import { getBloodDialysisPatient } from "@/api/login/login";
- export default {
- data() {
- return {
- typeShow: false,
- startShow: false,
- endShow: false,
- type: "归转状态",
- columns: [
- "杭州",
- "宁波",
- "温州",
- "嘉兴",
- "湖州",
- "杭州",
- "宁波",
- "温州",
- "嘉兴",
- "湖州"
- ],
- searchVal: "",
- active: 0,
- list: [],
- loading: false,
- finished: false,
- page: 0,
- limit: 10,
- total: 0,
- //
- value1: 0,
- value2: "a",
- value3: "a",
- option1: [
- { text: "患者类型", value: 0 },
- { text: "新款商品新款商品新款商品", value: 1 },
- { text: "活动商品", value: 2 }
- ],
- option2: [
- { text: "转规状态", value: "a" },
- { text: "好评排序", value: "b" },
- { text: "销量排序", value: "c" }
- ],
- option3: [
- { text: "患者来源", value: "a" },
- { text: "好评排序", value: "b" },
- { text: "销量排序", value: "c" }
- ],
- list: [],
- loading: false,
- finished: false
- };
- },
- methods: {
- onCancel() {
- this.typeShow = false;
- },
- onConfirm(value) {
- this.type = value;
- this.typeShow = false;
- },
- onLoad() {
- setTimeout(() => {
- for (let i = 0; i < 10; i++) {
- this.list.push(this.list.length + 1);
- }
-
- // 加载状态结束
- this.loading = false;
-
- // 数据全部加载完成
- if (this.list.length >= 40) {
- this.finished = true;
- }
- }, 1000);
-
- //
- // this.page++;
- // console.log(this.page);
- // console.log(this.total);
- // if (this.page <= Math.ceil(this.total / 10)) {
- // this.getBloodDialysisPatient(this.page, this.limit);
- // this.finished = false;
- // } else {
- // // eslint-disable-next-line no-irregular-whitespace
- // // this.finished = true
- // // eslint-disable-next-line no-irregular-whitespace
- // this.loading = false;
- // this.finished = true;
- // }
- },
- getType(type) {
- console.log("type是什么", type);
- if (type === 0) {
- this.loading = false;
- this.finished = false;
- this.getBloodDialysisPatient();
- }
- // eslint-disable-next-line no-empty
- if (type === 1) {
- // eslint-disable-next-line no-irregular-whitespace
- this.loading = false;
- this.finished = false;
- this.getBloodDialysisPatient();
- }
- if (type === 2) {
- this.loading = false;
- this.finished = false;
- this.getBloodDialysisPatient();
- }
-
- if (type === 3) {
- this.loading = false;
- this.finished = false;
- this.getBloodDialysisPatient();
- }
- },
- getBloodDialysisPatient() {
- // eslint-disable-next-line no-undef
- var id = this.$route.query.id;
- setTimeout(() => {
- getBloodDialysisPatient(this.page, this.limit, id).then(response => {
- // eslint-disable-next-line no-empty
- if (response.data.state === 1) {
- var patients = response.data.data.patients;
- console.log("patients", patients);
- this.list.push(...patients);
- console.log("this.list是什么", this.list);
- var total = response.data.data.total;
- this.total = total;
- this.onLoad();
- }
- this.loading = false;
- });
- }, 500);
- },
- toPatientDetail(patientid, orgid) {
- this.$router.push(
- "/patientdetail?patientid=" + patientid + "&orgid=" + orgid
- );
- },
- ToAddPatient() {
- var id = this.$route.query.id;
- this.$router.push("/addpatient?id=" + id);
- }
- },
- created() {}
- };
- </script>
-
- <style lang="scss" scoped>
- .page_patientManagement {
- overflow-y: auto;
- height: 100%;
- .patientManagementTitle {
- background: #fff;
- padding: 0 1.125rem;
- height: 3.125rem;
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- .jiantou {
- font-size: 1.5rem;
- font-weight: 600;
- margin-right: 3rem;
- }
- .titleName {
- font-size: 1.125rem;
- font-weight: 600;
- }
- .iconBox {
- display: flex;
- align-items: center;
- float: right;
- }
- .iconOne {
- font-size: 1.5rem;
- }
- .add {
- margin-left: 1.25rem;
- }
- .toolBox {
- display: flex;
- height: 3.125rem;
-
- align-items: center;
-
- .toolOne {
- width: 5.625rem;
- height: 1.875rem;
- background: rgba(246, 246, 246, 1);
- border-radius: 5px;
- text-align: center;
- font-size: 0.8125rem;
- color: #8d8d8d;
- display: flex;
- align-items: center;
- justify-content: space-around;
- margin-left: 0.875rem;
- }
- }
- .van-dropdown-menu__title {
- width: 5.625rem;
- height: 1.875rem;
- line-height: 1.875rem;
- background: rgba(246, 246, 246, 1);
- border-radius: 5px;
- color: #8d8d8d;
- font-size: 0.875rem;
- }
- .van-dropdown-menu__title::after {
- right: 0.5rem;
- }
- .patientBox {
- padding: 0 0.875rem;
- .patientOne {
- display: flex;
- align-items: center;
- height: 3.75rem;
- img {
- width: 2.5rem;
- height: 2.5rem;
- margin-right: 0.875rem;
- }
- }
- }
- }
- ::-webkit-scrollbar {
- width: 0;
- }
- </style>
-
- <style lang="scss">
- .page_patientManagement {
- .searchBox {
- .van-cell__value {
- display: flex;
- align-items: center;
- }
- .van-field__body {
- width: 100%;
- }
- }
- }
- </style>
|