JDD-WXCP/pages/point/success.vue

<template>
  <div class="point-success">
    <div class="icon"></div>
    <div class="text">兑换成功</div>
    <div class="menu">
      <nuxt-link class="text1" to="/point" tag="span">回到首页</nuxt-link>
      <nuxt-link class="text2" to="/point/list" tag="span">查看订单</nuxt-link>
    </div>
  </div>
</template>

<script>
import ProductList from "../../components/ProductList";
import { mapState, mapActions } from "vuex";
import wx from "weixin-js-sdk";

export default {
  head() {
    return {
      title: "支付成功",
    };
  },
  data() {
    return {};
  },
  components: {
    ProductList,
  },
  created(){
    this.getAppId(1);
  },
  mounted() {
    this.getSdkConfig(["openLocation", "getNetworkType"]).then((res) => {
      console.log("测试一下微信jdk");
    });
  },
  methods: {
    ...mapActions({
      getSdkConfig: "authen/getSdkConfig",
      getAppId:"authen/getAppId"
    }),
  },
};
</script>

<style>
.point-success {
  width: 100vw;
  height: 100vh;
  position: relative;
}
.point-success .icon {
  background: url("~static/personal/cg@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  width: 1.81rem;
  height: 1.81rem;
  position: absolute;
  left: 2.85rem;
  top: 1.6rem;
}

.point-success .text {
  width: 1.6rem;
  height: 0.56rem;
  font-size: 0.4rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #111111;
  line-height: 0.56rem;
  text-align: center;
  position: absolute;
  top: 3.71rem;
  left: 2.95rem;
}

.point-success .menu {
  width: 80vw;
  height: 1.1rem;
  background: #ffffff;
  box-shadow: 0rem 0.02rem 0.1rem 0rem rgba(0, 0, 0, 0.1);
  border-radius: 0.1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  top: 50vh;
  left: 10vw;
}
.point-success .menu span {
  height: 0.45rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #111111;
  line-height: 0.45rem;
}
</style>