<template>
  <!-- 第三页 -->
  <div class="pay">
    <!-- 第三页盒子 -->
    <div class="paybox">
      <!-- 横幅 -->
      <div class="banner"></div>
      <!-- 订单编号 -->
      <div class="orderId">订单编号：{{ pairResult.order_no }}</div>
      <!-- 支付 -->
      <div class="paycontent">
        <!-- 人物 -->
        <div class="character">
          <div class="leftcharacter">
            <p class="nameTop">{{ $route.query.boy }}</p>
            <img src="../image/leftpic.png" alt="" />
            <p class="timeFooter"></p>
          </div>
          <img class="loveline" src="../image//loveline.png" alt="" />
          <div class="rightcharacter">
            <p class="nameTop">{{ $route.query.girl }}</p>
            <img src="../image/rightpic.png" alt="" />
            <p class="timeFooter"></p>
          </div>
        </div>
        <!-- 特价 -->
        <div class="special">
          <p class="original">原价：¥168</p>
          <p class="luck">吉时特价：</p>
          <p class="nowpri">¥ 9.9</p>
        </div>
        <!-- 倒计时 -->
        <p class="count">
          <span>倒计时：</span>
          <van-count-down
            class="timeCountDownmiao"
            :time="time"
            format="HH 小时 mm 分 ss 秒"
          />
        </p>
        <!-- 微信支付 -->
        <div class="wxpaybtn" @click="payWX">
          <img src="../image/wxfont.png" alt="" />
        </div>
        <!-- 支付宝支付 -->
        <!-- <div class="zfbpaybtn">
          <img src="../image/zfbfont.png" alt="" />
        </div> -->
      </div>
      <!-- 支付完成 -->
      <div class="complete">支付完成后，将为您解锁其余八项重要内容：</div>
      <!-- 结果 -->
      <div class="result">
        <div class="each">
          <div class="eachtitle">
            <img class="rotate" src="../image/edge.png" alt="" />
            <p>第一：{{ $route.query.girl }}小姐的性格解析</p>
            <img src="../image/edge.png" alt="" />
          </div>
        </div>
        <div class="each">
          <div class="eachtitle">
            <img class="rotate" src="../image/edge.png" alt="" />
            <p>第二：{{ $route.query.boy }}先生的性格解析</p>
            <img src="../image/edge.png" alt="" />
          </div>
        </div>
        <div class="each">
          <div class="eachtitle">
            <img class="rotate" src="../image/edge.png" alt="" />
            <p>第三：配对分析</p>
            <img src="../image/edge.png" alt="" />
          </div>
          <div class="resultcontent">
            <div class="leftFont">
              <p>你们一生的婚姻究竟会是怎样呢?</p>
              <p>相比于其他人来说，是好是坏?</p>
              <p>哪些因素会干扰你们的爱情?</p>
            </div>
            <div class="rightImg">
              <img src="../image/lockUp.png" alt="" />
              <p>解锁查看</p>
            </div>
          </div>
        </div>
        <div class="each">
          <div class="eachtitle">
            <img class="rotate" src="../image/edge.png" alt="" />
            <p>第四：你们的爱情危机</p>
            <img src="../image/edge.png" alt="" />
          </div>
          <div class="resultcontent">
            <div class="leftFont">
              <p>两人相处时会出现哪些危机?</p>
              <p>你们的幸福指数是多少?</p>
              <p>如何破解危机，守护爱情?</p>
            </div>
            <div class="rightImg">
              <img src="../image/lockUp.png" alt="" />
              <p>解锁查看</p>
            </div>
          </div>
        </div>
        <div class="each">
          <div class="eachtitle">
            <img class="rotate" src="../image/edge.png" alt="" />
            <p>第五：婚前婚后变化</p>
            <img src="../image/edge.png" alt="" />
          </div>
          <div class="resultcontent">
            <div class="leftFont">
              <p>你们是否是天生一对?</p>
              <p>在别人眼中你们的婚姻是怎样的?</p>
              <p>生活中你们是怎样和谐相处?</p>
            </div>
            <div class="rightImg">
              <img src="../image/lockUp.png" alt="" />
              <p>解锁查看</p>
            </div>
          </div>
        </div>
        <div class="each">
          <div class="eachtitle">
            <img class="rotate" src="../image/edge.png" alt="" />
            <p>第六：（婚配指数）心有灵犀</p>
            <img src="../image/edge.png" alt="" />
          </div>
          <div class="resultcontent">
            <div class="leftFont">
              <p>对方会是个温柔体贴的人吗?</p>
              <p>会屈就于你还是你只有听从的份?</p>
              <p>相处之中你们是否更具默契?</p>
            </div>
            <div class="rightImg">
              <img src="../image/lockUp.png" alt="" />
              <p>解锁查看</p>
            </div>
          </div>
        </div>
        <div class="each">
          <div class="eachtitle">
            <img class="rotate" src="../image/edge.png" alt="" />
            <p>第七：（感情质量）相扶相旺</p>
            <img src="../image/edge.png" alt="" />
          </div>
          <div class="resultcontent">
            <div class="leftFont">
              <p>配偶是得力助手还是对方的累赘?</p>
              <p>你对配偶是助旺还是助衰呢?</p>
              <p>你们能互相助旺、优势互补吗?</p>
            </div>
            <div class="rightImg">
              <img src="../image/lockUp.png" alt="" />
              <p>解锁查看</p>
            </div>
          </div>
        </div>
        <div class="each">
          <div class="eachtitle">
            <img class="rotate" src="../image/edge.png" alt="" />
            <p>第八：爱情保卫</p>
            <img src="../image/edge.png" alt="" />
          </div>
          <div class="resultcontent">
            <div class="leftFont">
              <p>你们的婚后生活稳定吗？</p>
              <p>婚姻生活中会遇到哪些危机?</p>
              <p>维系二人感情稳定的方法?</p>
            </div>
            <div class="rightImg">
              <img src="../image/lockUp.png" alt="" />
              <p>解锁查看</p>
            </div>
          </div>
        </div>
        <div class="each">
          <div class="eachtitle">
            <img class="rotate" src="../image/edge.png" alt="" />
            <p>第九：（双方优点）魅力相吸</p>
            <img src="../image/edge.png" alt="" />
          </div>
          <div class="resultcontent">
            <div class="leftFont">
              <p>你们的婚姻保质期有多久？</p>
              <p>另一半是否有出轨倾向?</p>
              <p>针对你们的爱情保鲜秘籍是什么?</p>
            </div>
            <div class="rightImg">
              <img src="../image/lockUp.png" alt="" />
              <p>解锁查看</p>
            </div>
          </div>
        </div>
        <div class="each">
          <div class="eachtitle">
            <img class="rotate" src="../image/edge.png" alt="" />
            <p>第十：（婚后生活）子女同步</p>
            <img src="../image/edge.png" alt="" />
          </div>
          <div class="resultcontent">
            <div class="leftFont">
              <p>孩子能让你们开心还是疲惫?</p>
              <p>孩子的到来会让婚姻变得更加稳固?</p>
            </div>
            <div class="rightImg">
              <img src="../image/lockUp.png" alt="" />
              <p>解锁查看</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 回到顶部 -->
    <div
      class="returnTop"
      :class="showTop ? 'showx' : ''"
      id="retTop"
      @click="returnTop"
    ></div>
  </div>
