horzi_rai_wxa/pageMy/freeTrial/freeTrial.vue

<template>
  <view class="container container-free">
    <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
      <view class="content">
        <van-icon custom-class="search-icon" name="arrow-left" size="24px" @click="goSearch" />
        <view class="text">免费送月卡</view>
      </view>
    </view>
    <view class="img-code"> 
      <image :src="wechatCode"></image>
    </view>
    <view class="btn-box">
      <button class="bottom_in" open-type="share" plain="true">分享</button>
      <view @click="goSearch" class="btn-back">返回</view>
    </view>
  </view>
</template>

<script>
import { FreeButton } from "@/config/api.js";

export default {
  data() {
    return {
      navBarStyle: {
        height: 60 + "px",
        paddingTop: 40 + "px",
        paddingBottom: "4px",
      },
      wechatCode:'',//二维码
      scene:"",//用户的id
    };
  },
  methods: {
    initNavBar() {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.navBarStyle = {
        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
        paddingTop: menuButtonInfo.top - 4 + "px",
        paddingBottom: "4px",
      };
    },
    goSearch() {
      uni.navigateBack();
    },
    async wechatShareImage() {
      const res = await FreeButton.wechatShareImage();
      if(res.Ret === 200) {
        this.wechatCode = res.Data.FileLink
        this.scene = res.Data.Scene
      }
    },
  },
  onLoad() {
    this.initNavBar();
    this.wechatShareImage()
  },
  /**
   * 用户点击分享
   */
  onShareAppMessage: function (res) {
    return {
      title: "送您一张免费月卡",
      path: "/pageMy/excessivePages/excessivePages?scene="+this.scene,
      imageUrl: "https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/share_month.png",
    };
  },
};
</script>
<style lang="scss">
.nav-bar-wrap {
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  .content {
    position: relative;
    height: 100%;
    .search-icon {
      position: absolute;
      left: 34rpx;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
<style lang="scss" scoped>
.container-free {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/background_image.jpg") no-repeat;
  background-size: 100% 100%;
  .btn-box {
    position: absolute;
    bottom: 115rpx;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 34rpx;
    color: #fff;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom_in {
    width: 379rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(180deg, #f8d083 0%, #f0b157 100%);
    border: none;
    font-weight: 600;
    margin-bottom: 20rpx;
    color: #fff;
  }
  .btn-back {
    width: 379rpx;
    height: 80rpx;
    border: 1px solid #f1e2ce;
    line-height: 78rpx;
  }
  .img-code {
    width: 200rpx;
    height: 200rpx;
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.nav-bar-wrap {
  .content {
    .text {
      text-align: center;
      width: 50vw;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-weight: bold;
      font-size: 16px;
    }
  }
}
</style>