NN2023021801/addons/dbapp/pagesUser/invite/invite.vue

<script>
import { mapState } from 'vuex'
import ShareImg from '@/pagesUser/invite/components/shareImg.vue'
import api from '@/api'
export default {
  components: { ShareImg },
  data() {
    return {
      list: [],
      curIndex: 0,
      cvsTempImg: '',

      tempQrcodePath: '',
      isCreate: false, // 是否已经点了生成
      shareList: [
        { label: '复制链接', icon: 'lianjie' },
        { label: '保存图片', icon: 'bc_tp' }
      ],

      invite_code: '',
      upInfo: {}
    }
  },
  computed: mapState({
    user: state => state.user
  }),
  methods: {
    createCvs(type = '') {
      this.isCreate = true

      if (type !== 'qr') {
        uni.showLoading({
          title: '生成海报中...'
        })
      }

      if (!this.tempQrcodePath) return
      let w = uni.upx2px(750) // 图片宽
      let h = uni.upx2px(1334) // 图片高
      let qr = uni.upx2px(192) // 二维码大小
      let offset = uni.upx2px(1048)
      const ctx = uni.createCanvasContext('myCanvas')
      ctx.drawImage(this.list[this.curIndex].img_pic, 0, 0, w, h)
      ctx.drawImage(this.tempQrcodePath, (w - qr) / 2, offset, qr, qr)

      ctx.draw(true, () => {
        uni.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success: res => {
            // 在H5平台下，tempFilePath 为 base64
            uni.hideLoading()
            this.cvsTempImg = res.tempFilePath
            console.log(this.cvsTempImg)
            this.$refs.shareImg.show = true
          },
          fail: error => {
            console.log('error', error)
          }
        })
      })
    },

    async getBanner() {
      this.list = await api.getBanner(4)
    },
    toTempPath({ success }) {
      if (success) {
        this.$refs.qrcode.toTempFilePath({
          success: res => {
            this.tempQrcodePath = res.tempFilePath
            if (this.isCreate) this.createCvs('qr')
          }
        })
      } else {
        this.$refs.qrcode.remake()
      }
    },
    shareJump({ label }) {
      switch (label) {
        case '复制链接':
          this.$common.copy(this.user.share_url, '邀请链接已复制，快粘贴发送好友注册吧~')
          break
        case '保存图片':
          this.createCvs()
          break
      }
    },
    async getUpInfo() {
      this.upInfo = await api.getUpUserInfo()
      console.log(this.upInfo)
    },
    async bindUp() {
      if (!this.invite_code) {
        this.$common.toast('请填写邀请码')
        return
      }
      await api.bangUpFriend(this.invite_code)
      await this.getUpInfo()
      this.$common.toast('绑定成功')
    }
  },
  onLoad() {
    this.getBanner()
    this.getUpInfo()
  }
}
</script>

<template>
  <view>
    <view class="page flex flex-column">
      <view class="top flex">
        <image class="top_bg" src="/static/images/me/invite/bg_yaoqing_haoyou_d@2x.png"></image>
      </view>

      <view class="container flex1">
        <view class="form">
          <view class="item flex align-center">
            <label class="label">我的邀请码</label>
            <input class="input flex1" :value="user.code" />
            <u-button shape="circle" class="btn" @click="$common.copy(user.code)">复制</u-button>
          </view>
          <view class="item flex align-center">
            <label class="label">我的邀请人</label>
            <input
              v-if="Array.isArray(this.upInfo)"
              v-model="invite_code"
              class="input flex1"
              placeholder="请填写邀请码"
              placeholder-style="color:#B3B3B3"
            />
            <input
              v-else
              :value="upInfo.mobile"
              class="input flex1"
              placeholder-style="color:#B3B3B3"
              disabled
            />
            <u-button v-if="Array.isArray(this.upInfo)" shape="circle" class="btn" @click="bindUp"
              >填写</u-button
            >
          </view>
        </view>

        <!-- share -->
        <view class="share radius flex align-center">
          <view class="title flex flex-column">
            <text>分</text>
            <text>享</text>
            <text>至</text>
          </view>
          <view
            class="share_item flex flex-column"
            v-for="(s, i) in shareList"
            :key="i"
            @click="shareJump(s)"
          >
            <image
              :src="`/static/images/me/invite/ic_${s.icon}@2x.png`"
              class="share_item_icon"
            ></image>
            <view class="share_item_label">{{ s.label }}</view>
          </view>
        </view>
      </view>
    </view>

    <view style="position: fixed; z-index: -1">
      <uqrcode
        ref="qrcode"
        canvas-id="qrcode"
        start
        :auto="false"
        :size="300"
        :value="user.share_url_orgin"
        @complete="toTempPath"
        :options="{
          foregroundImageSrc: user.avatar,
          foregroundImageWidth: 300 * 0.3,
          foregroundImageHeight: 300 * 0.3,
          foregroundImagePadding: 4,
          foregroundImageBorderRadius: 4,
          foregroundImageShadowBlur: 50,
          foregroundImageShadowColor: 'rgba(0, 0, 0, 0.68)',
          margin: 10
        }"
      ></uqrcode>
      <canvas canvas-id="myCanvas" class="myCanvas"></canvas>
    </view>

    <share-img ref="shareImg" :cvsTempImg="cvsTempImg" />
  </view>
</template>

<style lang="scss" scoped>
.top {
  &_bg {
    width: 750rpx;
    height: 1085rpx;
  }
}

.container {
  background-color: #373aa3;

  .form {
    width: 663rpx;
    height: 359rpx;
    margin: 10rpx auto 240rpx;
    background-image: url('/static/images/me/invite/bg_yaoqingma_srk@2x.png');
    background-size: 100%;
    padding: 87rpx 60rpx 65rpx;
    box-sizing: border-box;

    .item {
      height: 85rpx;
      background: #373aa3;
      border-radius: calc(85rpx / 2);
      padding: 6rpx 7rpx 6rpx 36rpx;
      box-sizing: border-box;
      & + .item {
        margin-top: 37rpx;
      }

      .label,
      .input {
        font-size: 30rpx;
        font-weight: bold;
        color: #ffffff;
      }
      .input {
        margin-left: 20rpx;
      }
      .btn {
        width: 125rpx;
        height: 73rpx;
        background: linear-gradient(0deg, #feda50, #fdeb6a);
        border-radius: calc(73rpx / 2);

        font-size: 36rpx;
        font-weight: normal;
        color: #db3028;
      }
    }
  }

  .share {
    position: fixed;
    bottom: 30rpx;
    left: 25rpx;
    width: 700rpx;
    height: 180rpx;
    background: #f8f8f8;
    border-radius: 20px;
    padding: 22rpx 50rpx;
    box-sizing: border-box;

    .title {
      margin-right: 44rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #ffb602;
    }

    &_item {
      & + .share_item {
        margin-left: 55rpx;
      }
      &_icon {
        width: 90rpx;
        height: 90rpx;
      }
      &_label {
        margin-top: 22rpx;
        font-size: 22rpx;
        font-weight: 500;
        color: #959595;
      }
    }
  }
}

.myCanvas {
  width: 750rpx;
  height: 1334rpx;
}
</style>