yicangzongtai_app_240321/pages/user/invitationCode/invitationCode.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666666">
      <template v-slot:right>
        <view class="">
          <text class="iconfont3" style="font-size: 38rpx;margin-right: 30rpx;color: #fff;"
            @click="share">&#xe624;</text>
        </view>
      </template>
    </navbar>
    <view class="code-box">
      <view class="text-bg">
        <image src="../../../static/career/txt.png" mode="widthFix"></image>
      </view>
      <view class="tip">
        注册就送168贡献值，激活就可获得积分收益!
      </view>
      <view class="code-bg">
        <view class="code-content">
          <!-- <view class="code-hide">
            <image v-if="accountInfo.head_photo" :src="accountInfo.head_photo"></image>
            <image v-else :src="imgUrl+'/head-on.png'" mode=""></image>
          </view>
          <view class="user-name " style="text-align: center; margin: 0 auto;" v-if="accountInfo.nickname != ''">
            {{ accountInfo.nickname }}
          </view>
          <view class="u-font30 u-mt15" v-if="accountInfo.nickname == ''">无名称</view> -->
          <view class="user-code-num" @click="copy(accountInfo.invitation_code)">邀请码:
            <text class="u-mr30">{{ accountInfo.invitation_code }}</text>
            复制
          </view>
          <view class="code-bt-bg">
            <!--二维码-->
            <view class="itemcode">
              <uqrcode ref="uqrcode" canvas-id="qrcode" :size="192" :value="url" :options="{ margin: 10 }"
                @complete="uqrcodeComplete"></uqrcode>
              <!-- <ayQrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode" :height="120" :width="150" /> -->
            </view>
            <!-- <image :src="qrcode"></image> -->
          </view>
          <view class="code-title">消费获得贡献值,分享获得贡献值</view>
          <view class="code-title pt0">贡献值越多积分就越多，积分越多收益就越多!</view>

        </view>
        <canvas canvas-id="canvasId" style="width: 290px; height: 380px;" type="2d" id="canvasId"></canvas>
        <canvas canvas-id="myCanvas" style="width: 63px; height: 63px;" type="2d" id="myCanvas"></canvas>
        <view class="copy-btn-box " @click="saveQrcode">
          <button class="copy-btn">保存图片</button>
        </view>

      </view>
      <view class="bottom-bg">
        <image src="../../../static/career/bottom.png" mode="widthFix"></image>
      </view>
    </view>
    <share ref="shares" :contentHeight="580" v-if="isvisible"></share>
  </view>

  <!--页面加载动画-->
  <!-- <ldLoading isFullScreen :active="loading"></ldLoading> -->

  <!-- </view> -->
</template>

