• vue点击出现蒙版


     

    需求:

    1.点击一个事件时弹出一个蒙版;

    2.蒙版上有取消,删除事件;(点击取消时候蒙版消失,点击删除时,删除蒙版并消失);

    3.点击空白地方,蒙版也消失;

     
    <template>
        <div class="waitPay">
            <div class="logo">
                <span></span>
                <span>保单号{{accidentData.orderId}}</span>
                <span @click="isdele">删除</span>
            </div>
            <div class="carInfo">
                <div class="text">
                    <p>{{accidentData.orderMemberName}}</p>
                    <p>投保人:{{accidentData.policyHolder}} </p>
                    <p>被保人: {{accidentData.protectHolder}} </p>
                    <p>
                        结算日期:{{accidentData.orderMemberName}}
                    </p>
                </div>
                <div class="item-img">
                    <img :src="orderStatus" alt="">
                </div>
            </div>
            <div class="item">
                <p>
                    <span>保费 :{{accidentData.amount}}</span>
                    <span>推广费 : 271.1</span>
                </p>
                <p v-show="isState">
                    <span>
                        重新投保
                    </span>
                    <span>
                        付款
                    </span>
                </p>
            </div>
            <IsDeleMask v-show="show" @isShow="isShow" />
        </div>
    </template>
    <script>
    import IsDeleMask from "@/components/IsDeleMask.vue"; // 是否删除
    export default {
    props: ["accidentData"],
    components: {
    IsDeleMask
    },
    data(){
         return{
             show:false,
         }
    },
    computed: {
    orderStatus() {
    let obj = {
    "10000531": require("@/assets/img/yi_chu_dan.png"), // 已出单
    "10000532": require("@/assets/img/daizhifu.png"), // 待支付
    "10000533": require("@/assets/img/tui-dan.jpg") // 退单
    };
    return obj[this.accidentData.orderStatus];
    },
    isState() {
    let obj = {
    "10000531": false, // 已出单
    "10000532": true, // 未出单
    "10000533": false // 退单
    };
    return obj[this.accidentData.orderStatus];
    }
    },
    methods: {
    isdele() {
    this.show = true;
    },
    isShow() {
    this.show = false;
    }
    }
    };
    </script>
    <style lang="scss" scoped>
    .waitPay {
    94.67%;
    max-height: 4.6rem;
    background-color: #fff;
    margin: auto;
    margin-bottom: 0.2rem;
    border: 0.18rem;
    > .logo {
    100%;
    height: 0.7rem;
    // background: green;
    display: flex;
    align-items: center;
    border-bottom: 0.012rem solid #f2f2f2;
    > span:nth-child(1) {
    color: #f76c41;
    font-weight: bold;
    font-size: 0.28rem;
    margin-left: 8%;
    }
    > span:nth-child(2) {
    color: #6a6a6a;
    font-size: 0.22rem;
    margin-left: 8%;
    margin-right: 10%;
    }
    > span:nth-child(3) {
    text-align: right;
    color: #333333;
    font-size: 0.22rem;
    font-weight: bold;
    }
    }
    > .carInfo {
    100%;
    height: 2.32rem;
    // background: red;
    display: flex;
    border-bottom: 0.012rem solid #f2f2f2;
    .text {
    padding-left: 0.3rem;
    73.33%;
    // background: yellow;
    height: 2.32rem;
    box-sizing: border-box;
    > p {
    font-size: 0.26rem;
    color: #6a6a6a;
    // font-weight: bold;
    line-height: 0.46rem;
    }
    > p:nth-child(1) {
    padding-top: 0.25rem;
    color: #333333;
    font-size: 0.3rem;
    font-weight: bold;
    }
    }
    > .item-img {
    26.67%;
    display: flex;
    margin-bottom: 0.61rem;
    margin-top: 0.4rem;
    justify-content: center;
    > img {
    1.3rem;
    height: 1.3rem;
    align-items: center;
    }
    }
    }
    > .item {
    100%;
    max-height: 1.58rem;
    // background: green;
    > p:nth-child(1) {
    100%;
    height: 0.69rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > span {
    font-size: 0.24rem;
    color: #f76c41;
    font-weight: bold;
    }
    > span:nth-child(1) {
    padding-left: 0.3rem;
    }
    > span:nth-child(2) {
    padding-right: 0.3rem;
    }
    }
    > p:nth-child(2) {
    100%;
    height: 0.89rem;
    > span {
    2rem;
    height: 0.7rem;
    display: inline-block;
    text-align: center;
    line-height: 0.7rem;
    font-size: 0.26rem;
    }
    > span:nth-child(1) {
    border: 0.012rem solid #6a6a6a;
    color: #6a6a6a;
    margin-left: 30.9%;
    margin-right: 6.5%;
    }
    > span:nth-child(2) {
    background-color: #f76c41;
    color: white;
    }
    }
    }
    }
    </style>
    <template>
        <div class="isDele" @click="kbxs">
            <div class="item">
                <p>是否删除</p>
                <p>
                    <span>
                        取消
                    </span>
                    <span>
                        删除
                    </span>
                </p>
            </div>
        </div>
    </template>
    <script>
    export default {
    data() {
    return {
    deleData: ""
    };
    },
    methods: {
         kbxs(e) {
             if (e.target.tagName === 'DIV') {
                 this.$emit('isShow')
             }else if (e.target.tagName === 'SPAN') {
                if (e.target.innerHTML.indexOf('取消') !== -1 ) {
                    this.handleClick('取消')
                }else {
                    this.handleClick('删除')
                }
             }
         },
    handleClick(type) {
            if (type == '取消') {
                this.$emit('isShow')
                return
            }
    let datas = {
    // orderId:'OPRO20180823160539323',
    };
    this.$http.get("delect", datas).then(({ data }) => {
    if (data.code == 1) {
    this.$dialog.toast({
    mes: data.msg,
    timeout: 1500,
    icon: "success",
    callback: () => {
    this.$emit('isShow')
    }
    });
    }
    });
    }
    }
    };
    </script>

    <style lang="scss" scoped>
    .isDele {
    position: fixed;
    top: 0;
    left: 0;
    100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;

    > .item {
    6.3rem;
    height: 3rem;
    background: #fff;
    border-radius: 0.1rem;
    > p:nth-child(1) {
    height: 2.05rem;
    color: #333333;
    font-size: 0.38rem;
    font-weight: bold;
    text-align: center;
    line-height: 2.05rem;
    z-index: 200;
    }
    > p:nth-child(2) {
    100%;
    height: 0.95rem;
    // background: green;
    > span {
    color: #6a6a6a;
    display: inline-block;
    50%;
    font-size: 0.28rem;
    text-align: center;
    line-height: 0.95rem;
    }
    > span:nth-child(2) {
    color: #fff;
    background-color: #f76c41;
    line-height: 0.97rem;
    border-radius: 0 0 0.1rem 0;
    }
    }
    }

    font-size: 0.3rem;
    color: green;
    }
    </style>
     
     
  • 相关阅读:
    [转载]PostgreSQL 的昨天、今天和明天 Joe
    [转载]ArcObjects使用小记~Singleton objects Joe
    [小记]postgresql的系统表 Joe
    ~PostgreSQL About~ Joe
    [转]Three things you should never put in your database Joe
    经典问题之汉诺塔
    经典问题之费式级数
    ExtJs 表单和表格之间进行数据交互
    commonfileupload 上传单个或者多个文件 示例
    软件工程中10个重要思想
  • 原文地址:https://www.cnblogs.com/Annely/p/11925665.html
Copyright © 2020-2023  润新知