居民端 自我初筛页面

src/resident/api/base.js → src/api/base.js

-import { fetchBase } from '@/utils/fetch.js'
+import { fetchBase } from './fetch.js'
 import { setSessionStorage, getSessionStorage } from '@/utils/common.js'
 
 // 获取字典

src/api/screening.js

+import { fetchBase } from './fetch.js'
+
+// 证件号查询是否管理慢病档案
+export function queryResidentInfo(params) {
+    return fetchBase({ url: `/chronic-resident/v1/chronic-residents-record/search-info`, body: params, loading: true })
+}
+

src/assets/css/atomic.less

@@ -60,6 +60,7 @@
 .grow { flex-grow: 1; }
 .shrink-0 { flex-shrink: 0; }
 .items-center { align-items: center; }
+.items-end { align-items: flex-end; }
 .justify-between { 	justify-content: space-between; }
 .justify-around { justify-content: space-around; }
 .justify-center { justify-content: center; }
@@ -80,11 +81,7 @@
 .text-12 { font-size: 12px; }
 .text-center { text-align: center; }
 .text-black { color: #000; }
-.text-green { color: #52C41A; }
-.text-red { color: #FF4D4F; }
-.text-orange { color: #FA8C16; }
-.text-gray { color: #BFBFBF; }
-.text-primary { color: var(--ant-primary-color); }
+.text-primary { color: var(--van-primary-color); }
 .font-semibold { font-weight: 600; }
 // 文字省略
 .text-ellipsis {

src/assets/css/base.less

@@ -10,7 +10,7 @@ body {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    color: var(--text-color);
+    color: #262626;
     background-color: #fff;
     font-size: .14rem;
 
@@ -30,3 +30,23 @@ body {
 *, :after, :before {
     box-sizing: border-box;
 }
+
+// van组件样式调整
+// 表单
+.screen-form {
+    .van-cell:after {
+        transform: scaleY(1);
+    }
+    >.van-field:last-child {
+        &::before {
+            position: absolute;
+            box-sizing: border-box;
+            content: " ";
+            pointer-events: none;
+            right: var(--van-padding-md);
+            bottom: 0;
+            left: var(--van-padding-md);
+            border-bottom: 1px solid var(--van-cell-border-color);
+        }
+    }
+}
\ No newline at end of file

src/assets/icons/doc-check-circle.svg

-<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.50001 13.6666C3.81801 13.6666 0.833344 10.682 0.833344 6.99998C0.833344 3.31798 3.81801 0.333313 7.50001 0.333313C11.182 0.333313 14.1667 3.31798 14.1667 6.99998C14.1667 10.682 11.182 13.6666 7.50001 13.6666ZM6.83534 9.66665L11.5487 4.95265L10.606 4.00998L6.83534 7.78131L4.94934 5.89531L4.00668 6.83798L6.83534 9.66665Z" fill="#1890FF"/>
-</svg>

src/assets/icons/doc-exclamation-circle.svg

-<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.42523 13.6666C3.77764 13.6666 0.820869 10.682 0.820869 6.99998C0.820869 3.31798 3.77764 0.333313 7.42523 0.333313C11.0728 0.333313 14.0296 3.31798 14.0296 6.99998C14.0296 10.682 11.0728 13.6666 7.42523 13.6666ZM7.42523 12.3333C8.8265 12.3333 10.1704 11.7714 11.1612 10.7712C12.1521 9.77102 12.7087 8.41447 12.7087 6.99998C12.7087 5.58549 12.1521 4.22894 11.1612 3.22874C10.1704 2.22855 8.8265 1.66665 7.42523 1.66665C6.02396 1.66665 4.68009 2.22855 3.68924 3.22874C2.69839 4.22894 2.14174 5.58549 2.14174 6.99998C2.14174 8.41447 2.69839 9.77102 3.68924 10.7712C4.68009 11.7714 6.02396 12.3333 7.42523 12.3333ZM6.76479 3.66665H8.08567V4.99998H6.76479V3.66665ZM6.76479 6.33331H8.08567V10.3333H6.76479V6.33331Z" fill="#768092"/>
-</svg>

src/assets/icons/doc-left.svg

-<svg width="9" height="18" viewBox="0 0 9 18" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9 16.4375L7.95453 17.5L0.280918 9.70137C-0.10202 9.31219 -0.102019 8.68781 0.280918 8.29863L7.95453 0.5L9 1.5625L1.68173 9L9 16.4375Z" fill-opacity="0.9"/>
-</svg>

src/assets/icons/resident/doc-check-circle.svg

+<svg width="46" height="47" viewBox="0 0 46 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4094_6067)">
+<path d="M23 0.0561523C10.12 0.0561523 0 10.1762 0 23.0562C0 35.9362 10.12 46.0562 23 46.0562C35.88 46.0562 46 35.9362 46 23.0562C46 10.1762 35.88 0.0561523 23 0.0561523Z" fill="#52C41A"/>
+<path d="M12.9863 22.1465L20.628 29.9338L34.4558 16.1787" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_4094_6067">
+<rect width="46" height="46" fill="white" transform="translate(0 0.0561523)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/resident/doc-info-circle.svg

+<svg width="46" height="47" viewBox="0 0 46 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4129_3891)">
+<path d="M23 0.0561523C10.12 0.0561523 0 10.1762 0 23.0562C0 35.9362 10.12 46.0562 23 46.0562C35.88 46.0562 46 35.9362 46 23.0562C46 10.1762 35.88 0.0561523 23 0.0561523Z" fill="#FAAD14"/>
+<path d="M23 10.1626L23 24.2882" stroke="white" stroke-width="4" stroke-linecap="round"/>
+<circle cx="23" cy="33.1787" r="3" transform="rotate(180 23 33.1787)" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4129_3891">
+<rect width="46" height="46" fill="white" transform="translate(0 0.0561523)"/>
+</clipPath>
+</defs>
+</svg>

src/assets/icons/resident/doc-scan.svg

+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.263672" y="0.381104" width="20" height="20" rx="2" fill="#54CCBD"/>
+<path d="M17.7637 13.7144V17.8811H2.76367V13.7144H4.43034V16.2144H16.097V13.7144H17.7637ZM2.76367 9.54777H17.7637V11.2144H2.76367V9.54777ZM17.7637 7.04777H16.097V4.54777H4.43034V7.04777H2.76367V2.8811H17.7637V7.04777Z" fill="white"/>
+</svg>

src/components/docAddress/DocAddress.vue

+<template>
+    <van-cascader class="address-select"
+        :closeable="false"
+        v-model="innerValue"
+        title="请选择所在地区"
+        :options="areaData"
+        @change="onChange"
+        @close="() => $emit('close')"
+    />
+</template>
+
+<script>
+import { getAreaChild } from '@/api/base.js'
+import { fetchDataHandle } from '@/utils/common.js'
+
+export default {
+    name: 'DocAddress',
+    props: {
+        value: [String, Number],
+        viewData: Array,
+    },
+    emits: ['update:value', 'change', 'close'],
+    data() {
+        return {
+            innerValue: '',
+            areaData: []
+        }
+    },
+    created() {
+        this.init()
+    },
+    methods: {
+        async init() {
+            if (!this.areaData.length) {
+                const res = await getAreaChild('0')
+                this.areaData = this.dataField(res || [])
+            }
+            if (this.value) {
+                const temp = fetchDataHandle({ value: this.value }, {
+                    value: 'addToArr'
+                })
+                await this.viewHandle(temp.value)
+            }
+            // console.log(this.areaData)
+        },
+        loadData(options) {
+            const targetOption = options[options.length - 1]
+            targetOption.loading = true
+            getAreaChild(targetOption.value).then(res => {
+                targetOption.children = this.dataField(res || [], options.length === 4)
+                this.areaData = [...this.areaData]
+            }).finally(() => {
+                targetOption.loading = false
+            })
+        },
+        dataField(data, last = false) {
+            return data.map(e => {
+                return {
+                    text: e.areaName,
+                    value: e.areaCode,
+                    id: e.id,
+                    isLeaf: last
+                }
+            })
+        },
+        // 回显处理
+        async viewHandle(val = []) {
+            try {
+                const length = val.length
+                let current = this.areaData.find(e => e.value === val[0])
+                let index = 1
+                while (index < length) {
+                    const res = await getAreaChild(current.value)
+                    const result = res || []
+                    if (!result.length) break
+                    current.children = this.dataField(result, index === 4)
+                    current = current.children.find(e => e.value === val[index])
+                    this.areaData = [...this.areaData]
+                    if (!current) break
+                    index++
+                }
+            } catch(err) {
+                console.warn(err)
+            }
+            
+        },
+        onChange(val) {
+            // console.log(val, this.areaData)
+            const tabIndex = val.tabIndex
+            const options = val.selectedOptions
+            const targetOption = options[options.length - 1]
+            if (tabIndex < 4 ) {
+                getAreaChild(val.value).then(res => {
+                    targetOption.children = this.dataField(res || [], options.length === 4)
+                    this.areaData = [...this.areaData]
+                })
+            }
+            this.$emit('update:value', val.value)
+            this.$emit('change', val)
+            if (tabIndex === 4 ) {
+                this.$emit('close')
+            }
+        }
+    },
+    watch: {
+        value: {
+            handler(val) {
+                this.innerValue = val
+            },
+            immediate: true
+        },
+        // 地址同步使用
+        viewData(val) {
+            this.viewHandle(val)
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/resident/Resident.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">
@@ -6,19 +7,30 @@
                 </Transition>
             </router-view>
         </div>
+    </van-config-provider>
 </template>
 
 <script>
-import { getDict } from './api/base.js'
+import { getDict } from '@/api/base.js'
 import { useStore } from './store/index.js'
 
 export default {
     data() {
         return {
-            visible: false
+            visible: false,
+            themeVars: {
+                primaryColor: '#54CCBD',
+                buttonPrimaryBackground: '#54CCBD',
+                buttonPrimaryBorderColor: '#54CCBD',
+                buttonDefaultBorderColor: '#BFBFBF',
+                buttonNormalFontSize: '16px',
+                // 表单相关
+                cellVerticalPadding: '15px',
+                cellTextColor: '#262626',
+                cellBorderColor: '#d9d9d9'
             }
-    },
-    setup() {
+        }
+    },     setup() {
         const store = useStore()
         return { store }
     },

src/resident/screening/first/form/CheckTip.vue

+<template>
+    <div class="check-result text-center">
+        <div class="pt-5">
+            <doc-icon type="doc-info-circle"
+                style="color: #faad14;font-size: .46rem;"/>
+        </div>
+        <p class="mt-4">
+            {{ checkInfo.tips }}
+        </p>
+        <div class="mt-3 flex justify-center">
+            <div class="py-3 px-4 manage-info">
+                <div class="flex">
+                    <span class="shrink-0">管理机构：</span>
+                    <span class="text-wrap">{{ checkInfo.manageUnitName }}</span>
+                </div>
+                <div class="flex mt-2">
+                    <span class="shrink-0">管理日期：</span>
+                    <span class="text-wrap">{{ checkInfo.manageDate }}</span>
+                </div>
+            </div>
+        </div>
+        <div class="pt-4 mt-5" style="background: #F7F8F9;"></div>
+        <div class="flex pl-5">
+            <p>
+                提示：请遵医嘱定期前往医院复查
+            </p>
+        </div>
+
+        <div class="mt-5">
+            <img src="@/assets/image/resident/code.png" alt="" style="width: 1.85rem;">
+        </div>
+         
+        <p>
+            常按二维码，关注微信公众号
+        </p>
+        <div class="px-4 pb-4 grow flex flex-col justify-end" style="margin-top: .3rem;">
+            <van-button block round @click="onClose">
+                <span style="color: #8C8C8C">关闭</span>
+            </van-button>
+        </div>
+    </div>
+</template>
+
+<script>
+import { isWeiXin } from '@/utils/common.js'
+
+export default {
+    inject: ['checkInfo'],
+    methods: {
+        onClose() {
+            if (isWeiXin()) {
+                // 微信中关闭页面
+                WeixinJSBridge.call('closeWindow')
+            } else {
+                window.close()
+            }
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.manage-info {
+    color: #4D5665;
+    background-color: #F8FAFC;
+    width: 265px;
+    max-width: 320px;
+}
+</style>

src/resident/screening/first/form/IdCheck.vue

 <template>
     <div class="h-full flex flex-col id-check">
-        <div class="flex py-2">
-            <div class="px-4 title">基本信息</div>
+        <div class="flex items-end py-4"
+            style="border-bottom: 1px solid var(--van-cell-border-color);">
+            <div class="px-4 font-semibold title">居民证件信息</div>
             <div class="text-12">请准确填写您的证件信息，标*内容为必填</div>
         </div>
-        <van-form label-width="5em" ref="form">
+        <van-form label-width="5em" ref="form" input-align="right"
+            class="screen-form">
             <van-field required
                 v-model="form.certificateTypeTrans"
                 is-link
@@ -19,13 +21,23 @@
                 clearable
                 name="idCard"  
                 label="证件号码"
-                placeholder="请输入"
+                placeholder="请输入证件号码"
                 :rules="rules.idCard"
             >
+            <template #right-icon>
+                <div class="flex items-center">
+                    <doc-icon type="doc-scan" style="font-size: .2rem;"/>
+                </div>
+            </template>
             </van-field>
         </van-form>
+
+        <div class="px-4 py-5">
+            <div class="text-12 tip">提示：所填写的信息只用于慢病初筛，不会用于其他用途。</div>
+        </div>
+
         <div class="px-4 pb-4 grow flex flex-col justify-end">
-            <van-button type="primary" block 
+            <van-button type="primary" block round
                 @click="submit">下一步</van-button>
         </div>
         
@@ -35,6 +47,8 @@
 <script>
 import { useStore } from '@/resident/store/index.js'
 import { idCardRule } from '@/utils/commonReg.js'
+import { queryResidentInfo } from '@/api/screening.js'
+import { showNotify } from 'vant'
 
 export default {
     data() {
@@ -50,6 +64,7 @@ export default {
             }
         }
     },
+    inject: ['checkInfo'],
     setup() {
         const store = useStore()
         return { store }
@@ -59,12 +74,33 @@ export default {
     },
     methods: {
         init() {
-            console.log(this.store, this.store.getDictValue('DC00004', this.form.certificateType))
             this.form.certificateTypeTrans = this.store.getDictValue('DC00004', this.form.certificateType)
         },
         submit() {
             this.$refs.form.validate().then(res => {
-                console.log(res, this.form)
+                console.log(res, this.form, this.checkInfo)
+                queryResidentInfo(this.form).then(res => {
+                    console.log('queryResidentInfo', res, this.$parent)
+                    const result = res.data || {}
+
+                    if (result.deathStatus === 9) {
+                        // 死亡
+                        showNotify({ type: 'warning', message: '该居民的状态为死亡' })
+                        return
+                    }
+                    this.checkInfo.residentsRecord = result.residentsRecord
+                    this.checkInfo.manageDate = result.manageDate
+                    this.checkInfo.manageUnitName = result.manageUnitName
+                    this.checkInfo.tips = result.tips
+                    this.checkInfo.idCard = this.form.idCard
+
+                    if (result.checkCode === 3) {
+                        // 已经纳入慢病管理
+                        this.$parent.onNext(2)
+                        return
+                    }
+                    this.$parent.onNext(3)
+                })
             }).catch(err => {
                 console.warn(err)
             })
@@ -75,4 +111,9 @@ export default {
 
 <style lang="less" scoped>
 @import '../../../utils/common.less';
+.tip {
+    color: #768092;
+    background-color: #F8FAFC;
+    padding: 10px 8px;
+}
 </style>

src/resident/screening/first/form/Index.vue

 <template>
     <div class="h-full pb-5 flex flex-col ">
         <div class="p-3 text-16 text-black text-center shrink-0 top-bar">
-            <span class="back-bt" @click="onBack" v-if="setp >= 2">
+            <span class="back-bt" @click="onBack" v-if="step >= 2">
                 <doc-icon type="doc-left" />
             </span>
             <span>慢病自我初筛</span>
         </div>
         <div class="grow overflow-y-auto">
-            <IdCheck v-show="setp === 1"/>
+            <IdCheck v-show="step === 1"/>
+            <CheckTip v-if="step === 2"/>
+            <!-- 居民基础信息 -->
+            <BaseInfo v-else-if="step === 3"/>
+            <!-- 筛查表单 -->
+            <ScreenInfo v-else-if="step === 4"/>
+            
         </div>
     </div>
 </template>
@@ -15,15 +21,29 @@
 <script>
 import { showNotify } from 'vant'
 import IdCheck from './IdCheck.vue'
+import CheckTip from './CheckTip.vue'
+import BaseInfo from './BaseInfo.vue'
+import ScreenInfo from './ScreenInfo.vue'
 
 export default {
     components: {
-        IdCheck
+        IdCheck,
+        CheckTip,
+        BaseInfo,
+        ScreenInfo
     },
     data() {
         return {
             // 操作步骤
-            setp: 1,
+            step: 1,
+            setpHistory: [1],
+            // 查询信息
+            checkInfo: {}
+        }
+    },
+    provide() {
+        return {
+            checkInfo: this.checkInfo
         }
     },
     computed: {
@@ -38,12 +58,16 @@ export default {
         if (!this.doctorId) {
             showNotify({ type: 'warning', message: '未获取到医生信息', duration: 0 })
         }
-        
     },
     methods: {
+        onNext(step) {
+            this.step = step ? step : this.step + 1
+            this.setpHistory.push(this.step)
+        },
         onBack() {
-            if (this.setp === 1) return
-            this.setp--
+            if (this.step === 1) return
+            this.setpHistory.pop()
+            this.step = this.setpHistory[this.setpHistory.length - 1]
         }
     }
 } 
@@ -52,7 +76,7 @@ export default {
 <style lang="less" scoped>
 .top-bar {
     position: relative;
-    border-bottom: 1px solid #0000001A;
+    border-bottom: 1px solid #3C3C435C;
     .back-bt {
         position: absolute;
         left: .16rem;

src/resident/screening/first/form/Result.vue

+<template>
+    <div class="submit-result">
+        筛查提交成功！
+    </div>
+</template>
+
+<script>
+export default {
+    
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/resident/screening/first/form/ScreenInfo.vue

+<template>
+    <div class="screen-info">
+        筛查信息
+    </div>
+</template>
+
+<script>
+export default {
+    
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/utils/common.js

@@ -87,3 +87,9 @@ export function getInfoByIdCard(idCard) {
         age
     }
 }
+
+// 判断是否在微信中
+export function isWeiXin() {
+    const ua = window.navigator.userAgent.toLowerCase()
+    return /micromessenger/.test(ua)
+}

src/utils/commonReg.js

@@ -48,3 +48,14 @@ export const idCardRule = { validator: (value = '') => {
     }
     return '身份证号格式错误'
 } }
+
+// 5级地址校验
+export const addressValidator = { validator: (value) => {
+    if (!value || !value.length || value.length === 5) {
+        return
+    }
+    if (value.length < 5) {
+        return '请选择至第五级地址'
+    }
+    return
+}}

vue.config.js

@@ -28,6 +28,14 @@ module.exports = defineConfig({
                 pathRewrite: {
                     '^/tumour-admin': '/tumour-admin'
                 }
+            },
+            '/chronic-resident': {
+                // target: 'http://192.168.1.7:8081',
+                target: 'https://beta-tumour.zmnyjk.com',
+                changOrigin: true,
+                pathRewrite: {
+                    '^/chronic-resident': '/chronic-resident'
+                }
             }
         },
     },