uniAppXCX/pages/invite/invite.vue

<template>
  <view class="container">
    <image class="bk" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/invite/bk.png'" mode=""></image>
    <view class="page">
      <image
        class="illustrate"
        @click="$navigateTo('/pages/rule/rule', { type: 6 })"
        :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/invite/button1.png'"
        mode=""
      ></image>
      <view class="box">
        <view class="item">
          <image
            mode="aspectFit"
            class="label1"
            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/invite/text2.png'"
          ></image>
          <view class="value">
            {{ person }}
            <image mode="aspectFit" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/invite/text3.png'"></image>
          </view>
        </view>
        <view class="item">
          <image
            mode="aspectFit"
            class="label2"
            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/invite/text1.png'"
          ></image>
          <view class="value">
            {{ reward }}
            <image mode="aspectFit" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/invite/text4.png'"></image>
          </view>
        </view>
      </view>
      <view class="buttons">
        <button open-type="share" class="button">
          <image
            class="button1"
            mode="aspectFit"
            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/invite/button2.png'"
          ></image>
        </button>
        <image
          class="button2"
          mode="aspectFit"
          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/invite/button3.png'"
          @click="promotionCode"
        ></image>
        <!-- 		<view class="m_button">
					邀请好友
				</view> -->
        <!-- <view class="m_button" @click="promotionCode">
					我的推广码
				</view> -->
      </view>
    </view>
    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-content">
        <image class="qrcode" :src="imgUrl" mode=""></image>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { inviteQrcodeApi, inviteInfoApi } from '@/api/invite.js'
export default {
  data() {
    return {
      imgUrl: '',
      inviteList: [],
      person: '',
      reward: '',
    }
  },
  onLoad() {
    this.getInviteList()
  },
  onShow() {
    this.getInviteList()
  },
  computed: {
    userInfo() {
      return wx.getStorageSync('userInfo')
    },
  },
  onShareAppMessage() {
    let userId = wx.getStorageSync('userId')
    return {
      title: this.userInfo.nickName + '邀请你来宝可梦卡牌抽取喜欢的卡牌',
      path: '/pages/index/index?inviteId=' + userId,
    }
  },
  methods: {
    getInviteList() {
      inviteInfoApi().then(res => {
        console.log(res, '我已经邀请的列表')
        this.inviteList = res.data.list
        this.person = res.data.person
        this.reward = res.data.reward
      })
    },
    promotionCode() {
      let _this = this
      inviteQrcodeApi().then(res => {
        console.log(res, '推广码')
        _this.imgUrl = res.data
        _this.$refs.popup.open('center')
      })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  // background: #e7ffec;
  text-align: center;

  .bk {
    position: absolute;
    height: 100vh;
    width: 100%;
    z-index: -1;
  }

  .page {
    max-height: 100vh;
    overflow: auto;
    padding-top: 300px;
  }

  .illustrate {
    position: absolute;
    right: 20px;
    top: 40px;
    font-size: 12px;
    width: 67px;
    height: 24px;
    // padding: 5px 10px;
    // border-radius: 4px;
  }

  .box {
    background: #fff;
    margin: 20px 20px;
    padding: 20px;
    border-radius: 15px;
    display: flex;
    justify-content: space-around;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 50%;

      .label1 {
        width: 100%;
        height: 22px;
      }

      .label2 {
        width: 100%;
        height: 22px;
      }

      .value {
        font-size: 28px;
        font-weight: 600;
        margin-top: 20px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 40px;
          height: 22px;
        }
      }
    }
  }

  .buttons {
    display: flex;
    justify-content: center;
    margin: 20px;
    width: calc(100% - 40px);
    image {
      height: 64px;
      position: relative;
    }

    .button {
      background: none;
      border: none !important;
      overflow: initial;
      text-align: start;
      padding: 0;
      width: 100%;
      box-shadow: none;
      -webkit-tap-highlight-color: transparent;
    }
    .button::after {
      border: none;
    }
    .button1 {
      right: -8px;
      width: 100%;
    }

    .button2 {
      left: -8px;
    }
  }

  .qrcode {
    width: 70vw;
    height: 70vw;
  }
}
</style>