JDD-WXCP/pages/point/success.vue

<template>
  <div class="point-success">
    <div class="background">
      <span class="icon"></span>
      <span class="text">兑换成功</span>
    </div>
    <div class="container">
      <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 class="show">
        <product-list />
      </div>
    </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,
  },
  mounted() {
    this.getSdkConfig(["openLocation", "getNetworkType"]).then((res) => {
      console.log("测试一下微信jdk");
      // wx.config(res);
      // wx.ready(function () {
      //   console.log("成功了");
      //   wx.getNetworkType({
      //     success: function (res) {
      //       var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
      //       console.log(networkType);
      //     },
      //   });
      //   wx.openLocation({
      //     latitude: 0, // 纬度，浮点数，范围为90 ~ -90
      //     longitude: 0, // 经度，浮点数，范围为180 ~ -180。
      //     name: "", // 位置名
      //     address: "", // 地址详情说明
      //     scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
      //     infoUrl: "", // 在查看位置界面底部显示的超链接,可点击跳转
      //   });
      // });
      // wx.error(function () {
      //   console.log("失败了");
      // });
    });
  },
  methods: {
    ...mapActions({
      getSdkConfig: "authen/getSdkConfig",
    }),
  },
};
</script>

<style>
.point-success {
  position: relative;
}
.point-success .background {
  background-color: #f3b335;
  width: 100%;
  height: 3.8rem;
  position: relative;
  background: url("../../static/point/bj2@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  z-index: -1;
  position: relative;
}
.point-success .background .icon {
  display: inline-block;
  width: 0.48rem;
  height: 0.48rem;
  background: url("../../static/point/1_e10_cg@2x.png");
  background-size: 100% 100%;
  position: absolute;
  top: 1.13rem;
  left: 2.41rem;
}
.point-success .background .text {
  width: 2rem;
  height: 0.7rem;
  font-size: 0.5rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.7rem;
  position: absolute;
  top: 1rem;
  left: 3.09rem;
}
.point-success .container {
  margin-top: -13.33vw;
  width: 100%;
  padding: 0 4vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  z-index: 99;
}
.point-success .container .menu {
  width: 100%;
  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;
}
.point-success .container .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>