parking_h5_all/pages/goldPlan/goldPlan.vue

<template>
  <view class="container">
    <view class="text-img">
      <image src="../../static/img/text-html-bg.png" mode="aspectFit" />
    </view>
    <view class="car-img">
      <image src="../../static/img/car-html-bg.png" mode="aspectFit" />
    </view>
    <view @click="goToBgzchina()" class="button">回到{{ project_name }}智慧停车</view>
  </view>
</template>

<script>
const goldPlan = require('../../static/js/jgoldplan-1.0.0.js');
export default {
  data() {
    return {
      sub_mch_id: '',
      out_trade_no: '',
      project_name: process.env.H_PROJECT_NAME
    };
  },
  onLoad(option) {
    this.sub_mch_id = option.sub_mch_id; //特约商户号
    this.out_trade_no = option.out_trade_no; //商户订单号
  },
  onReady() {
    let mchData = {
      action: 'onIframeReady',
      displayStyle: 'SHOW_CUSTOM_PAGE',
      height: 960
    };
    let postData = JSON.stringify(mchData);
    parent.postMessage(postData, 'https://payapp.weixin.qq.com');
  },
  methods: {
    /**
     * @description: 返回停车页面
     * @return {*}
     */
    goToBgzchina() {
      const mchData = {
        action: 'jumpOut',
        jumpOutUrl: process.env.H_PROJECT_URL //跳转的页面
      };
      const pData = JSON.stringify(mchData);
      parent.postMessage(pData, 'https://payapp.weixin.qq.com');
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background: linear-gradient(138deg, #7ebab8 0%, #48999a 100%);
  box-shadow: 0px 2px 4px 0px #0b7c7d;
}

.text-img {
  margin: 0 auto;
  width: 80%;
  height: 20%;
  image {
    width: 100%;
    height: 100%;
  }
}

.car-img {
  margin: 39px auto 0;
  width: 65%;
  height: 25%;
  image {
    width: 100%;
    height: 100%;
  }
}

.button {
  display: inline-block;
  width: calc(100% - 84px);
  height: 6vh;
  line-height: 6vh;
  text-decoration: none;
  margin-top: 4vh;
  outline: none;
  border: none;
  background: #ffffff;
  box-shadow: 0px 7px 13px 0px rgba(0, 105, 106, 0.26);
  border-radius: 10px;
  font-size: 1.1em;
  font-weight: 500;
  color: #1d8587;
  font-family: 'PingFangSC-Medium, PingFang SC';
  cursor: pointer;
}
</style>