</template>

<script>
export default {
  name: "pay",
  data() {
    return {
      // 返回顶部
      showTop: true,
      // 倒计时
      time: 1 * 60 * 60 * 1000,
    };
  },
  methods: {
    // 回到顶部
    async returnTop() {
      //滚动条总路程
      var gdt = document.documentElement.scrollTop;
      //滚动条速度
      var gdtsudu = gdt / 20;
      var timer = setInterval(() => {
        document.documentElement.scrollTop -= gdtsudu;
        if (document.documentElement.scrollTop <= 0) {
          clearInterval(timer);
          this.showTop = true;
        }
      }, 10);
    },
    // 微信支付
    async payWX() {
      // this.$router.push({
      //   path: "/result",
      //   query: {
      //     order_no: this.pairResult.order_no,
      //   },
      // });
      await this.$store.dispatch("gainPayWX", {
        order_no: this.pairResult.order_no,
      });
      location.href =
        this.$store.state.pay.WXurl +
        "&redirect_url=" +
        encodeURIComponent(
          "http://estimate.gzrkkj.cn/#/result?order_no=" +
            this.pairResult.order_no
        );
    },
  },
  mounted() {
    // 返回顶部显示
    document.addEventListener("scroll", () => {
      if (document.documentElement.scrollTop > 350) {
        this.showTop = false;
      }
    });
  },
  computed: {
    // 配对信息
    pairResult() {
      return this.$store.state.pay.pairData;
    },
  },
};
</script>

