慢综 医生端 待随访列表以及环境配置

src/api/doctorFetch.js

+/**
+ * 基础请求方法
+ */
+
+import axios from 'axios'
+import { showFailToast, showLoadingToast } from 'vant'
+import { callMobile } from '@/utils/common'
+
+const baseAxios = axios.create({
+    baseURL: '',
+    timeout: 20000,
+})
+
+// 加载标志计数
+let loadingList = 0
+let loadingToast = null
+let errorMark = 0
+
+export function fetchBase({
+    url = '',
+    // 需要携带在url上的参数
+    params,
+    // 请求体body的参数
+    body = {},
+    method = 'POST',
+    contentType = 'json',
+    loading = false
+} = {}) {
+    contentType === 'form' && (contentType = 'application/x-www-form-urlencoded')
+    contentType === 'json' && (contentType = 'application/json; charset=utf-8')
+    contentType === 'file' && (contentType = 'multipart/form-data')
+    let token = sessionStorage.getItem('token')
+    if (!token) {
+        callMobile("goIndex", {})
+        return
+    }
+    return new Promise((resolve, reject) => {
+        if (loading) {
+            loadingList++
+            loadingToast = showLoadingToast({ message: '请求中', forbidClick: true, duration: 0 })
+        }
+        baseAxios({
+            method: method,
+            url: `${url}`,
+            params: params,
+            data: body,
+            headers: {
+                'Authorization': `${token}`,
+                'Content-Type': contentType
+            }
+        }).then(function (response) {
+            const data = response.data || {}
+            if (data.code !== 'SUCCESS') {
+                errorMark++
+                reject(data)
+                return
+            }
+            resolve(data)
+        }).catch(function (err) {
+            errorMark++
+            reject(err)
+        }).finally(() => {
+            if (loading) {
+                loadingList--
+                if (loadingList <= 0 && loadingToast) {
+                    loadingToast.close()
+                    loadingToast = null
+                }
+            }
+            if (errorMark) {
+                setTimeout(() => {
+                    showFailToast('请求失败')
+                }, 300)
+                errorMark = 0
+            }
+        })
+    })
+}

src/doctor/Doctor.vue

