「疫情防控」今天你收到“彈窗”了嗎？收到的人員有這三類情況，解決方法來了！

今日，北京地區部分網友發現，自己收到了健康寶彈窗。

彈窗顯示，由于您近期可能有到訪或途經疫情風險地區情況，北京“健康寶”暫不能確認您的防疫相關健康狀態。按照北京市防疫政策要求，若您在京，請立即聯系居住社區；若在京外，請暫緩來京。

哪些人會收到

北京健康寶彈窗

北京新冠肺炎疫情防控工作領導小組檢疫檢測工作組副組長、北京市衛生健康委員會副主任、新聞發言人李昂表示，請市民朋友積極配合支持所在區域采取的核酸檢測、社區管控等防控措施，1月1日至1月20日8時到訪過本市通報病例所涉及風險點位、與病例活動軌跡有交集或接到健康寶彈窗提示的人員，請立即主動向社區報告，做好自我健康監測，按照社區通知的核酸檢測時間和地點主動進行核酸檢測。

記者了解到，今早收到健康寶彈窗的人員有三類情況：

一是，過去14天里有進(返)京行為，已經到達或正處于京外中高風險地區。

二是，到訪過北京市通報病例所涉及風險點位、與病例活動軌跡有交集。

三是，于元旦后購買過退熱、止咳、抗感染、治療咽干咽痛等四類藥品。

收到北京健康寶彈窗后

該怎么處理？

近期如有健康寶彈窗的居民，請按以下方法操作：

1、需兩次核酸間隔24小時，均顯示為陰性。（具體情況以居委會通知為準）

2、請登入京心相助平臺填寫本人信息報備。

3、到居委會簽定承諾書，方可解除彈窗。

如果近期有到藥房買過四類藥的人員被彈窗，請直接前往核酸檢測點進行核酸檢測，陰性結果后，彈窗會自動解除。如仍不能解除，請前往北京12345微信公眾號，進入民意直通，彈窗糾錯留言解碼。

彈窗解決辦法流程圖：

第一步：先做核酸；

第二步：微信搜索“北京12345”公眾號——點“服務”——民意直通——勾選已閱讀——“健康寶賦碼狀態彈窗糾錯”——進入填信息頁面（沒注冊的先注冊、在登陸才能填寫信息）。

注意要上傳兩張截圖，健康寶彈窗截圖+核酸陰性截圖，提交待審核即可。

來源：綜合海淀宣傳、經濟參考報、BRTV新聞

夏日生活打卡季#

半卷閑書半盞酒

8分鐘前

健康寶彈窗后這樣做解決不了購票問題。

目前正值學生入學報到和返校的高峰期。

由于各地陸續出現確診病例，不少人由于經過或者處于風險地區，因此健康寶彈窗并被限制了購票。

如處于低風險地區，可以進行申訴解除彈窗。申訴成功的短信有時會在彈窗已經解除后才會收到，所以申訴后要增加查詢自己健康寶狀態的頻率。

當發現自己的彈窗解除后，第一時間登錄12306買票，如果仍是限制購票，在出現的購票失敗的頁面填寫申訴。
第二步進入北京12345微信公眾號，選擇綠碼限制購票提交申訴。

最后一步撥打01012345，一般選擇3容易接通，告訴人工客服自己急需買票的原因，請求盡快將個人彈窗已解除信息提交12306。
不需要撥打12306電話，他們沒有權限解決限制購票問題。

#夏日生活打卡季#

eact 是一個用于構建用戶界面的 javascript 庫，是當前前端主流框架之一。

這里主要是演示一下，用react搭建一個簡易的登錄頁面。

演示準備

本地安裝一下VSCode，在沒激活碼使用webstorm的情況下，vscode也是一個很好的選擇，而且vscode有很多插件，合理使用，也能用的很舒服。

準備一個登錄用的接口，可以是mock接口，也可以隨便用某些后端框架寫一個本地運行。

實操演示-創建工程

到工作目錄打開cmd界面，通過命令新建一個工程：

# report-pc是項目名稱，可以隨便寫
npx create-react-app report-pc

新建過程中會引入一些必要的包：

新建react工程

實操演示-配置sass環境

配置一下sass環境，sass是一種預編譯的css，作用類似于Less。由于React中內置了處理sass的配置，所以在創建的React項目中，可以直接使用sass來寫樣式。

安裝用于解析sass的包：

yarn add sass

創建一個全局樣式文件：

index.scss

引用這個樣式文件：

引用index.scss

將一些不會使用的文件和引用刪除：

刪除無用文件和引用

實操演示-配置基礎路由

需要安裝路由的包：

yarn add react-router-dom

準備一個函數組件Login：