<style lang="scss" scoped>
// 适配函数计算
@function vw($px) {
  @return 100 * $px/720 + vw;
}
* {
  margin: 0;
  padding: 0;
}
// 第三页
.pay {
  width: vw(720);
  display: flex;
  flex-direction: column;
  align-items: center;
  //   第三页盒子
  .paybox {
    width: vw(720);
    display: flex;
    flex-direction: column;
    align-items: center;
    //   横幅
    .banner {
      width: vw(720);
      height: vw(494);
      background: url("../image/bannerThree.png") 0 0 /100% no-repeat;
    }
    //   订单编号
    .orderId {
      width: vw(720);
      height: vw(88);
      background: #ffffff;
      font-size: vw(28);
      font-weight: 400;
      color: #333333;
      line-height: vw(88);
      padding-left: vw(20);
      box-sizing: border-box;
    }
    //   支付
    .paycontent {
      width: vw(720);
      height: vw(790);
      display: flex;
      flex-direction: column;
      align-items: center;
      border-bottom: vw(2) solid #e7d1c1;
      border-top: vw(2) solid #e7d1c1;

      //   人物
      .character {
        width: vw(680);
        height: vw(456);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: vw(20) 0 vw(26) 0;

        .leftcharacter {
          @extend %LorRpic;
        }
        .rightcharacter {
          @extend %LorRpic;
        }
        %LorRpic {
          width: vw(290);
          height: vw(456);
          border-radius: vw(16);
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-between;
          background-color: #f0e6c2;
          img {
            width: vw(290);
            height: vw(320);
          }
          .nameTop {
            @extend %fontTorB;
            font-size: vw(32);
          }
          .timeFooter {
            @extend %fontTorB;
            font-size: vw(28);
          }
          %fontTorB {
            width: vw(290);
            height: vw(68);
            font-weight: 400;
            color: #333333;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .loveline {
          width: vw(89);
          height: vw(55);
        }
      }
      //   特价
      .special {
        width: vw(533);
        height: vw(62);
        display: flex;
        align-items: center;
        justify-content: space-between;

        .original {
          font-size: vw(32);
          font-weight: 500;
          color: #333333;
          text-decoration: line-through;
        }
        .luck {
          font-size: vw(44);
          font-weight: 600;
          color: #333333;
        }
        .nowpri {
          font-size: vw(44);
          font-weight: 500;
          color: #fe0000;
        }
      }
      //   倒计时
      .count {
        height: vw(42);
        font-size: vw(30);
        font-weight: 400;
        color: #333333;
        margin: vw(9) 0 vw(23) 0;
        display: flex;
        align-items: center;
        .timeCountDownmiao {
          font-size: vw(30);
          display: flex;
          height: vw(42);
          align-items: center;
        }
        span {
          font-size: vw(32);
          display: flex;
          height: vw(42);
          align-items: center;
        }
      }
      //   微信支付
      .wxpaybtn {
        width: vw(598);
        height: vw(88);
        background-color: #63ab35;
        border-radius: vw(44);
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: vw(230);
          height: vw(50);
        }
      }
      //   支付宝支付
      .zfbpaybtn {
        width: vw(598);
        height: vw(88);
        background-color: #198df4;
        border-radius: vw(44);
        margin: vw(20) 0 vw(61) 0;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: vw(270);
          height: vw(50);
        }
      }
    }
    // 完成
    .complete {
      width: vw(720);
      height: vw(100);
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: vw(2) solid #e7d1c1;
      border-top: vw(2) solid #e7d1c1;
      font-size: vw(32);
      font-weight: 500;
      color: #333333;
      margin: vw(10) 0 vw(30) 0;
    }
    // 结果
    .result {
      width: vw(720);
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: vw(50);
      .each {
        width: vw(720);
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: vw(30);
        .eachtitle {
          width: vw(720);
          height: vw(76);
          display: flex;
          align-items: center;
          justify-content: space-between;
          p {
            width: vw(636);
            height: vw(76);
            line-height: vw(76);
            font-size: vw(30);
            font-weight: 400;
            color: #ffffff;
            background-color: #d23037;
          }
          img {
            width: vw(42);
            height: vw(76);
          }
          .rotate {
            transform: rotateZ(180deg);
          }
        }
        .resultcontent {
          width: vw(680);
          height: vw(194);
          display: flex;
          align-items: center;
          justify-content: space-between;
          .leftFont {
            width: vw(500);
            height: vw(154);
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            font-size: vw(30);
            font-weight: 400;
            color: #333333;
            p{
              margin-bottom: vw(15);
            }
          }
          .rightImg {
            width: vw(128);
            height: vw(182);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            p {
              font-size: vw(30);
              font-weight: 500;
              color: #a9a9a9;
            }
            img {
              width: vw(128);
              height: vw(140);
            }
          }
        }
      }
    }
  }
  //   回到顶部
  .returnTop {
    width: vw(70);
    height: vw(70);
    background: url("../image/returnTop.png") 0 0 /100% no-repeat;
    position: fixed;
    right: vw(20);
    top: vw(800);
  }
  .showx {
    display: none !important;
  }
}
</style>