|
|
@@ -0,0 +1,142 @@
|
|
|
+<template>
|
|
|
+ <portal to="notification-outlet">
|
|
|
+ <div class="toast-wrap" v-if="show">
|
|
|
+ <div class="content">
|
|
|
+ <div class="contents">
|
|
|
+ <div v-for="(it,index) in selectLis" :key="it.id" :class="['text', {'select':it.select==1}]" v-if="it.flg==undefined||it.flg==flg" @click="select(index)">
|
|
|
+ {{it.description||it.name}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="makeSure" @click="makeSure">确定</div>
|
|
|
+ </div>
|
|
|
+ <div class="mask" @click="handleClose"></div>
|
|
|
+ </div>
|
|
|
+ </portal>
|
|
|
+</template>
|
|
|
+<script type="text/javascript">
|
|
|
+import BScroll from 'better-scroll';
|
|
|
+import {setScroll} from '@utils/tools.js';
|
|
|
+
|
|
|
+/**
|
|
|
+ 提示性弹窗组件
|
|
|
+ 接收参数：
|
|
|
+ show-布尔值，是否显示弹窗；
|
|
|
+ data-对象，包含title和text；
|
|
|
+ @close-关闭弹窗的方法（点击关闭按钮或者遮罩都关闭弹窗）
|
|
|
+**/
|
|
|
+ export default {
|
|
|
+ name:'SymptomLis',
|
|
|
+ props:{
|
|
|
+ show:{
|
|
|
+ default:false,
|
|
|
+ type:Boolean
|
|
|
+ },
|
|
|
+ flg:{
|
|
|
+ default:'',
|
|
|
+ type:String|Number
|
|
|
+ },
|
|
|
+ data:{
|
|
|
+ default:[],
|
|
|
+ type:Array
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ selectLis:this.data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ handleClose(){
|
|
|
+ this.$emit("close")
|
|
|
+ },
|
|
|
+ makeSure(){
|
|
|
+ this.$emit("makeSure",this.selectLis)
|
|
|
+ },
|
|
|
+ select(idx){
|
|
|
+ let tmpArr = JSON.parse(JSON.stringify(this.selectLis));
|
|
|
+ for(let i = 0;i < tmpArr.length;i++){
|
|
|
+ if(i == idx){
|
|
|
+ if(tmpArr[i].select==1){
|
|
|
+ tmpArr[i].select = 0
|
|
|
+ }else{
|
|
|
+ tmpArr[i].select = 1
|
|
|
+ }
|
|
|
+ tmpArr[i].flg = this.flg
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.selectLis = tmpArr
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ @import '../less/base.less';
|
|
|
+ .toast-wrap{
|
|
|
+ .content{
|
|
|
+ width: 90%;
|
|
|
+ background: #fff;
|
|
|
+ z-index: 999;
|
|
|
+ position: fixed;
|
|
|
+ top:50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: .20rem;
|
|
|
+ z-index: 1000;
|
|
|
+ padding-top: .6rem;
|
|
|
+ .contents {
|
|
|
+ height: 5rem;
|
|
|
+ padding: 0 0.2rem 0 0.27rem;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ .tit{
|
|
|
+ font-family:PingFangSC;
|
|
|
+ color:#333333;
|
|
|
+ font-size: .32rem;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ // color:#colors[quest];
|
|
|
+ font-size: .3rem;
|
|
|
+ display: inline-block;
|
|
|
+ min-width: 1.9rem;
|
|
|
+ height: 0.74rem;
|
|
|
+ line-height: 0.74rem;
|
|
|
+ border: 1px solid #DFE0E4;
|
|
|
+ border-radius: 0.08rem;
|
|
|
+ text-align: center;
|
|
|
+ color: #7C828E;
|
|
|
+ margin: 0 0.18rem 0.3rem 0;
|
|
|
+ padding: 0 0.05rem;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .select{
|
|
|
+ color: #4F50FF;
|
|
|
+ border-color: #4F50FF;
|
|
|
+ }
|
|
|
+ .close{
|
|
|
+ width:1rem;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -1.5rem;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -.5rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .makeSure {
|
|
|
+ height: .9rem;
|
|
|
+ line-height: .9rem;
|
|
|
+ text-align: center;
|
|
|
+ color: #4F50FF;
|
|
|
+ font-size: .32rem;
|
|
|
+ margin-top: .2rem;
|
|
|
+ border-top: 1px solid #E6E6E6;
|
|
|
+ }
|
|
|
+ .mask{
|
|
|
+ .mask;
|
|
|
+ z-index: 999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
luolei