<template>
  <!-- 第二页 -->
  <div class="homeTwo">
    <!-- 第二页盒子内容 -->
    <div class="homeTwobox">
      <!-- 情侣 -->
      <div class="lovers">
        <span>{{ name[0] }}</span>
        <img class="love" src="../image/love.png" alt="" />
        <span>{{ name[1] }}</span>
      </div>
      <!-- 高分 -->
      <div class="score">恋爱指数有机会99分</div>
      <!-- 免费 -->
      <div class="free" @click="popshowFn"></div>
      <!-- 价格 -->
      <div class="price">恋爱好运价：<span>9.9元</span></div>
      <!-- 有机会获得 -->
      <div class="opportunity">
        您将获得：恋爱指数报告&<span>免费领iphone</span>
      </div>
      <!-- 解锁按钮 -->
      <div class="btnUnlock" @click="payWXorZFB"></div>
      <!-- 微信支付 -->
      <div class="WXpay">
        <div class="WXpayleft">
          <div class="wxfont">
            <img class="wxicon" src="../image/WXicon.png" alt="" />
            <p>微信安全支付</p>
          </div>
          <div class="line"></div>
          <div class="zfbfont">
            <img class="wxicon" src="../image/ZFBicon.png" alt="" />
            <p>支付宝安全支付</p>
          </div>
        </div>
        <van-radio-group v-model="radio" class="btnright">
          <van-radio name="1" checked-color="green"></van-radio>
          <van-radio name="2" checked-color="green"></van-radio>
        </van-radio-group>
      </div>
    </div>
    <!-- 弹窗 -->
    <van-popup class="popcontent" v-model="popshow">
      <!-- 标题 -->
      <p class="title">离双方配对报告只差1步</p>
      <p class="titletwo">支付后查看契合度报告</p>
      <!-- 进度 -->
      <div class="progress">
        <div class="progressTop">
          <img class="tick tickbor" src="../image/true.png" alt="" />
          <img class="tick" src="../image/true.png" alt="" />
          <p>仅剩0.7%</p>
        </div>
        <img src="../image/line.png" alt="" />
        <div class="bottomFont">
          <p>信息提交</p>
          <p>生成报告</p>
          <p>查看契合度</p>
        </div>
      </div>
      <!-- 支付按钮 -->
      <div class="paybtn">立即支付</div>
      <!-- 优惠按钮 -->
      <div class="discount">领取优惠红包</div>
      <!-- 领取报告 -->
      <div class="report">已支付点击领取报告</div>
      <!-- 已有人数 -->
      <p class="footerFont">已有1386706人解锁姓名测试</p>
      <p class="footerFont bottomLine">姓名错误，需要重新填写></p>
    </van-popup>
    <!-- 付款人列表 -->
    <div class="payList" v-if="payListshow">{{ listdata }}</div>
  </div>
</template>

<script>
export default {
  name: "homeTwo",
  data() {
    return {
      //支付单选框
      radio: "1",
      // 情侣姓名
      name: [],
      // 弹出层
      popshow: false,
      // 付款人列表显示隐藏
      payListshow: false,
      // 付款人信息
      listdata: "",
      // 定时器
      timer: "",
    };
  },
  methods: {
    // 支付宝，微信
    payWXorZFB() {
      if (this.radio == "1") {
        console.log("微信支付");
        this.$router.push("/result");
      } else if (this.radio == "2") {
        this.$router.push("/result");
      }
    },
    popshowFn() {
      this.popshow = !this.popshow;
    },
  },
  async activated() {
    this.name = await JSON.parse(localStorage.getItem("name"));
    // 付款人列表
    await this.$store.dispatch("gainPayList", 1);
    this.timer = setInterval(() => {
      if (!this.payListshow) {
        var num = Math.floor(
          Math.random() * (this.payListData.length - 1 - 0 + 1) + 0
        );
        console.log(num);
        this.listdata = this.payListData[num];
        this.payListshow = !this.payListshow;
      } else if (this.payListshow) {
        this.payListshow = !this.payListshow;
        num += 1;
      }
    }, 4000);
  },
  deactivated() {
    clearInterval(this.timer);
    this.payListshow = false;
  },
  computed: {
    // 付款人列表
    payListData() {
      return this.$store.state.pay.paylist;
    },
  },
};
</script>

<style lang="scss" scoped>
// 适配函数计算
@function vw($px) {
  @return 100 * $px/720 + vw;
}
* {
  margin: 0;
  padding: 0;
}

// 动画
// 右边字体动画
@keyframes rightTop {
  0% {
    top: vw(523);
  }
  50% {
    top: vw(490);
  }
  100% {
    top: vw(523);
  }
}

