登陆页面交互

build/webpack.dev.conf.js

@@ -34,7 +34,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     compress: true,
     // host: HOST || config.dev.host,
     // host: '192.168.3.6',
-    host: '192.168.4.55',
+    host: '192.168.1.104',
     port: PORT || config.dev.port,
     open: config.dev.autoOpenBrowser,
     overlay: config.dev.errorOverlay

src/common/MultiLineInput.vue

@@ -85,7 +85,7 @@ export default {
       this.$emit('handleInp',this.txt);
     },
     blur(){
-      // 如果该项未选中，则不存值           
+      // 如果该项未选中，则不存值
       document.activeElement.scrollIntoViewIfNeeded(true);
       setTimeout(()=>{
         document.activeElement.scrollIntoViewIfNeeded(true);

src/common/RadioSelect.vue

@@ -1,15 +1,107 @@
 <template>
-    <div class="radioSelect">
-
-    </div>
+  <div class="radio-wrap radioSelect" v-if="item">
+    <p v-for="(it,index) in datas.questionDetailList" :key="it.id" class="list">
+      <img @click="handleClick(it,index,true,1)" :src="it.select==1?check:defaultPic"> 有&nbsp;&nbsp;&nbsp;&nbsp;
+      <img @click="handleClick(it,index,true,2)" :src="it.select==2?check:defaultPic"> 无
+      <span v-if="((it.description||it.name).indexOf('${'))==-1" :class="{'check':it.select==1||it.select==2}">{{it.description||it.name}}</span>
+    </p>
+  </div>
 </template>
-
-<script>
-    export default {
-        name: "RadioSelect"
+<script type="text/javascript">
+import icon from '../images/radio-default.png'
+import checkIcon from '../images/radio-check.png'
+import {patt,imageUrlPrefix,concatVal} from '@utils/tools.js'
+import MultiLineInput from '../common/MultiLineInput.vue';
+import OptionInp from '../common/OptionInp.vue';
+  export default{
+    name:'RadioSelect',
+    data(){
+      return{
+        defaultPic:icon,
+        check:checkIcon,
+        datas:{},
+        imgUrl:imageUrlPrefix,
+      }
+    },
+    props:['item'],
+    created(){
+      // this.datas = JSON.parse(JSON.stringify(this.item));
+      this.datas = this.item;
+    },
+    methods:{
+      handleClick(it,index,flg,isHas){
+        if(flg){
+          document.activeElement.blur();      
+          document.activeElement.scrollIntoViewIfNeeded(true);
+          setTimeout(()=>{
+            document.activeElement.scrollIntoViewIfNeeded(true);
+          },300)
+        }
+        const list = this.datas;
+        let data = list.questionDetailList&&list.questionDetailList.slice(0); //数组深拷贝？
+        for(let i=0;i<data.length; i++){
+        //   data[i].select = 0
+          if(i==index){
+            data[i].select = isHas;
+            data[i].controlType = 8;
+          }
+        }
+        let temp = concatVal(data);
+        const newData = Object.assign({},this.datas,{questionDetailList:data,value:temp.value,valueP:temp.valueP})
+        this.$emit("updata",newData);
+      },
+      inpVal(val,index){//输入框失焦处理  
+        // 输入框回读
+        let detailList = this.datas.questionDetailList;
+        let currItem = detailList[index];
+        currItem.value = val; 
+        // 输入框失焦重新拼接父级的value
+        let temp = concatVal(detailList);
+        this.datas.value = temp.value;
+        this.datas.valueP = temp.valueP;
+        this.$emit("updata",this.datas);
+      },
+      /*inpSele(index){//输入框反选
+        let detailList = this.datas.questionDetailList;console.log("单选：",index,detailList[index])
+        detailList[index].select = 1;
+      }*/
+    },
+    watch:{
+      item:{
+        handler(newVal,oldVal){
+          this.datas = JSON.parse(JSON.stringify(newVal));
+        },
+        deep:true
+      }
+    },
+    components:{
+      MultiLineInput,
+      OptionInp
     }
+  }
 </script>
-
-<style scoped>
-
-</style>
+<style lang="less" scoped>
+  .radio-wrap{
+    img{
+      width:100%;
+    }
+    .list{
+      color: #7C828E;
+      margin:0 .1rem .1rem 0;
+      padding: .12rem .1rem;
+      white-space: nowrap;
+      -webkit-white-space: nowrap;
+      // -webkit-box-orient: vertical;
+      span {
+          margin-left:1.2rem;
+      }
+      img{
+        width: .38rem;
+        vertical-align: middle;
+      }
+      .check{
+        color: #4F50FF;
+      }
+    }
+  }
+</style>

src/components/Department.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="department">
+        <div class="departmentView">
+            <div class="content">
+                <div class="list" @click="goStart">
+                    <div class="top">
+                        <p>挂号科室：急诊科 <img src="../images/right.png" alt=""></p>
+                    </div>
+                    <div class="main">
+                        <p>预约时间：2019-8-18 14:00</p>
+                        <p>病历号：1234567</p>
+                        <p>挂号信息：1234567</p>
+                    </div>
+                </div>
+                <div class="list">
+                    <div class="top">
+                        <p>挂号科室：急诊科 <img src="../images/right.png" alt=""></p>
+                    </div>
+                    <div class="main">
+                        <p>预约时间：2019-8-18 14:00</p>
+                        <p>病历号：1234567</p>
+                        <p>挂号信息：1234567</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+  import {setScroll} from '@utils/tools.js';
+  import BScroll from 'better-scroll';
+    export default {
+        name: "Department",
+        data(){
+            return {
+                scroll:null
+            }
+        },
+        mounted(){
+            this.$nextTick(()=>{
+                let scroll = setScroll(BScroll,true,'.departmentView')
+                this.scroll = scroll
+            })
+        },
+        methods:{
+            goStart(){
+                this.$router.replace({path:'/'})
+            }
+        }
+    }
+</script>
+<style lang="less" scoped>
+    .department {
+        font-size: .3rem;
+        padding: .3rem 0 1rem 0;
+        .departmentView {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            padding: 0 .3rem 1rem .3rem;
+            box-sizing: border-box;
+            .content {
+                padding-bottom: 1rem;
+            }
+            .list {
+                height:3rem;
+                background:rgba(255,255,255,1);
+                box-shadow:0px 3px 15px 0px rgba(217,217,217,0.5);
+                border-radius:.1rem;
+                overflow: hidden;
+                margin-bottom: .3rem;
+            }
+            .top {
+                height: 1rem;
+                line-height: 1rem;
+                background: url('../images/bg-title.png') 100% 100% no-repeat;
+                padding: 0 .3rem;
+                box-sizing: border-box;
+                p {
+                    position: relative;
+                    color: #fff;
+                    img {
+                        position: absolute;
+                        right: 0;
+                        top: 50%;
+                        width: .4rem;
+                        height: .4rem;
+                        margin-top: -0.2rem;
+                    }
+                }
+            }
+            .main {
+                font-size: .28rem;
+                padding: .3rem;
+                p {
+                    line-height: .5rem;
+                }
+            }
+        }
+    }
+</style>

src/components/Detail.vue

@@ -8,6 +8,10 @@
             :item="item"
             :key="item.id"
             @updata="updataData"/>
+      <RadioSelect v-if="item.controlType==8" 
+            :item="item"
+            :key="item.id"
+            @updata="updataData"/>
       <CheckBox v-if="item.controlType==2" 
             :item="item"
             :key="item.id"
@@ -40,6 +44,7 @@ import Radio from '../common/Radio.vue';
 import CheckBox from '../common/CheckBox.vue';
 import Input from '../common/Input.vue';
 import ComTextArea from '../common/ComTextArea.vue';
+import RadioSelect from '../common/RadioSelect.vue';
 import MultiLineInput from '../common/MultiLineInput.vue';
 import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js'
 // 将获取到的数据源转换成私有数据，处理选择事件。点击完成后统一存到store中，便于回读
@@ -60,7 +65,8 @@ import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js'
       CheckBox,
       Input,
       ComTextArea,
-      MultiLineInput
+      MultiLineInput,
+      RadioSelect
     },
     methods:{
       updataData(data,item){

src/components/Login.vue

@@ -0,0 +1,201 @@
+<template>
+    <div class="login">
+        <div class="top">
+            <div class="img"><img src="../images/check.png" alt=""></div>
+            <h4>欢迎使用智能预问诊</h4>
+        </div>
+        <div class="main">
+            <div class="iptWrap choose">
+                <p @click="handleShow">{{name}} <img src="../images/down.png" /></p>
+                <div class="slideType" v-if="show">
+                    <ul>
+                        <li @click="handleType('手机号',1)">手机号</li>
+                        <li @click="handleType('身份证号',2)">身份证号</li>
+                        <li @click="handleType('病历号',3)">病历号</li>
+                        <li @click="handleType('市民卡号',4)" style="border:0 none">市民卡号</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="iptWrap number">
+                <input @blur="blur" :maxlength="type==1?11:type==2?18:type==3?7:type==4?9:30" v-model="value" @input="changeVal" :type="type!=2?'tel':'text'" class="input" type="text" :placeholder="'请输入'+name" >
+            </div>
+            <div :class="['btn',value?'btnClick':'btnDis']" @click="handleDepart">进入预问诊</div>
+        </div>
+        <div class="tip">
+            注：建议您可先输入病情情况，方便医生提前了解情况
+        </div>
+    </div>
+</template>
+<script>
+    import {phoneTest,identify} from '@utils/tools.js';
+    export default {
+        name: "Login",
+        data(){
+            return {
+                show:false,
+                type:'1',
+                name:'手机号',
+                value:''
+            }
+        },
+        methods:{
+            handleType(name,type){
+                let tmpType=this.type
+                if(tmpType != type){
+                    this.name = name
+                    this.type = type
+                    this.value = ''
+                }
+                this.show = false
+            },
+            handleShow(){
+                const {show} = this
+                this.show = !show
+            },
+            blur(){        
+                document.activeElement.scrollIntoViewIfNeeded(true);
+                setTimeout(()=>{
+                    document.activeElement.scrollIntoViewIfNeeded(true);
+                },300)
+            },
+            changeVal(){
+                document.activeElement.scrollIntoViewIfNeeded(true);
+                if(this.type != 2){
+                    this.value=this.value.replace(/[^\d]/g,'')
+                }
+            },
+            handleDepart(){
+                const {type,value} = this
+                if(type == 1){
+                    console.log(phoneTest.test(value))
+                    if(!phoneTest.test(value)){//验证不通过
+
+                    }
+                }else if(type == 2){
+
+                }else if(type == 3){
+
+                }else if(type == 4){
+
+                }
+                if(value){
+                    this.$router.replace({path:'/department'})
+                }
+            }
+        }
+    }
+</script>
+<style lang="less" scoped>
+    .login {
+        height: 100%;
+        width: 100%;
+        position: fixed;
+        background:linear-gradient(180deg,rgba(79,79,255,1) 0%,rgba(79,137,255,1) 100%);
+        padding: .3rem .6rem;
+        box-sizing: border-box;
+        .top {
+            .img {
+                width: 1.6rem;
+                height: 1.6rem;
+                background-color: red;
+                margin: 1rem auto 0 auto;
+                img {
+                    width: 100%;
+                }
+            }
+            h4 {
+                font-size: .42rem;
+                text-align: center;
+                color: #fff;
+                margin-top: 0.5rem;
+                margin-bottom: .8rem;
+                font-weight: normal;
+            }
+        }
+        .main {
+            width:100%;
+            height:5.34rem;
+            background:#fff;
+            border-radius:.2rem;
+            padding: .8rem .6rem;
+            box-sizing: border-box;
+            font-size: .3rem;
+            .iptWrap {
+                width:100%;
+                height:.88rem;
+                background:rgba(242,242,245,1);
+                border-radius:.1rem;
+                padding: .23rem .3rem;
+                box-sizing: border-box;
+            }
+            .choose {
+                position: relative;
+                p {
+                    width: 100%;
+                    position: relative;
+                    img {
+                        position: absolute;
+                        right: 0;
+                        top: 0;
+                        width: .4rem;
+                        height: .4rem;
+                    }
+                }
+                .slideType {
+                    box-sizing: border-box;
+                    position: absolute;
+                    z-index: 10;
+                    width: 100%;
+                    top: 0.88rem;
+                    left: 0;
+                    box-shadow:0px 4px 20px 0px rgba(102,102,102,0.18);
+                    border-radius:.1rem;
+                    background-color: #fff;
+                    padding: .1rem .3rem 0 .3rem;
+                    box-sizing: border-box;
+                    font-size: .28rem;
+                    li {
+                        border-bottom: 1px solid #F5F5F5;
+                        height: .6rem;
+                        line-height: .6rem;
+                        box-sizing: border-box;
+                    }
+                }
+            }
+            
+            .number {
+                margin: .3rem 0 .8rem 0;
+                .input{
+                    float: left;
+                    color:rgba(51,51,51,1);
+                    height:.42rem;
+                    line-height:.42rem;
+                    width: 100%;
+                    background-color: transparent;
+                }
+            }
+            .btn {
+                width:100%;
+                height:.88rem;
+                line-height:.88rem;
+                text-align: center;
+                background:linear-gradient(270deg,rgba(79,139,255,1) 0%,rgba(79,79,255,1) 100%);
+                border-radius:.44rem;
+                color: #fff;
+                font-size: .32rem;
+                font-weight: 500;
+            }
+            .btnDis {
+                opacity: 0.3;
+            }
+            .btnClick {
+                opacity:1;
+            }
+        }
+        .tip {
+            color: #fff;
+            font-size: .24rem;
+            margin-top: .6rem;
+        }
+    }
+</style>

src/less/index.less

@@ -66,7 +66,8 @@ html,body{
   // height: auto;
   // overflow-y: auto;
   height: 100%;
-  position: absoult;
+  position: absolute;
+  overflow: hidden;
 }
 html{
   margin: 0;

src/router/index.js

@@ -2,6 +2,8 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import PathInfo from '@components/PathInfo.vue';
 import TabPage from '@components/TabPage.vue';
+import Login from '@components/Login.vue';
+import Department from '@components/Department.vue';
 Vue.use(Router);
 const router = new Router({
   routes:[
@@ -14,6 +16,16 @@ const router = new Router({
       path:'/tab',
       name:'TabPage',
       component:TabPage
+    },
+    {
+      path:'/login',
+      name:'Login',
+      component:Login
+    },
+    {
+      path:'/department',
+      name:'Department',
+      component:Department
     }
   ]
 })

src/store.js

@@ -76,7 +76,6 @@ const store = new Vuex.Store({
       }
     },
     setSearchShow(state,flg){//搜索显示与否
-      console.log(flg)
       state.searchShow = flg;
     },
     setDataAll(state,param){

src/utils/tools.js

@@ -107,6 +107,11 @@ const getModelExpStr = (str,txt,des) =>{
 
 // 替换输入框占位符
 const patt = /\$\{[^\]]+\}/g;
+// 手机号验证
+const phoneTest = /^[1]([3-9])[0-9]{9}$/;
+//身份证验证
+const identify =/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
+
 
 const getAllStr = (allData) =>{//获取界面数据，拼接字符串
   // console.log(allData,777777)
@@ -248,18 +253,27 @@ function trimDots(str){
 
 // 拼值，并去掉占位符
 function concatVal(data){
+  console.log(data,111)
   let value = ""; //医生
   let valueP = ""; //患者
   for(let k in data){
-    if(data[k].select==1){
+    if(data[k].select){
       if(data[k].value){
         let str = data[k].name.replace(patt,data[k].value);
         let strP = (data[k].description || data[k].name).replace(patt,data[k].value);
         value += str + '，';
         valueP += strP + '，';
       }else{
-        value += data[k].name.replace(patt,'') + '，';
-        valueP += (data[k].description || data[k].name).replace(patt,'') + '，';
+        if(data[k].controlType==8){
+          let tmpStr = data[k].select==1?'有':'无';
+          let tmpStrHas = '';
+          let tmpStrNo = '';
+          value += tmpStr+data[k].name.replace(patt,'') + '，';
+          valueP += tmpStr+(data[k].description || data[k].name).replace(patt,'') + '，';
+        }else{
+          value += data[k].name.replace(patt,'') + '，';
+          valueP += (data[k].description || data[k].name).replace(patt,'') + '，';
+        }
       }
     }
   }
@@ -293,7 +307,9 @@ module.exports =  {
   trimDots,
   concatVal,
   setScroll,
-  isWX
+  isWX,
+  phoneTest,
+  identify
 }