疫情严重-代码每日一提,正在开发快捷建单页面

components/seiminFooterBtn/seiminFooterBtn.vue

@@ -0,0 +1,63 @@
+<template>
+  <view class="seiminFooterBtn">
+    <button :class="btn.type" :type="btn.type" v-for="(btn,i) in btns" :key="i" @click="btn.click">{{btn.name}}</button>
+  </view>
+</template>
+
+<script>
+  export default {
+    name: "seiminFooterBtn",
+    data() {
+      return {};
+    },
+    props: {
+      btns: {
+        type: Array,
+        default: () => []
+      },
+    },
+    methods: {},
+  };
+</script>
+
+<style lang="scss" scoped>
+  .seiminFooterBtn {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100rpx;
+    z-index: 9;
+    background-color: #fff;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 0 25rpx;
+    @include flex(space-between, center);
+
+    uni-button {
+      flex: 1;
+      margin-right: 16rpx;
+      height: 66rpx;
+      font-size: 32rpx;
+      @include flex(center, center);
+
+      &::after {
+        border: none;
+      }
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+
+    .default {
+      background-color: #fff;
+      border: 1px solid $defaultColor;
+      color: $defaultColor;
+    }
+
+    .primary {
+      @include btn_background;
+      color: #fff;
+    }
+  }
+</style>

components/seiminFooterNav/seiminFooterNav.vue

@@ -1,68 +1,99 @@
+<!--
+ * @Author: 廖明明
+ * @Date: 2022-04-11 17:58:25
+ * @LastEditors: 廖明明
+ * @LastEditTime: 2022-04-12 13:56:55
+ * @Description: 底部菜单
+-->
 <template>
   <view class="seiminFooterNav">
-    <view class="seiminFooterNav_item" :class="{otherStyle:menu.otherStyle,active:menu.otherStyle?false:menu.active}"
-      v-for="menu in menus" :key="menu.link">
+    <view class="seiminFooterNav_item" :class="{
+        otherStyle: menu.otherStyle,
+        active: menu.otherStyle ? false : menu.active,
+      }" v-for="menu in menus" :key="menu.link" @click="goto(menu)">
       <text class="pda seiminFooterNav_item_icon" :class="menu.icon"></text>
-      <text class="seiminFooterNav_item_text">{{menu.name}}</text>
+      <text class="seiminFooterNav_item_text">{{ menu.name }}</text>
     </view>