<script>
  // import ayQrcode from "../../components/ay-qrcode/ay-qrcode.vue"
  // import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue";
  import Draw from '@/uni_modules/sakura-canvas/js_sdk/index'
  import share from "../../public/share";
  export default {
    components: {
      share
    },
    data() {
      return {
        config: {
          back: true, //false是tolbar页面 是则不写
          title: "会员码",
          color: '#1A1A1A',
          barPlaceholder: false,
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [0, "#fff"],
          statusBarFontColor: '#1A1A1A',
          rightSlot: true,
        },
        modal_qr: false,
        url: "",
        loading: true,
        accountInfo: {},
        qrcode: "",
        imgUrl: this.$mConfig.staticUrl,
        rpx: 0,
        isvisible: false,
        qrcodeUrl: ''
      };
    },
    onLoad() {
      //获取用户信息
      this.$http.get("/account/getAccountInfo").then((res) => {
        if (res && res.code == 200) {
          this.accountInfo = res.data;
          // this.url = "https://www.baidu.com"
          //扫描之后跳到了h5的注册页面去了
          this.url = this.$mConfig.hostUrl + "/pages/register?code=" + this.accountInfo.invitation_code;
          console.log(this.url, 1111)
          this.loading = false;
        }
      });
    },
    methods: {
      //复制邀请码
      copy(code) {
        uni.setClipboardData({
          data: code,
          success: () => {
            uni.showToast({
              title: "复制成功",
            });
          },
        });
      },
      saveQrcode() {
        if (!this.qrcodeUrl) {
          uni.showToast({
            title: "暂无分享码",
            icon: "none",
          });
          return
        }
        uni.showLoading({
          title: '保存中'
        });
        this.getArcImg().then(res => {
          uni.getImageInfo({
            src: '/static/career/invitation3.png',
            success: (image) => {
              let context = uni.createCanvasContext('canvasId');
              context.setStrokeStyle("#fff")
              context.beginPath();
              // context.drawImage("/static/career/bg.png", 0, 0, 290, 380);
              context.arc(10, 10, 10, -Math.PI, -Math.PI / 2);
              context.lineTo(280, 0);
              context.arc(280, 10, 10, -Math.PI / 2, 0);
              context.lineTo(290, 380);
              context.lineTo(0, 380);
              context.lineTo(0, 10);
              context.fillStyle = "#fff";
              context.fill();
              context.stroke()
              context.drawImage(res, 115, 20, 63, 63);
              context.font = "400 15px Arial";
              context.fillStyle = "#1a1a1a";
              context.textAlign = "center"
              context.fillText(this.accountInfo.nickname, 290 / 2, 100);
              let codeText = '邀请码:' + this.accountInfo.invitation_code;
              context.font = "400 13px Arial";
              context.fillStyle = "#3775f6";
              context.fillText(codeText, 290 / 2, 130);
              context.textAlign = "center";
              context.drawImage(image.path, (290 - 150) / 2, 160, 150, 150);
              context.drawImage(this.qrcodeUrl, (290 - 125) / 2, 170, 125, 125);
              context.fillStyle = "#1a1a1a";
              context.font = "400 12px Arial";
              context.fillText('消费获得贡献值,分享获得贡献值', 290 / 2, 340);
              context.fillText('贡献值越多积分就越多，积分越多收益就越多!', 290 / 2, 360);
              context.clip();
              context.draw(false, () => {
                // 返回canvas图片信息
                uni.canvasToTempFilePath({
                  canvasId: 'canvasId',
                  success: (res) => {
                    uni.saveImageToPhotosAlbum({
                      filePath: res.tempFilePath,
                      success() {
                        uni.hideLoading();
                        uni.showModal({
                          title: "保存成功",
                          content: "图片已成功保存到相册",
                          showCancel: false
                        })
                      },
                      fail(e) {
                        console.log(e)
                      }
                    })
                  },
                  fail: function(err) {
                    console.log(err)
                    uni.hideLoading();
                  }
                })
              })
            }
          })
        })
      },
      getArcImg() {
        return new Promise((resolve, ret) => {
          uni.getImageInfo({
            src: '/static/sh-head-on.png',
            success: (image) => {
              let ctx = uni.createCanvasContext('myCanvas', this);
              ctx.save();
              ctx.setStrokeStyle("#fff")
              ctx.beginPath(); //开始绘制
              //先画个圆   x,y是圆心的(x,y） 坐标 r是圆的半径 第四个参数是起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）  第五个参数是结束角，以弧度计  最后是绘图方向  默认是false，即顺时针
              ctx.arc(32, 32, 30, 0, Math.PI * 2, false);
              ctx.setLineWidth(3)
              ctx.stroke()
              ctx.clip(); //画好了圆 开始剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
              // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
              //path 是用uni.getImageInfo 获取的地址
              ctx.drawImage(this.accountInfo.head_photo || image.path, 0, 0, 63, 63); // 推进去图片，必须是https图片
              ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制

              ctx.draw(false, (ret) => { // draw方法 把以上内容画到 canvas 中。
                uni.canvasToTempFilePath({
                  canvasId: 'myCanvas',
                  success: (re) => {
                    // that.imgUrl = res.tempFilePath;
                    resolve(re.tempFilePath)
                  },
                  fail: function(err) {
                    console.log(err)
                  }
                })
              });
            }
          })
        })
      },
      uqrcodeComplete() {
        this.$refs.uqrcode.toTempFilePath({
          success: res => {
            this.qrcodeUrl = res.tempFilePath;
          },
        });
      },
      share() {
        let token = uni.getStorageSync("apiToken");
        if (!token) {
          uni.navigateTo({
            url: "/pages/login/index",
          });
        } else {
          this.isvisible = true;
          this.$nextTick(() => {
            this.$refs.shares.shareInfo(
              "",
              'pages/register?code=' + this.accountInfo.invitation_code,
              '',
              "",
              ''
            );
          })
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  page {
    height: 100vh;
  }

  .code-box {
    width: 100%;
    min-height: 1622rpx;
    // min-height: 100vh;
    padding-top: 150rpx;
    // min-height: 490rpx;
    // background: #287fe5 url('../../../static/career/invitation2.png') no-repeat bottom center;
    // background-size: 750rpx 220rpx;
    background: url('../../../static/career/bg.png') no-repeat;
    background-size: 100% 100%;

    .code-bg {
      width: 100%;
      position: relative;
      top: 300rpx;
      // background: url('../../../static/career/invitation1.png') no-repeat top center;
      // background-size: 750rpx 490rpx;
      // padding-top: 315rpx;
      z-index: 3;

      .code-content {
        width: 698rpx;
        padding: 60rpx;
        background-color: #fff;
        margin: 0 auto;
        border: 3px solid #3fc3d7;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .code-hide {
          width: 138rpx;
          height: 138rpx;
          border-radius: 50%;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .user-name {
          padding: 5px 0;
          font-size: 36rpx;
          font-family: PingFang SC, PingFang SC-Bold;
          font-weight: 700;
          text-align: center;
          color: #1a1a1a;
        }

        .user-code-num {
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 400;
          color: #FA6138;
          padding-bottom: 42rpx;
        }

        .code-bt-bg {
          width: 438rpx;
          height: 412rpx;
          padding: 22rpx 35rpx;
          background: url('../../../static/career/invitation3.png') no-repeat center center;
          background-size: 438rpx 412rpx;

          .itemcode {
            width: 100%;
            height: 100%;
            // background-color: red;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .code-title {
          padding-top: 26rpx;
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC-Regular;
          font-weight: 500;
          color: #000;
        }

        .pt0 {
          padding-top: 5rpx;
        }
      }



    }

    .copy-btn-box {
      width: 387rpx;
      height: 90rpx;
      margin: 45rpx auto;
      background-color: #FFFFFF;
      border-radius: 45rpx;

      .copy-btn {
        width: 100%;
        height: 100%;
        border-radius: 45rpx;
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #FA6138;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    #canvasId {
      width: 580rpx;
      height: 742rpx;
      margin-top: 20rpx;
      border-radius: 20rpx;
      overflow: hidden;
      position: fixed;
      right: -99999rpx;
    }

    #myCanvas {
      position: absolute;
      left: -99999rpx;
    }

    .text-bg {
      // position: absolute;
      // top: 190rpx;
      // left: 50%;
      width: 525rpx;
      margin: 50rpx auto 0;
      // transform: translateX(-50%);

      image {
        width: 100%;
      }
    }

    .tip {
      font-size: 22rpx;
      font-family: Source Han Sans CN, Source Han Sans CN-Bold;
      font-weight: 700;
      text-align: center;
      color: #ffffff;
    }

    .bottom-bg {
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 1;

      image {
        width: 100%;
        vertical-align: middle;
      }
    }


    // <view class="code-bg">
    // 	<view class="code-content">

    // 	</view>
    // </view>
  }
</style>