recycle-oldfornew-service-H5/src/views/index.vue

<template>
  <div>
    <div class="index_box flex flex-c">
      <div class="pay_btn" @click="jumUrl()">跳转繁星回收小程序</div>
    </div>
  </div>
</template>
<script>
import { generateScheme } from "@/api";
export default {
  data() {
    return {
      form: {
        userName: "",
        amount: "",
      },
      SchemeUrl: "",
    };
  },
  created() {
    console.log(this.$route.query);
    if (this.$route.query) {
      this.form.amount = this.$route.query.amount;
      this.form.userName = this.$route.query.userName;
    }
    this.generateScheme();
  },
  methods: {
    generateScheme() {
      // 要打开的小程序版本。正式版为"release"，体验版为"trial"，开发版为"develop"，仅在微信外打开时生效
      let form = {
        jump_wxa: {
          path: "/pages/index/index",
          query: "",
          env_version: "release",
        },
        is_expire: true,
        expire_type: 1,
        expire_interval: 1,
      };
      generateScheme(form)
        .then((res) => {
          console.log(res, "成功信息");
          this.SchemeUrl=res.data.openlink;
        })
        .catch((err) => {
          console.log(err, "错误信息");
        });
    },
    // 跳转微信小程序
    jumUrl() {
     location.href = this.SchemeUrl;
    },
  },
};
</script>

<style>
.index_box {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 20px;
}
.flex {
  display: flex;
  align-items: center;
}
.flex-aa {
  display: flex;
  align-items: flex-start;
}
.flex1 {
  flex: 1;
}
.flex-jb {
  display: flex;
  justify-content: space-between;
}
.flex-c {
  display: flex;
  flex-direction: column;
}
.flex-jc {
  display: flex;
  justify-content: center;
}
.flex-w {
  flex-wrap: wrap;
}
.pay_img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: #eee;
  margin-top: 30px;
}

.pay_price {
  margin-top: 10px;
  color: #ff4b0c;
  font-weight: 500;
  font-size: 30px;
}

.pay_name {
  margin-top: 14px;
  font-size: 14px;
}

.pay_input {
  width: 325px;
  height: 44px;
  box-sizing: border-box;
  margin-top: 33px;
  outline: none;
  border-radius: 5px;
  font-size: 16px;
}

.pay_notice {
  font-size: 14px;
  margin-top: 40px;
  padding: 0 10px;
  color: #333333;
  margin-bottom: 20px;
  text-align: justify;
}

.pay_notice_title {
  font-size: 16px;
  font-weight: bold;
  color: #108ee9;
  margin-bottom: 4px;
}

.pay_text {
  width: 100%;
  font-size: 14px;
  background: rgba(255, 240, 240, 0.9);
  border-radius: 8px;
  color: #ff4b0c;
  padding: 5px 10px;
  box-sizing: border-box;
  text-align: justify;
  line-height: 24px;
}

.pay_text_title {
  font-weight: bold;
}

.dian {
  min-width: 4px;
  height: 4px;
  background: #ff4b0c;
  border-radius: 50%;
  margin-right: 4px;
  margin-top: 10px;
}

.pay_btn {
  width: 320px;
  height: 44px;
  border: none;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #108ee9;
  border-radius: 10px;
  position: fixed;
  top: 50%;
  font-size: 16px;
}
.got_it {
  width: 320px;
  height: 44px;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #108ee9;
  border-radius: 10px;
  font-size: 16px;
  margin: 20px auto 0;
}
/* 遮罩 */
.mask {
  position: fixed;
  background: rgba(51, 51, 51, 0.212);
  width: 100%;
  height: 100vh;
  z-index: 10;
  top: 0;
  left: 0;
}
.dialog {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 11;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
  padding-bottom: 30px;
}
.dialog_cancel {
  width: 38px;
  height: 33px;
  position: absolute;
  right: 0;
  top: 0;
}
.dialog_title {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  margin-top: 16px;
}
.dialog_title2 {
  font-weight: 500;
  margin-top: 20px;
  text-align: justify;
  padding: 0 2px;
  margin-bottom: 10px;
}
.dialog_title2 .title1 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
}
.dialog_title2 .title2 {
  color: #108ee9;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
  margin-top: 10px;
}
.dialog_img_box {
  height: calc(100% - 95px);
  overflow-y: scroll;
}
.dialog_img {
  width: 100%;
  margin-top: 5px;
}
/* 
.el-input__inner {
  height: 44px !important;
  border-radius: 5px;
  font-size: 16px;
}
.message {
  width: 205px;
  height: 36px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  text-align: center;
  line-height: 36px;
  position: fixed;
  bottom: 150px;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 9999;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}
input::-webkit-input-placeholder {
  color: #c4c4c4;
  font-size: 14px;
} */
</style>