监听回退vue2

cv酱

已于 2023-06-01 17:29:15 修改

阅读量441

点赞数

文章标签：数学建模 java html

于 2023-05-29 17:40:47 首次发布

本文链接：https://blog.csdn.net/YingUser/article/details/130933218

版权

该代码段展示了一个Vue组件，用于处理红包领取（redPackage）和微信支付（wechat）功能。当红包可用时，用户可以点击领取并使用，同时有一个倒计时显示红包的失效时间。组件使用了Vuex进行状态管理，包括数据计算、action和mutation。在创建和离开路由时有相应的处理函数，确保页面状态的正确切换。

摘要由CSDN通过智能技术生成

<template>
  <van-popup v-model="isShowMoney">
    <div class="hb_box">
      <div class="hb_money"><span>¥</span>{{ channelInfo.redPackage }}</div>
      <div class="dec_money">可抵扣当前订单金额</div>
      <div v-if="isShowBtn" @click="goToPay('wechat')" class="get_btn">
        <img src="./images/get_btn_active.png" alt=""/>
      </div>
      <div class="get_btn get_btn_gray" v-else @click="goToPay('wechat')">
        领取并使用
      </div>
      <div class="time-count">
        <van-count-down millisecond :time="time" format="mm:ss:SS"/>
        <span
            class="time_for">后失效</span>
      </div>
    </div>
  </van-popup>
</template>

<script>
import {mapState, mapActions, mapMutations} from "vuex";

export default {
  data() {
    return {
      time: 29 * 60 * 1000,
      isShowBtn: true,
      isShowMoney: false,
      isRun: false,
      isPageHide: false,
    };
  },
  computed: mapState("request", ["channelInfo"]),
  created() {
    if (this.channelInfo.redPackage == 0) {
      if (!(window.history.state && window.history.state.target === 'Final')) {
        window.history.pushState({target: 'MeanSure', random: Math.random()}, '', window.location.href);
        window.history.pushState({target: 'Final', random: Math.random()}, '', window.location.href);
      }
    }
    window.addEventListener('popstate', this.backAlert, false);

  },
  beforeRouteLeave(to, from, next) {
    window.removeEventListener('popstate', this.backAlert, false);
    next();
  },

  methods: {
    ...mapActions("request", ["pay"]),
    ...mapMutations("request", ['setRedPackPrice']),
    async goToPay(type) {
      this.setRedPackPrice(this.channelInfo.redPackage)
      this.$toast({
        message: "已领取并使用红包",
        className: 'toastBackMoney',
        icon: 'success',
      });
      this.isShowBtn = false;
      await this.util.delay(1000)
      await this.pay(type);
    },
    backAlert(e) {
      if (e.state && e.state.target === 'MeanSure') {
        this.isShowMoney = true;
        // window.history.forward();
      }
    },
  },
  destroyed() {
    // window.addEventListener("pageshow", null, !1);
    // window.addEventListener("pagehide", null, !1);
    window.removeEventListener("popstate", this.backAlert, false);
  },
};
</script>
<style lang="less" scoped>
.van-popup {
  background: transparent;
  width: 375px;

  .hb_box {
    width: 100%;
    height: 384px;
    background: url(./images/hb_bg.png) no-repeat 0 0 / cover;
    color: #a3581e;
    text-align: center;
    background-size: 100%;

    .dec_money {
      font-size: 13px;
    }

    .kou {
      font-size: 0.26rem;
    }

    .get_btn {
      margin-top: 62px;
      margin-bottom: 0.26rem;

      img {
        width: 200px;
        height: 42px;
      }
    }

    .get_btn_gray {
      color: #a55b21;
      width: 200px;
      height: 42px;
      line-height: 42px;
      border-radius: 19px;
      background: #666;
      font-size: 18px;
      margin: 60px auto 0;
    }

    .time-count {
      position: relative;
      display: flex;
      justify-content: center;
      margin-top: 5px;

      .van-count-down {
        color: #ffd1d2;
        font-size: 13px;
      }

      .time_for {
        display: block;
        font-size: 13px;
        color: #f6f6f7;
      }
    }

    .hb_money {
      font-family: ArialRoundedMTBold;
      font-weight: 600;
      padding-top: 144px;
      line-height: 50px;
      font-size: 50px;

      span {
        font-weight: 400;
        vertical-align: middle;
        font-size: 20.5px;
      }
    }
  }
}
</style>