移动端 vantui 二次封装 van-popup组件

初始版简易

<!-- 弹框内容 -->
<cl-popup v-model="show" overlay-class="header-overlay" :close-on-click-overlay="false" close-icon-position="top-right">
  <div id="point">
    <img id="active1" src="/img/index1/acitve.png" alt=""/>
    <img id="active2" src="/img/index1/chanle.png" alt="" @click="chanle"/>
    <div class="rule">
      <img src="/img/index1/rule.png" alt="" @click="rule"/>
      <img src="/img/index1/upload.png" alt="" @click="rule"/>
      <img src="/img/index1/point.png" alt="" @click="rule"/>
      <div class="coupon" @click="coupon">我的优惠劵</div>
    </div>
  </div>
</cl-popup>

css >>
      // 组件进行全局设置内容  重要 必设 不然下面都实现不了
    .van-popup{
      background: none;
      height: 100%;
      width: 100%;
    }
    .van-overlay{
      background-color:rgba(0,0,0,0.2)
    }
    
    
    //从这边不重复
   #point{
      position: relative;
      width:610px;
      height:798px;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);

  .rule{
    position: absolute;
    display: flex;
    flex-direction: column;
    margin-top: 90px;
    margin-left: 65px;
    img{
      width: 480px;
      height: 140px;
    }
    img:nth-child(1),img:nth-child(2){
      margin-bottom: 20px;
    }
    .coupon{
      margin-top: 65px;
      margin-left: 26px;
      width: 428px;
      height: 88px;
      background: #FF7051;
      border-radius: 70px;
      opacity: 1;

  
  font-size: 32px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  letter-spacing: 1px;
  text-align: center;
  line-height: 88px;
}
}
#active1{
  // position: absolute;
    width:100%;
    height:100%;
  //   left: 50%;
  //   top: 50%;
  //   transform: translate(-50%,-50%);
}
#active2{
  width: 60px;
  height: 60px;
  position: absolute;
  top: -20px;
  right: -20px;
}

}

单独封装直接cv使用 css样式清晰可见改就完事了 first类 删了自己改自己的内容

js >>
showtrue ： true

html >>
<!-- 打卡成功 -->
<cl-popup v-model="showtrue" overlay-class="header-overlay" :close-on-click-overlay="false"
  close-icon-position="top-right">
  <div id="point">
    <img id="active1" src="/img/elastic/true.png" alt="" />
    <img id="active2" src="/img/elastic/chanle.png" alt="" @click="chanle" />

    <div class="first">
      <img id="active3" src="/img/elastic/correct.png" alt="">
      <div class="card_true">打卡成功</div>
      <div class="returnline">
        <img src="/img/elastic/returnline.png" alt="">
        <div class="line" @click="chanle">返回打卡路线</div>
      </div>
      <p></p>
      <div class="ranking_list">
        <div>打卡排行榜</div>
        <div @click="more">更多>></div>
      </div>
      <div class="cont">
        <div class="bottom" v-for="(item,index) in CheckCardUser" :key="index">
          <div class="left">
            <div class="picleft">
              <div v-if="index < 3">
                <img :src="`/img/elastic/lea_${index+1}.png`" alt="">
              </div>
              <div class="else" v-else>{{index > 8 ? (index+1) : '0' + (index+1)}}</div>
            </div>
            <div class="picright">
              <img :src="getFileUrl(item.user.coverPic)" alt="" />
              <div>{{item.user.nickname}}</div>
            </div>
          </div>
          <div class="right">
            <div>{{item.questionTime ? item.questionTime : 0 }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</cl-popup>


css >>

//成功
#point{
overflow: hidden;
position: relative;
width:671px;
height:1205px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

#active1{
    // position: absolute;
        width:100%;
        height:100%;
    //   left: 50%;
    //   top: 50%;
    //   transform: translate(-50%,-50%);
}
#active2{
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
}
.first{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    // background-color: #fff;
    #active3{
        width: 450px;
        height: 420px;
        margin: 100px 100px 0 ;
    }
    .card_true{
        font-size: 36px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        letter-spacing: 2px;
        text-align: center;
        margin: 35px 0;
    }
    .returnline{
        width: 394px;
        height: 98px;
        margin-left: 125px;
        position: relative;
        margin-bottom: 35px ;
        img{
            display: inline-block;
            width: 100%;
            height: 100%;
            margin: auto;
        }
        .line{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            font-size: 32px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
        }
    }

    p{
        width: 470px;
        height: 2px;
        background: #FFFFFF;
        opacity: 0.5;
        margin: 30px 90px;
    }
    .ranking_list{
        display: flex;
        justify-content: space-between;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        letter-spacing: 1px;
        margin-left: 90px;
        margin-right: 110px;
        margin-bottom: 20px;
    }

    .cont{
        overflow: auto;
        // margin-bottom: 500px;
        height: 265px;
    }
    .bottom{
        margin: 0 95px;
        margin-right: 110px;
        display: flex;
        //
        margin-bottom: 30px;
        justify-content: space-between;
        .left{
            display: flex;
            justify-content: space-between;
            .picleft{
                // width: 40px;
                // height: 40px;

                img{
                    margin-top: 15px;
                    width: 40px;
                    height: 40px;
                    vertical-align: middle;
                }
                .else{
                    text-align: center;
                    font-weight: 700;
                    width: 40px;
                    color: #fff;
                    margin-top: 15px;
                }
            }
            .picright{
                // width: 70px;
                // height: 70px;
                display: flex;
                justify-content: space-between;

                img{
                    width: 70px;
                    height: 70px;
                    vertical-align: middle;
                    margin: 0 20px 0 12px;
                    border-radius: 50%;

                }
                div{
                    margin-top: 20px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    width: 200px;
                    font-size: 24px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 34px;
                    letter-spacing: 1px;
                    vertical-align: middle;
                }
            }

        }
        .right{
            // vertical-align: middle;
            margin-top: 20px;
            // line-height: 26px;
            // width: 100%;
            height: 26px;
            background: #D8D8D8;
            border-radius: 13px;
            opacity: 0.4;
            z-index: -1;
            width: min-content;
            padding: 0 2px;

            div{
                text-align: center;

                font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                // font-weight: 700;
                // color: #FFF;
                line-height: 22px;
                letter-spacing: 1px;
                z-index: 1;
                padding: 2px;

            }
        }
    }

}

}

