zhishifufei_uniapp/pages/special/gift_special.vue

<template>
    <BaseContainer class="receive-details">
        <NavBar title="赠送礼物" />
        <view class="present-topics">
            <view class="info">
                <view>
                    <image mode="aspectFit" :src="userInfo.avatar" />
                </view>
                <view>{{ userInfo.nickname }}发礼物啦</view>
                <view class="images">
                    <image mode="aspectFill" :src="special.image" />
                </view>
                <view>{{ special.title }}</view>
            </view>
            <view class="btn">
                <button class="sendBnt" type="button" @click="createPoster">发送给朋友</button>
                <navigator :url="`/pages/special/gift_receive?orderId=${orderId}`" hover-class="none">查看领取详情</navigator>
            </view>
            <view class="share-guide shares-model">
                <image mode="aspectFill" :src="getImgPath('/wap/first/zsff/images/share-info.png')">
            </view>
        </view>
        <TkiQrcode loadMake v-if="isQrcodeCanvasVisable" ref="qrcode" :showLoading="false" :val="qrcodeText"
            @result="handleQrcodeCreateSuccess" />
        <canvas canvas-id="poster" v-if="isPosterCanvasVisable" class="poster-canvas" />
    </BaseContainer>
</template>

<script>
import { getUserInfo } from "@/api/auth";
import { getGiftSpecial } from "@/api/special";
import posterMixin from "@/mixins/poster";


export default {
    mixins: [posterMixin],
    data() {
        return {
            userInfo: {
                avatar: ''
            },
            special: {
                image: '',
                title: ''
            },
            orderId: '',
            site_url: '',
            poster_image: 'http://cremb-zsff.oss-cn-beijing.aliyuncs.com/20362202002201412303972.jpg',
            url: '',
            qrcodeText: "",
            isQrcodeCanvasVisable: false,
            isPosterCanvasVisable: false,
        };
    },
    onLoad({ orderId, oid }) {
        this.orderId = orderId
        this.getUser()
        this.getData()
    },
    methods: {
        getUser() {
            getUserInfo().then(({ data }) => {
                this.userInfo = data;
            });
        },
        getData() {
            getGiftSpecial(this.orderId).then(({ data }) => {
                this.special = data.special
                this.site_url = data.site_url
                this.poster_image = data.special.image
                if(this.special.is_light == 1){
                    this.url = "pages/special/single_details"
                }else{
                    this.url = "pages/special/details"
                }
                console.log(this.url)
            }).catch(err => {
                console.log(err);
            })
        },
        handleQrcodeCreateSuccess(path) {
            this.x_cb(path);
        },
        renderProductPoster(target,
            id,
            bgPath,
            codePath,
            WIDTH = 600,
            HEIGHT = 723,
            site_name = "知识付费") {

            return new Promise((resolve, reject) => {
                let context = uni.createCanvasContext(id, target);
                context.fillStyle = '#FFFFFF';
                context.fillRect(0, 0, WIDTH, HEIGHT);
                context.save();
                context.beginPath();
                context.moveTo(40, 30);
                context.arcTo(580, 30, 580, 338, 10);
                context.arcTo(580, 338, 30, 338, 10);
                context.arcTo(30, 338, 30, 30, 10);
                context.arcTo(30, 30, 580, 30, 10);
                context.closePath();
                context.clip();
                context.drawImage(bgPath, 30, 30, 550, 308);
                context.restore();
                context.font = '28px sans-serif';
                context.fillStyle = '#282828';
                console.log(11111111111);
                context.lineWidth = 1;
                var title = this.special.title;
                var lineWidth = 0;
                var substringIndex = 0;
                var offsetTop = 396;
                for (var i = 0; i < title.length; i++) {
                    lineWidth += context.measureText(title[i]).width;
                    if (lineWidth > 550) {
                        context.fillText(title.substring(substringIndex, i), 30, offsetTop);
                        offsetTop += 41;
                        lineWidth = 0;
                        substringIndex = i;
                    }
                    if (i == title.length - 1) {
                        context.fillText(title.substring(substringIndex, i + 1), 30, offsetTop);
                    }
                }
                console.log(1111);
                context.fillStyle = '#F7F7F7';
                context.fillRect(0, 480, WIDTH, HEIGHT - 480);
                context.drawImage(codePath, 60, 500, 149, 149);
                context.font = '22px sans-serif';
                context.fillStyle = '#999999';
                context.lineWidth = 1;
                var nickname = this.userInfo.nickname;
                var lineWidth2 = context.measureText('手慢无！发送礼物啦！').width;
                var offsetTop2 = 557;
                for (var i = 0; i < nickname.length; i++) {
                    lineWidth2 += context.measureText(nickname[i]).width;
                    if (lineWidth2 > 371) {
                        context.fillText('手慢无！' + nickname.substring(0, i) + '发送礼物啦！', 244, offsetTop2);
                        break;
                    }
                }
                console.log(11111111112);
                if (lineWidth2 <= 371) {
                    context.fillText('手慢无！' + nickname + '发送礼物啦！', 244, offsetTop2);
                }
                offsetTop2 += 40;
                context.fillText('扫码领礼物', 244, offsetTop2);
                console.log(context);
                context.draw(true, () => {
                    uni.canvasToTempFilePath(
                        {
                            canvasId: id,
                            fileType: "png",
                            destWidth: WIDTH,
                            destHeight: HEIGHT,
                            success: (res) => {
                                console.log(res);
                                resolve(res.tempFilePath);
                                context = null;
                            },
                            fail: (err) => {
                                console.log(err);
                                reject(err.errMsg);
                                context = null;
                            },
                        },
                        target
                    );
                });
            })

        },
        createPoster() {
            this.createSharePoster("gift", {
                id: this.special.id,
                uid: this.userInfo.uid,
                oid: this.special.goid,
                orderId: this.orderId,
                url:this.url
            });
        }
    },
};
</script>
<style>
page {
  
    background: url("https://demo.zhishi.tczxkj.com/wap/first/zsff/images/apply-lecturer1.jpg") center 99rpx/478rpx 76rpx no-repeat,
        url("https://demo.zhishi.tczxkj.com/wap/first/zsff/images/apply-lecturer1.jpg") center/cover no-repeat;
}
</style>
<style scoped lang="scss">
.info {
    margin-top: 260rpx;
}
.present-topics{
    width: 90%;
    margin: auto;
}
.share-guide {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: none;
}

.share-guide img {
    display: block;
    width: 100%;
    height: 100%;
}

.layui-layer-imgbar {
    display: none !important;
}

.poster-canvas {
    width: 600px;
    height: 723px;
}
</style>