+<template>
+    <van-config-provider :theme-vars='themeVars'>
+        <div class='h-full resident-home'>
+            <router-view v-slot='{ Component }'>
+                <Transition name='route' mode='out-in'>
+                    <component :is='Component' v-if='visible' />
+                </Transition>
+            </router-view>
+        </div>
+    </van-config-provider>
+</template>
+
+<script>
+import { getDict } from '@/api/base.js'
+import { useStore } from './store/index.js'
+import { callMobile, getQueryVariable } from '@/utils/common'
+
+export default {
+    data() {
+        return {
+            visible: false,
+            themeVars: {
+                primaryColor: '#54CCBD',
+                buttonPrimaryBackground: '#54CCBD',
+                buttonPrimaryBorderColor: '#54CCBD',
+                buttonDefaultBorderColor: '#BFBFBF',
+                buttonNormalFontSize: '16px',
+                // 表单相关
+                cellVerticalPadding: '15px',
+                cellTextColor: '#262626',
+                cellBorderColor: '#d9d9d9'
+            }
+        }
+    },
+    setup() {
+        const store = useStore()
+        return { store }
+    },
+    created() {
+        this.init()
+    },
+    methods: {
+        async init() {
+            let token = getQueryVariable('token')
+            if (!token) {
+                token = sessionStorage.getItem('token')
+            }
+            if (token) {
+             sessionStorage.setItem('token', token)
+                const res = await getDict()
+                this.store.$patch({ dict: res.data || {} })
+                this.visible = true
+            } else {
+                callMobile("goIndex", {})
+            }
+
+        }
+    }
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>

src/doctor/followUp/List.vue

+<template>
+    <div class='all-back'>
+        <van-pull-refresh v-model='isLoading'
+                          success-text='刷新成功'
+                          @refresh='onRefresh'
+                          :disabled='isRefreshDisable'
+        >
+            <van-nav-bar title='慢病管理' left-text='' left-arrow>
+                <template #right>
+                    <van-icon name='search' size='18' />
+                </template>
+            </van-nav-bar>
+            <div class='top-title'>
+                我的待随访（16）
+            </div>
+            <van-tabs v-model:active='active'>
+                <van-tab :title='item.title' :name='item.name' v-for='item in tabList'></van-tab>
+            </van-tabs>
+            <div
+                class='list-data'
+                v-infinite-scroll='loadMore'
+                :infinite-scroll-disabled='loading'
+                infinite-scroll-distance='10'
+                ref='list'
+            >
+                <div class='mt-10 white-back p-16' v-for='item in detailInfo'>
+                    <div class='flex items-center'>
+                        <div class='base-title'>张曼玉</div>
+                        <div class='second-title plr-8'>24岁</div>
+                        <div class='second-title plr-6'>男</div>
+                    </div>
+                    <div class='mt-3 flex items-center'>
+                        <div class='detail-left'>
+                            身份证号
+                        </div>
+                        <div class='detail-right'>
+                            3604211901****3128
+                        </div>
+                    </div>
+                    <div class='mt-3 flex items-center'>
+                        <div class='detail-left'>
+                            高危评估
+                        </div>
+                        <div class='detail-right'>
+                            高危人群
+                        </div>
+                    </div>
+                    <div class='mt-3 flex items-center'>
+                        <div class='detail-left'>
+                            专病高危评估
+                        </div>
+                        <div class='detail-right'>
+                            高血压高危
+                        </div>
+                    </div>
+                    <div class='flex' style='align-items: baseline'>
+                        <div class='detail-left' :style="{marginTop: item.diseaseList.length ? '0px': '12px'}">
+                            慢病标签
+                        </div>
+                        <div class='detail-right'>
+                            <div class='flex items-center'
+                                 style='flex-wrap: wrap;justify-content: center;align-content: center'>
+                                <div v-for='item1 in item.diseaseList' :class='`mt-3 ill-tabs ill-tabs-${item1.id}`'>
+                                    {{ item1.name }}
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                    <van-divider class='mt-3' />
+                    <div class='mt-3 flex word-right'>
+                        <div></div>
+                        <div>
+                            <van-button round size='small' class='btn' @click='toGeneralDetail'>详情</van-button>
+                            <van-button round size='small' class='btn' style='margin-left: 16px' @click='toAddGeneral'>通用随访
+                            </van-button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </van-pull-refresh>
+    </div>
+</template>
+
+<script>
+import { showFailToast } from 'vant'
+
+const tabList = [
+    { title: '高血压', name: 1, num: 3 },
+    { title: '糖尿病', name: 2, num: 3 },
+    { title: '冠心病', name: 3, num: 3 },
+    { title: '脑卒中', name: 4, num: 3 },
+    { title: '慢阻肺', name: 5, num: 3 },
+    { title: '慢性肾病', name: 6, num: 3 },
+    { title: '血脂异常', name: 7, num: 3 }
+]
+export default {
+    name: 'List',
+    data() {
+        return {
+            active: 1,
+            tabList,
+            loading: false,
+            isLoading: false,
+            detailInfo: [
+                {
+                    diseaseList: [
+                        { id: 1, name: '高血压' },
+                        { id: 2, name: '糖尿病' },
+                        { id: 3, name: '冠心病' },
+                        { id: 3, name: '脑卒中' },
+                        { id: 5, name: '慢阻肺' },
+                        { id: 6, name: '慢性肾病' },
+                        { id: 7, name: '血脂异常' }
+                    ]
+                },
+                {
+                    diseaseList: [
+                        { id: 1, name: '高血压' },
+                        { id: 3, name: '冠心病' },
+                        { id: 5, name: '慢阻肺' }
+                    ]
+                },
+                {
+                    diseaseList: [
+                        { id: 1, name: '高血压' },
+                        { id: 6, name: '慢性肾病' },
+                        { id: 7, name: '血脂异常' }
+                    ]
+                }
+            ],
+            noDataShow: false,
+            param: {
+                pageIndex: 0,
+                pageSize: 10
+            },
+            isRefreshDisable: false,
+            scrollTop: 0
+        }
+    },
+    watch: {
+        scrollTop(newval) {
+            if (newval > 0) {
+                this.isRefreshDisable = true
+            } else {
+                this.isRefreshDisable = false
+            }
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            const list = this.$refs.list
+            list.addEventListener('scroll', () => {
+                this.scrollTop = list.scrollTop
+            })
+        })
+    },
+    methods: {
+        onRefresh() {
+            this.isLoading = true
+            this.loading = true
+            this.param.pageIndex = 1
+            this.getRecordInfo()
+        },
+        loadMore() {
+            this.loading = true
+            this.param.pageIndex += 1
+            this.getRecordInfo()
+        },
+        getRecordInfo(callBack) {
+            let par = {
+                ...this.param
+            }
+            getNetworkInfoByPhone(par).then(({ data = [] }) => {
+                this.loading = false
+                if (this.isLoading) { //刷新时先赋空
+                    this.detailInfo = []
+                }
+                this.detailInfo = this.detailInfo.concat(data.data.dataList)
+                if (this.detailInfo.length == 0) {
+                    this.noDataShow = true
+                } else {
+                    this.noDataShow = false
+                }
+                if (data.data && data.data.length < this.param.pageSize) {
+                    this.loadText = '暂无更多数据'
+                } else {
+                    this.loading = false
+                }
+                this.isLoading = false
+                callBack && callBack()
+            }).catch(res => {
+                showFailToast('系统异常，请联系客服！')
+                this.loading = false
+                this.isLoading = false
+            })
+        },
+        toGeneralDetail() {
+            this.$router.push({
+                path: `/followUp/generalFU/detail`
+            })
+        },
+        toAddGeneral() {
+            this.$router.push({
+                path: `/followUp/generalFU/add`
+            })
+        }
+    }
+}
+</script>
+
+<style scoped lang='less'>
+.all-back {
+    background: #F5F5F5;
+
+    .top-title {
+        padding: 10px 12px;
+    }
+
+    .white-back {
+        background: #FFFFFF;
+    }
+
+    .mt-10 {
+        margin-top: 10px;
+    }
+
+    .p-16 {
+        padding: 16px;
+    }
+
+    .plr-8 {
+        padding: 0px 8px;
+    }
+
+    .plr-6 {
+        padding: 0px 6px;
+    }
+
+    .base-title {
+        font-weight: bold;
+        font-size: 16px;
+    }
+
+    .second-title {
+        background: #F0F3FF;
+        line-height: 24px;
+        margin-left: 10px;
+    }
+
+    .detail-left {
+        width: 104px;
+        font-size: 14px;
+        color: #8C8C8C;
+    }
+
+    .detail-right {
+        font-size: 14px;
+    }
+
+    .ill-tabs {
+        line-height: 20px;
+        border-radius: 20px;
+        padding: 3px 8px 3px 8px;
+    }
+
+    .ill-tabs-1 {
+        background: #FFF2E8;
+        color: #F83B00;
+    }
+
+    .ill-tabs-2 {
+        margin-left: 2px;
+        background: #FFF1F0;
+        color: #F5222D;
+    }
+
+    .ill-tabs-3 {
+        margin-left: 2px;
+        background: #FFF0F7;
+        color: #F61E54;
+    }
+
+    .ill-tabs-4 {
+        margin-left: 2px;
+        background: #FFF7E6;
+        color: #D46B08;
+    }
+
+    .ill-tabs-5 {
+        margin-left: 2px;
+        background: #F4FFE6;
+        color: #A0BA01;
+    }
+
+    .ill-tabs-6 {
+        margin-left: 2px;
+        background: #ECEBFF;
+        color: #AA63E2;
+    }
+
+    .ill-tabs-7 {
+        margin-left: 2px;
+        background: #E6F9FF;
+        color: #4D86DA;
+    }
+
+    .word-right {
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .btn {
+        background: #F0F3FF;
+        color: #607FF0;
+        border: 0px;
+        line-height: 26px;
+        padding: 4px 8px 4px 8px;
+    }
+
+    .list-data {
+        height: calc(100vh - 140px);
+        overflow-y: auto;
+    }
+}
+
+:deep(.van-nav-bar .van-icon) {
+    color: #000000;
+}
+</style>
\ No newline at end of file

src/doctor/followUp/generalFU/detail/Detail.vue

+<template>
+<div>detail</div>
+</template>
+
+<script>
+export default {
+    name: 'Detail'
+}
+</script>
+
+<style scoped lang='less'>
+:deep(.van-nav-bar .van-icon) {
+    color: #000000;
+}
+</style>
\ No newline at end of file

src/doctor/followUp/generalFU/form/BaseInfo.vue

+<template>
+    <div>
+        <van-form ref='form'>
+            <div class='title'>居民信息</div>
+            <van-cell-group inset>
+                <div class='label-title'>证件类型</div>
+                <van-field
+                    v-model='form.residentName'
+                    clearable
+                    placeholder='证件类型'
+                    class='input-back mt-2 form-input'
+                    :rules="[{ required: true, message: '请选择证件类型' }]"
+                />
+                <div class='label-title mt-5'>证件号码</div>
+                <van-field
+                    v-model='form.residentName'
+                    clearable
+                    placeholder='证件号码'
+                    class='input-back mt-2 form-input'
+                    :rules="[{ required: true, message: '请填写证件号码' }]"
+                />
+                <div class='label-title mt-5'>姓名</div>
+                <van-field
+                    v-model='form.residentName'
+                    clearable
+                    placeholder='姓名'
+                    class='input-back mt-2 form-input'
+                    :rules="[{ required: true, message: '请填写姓名' }]"
+                />
+
+                <div class='label-title mt-5'>本人电话</div>
+                <van-field
+                    v-model='form.user'
+                    clearable
+                    placeholder='本人电话'
+                    class='input-back mt-2 form-input'
+                    :rules="[{ required: true, message: '请填写本人电话' }]"
+                />
+            </van-cell-group>
+        </van-form>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'BaseInfo',
+    data() {
+        return {
+            form: {}
+        }
+    },
+    methods: {
+        onSubmit() {
+            this.$refs.form.validate().then(() => {
+
+            })
+        }
+    }
+}
+</script>
+
+<style scoped lang='less'>
+.title {
+    font-weight: bold;
+    margin-bottom: 20px;
+}
+
+.label-title {
+    font-size: 13px;
+    color: #595959;
+    font-weight: 500;
+   &::after {
+       content: "*";
+       color: red;
+       font-weight: bold;
+       margin-left: 4px;
+   }
+}
+
+
+.form-input {
+    padding: 8px 12px;
+    border-radius: 8px;
+}
+
+.input-back {
+    background: #FAFAFA;
+}
+
+:deep(.van-cell-group--inset) {
+    overflow: visible;
+}
+
+:deep(.van-cell) {
+    overflow: visible;
+}
+
+:deep(.van-field__error-message) {
+    position: absolute;
+    top: 31px;
+}
+</style>
\ No newline at end of file

