123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438 |
- <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"></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>
|