再準備一個函數組件Layout：

將準備的兩個組件進行路由配置：

進行路由配置

實操演示-Ant Design的引入

antd是基于 Ant Design 設計體系的 React UI 組件庫，主要用于研發企業級中后臺產品。antd有很多優點，感興趣可以去官網看一下。

先安裝antd：

yarn add antd

引用antd的樣式文件：

引用antd樣式文件

要確認引入是否生效，可以直接從官網上找個組件，添加到頁面上，將工程運行起來，可以直觀的看到。

從官網上找一個Button的組件：

官網上的Button組件

將antd的Button添加到頁面上：

引用antd的組件

將工程運行起來：

yarn start

運行起來的界面：

運行后的界面

可以看到Button的樣式是正常的，說明antd樣式文件引用沒問題。

實操演示-配置別名路徑

配置別名路徑的目的是通過@符號簡化路徑處理。

create-react-app這個工具創建的工程，將所有工程化配置，都隱藏在了react-scripts包中，所以在項目中看不到任何配置信息。

我們可以通過第三方庫來進行修改。先安裝第三方庫：

yarn add -D @craco/craco

創建一個craco的配置文件，并在這個文件中配置路徑別名：

修改package.json中腳本命令：

將原來代碼中的一些引用修改成帶@符的引用：

修改引用

重新啟動工程，在界面上是看不出區別的。

當前在引用的時候，直接打@符號，是不會提示路徑的，為了方便使用，可以在根目錄創建一個配置文件：

編輯jsconifg.json文件

有了這個配置文件，后面在引用時打@符號就會有提示了。

實操演示-搭建靜態結構

在Login/index.js中創建登錄頁面基礎結構，這里不需要自己一個組件一個組件的寫，直接到antd官網上抄案例：

找案例的源碼

將源碼復制過來：

粘貼源碼

Form的父組件Card主要是為了將登錄表單以卡片的形式展現。

在Login目錄下創建index.scss文件，指定組件樣式：

編輯login的index.scss文件

引用index.scss文件：

引用index.scss

將需要使用到的圖片資源放到assets目錄中：

根據實際需要，調整一下Form表單的結構和樣式。這個validateTrigger參數是控制提示語觸發的時機的：

設置提示語出現時機

這個提示語是否觸發是根據這個rules的配置決定的：

校驗規則

rules不僅可以校驗是否有值，也可以校驗填入的值具體格式，比如手機號、郵箱等。

這個initialValues是控制默認值的：

設置默認值

實操演示-后端交互封裝

這里使用axios來調用后端接口，先進行安裝：

yarn add axios

創建一個http.js文件：

其中headers是為了解決瀏覽器的cors error進行的配置。

為了方便管理，再新建一個index.js文件：

新建index.js文件

實操演示-編寫業務代碼

這里使用mobx來寫業務代碼，先安裝mobx：

yarn add mobx

再安裝mobx的連接工具mobx-react-lite：

yarn add mobx-react-lite

編輯登錄相關的業務代碼：

把所有模塊都做統一處理：

對store做統一處理

實操演示-組件中調用mobx

在Login組件中進行調用：

調用mobx

其中message也是antd的組件，是一個頂部小彈窗。useNavigate是一個路由工具，用于登錄成功后跳轉到其他頁面，使用時的replace參數是用于控制不讓用戶通過回退返回到登錄頁面。

實操演示-token持久化

創建token.js文件，里面編寫幾個工具函數，并導出：

token.js

至于上面幾個工具函數的作用，可以直接從字面意思明白的吧。

到index.js中進行統一管理：

index.js統一管理

回到業務代碼部分，使用token.js：

使用token.js

將工程運行起來，登錄后就能在本地瀏覽器的Storage中看到這個token值，就像這樣：

Storage中持久化的token

實操演示-請求攔截器注入token

前面已經獲取了token，之后需要鑒權的接口調用時都需要在請求頭中加上這個token，但是每一次接口調用都寫一遍這個請求頭，也挺麻煩的。這里就在請求攔截器中完成注入token的邏輯。

調整http.js中的邏輯：

注入token

實操演示-路由鑒權實現

創建一個高階函數組件，在這個組件中實現鑒權邏輯：

AuthComponent.js

鑒權的方式很簡單，就是判斷有沒有token，就就正常渲染，沒有就重定向到登錄頁面。

回到App.js，修改路由部分的邏輯：

使用AuthComponent組件

總結

到這里，一個簡單的登錄頁面前端demo就已經做好了。沒有什么特別難理解的內容，都是一些現成的工具拼裝使用。

在線咨詢

上一篇：HTML的一些常用的語法寫法
下一篇：JavaScript 函數調用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商