src/doctor/followUp/generalFU/form/Index.vue

+<template>
+ <div>
+     <van-nav-bar title='新增通用随访' left-text='' left-arrow>
+     </van-nav-bar>
+
+     <div class='p-4'>
+     <base-info></base-info>
+     </div>
+ </div>
+</template>
+
+<script>
+import BaseInfo from '@/doctor/followUp/generalFU/form/BaseInfo'
+export default {
+    name: 'Index',
+    components: { BaseInfo },
+    data() {
+        return {
+
+        }
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style scoped lang='less'>
+:deep(.van-nav-bar .van-icon) {
+    color: #000000;
+}
+</style>
\ No newline at end of file

src/doctor/store/index.js

+import { defineStore } from 'pinia'
+
+export const useStore = defineStore('chronic', {
+    state: () => {
+        return {
+            // 字典
+            dict: []
+        }
+    },
+    getters: {},
+    actions: {
+        getDict(dict) {
+            if (!dict) return []
+            return this.dict[dict] || []
+        },
+        getDictValue(dict, value) {
+            let array = []
+            if (typeof dict === 'string') {
+                array = this.dict[dict]
+            } else {
+                array = dict
+            }
+            if (!array || !array.length) {
+                return ''
+            }
+            let temp = array.find(e => e.value == value) || {}
+            return temp.name || ''
+        }
+    }
+})

src/router/index.js

@@ -13,6 +13,28 @@ const routes = [
             }
         ]
     },
