hospital_health_check/src/views/examProject.vue

<template>
  <div class="pro_con">
    <div class="pro_box" v-for="item in proArr" :key="item.time">
      <div class="pro_top">
        <div class="img_box">
          <img src="~@/assets/image/time.png" alt="" />
        </div>
        <div class="time_box">
            <div class="time_text">{{item.day}}</div>
            <div class="date_txt">{{item.monmet}}</div>
        </div>
      </div>
      <div class="pro_bottom">
        <div class="pro_left">
            <div class="img_box">
                <img src="~@/assets/image/pro.png" alt="" />
            </div>
            <div class="pro_name">{{item.name}}</div>
            <div class="pro_pos">{{item.posi}}</div>
        </div>
        <div class="pro_right">
            <div class="cancel" @click="cancelButton(item)">取消预约</div>
        </div>
      </div>
    </div>
    <div class="act_box">
      <div  class="act_btn" @click="confirm">确认</div>
    </div>
    <van-overlay :show="isShow">
        <div class="wrapper" @click.stop v-show="isSuccess">
            <div class="img_box">
                <img src="~@/assets/image/succ.png" alt="">
            </div>
            <div class="tips">预约成功</div>
            <div class="tip_txt">
                <div>预约成功后若不能按时体检请提前取消</div>
                <div>未提前取消且未按期体检将被拉入黑名单</div>
                <div>被拉黑用户10日内不可再预约</div>
            </div>
            <div class="btn" @click="clickSucc">知道了</div>
        </div>
        <div class="wrapper" @click.stop v-show="!isSuccess">
            <div class="img_box" >
                <img src="~@/assets/image/fail.png" alt="">
            </div>
            <div class="tips">预约失败</div>
            <div class="tip_txt">
                <div>您选择的时间段已无号，请重新预约</div>
            </div>
            <div class="btn" @click="clickFail">知道了</div>
        </div>
        <div class="close_box" @click="clickClose"><img src="~@/assets/image/close.png" alt=""></div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
        proData:{},
        proArr:[],
        isShow:false,
        isSuccess:false
    };
  },
  mounted() {
    console.log(this.$route.params);
    this.proData = this.$route.params;
    this.proData.selectArr.map(item =>{
        this.proArr.push({
            day:this.proData.time,
            name:item.name,
            monmet:item.time,
            posi:item.posi
        })
    })
  },
  methods: {
    cancelButton(val){
        this.proArr =  this.proArr.filter(item => item.name != val.name)
        if(this.proArr.length == 0){
            this.$router.push({
                name:'examination'
            })
        }
        // lightAppJssdk.notification.alert ({
        //     message: "这是一个弹窗",
        //     title: "提示",//可传空
        //     buttonName: "收到",
        //     success:function(data){
        //         //onSuccess将在点击button之后回调
        //         /*回调*/

        //     },
        //     fail:function(data){ //错误返回
        //     }
        // });
    },

    confirm(){
        console.log(this.proArr)
        if(this.proArr.length != 0){
            this.isShow = true;
            this.isSuccess = true
        }
    },

    clickFail(){
        this.$router.replace({
            name:'examination'
        })
    },
    clickSucc(){
        this.$router.replace({
            name:'MyExam'
        })
    },
    clickClose(){
        this.isShow = false
    }
  },
};
</script>

<style scoped lang="scss">
.pro_con {
  width: 100%;
  height: 100%;

  .pro_box {
    width: 98%;
    margin-top: 0.2rem;
    background: #fff;
    margin: 0.4rem auto;
    margin-bottom: 0.7rem;
    

    .pro_top{
        display: flex;
        padding-bottom: 0.26rem;
        border-bottom: 1px solid #EEEEEE;
        .img_box{
            display: flex;
            align-items: center;
            margin-right: 0.24rem;
            img{
                width: 0.5rem;
                height: 0.5rem;
            }
        }
        .time_box{
            .time_text{
                width: 1.46rem;
                height: 0.32rem;
                text-align: center;
                background: #F6F6F6;
                border-radius: 0.08rem;
                line-height: 0.32rem;
                font-size: 0.24rem;
                color: #999999;
            }
            .date_txt{
                font-size: 0.3rem;
                font-weight: bold;
                color: #333;
                line-height: 0.46rem;
            }
        }
    }

    .pro_bottom{
        display: flex;
        justify-content: space-between;
        height: 0.6rem;
        margin-top: 0.24rem;

        .pro_left{
            display: flex;
        

            .img_box{
                height: 100%;
                display: flex;
                align-items: center;
                img{
                    width: 0.5rem;
                    height: 0.5rem;
                
                }
            }
            .pro_name{
                height: 100%;
                display: flex;
                align-items: center;
                font-size: 0.3rem;
                color: #333;
                font-weight: bold;
                margin-left: 0.24rem;
            }
            .pro_pos{
                height: 100%;
                display: flex;
                align-items: center;
                font-size: 0.24rem;
                color: #999;
                margin-left: 0.24rem;
            }
        }
        .pro_right{
            height: 100%;
            display: flex;
            align-items: center;
        
            .cancel{
                width: 1.5rem;
                height: 0.5rem;
                background: rgba(22, 119, 255,.1);
                border-radius: 0.26rem;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0.24rem;
                color: #1677FF;
                margin-right: 0.24rem;
            }
        }
    }
  }

  .act_box {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding: 0.24rem;
    background: #fff;
    .act_btn{
      color: #FFFFFF;
      font-size: 0.3rem;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      line-height:0.96rem;
      text-align: center;
      background: #1677FF;
      border-radius: 0.08rem;
    }
  }

  .wrapper{
    width: 5.98rem;
    height: 6.66rem;
    background: #FFFFFF;
    border-radius: 0.16rem;
    margin: 0 auto;
    margin-top: 2.76rem;

    .img_box{
        display: flex;
        justify-content: center;
        img{
            width: 1rem;
            height: 1rem;
            margin-top: 1.2rem;
        }
    }
    .tips{
        display: flex;
        justify-content: center;
        font-size: 0.34rem;
        color:#000;
        font-weight: bold;
        margin: 0.56rem 0 0.2rem 0;
        font-family: PingFang SC-Regular, PingFang SC;
        
    }

    .tip_txt{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 0.24rem;
        color: #666;
        font-family: PingFang SC-Regular, PingFang SC;
    }
    .btn{
        width: 3rem;
        height: 0.8rem;
        background: #1677FF;
        border-radius: 0.08rem;
        margin: 0 auto;
        margin-top: 0.6rem;
        font-size: 0.3rem;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFang SC-Regular, PingFang SC;
    }
  }

  .close_box{
        display: flex;
        justify-content: center;
        margin-top: 0.6rem;
        img{
            width: 0.5rem;
            height: 0.5rem;
        }
  }
}
</style>