第二种

布局+校验 
html >>
   <!-- 大奖兑奖 -->
    <cl-popup v-model="getreward" overlay-class="header-overlay" :close-on-click-overlay="false"
  close-icon-position="top-right">
  <div id="getreward">
    <img id="active1" src="/img/elastic/tickets1.png" alt="" />
    <img id="active2" src="/img/elastic/chanle.png" alt="" @click="chanle" />
    <div class="first">
      <img id="active3" src="/img/elastic/tickets2.png" alt="">
      <div>祝贺您获得本次奖励</div>
      <div>《十三角关系》演出票1张</div>
      <div>演出时间: 10月3日19:30上剧场</div>
      <div>使用规则: </div>
      <div>每个微信ID限兑奖一次,错过约定兑奖时间概不负责哈！</div>
      <div>请输入您的联系手机号码:</div>
      <div class="ipt">
        <div class="input"><input type="tel" placeholder="请输入手机号" maxlength="11" v-model="phonenumber"></div>   
        <img src="/img/elastic/determine.png" alt="" @click="determine">
      </div>
    </div>
  </div>
</cl-popup>

css >>
 //大奖获取
#getreward{
  overflow: hidden;
  position: relative;
  width: 670px;;
  height:1250px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);

  #active1{
      // position: absolute;
          width: 671px;;
          height: 1200px;
          margin-top: 30px;
          margin-left: 15px;
      //   left: 50%;
      //   top: 50%;
      //   transform: translate(-50%,-50%);
  }
  #active2{
      width: 60px;
      height: 60px;
      position: absolute;
      top: 10px;
      right: 0;
      z-index: 1;
      }
  .first{
      position: absolute;
      width: 670px;;
      height:1250px;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      text-align: center;
      margin-top: 37px;
      // background-color: #fff;
      #active3{
          width: 450px;
          height: 420px;
          margin: 100px 120px 0 ;
      }
      & div:nth-child(2){
          font-size: 36px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          letter-spacing: 2px;
          margin-bottom: 28px;
          margin-top: 20px;
      }
      & div:nth-child(3),div:nth-child(4){
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          letter-spacing: 1px;
      }
      & div:nth-child(5){
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          letter-spacing: 1px;
          margin-top: 30px;
          color: rgba(255,255,255,.7);
      }
      & div:nth-child(6){
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          letter-spacing: 1px;
          width: 470px;
          margin: auto;
          color: rgba(255,255,255,.7);
      }
      & div:nth-child(7){
          font-size: 28px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          letter-spacing: 1px;
          margin-right: 110px;
          margin-top: 50px;
          color: rgba(255,255,255,.7);
      }

      .ipt{
          width: 490px;
          display: flex;
          justify-content: space-between;
          margin-left: 110px;
          .input{
              width: 346px;
              height: 80px;
              margin-top: 20px;

              input{
                  font-size: 28px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #FFFFFF;
                  line-height: 80px;
                  border-radius: 12px;
                  border: 2px solid #FFFFFF;

                  letter-spacing: 2px;
                  float: left;
                  width: 100%;
                  height: 100%;
                  background-color: transparent;
                  padding-left: 20px;

              }
              input::-webkit-input-placeholder {
                  color: #fff;
              }
          }
          img{
              
              width: 140px;
              height: 120px;
          }
      }
      

  }

} 

js >>
手机号校验
// 兑奖结束 
  determine(){
    let re = /^1[3-9]\d{9}$/
    // 正则，验证手机号输入是否正确
    let show = re.test(this.phonenumber)
    // 若正确返回true，反之false
    this.isShow = show
    // isShow获取之后返回到v-if进行判断是消失还是出现
    if (this.isShow) {

      let code = this.$api.user.getMiscCouponCodeByMobile(this.userInfo.id, 'xq1003',this.phonenumber)
      code.then(res =>{
        this.code = res.code
        // console.log(res.code);
        if(this.code === ""){
        this.getreward = false
        this.losereward = true //领完了
      }else{
        this.getreward = false
        this.getreward_end = true
      }
      })
      console.log(code);
      // 一定要进行判断，只有返回的是true才证明输入电话号码正确
    }else{
      this.$toast('请正确输入手机号')
    }

  },