+    <seiminModel ref="seiminModel"></seiminModel>
   </view>
 </template>
 
 <script>
   import {
     getCurrentPagesSeimin
-  } from '../../utils/index.js';
+  } from "../../utils/index.js";
   export default {
     name: "seiminFooterNav",
     data() {
       return {
         // 当前路由地址
-        curRoute: '',
+        curRoute: "",
         //底部菜单
         menus: [{
-            name: '首页',
-            link: '/pages/index/index',
-            icon: 'pda-shouye2',
+            name: "首页",
+            link: "/pages/index/index",
+            icon: "pda-shouye2",
             otherStyle: false,
             active: false,
           },
           {
-            name: '工单',
-            link: '/pages/orders/orders',
-            icon: 'pda-gongdan',
+            name: "工单",
+            link: "/pages/orders/orders",
+            icon: "pda-gongdan",
             otherStyle: false,
             active: false,
           },
           {
-            name: '二维码',
-            link: '/pages/qrcode/qrcode',
-            icon: 'pda-ziyuan91',
+            name: "二维码",
+            link: "/pages/qrcode/qrcode",
+            icon: "pda-ziyuan91",
             otherStyle: true,
             active: false,
           },
           {
-            name: '患者',
-            link: '/pages/patients/patients',
-            icon: 'pda-wodehuanzhe',
+            name: "患者",
+            link: "/pages/patients/patients",
+            icon: "pda-wodehuanzhe",
             otherStyle: false,
             active: false,
           },
           {
-            name: '我的',
-            link: '/pages/personalCenter/personalCenter',
-            icon: 'pda-shouye3',
+            name: "我的",
+            link: "/pages/personalCenter/personalCenter",
+            icon: "pda-shouye3",
             otherStyle: false,
             active: false,
-          }
-        ]
+          },
+        ],
       };
     },
     methods: {
+      /**
+       * @description: 路由跳转或展示动态二维码
+       * @param {object} menu 菜单
+       * @author: 廖明明
+       */
+      goto(menu) {
+        if (menu.name === "二维码") {
+          this.$refs.seiminModel.show({
+            title:'科室二维码',
+            skin: 'qrcode',
+            btns: [{
+              name: "知道了",
+              textColor: "#49B856",
+            }, ]
+          });
+        } else {
+          uni.navigateTo({
+            url: menu.link,
+          });
+        }
+      },
       // 高亮当前菜单
       activeCurrentMenu() {
         this.curRoute = `/${getCurrentPagesSeimin()}`;
-        this.menus.forEach(v => v.active = v.link === this.curRoute);
-      }
+        this.menus.forEach((v) => (v.active = v.link === this.curRoute));
+      },
     },
     mounted() {
       this.activeCurrentMenu();
@@ -84,13 +115,13 @@
     @include flex(space-between, center);
 
     .seiminFooterNav_item {
-      color: #DDE1E5;
+      color: #dde1e5;
       @include flex(center, center, column);
 
       &.otherStyle {
         width: 120rpx;
         height: 120rpx;
-        background: linear-gradient(180deg, #74C271 0%, #39B199 100%);
+        background: linear-gradient(180deg, #74c271 0%, #39b199 100%);
         border-radius: 50%;
         position: relative;
         top: -10rpx;

components/seiminModel/seiminModel.vue

@@ -9,7 +9,18 @@
   <view class="seiminModel seiminModel_mask" v-if="opts.isVisible">
     <view class="seiminModel_container animate__animated animate__fadeIn animate__faster">
       <view class="seiminModel_header">{{ opts.title }}</view>
-      <view class="seiminModel_content" v-html="opts.content"></view>
+      <!-- 动态二维码 -->
+      <view class="seiminModel_content qrcode" v-if="opts.skin === 'qrcode'">
+        <image class="w100" :src="nurseCodeImg" mode="widthFix"></image>
+        <view class="qrcode_operate">
+          <view class="refreshQRCode" @click="showNurseCode">
+            刷新
+          </view>
+          <view>{{ refreshQRCodeTime }}s</view>
+        </view>
+      </view>
+      <!-- 正常弹窗 -->
+      <view class="seiminModel_content" v-html="opts.content" v-else></view>
       <view class="seiminModel_footer">
         <view class="seiminModel_footer__btn" v-for="(btn, i) in opts.btns" :style="{
             flex: btn.flex,
@@ -21,20 +32,35 @@
 </template>
 
 <script>
+  import {
+    mapState
+  } from 'vuex';
+  import {
+    reqDeptCodes
+  } from '../../request/api.js';
   export default {
     name: "seiminModel",
     data() {
       return {
         // 配置项
         opts: {},
+        // 动态二维码定时器
+        timer: null,
+        // 动态二维码qrcode
+        nurseCodeImg: '',
+        // 动态二维码刷新间隔时长
+        refreshQRCodeTime: 30,
       };
     },
+    computed: {
+      ...mapState('user', ['loginInfo']),
+    },
     methods: {
       // 显示弹窗
       show(args = {}) {
         // 默认配置项
         let defaultOptions = {
-          skin: "default", //弹窗风格(default|toast|)
+          skin: "default", //弹窗风格(default|toast|qrcode|)
           isVisible: false, //是否显示弹窗
           title: "提示", //标题
           content: "", //内容
@@ -75,10 +101,36 @@
         this.opts = Object.assign({}, defaultOptions, args, {
           isVisible: true,
         });
+        // 如果是动态二维码,则需要发起请求
+        if (this.opts.skin === 'qrcode') {
+          this.showNurseCode();
+        }
       },
       // 关闭弹窗
       close() {
         this.opts.isVisible = false;
+        if (this.opts.skin === 'qrcode') {
+          clearInterval(this.timer);
+          this.timer = null;
+        }
+      },
+      // 科室动态二维码方法
+      showNurseCode() {
+        let deptId = this.loginInfo.user && this.loginInfo.user.dept.id;
+        reqDeptCodes([deptId]).then(res => {
+          if (res.status == 200) {
+            this.nurseCodeImg = res["data"][0].base64;
+            this.refreshQRCodeTime = res["data"][0].refreshQRCodeTime;
+            clearInterval(this.timer);
+            this.timer = setInterval(() => {
+              this.refreshQRCodeTime = Math.max(--this.refreshQRCodeTime, 0);
+              if (this.refreshQRCodeTime === 0) {
+                clearInterval(this.timer);
+                this.showNurseCode();
+              }
+            }, 1000);
+          }
+        })
       },
     },
   };
@@ -124,6 +176,20 @@
           padding: 76rpx 24rpx;
           @include numbersAndLettersNoWrap;
 
+          &.qrcode {
+            padding: 24rpx;
+            font-size: 32rpx;
+            color: #999;
+
+            .qrcode_operate {
+              @include flex(space-between, center);
+
+              .refreshQRCode {
+                color: $defaultColor;
+              }
+            }
+          }
+
           .red {
             color: $textColorRed;
           }

pages/index/index.vue

@@ -11,7 +11,7 @@
           </view>
         </view>
         <view class="icon-saoma">
-          <text class="pda pda-saoma "></text>
+          <text class="pda pda-saoma"></text>
         </view>
       </view>
       <!-- 一键收标本 -->
@@ -94,7 +94,7 @@
       ...mapState(['isShowSeiminModel']),
     },
     methods: {
-      ...mapMutations(['changeSeiminModel']),
+      ...mapMutations(['changeSeiminModel', 'changeQucikCreateOrderType']),
       // 获取页面数据
       init() {
         let deptId = this.loginInfo.user && this.loginInfo.user.dept.id;
@@ -162,6 +162,7 @@
         uni.navigateTo({
           url: '/pages/quickCreateOrder/quickCreateOrder'
         })
+        this.changeQucikCreateOrderType('specimen');
       },
       // 切换科室弹窗
       showDeptModel() {

pages/quickCreateOrder/quickCreateOrder.vue

@@ -3,21 +3,111 @@
     <view class="qco_msg">
       支助人员将去<b>7东-泌尿外科I病区</b>执行<b>调药</b>，请选择起点科室；
     </view>
+    <!-- 起点科室,终点科室 -->
+    <block v-if="qucikCreateOrderType === 'other'">
+      <view class="select_block">
+        <text class="select_label">起点科室</text>
+        <view class="select_placeholder">请选择起点科室<text class="pda pda-xiangyou"></text></view>
+      </view>
+      <view class="select_block">
+        <text class="select_label">终点科室</text>
+        <view class="select_placeholder">请选择终点科室<text class="pda pda-xiangyou"></text></view>
+      </view>
+    </block>
+    <!-- 备注 -->
+    <view class="remarks">
+      <textarea class="remarks_textarea" auto-height :maxlength="100" placeholder-style="color:#999"
+        placeholder="备注信息：请您填写微生物和数量" />
+    </view>
+    <!-- 快捷输入,历史输入 -->
+    <view class="quickAndHistory">
+      <view class="quickAndHistory_header">
+        快捷输入
+      </view>
+      <view class="quickAndHistory_container">
+        <view class="quickAndHistory_item">
+          我是一只小青蛙
+        </view>
+        <view class="quickAndHistory_item">
+          我是一只小青蛙
+        </view>
+        <view class="quickAndHistory_item">
+          我是一只小青蛙
+        </view>
+        <view class="quickAndHistory_item">
+          我是一只小青蛙
+        </view>
+        <view class="quickAndHistory_item">
+          我是一只小青蛙
+        </view>
+      </view>
+    </view>
+    <view class="quickAndHistory">
+      <view class="quickAndHistory_header">
+        历史输入
+      </view>
+      <view class="quickAndHistory_container">
+        <view class="quickAndHistory_item">
+          我是一只小青蛙
+        </view>
+        <view class="quickAndHistory_item">
+          我是一只小青蛙
+        </view>
+        <view class="quickAndHistory_item">
+          我是一只小青蛙
+        </view>
+        <view class="quickAndHistory_item">
+          我是一只小青蛙
+        </view>
+        <view class="quickAndHistory_item">
+          我是一只小青蛙
+        </view>
+      </view>
+    </view>
+    <!-- 底部 -->
+    <seiminFooterBtn :btns="btns"></seiminFooterBtn>
   </view>
 </template>
 
 <script>
+  import {
+    mapState
+  } from 'vuex';
   export default {
     data() {
       return {
-
+        btns: [{
+            name: '回到首页',
+            type: 'default',
+            click: () => {
+              uni.navigateTo({
+                url: '/pages/index/index'
+              })
+            }
+          },
+          {
+            name: '确认',
+            type: 'primary',
+            click: () => {
+              console.log('确认');
+            }
+          }
+        ]
       };
+    },
+    computed: {
+      ...mapState(['qucikCreateOrderType']),
+    },
+    onLoad() {
+
     }
   }
 </script>
 
 <style lang="scss" scoped>
   .quickCreateOrder {
+    margin-bottom: 100rpx;
+
     .qco_msg {
       min-height: 144rpx;
       padding: 32rpx 160rpx;
@@ -25,10 +115,78 @@
       line-height: 40rpx;
       font-size: 28rpx;
       text-align: center;
+
       b {
         color: $defaultColor;
         font-weight: normal;
       }
     }
+
+    // 起点科室,终点科室
+    .select_block {
+      padding: 0 30rpx;
+      height: 88rpx;
+      font-size: 34rpx;
+      border-top: 1px solid #E5E5E5;
+      background-color: #fff;
+      @include flex(space-between, center);
+
+      .select_label {
+        color: #000;
+      }
+
+      .select_placeholder {
+        color: #888;
+        @include flex(flex-start, center);
+
+        .pda-xiangyou {
+          font-size: 24rpx;
+          margin-left: 30rpx;
+        }
+      }
+    }
+
+    // 备注
+    .remarks {
+      min-height: 150rpx;
+      background-color: #fff;
+      border-top: 1px solid #E5E5E5;
+      border-bottom: 1px solid #E5E5E5;
+      padding: 22rpx 25rpx;
+
+      .remarks_textarea {
+        width: 100%;
+      }
+    }
+
+    // 快捷输入,历史输入
+    .quickAndHistory {
+      padding: 43rpx 25rpx 0;
+
+      .quickAndHistory_header {
+        font-weight: bold;
+        font-size: 34rpx;
+        padding-bottom: 24rpx;
+        color: #333;
+      }
+
+      .quickAndHistory_container {
+        @include flex;
+        flex-wrap: wrap;
+
+        .quickAndHistory_item {
+          height: 66rpx;
+          font-size: 28rpx;
+          border-radius: 33rpx;
+          background-color: #fff;
+          line-height: 66rpx;
+          padding: 0 24rpx;
+          color: #666;
+          margin-bottom: 11rpx;
+          margin-right: 24rpx;
+          @include clamp;
+        }
+      }
+    }
   }
 </style>

request/api.js

@@ -41,3 +41,11 @@ export const reqDeptTaskType = (postData) =>
     data: postData,
     method: 'POST'
   });
+  
+// 获取动态二维码
+export const reqDeptCodes = (postData) =>
+  request({
+    url: "/dept/deptCodes/0",
+    data: postData,
+    method: 'POST'
+  });

static/fonts/demo_index.html

@@ -55,6 +55,12 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon pda">&#xe637;</span>
+                <div class="name">向右</div>
+                <div class="code-name">&amp;#xe637;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon pda">&#xe613;</span>
                 <div class="name">首页</div>
                 <div class="code-name">&amp;#xe613;</div>
@@ -108,9 +114,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'pda';
-  src: url('iconfont.woff2?t=1649313043379') format('woff2'),
-       url('iconfont.woff?t=1649313043379') format('woff'),
-       url('iconfont.ttf?t=1649313043379') format('truetype');
+  src: url('iconfont.woff2?t=1649728794969') format('woff2'),
+       url('iconfont.woff?t=1649728794969') format('woff'),
+       url('iconfont.ttf?t=1649728794969') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -137,6 +143,15 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon pda pda-xiangyou"></span>
+            <div class="name">
+              向右
+            </div>
+            <div class="code-name">.pda-xiangyou
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon pda pda-shouye2"></span>
             <div class="name">
               首页
@@ -219,6 +234,14 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#pda-xiangyou"></use>
+                </svg>
+                <div class="name">向右</div>
+                <div class="code-name">#pda-xiangyou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#pda-shouye2"></use>
                 </svg>
                 <div class="name">首页</div>

static/fonts/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "pda"; /* Project id 3307922 */
-  src: url('/static/fonts/iconfont.woff2?t=1649313043379') format('woff2'),
-       url('/static/fonts/iconfont.woff?t=1649313043379') format('woff'),
-       url('/static/fonts/iconfont.ttf?t=1649313043379') format('truetype');
+  src: url('/static/fonts/iconfont.woff2?t=1649728794969') format('woff2'),
+       url('/static/fonts/iconfont.woff?t=1649728794969') format('woff'),
+       url('/static/fonts/iconfont.ttf?t=1649728794969') format('truetype');
 }
 
 .pda {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.pda-xiangyou:before {
+  content: "\e637";
+}
+
 .pda-shouye2:before {
   content: "\e613";
 }

static/fonts/iconfont.json

@@ -6,6 +6,13 @@
   "description": "转运PDA",
   "glyphs": [
     {
+      "icon_id": "479506",
+      "name": "向右",
+      "font_class": "xiangyou",
+      "unicode": "e637",
+      "unicode_decimal": 58935
+    },
+    {
       "icon_id": "765262",
       "name": "首页",
       "font_class": "shouye2",

store/index.js

@@ -26,13 +26,18 @@ const myPlugin = (store) => {
 
 export default new Vuex.Store({
   state: {
-    isShowSeiminModel: false
+    isShowSeiminModel: false,//是否显示切换科室弹窗
+    qucikCreateOrderType: '',//快捷建单类型
   },
   mutations: {
     //是否显示切换科室弹窗
     changeSeiminModel(state, args) {
       state.isShowSeiminModel = args;
-    }
+    },
+    //快捷建单类型
+    changeQucikCreateOrderType(state, args) {
+      state.qucikCreateOrderType = args;
+    },
   },
   modules: {
     user,

uni.scss

@@ -76,6 +76,8 @@ $textColorYellow: #F5A623;
     border-right: none;
   } 
 }
+
+// 省略
 @mixin clamp($clamp:1) {
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -86,6 +88,9 @@ $textColorYellow: #F5A623;
 }
 // --------------------------华丽的分割线---------------------------------------
 // 全局样式
+.w100{
+  width: 100%;
+}
 .red {
   color: $textColorRed;
 }