// 按钮动画
@keyframes bigSmall {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
// 第二页
.homeTwo {
  width: vw(720);
  display: flex;
  flex-direction: column;
  align-items: center;
  //   第二页盒子内容
  .homeTwobox {
    width: vw(720);
    height: vw(1437);
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    background: url("../image/homeTwoBG.png") 0 0 /100% no-repeat;
    // 情侣
    .lovers {
      position: absolute;
      top: vw(180);
      left: vw(100);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .love {
        width: vw(29);
        height: vw(24);
        display: block;
        margin: 0 vw(8);
      }
      span {
        display: block;
        font-size: vw(32);
        font-weight: 400;
        color: #333333;
      }
    }
    // 高分
    .score {
      font-size: vw(32);
      font-weight: 600;
      color: #f23e79;
      position: absolute;
      top: vw(236);
      right: vw(80);
    }
    // 免费
    .free {
      width: vw(197);
      height: vw(196);
      position: absolute;
      top: vw(523);
      left: vw(443);
      animation: rightTop 2.5s linear infinite;
      background: url("../image/freePic.png") 0 0 /100% no-repeat;
    }
    // 价格
    .price {
      position: absolute;
      top: vw(855);
      left: vw(102);
      font-weight: 400;
      color: #333333;
      font-size: vw(28);
      span {
        color: #e55e8a;
        font-size: vw(30);
      }
    }
    // 有机会获得
    .opportunity {
      position: absolute;
      top: vw(915);
      left: vw(102);
      font-weight: 400;
      color: #333333;
      font-size: vw(28);
      span {
        color: #e55e8a;
        font-size: vw(30);
      }
    }
    // 解锁按钮
    .btnUnlock {
      width: vw(600);
      height: vw(148);
      position: absolute;
      top: vw(975);
      animation: bigSmall 2.5s linear infinite;
      background: url("../image/btnUnlock.png") 0 0 /100% no-repeat;
    }
    // 微信支付
    .WXpay {
      width: vw(560);
      height: vw(139);
      position: absolute;
      top: vw(1127);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .WXpayleft {
        width: vw(254);
        height: vw(139);
        font-weight: 400;
        color: #333333;
        font-size: vw(28);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .wxfont {
          width: vw(226);
          height: vw(48);
          display: flex;
          align-items: center;
          justify-content: space-between;
          //   border-bottom: vw(1) solid gainsboro;
        }
        .line {
          width: vw(560);
          height: vw(1);
          background: gainsboro;
        }
        .zfbfont {
          width: vw(254);
          height: vw(48);
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .wxicon {
          width: vw(48);
          height: vw(48);
        }
      }
      .btnright {
        height: vw(127);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      // 确认按钮
      .affirm {
        width: vw(38);
        height: vw(38);
      }
    }
  }
  // 弹窗
  .popcontent {
    width: vw(540);
    height: vw(868);
    background: #ffffff;
    border-radius: vw(20);
    display: flex;
    align-items: center;
    flex-direction: column;
    // 标题
    .title {
      font-size: vw(40);
      font-weight: 600;
      color: #be061a;
      margin: vw(50) 0 vw(20) 0;
    }
    .titletwo {
      font-size: vw(40);
      font-weight: 600;
      color: #be061a;
    }
    // 进度
    .progress {
      width: vw(403);
      height: vw(104);
      margin-top: vw(52);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // background-color: red;
      .progressTop {
        width: vw(403);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .tick {
          width: vw(35);
          height: vw(30);
        }
        .tickbor {
          padding: vw(5);
          border: vw(1) dashed gainsboro;
        }
        p {
          font-size: vw(22);
          font-weight: 500;
          color: #f4a525;
        }
      }
      img {
        width: vw(403);
        height: vw(22);
      }
      .bottomFont {
        width: vw(403);
        height: vw(30);
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
          font-size: vw(22);
          font-weight: 400;
          color: #333333;
        }
      }
    }
    %btnfont {
      width: vw(443);
      height: vw(90);
      border-radius: vw(50);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: vw(36);
      font-weight: 400;
      color: #ffffff;
    }
    // 支付按钮
    .paybtn {
      background-color: #cf0316;
      margin: vw(46) 0 vw(30) 0;
      @extend %btnfont;
    }
    // 优惠按钮
    .discount {
      background-color: #f4a525;
      @extend %btnfont;
    }
    // 领取报告
    .report {
      border: vw(2) solid #e9ca8f;
      @extend %btnfont;
      color: black;
      margin: vw(30) 0 vw(30) 0;
    }
    // 已有人数
    .footerFont {
      font-size: vw(30);
      font-weight: 400;
      color: #c75c5c;
    }
    .bottomLine {
      margin-top: vw(18);
      text-decoration: underline;
    }
  }
  // 付款人列表
  .payList {
    width: vw(510);
    height: vw(72);
    background: #000000;
    border-radius: vw(14);
    opacity: 0.7;
    position: absolute;
    bottom: vw(90);
    font-size: vw(28);
    font-weight: 400;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>