+    {
+        path: '/doctor',
+        name: 'doctor',
+        component: () => import(/* webpackChunkName: "page-resident" */ '@/doctor/Doctor'),
+        children: [
+            {
+                path: '/followUp/list',
+                name: 'followUp-list',
+                component: () => import(/* webpackChunkName: "page-resident" */ '@/doctor/followUp/List')
+            },
+            {
+                path: '/followUp/generalFU/detail',
+                name: 'followUp-generalFU-detail',
+                component: () => import(/* webpackChunkName: "page-resident" */ '@/doctor/followUp/generalFU/detail/Detail')
+            },
+            {
+                path: '/followUp/generalFU/add',
+                name: 'followUp-generalFU-add',
+                component: () => import(/* webpackChunkName: "page-resident" */ '@/doctor/followUp/generalFU/form/Index')
+            },
+        ]
+    }
 ]
 
 const router = createRouter({

src/utils/common.js

@@ -122,4 +122,53 @@ export function checkboxReject(val = [], exclude = []) {
 export function isWeiXin() {
     const ua = window.navigator.userAgent.toLowerCase()
     return /micromessenger/.test(ua)
+}
+
+
+//获取url参数
+export function getQueryVariable(variable, urlInfo) {
+    let url = decodeURI(decodeURI(urlInfo || window.location.href))
+    console.log(url)
+    let i = url.indexOf('?')
+    let queryStr = url.substr(i + 1)
+    let vars = queryStr.split("&");
+    for (let i = 0; i < vars.length; i++) {
+        let pair = vars[i].split("=");
+        if (pair[0] == variable) {
+            return pair[1];
+        }
+    }
+    return '';
+}
+
+//原生方法调用 当前方法传参数两种 字符串或者map
+export function callMobile(handlerInterface, parameters) {
+    let classStr = Object.prototype.toString.call(parameters);
+    if (classStr === '[object String]' || classStr === '[object Object]') {
+        let param = parameters;
+        if (classStr === "[object Object]") { //判断传参是str ,还是object
+            //handlerInterface由iOS addScriptMessageHandler与andorid addJavascriptInterface 代码注入而来。
+            param = JSON.stringify(parameters);//参数必须转化成json格式
+        }
+        try {
+            if (isIOSWebKit()) {//ios
+                if (window.webkit !== undefined) {
+                    if (param == '{}') {
+                        window.webkit.messageHandlers[handlerInterface].postMessage(null);
+                    } else {
+                        window.webkit.messageHandlers[handlerInterface].postMessage(param);
+                    }
+                }
+            } else if (isIOSWebKit() === false) {
+                //安卓传输不了js json对象，只能传输string
+                if (param == '{}') {
+                    window.H5page[handlerInterface]();
+                } else {
+                    window.H5page[handlerInterface](param);
+                }
+            }
+        } catch (e) {
+
+        }
+    }
 }
\ No newline at end of file