hospital_health_check/src/views/examProject.vue

<template>
    <div class="pro_con">
        <div class="pro_box" v-for="(item, index) 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.apmDay }}</div>
                    <div class="date_txt">{{ item.period }} {{ item.timeFrame }}</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.project }}</div>
                    <div class="pro_pos">{{ item.cuAddr }}</div>
                </div>
                <div class="pro_right">
                    <div class="cancel" @click="cancelButton(index)">取消项目</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" style="text-align: left;padding:0 0.5rem;">
                    <!-- <div>预约成功后若不能按时体检请在开始时间</div>
                    <div>前30分钟取消该预约</div>
                    <div>未按期体检{{blacklistOutDate}}次后将被拉黑</div>
                    <div>被拉黑的用户请于{{blacklistOutDate}}日后再次预约</div> -->
                    <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;预约成功后若不能按时体检请在开始时间前30分钟取消该预约。未按期体检{{timesToBlacklist}}次后将被拉黑，被拉黑的用户请于{{blacklistOutDate}}日后再次预约。</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>{{ failTips }}</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>
import { postExam } from "@/api/examination";
export default {
    data() {
        return {
            proData: {},
            proArr: [],
            isShow: false,
            isSuccess: false,
            userInfo: {},
            failTips: '',
            blacklistOutDate:'',
            timesToBlacklist:'',//拉黑限制次数
        };
    },
    mounted() {
        console.log('query', this.$route.query);
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        console.log(this.userInfo);
        this.proData = this.$route.query;
        let selectArr = JSON.parse(this.proData.selectArr);
        selectArr.map(item => {
            this.proArr.push({
                apmDay: this.proData.time.replace(/\//g, '-'),
                createDept: this.proData.createDept,
                project: item.name,
                cuAddr: item.posi,
                period: item.time.substr(0, 2),
                timeFrame: item.time.substr(3),
                cupName: this.Base64.encode(this.userInfo.name),
                cupPhone: this.Base64.encode(this.userInfo.mobile),
                cupCardNo: this.Base64.encode(this.userInfo.papersnumber)
            })
        })
        // console.log("proArr",this.proArr)
    },
    methods: {
        cancelButton(idx) {
            this.proArr.splice(idx, 1);
            // this.proArr = this.proArr.filter(item => item.name != val.name)
            if (this.proArr.length === 0) {
                this.$router.go(-1);
                // this.$router.push({
                //     name: 'examination'
                // })
            }
            // lightAppJssdk.notification.alert ({
            //     message: "这是一个弹窗",
            //     title: "提示",//可传空
            //     buttonName: "收到",
            //     success:function(data){
            //         //onSuccess将在点击button之后回调
            //         /*回调*/

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

        confirm() {
            let param = this.proArr;
            console.log(param)
            this.$toast.loading({
                message: '请求中',
                duration: 0,
            })
            try {
                if (this.GlobalConfig.appMode) {
                    // console.log(JSON.stringify(param))
                    vaildInterfacefn("cgstjyyxuwxt", "qdsgajjtjczdtjyytj", JSON.stringify({ data: param }), "2", "https://" + this.GlobalConfig.urlCreatesign, "https://" + this.GlobalConfig.urlGateway).then((value) => {
                        this.$toast.clear();
                        console.log('value', value);
                        let retData = JSON.parse(value);
                        console.log('value2', retData);
                        if (retData.code == 200) {
                            this.isShow = true;
                            this.isSuccess = true
                            this.blacklistOutDate = retData.data.blacklistOutDate;
                            this.timesToBlacklist = retData.data.timesToBlacklist;
                        } else {
                            this.failTips = retData.msg;
                            this.isShow = true;
                            this.isSuccess = false
                        }
                    }, err => {
                        this.$toast.clear();
                    })
                }
                else {
                    postExam(JSON.stringify({ data: param })).then(res => {
                        this.$toast.clear();
                        console.log(res)
                        if (res.code == 200) {
                            this.isShow = true;
                            this.isSuccess = true;
                            this.blacklistOutDate = res.data.blacklistOutDate;
                            this.timesToBlacklist = res.data.timesToBlacklist;
                        } else {
                            this.failTips = res.msg
                            this.isShow = true;
                            this.isSuccess = false
                        }
                    }, err => {
                        this.$toast.clear();
                    })
                }
            } catch (error) {
                this.$toast.clear();
            }
        },

        clickFail() {
            this.$router.replace({
                name: 'examination',
                query: {
                    id: this.proData.createDept
                }
            })
        },
        clickSucc() {
            this.$router.replace({
                name: 'MyExam',
                query: {
                    id: this.proData.createDept
                }
            })
        },
        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>