lasuo_nft_front/src/components/Post.vue

<template>
    <div ref="share">
        <van-overlay :show="show" @click="show = false" z-index="99">
            <div class="wrapper">
                <div class="img" ref="wrap" v-if="img">
                    <!-- @click.stop="preview(0, [img])" -->
                    <img :src="img" />
                </div>
                <template v-if="!img">
                    <div class="assignmentPost" v-if="assignment && pageUrl === 'productDetail'" ref="post">
                        <van-image class="assignmentPostBg" width="300" height="500" :src="shareBg" />
                        <div class="qrcode">
                            <vue-qrcode :value="url" :options="{ width: 82, margin: 0 }"></vue-qrcode>
                        </div>
                    </div>
                    <div class="content" v-else ref="post">
                        <!-- @load="loadImg" -->
                        <!-- <img crossOrigin="anonymous" :src="banners" class="detailImg" /> -->
                        <van-image :src="detailImg" class="detailImg" fit="cover" />
                        <div class="info">
                            <div class="name van-multi-ellipsis--l2">
                                {{ info.name }}
                            </div>
                            <div class="title_tip">发现一款超赞的数字藏品，快来看看</div>
                            <!-- <div class="tabs">
                                <span v-if="info.category">{{ info.category }}</span>
                                <span v-if="info.number">编号{{ info.number }}</span>
                            </div> -->
                            <!-- <template v-if="pageUrl !== 'assetDetail'">
                                <div class="text" v-if="isBuy">
                                    <div class="price">
                                        <img src="@assets/jiage_huang.png" alt="" />
                                        <span>{{ info.price }}</span>
                                    </div>
                                    <div class="text1" v-if="info.stock && !time">
                                        <span>已售 {{ Math.max(Math.min(info.sale, info.total), 0) }}</span>
                                        <span>剩余 {{ Math.min(Math.max(info.stock, 0), info.total) }}</span>
                                    </div>
                                </div>

                                <div class="status" v-if="!info.salable">仅展示</div>
                            </template> -->
                            <!-- <template v-else>
                                <div class="text" v-if="info.consignment">
                                    <div class="price">
                                        <img src="@assets/jiage_huang.png" alt="" />
                                        <span>{{ info.sellPrice || 0 }}</span>
                                    </div>
                                </div>

                                <div class="status" v-else-if="info.status == 'NORMAL'">
                                    {{ info.publicShow ? '仅展示' : '未展示' }}
                                </div>
                            </template> -->
                        </div>
                        <div class="minter">
                            <div class="minter_con">
                                <div>
                                    <div class="minter_con_one">
                                        <img :src="logoImg" alt="" class="minter_con_one_text1" />
                                        <!-- <div class="minter_con_one_text1">拉索</div> -->
                                        <div class="minter_con_one_text2" v-if="info.category">{{ info.category }}</div>
                                    </div>
                                    <div class="minter_con_two">扫码打开拉索APP，发现有趣数字藏品</div>
                                </div>
                                <div>
                                    <vue-qrcode
                                        :value="url"
                                        :options="{ width: 70, margin: 3 }"
                                        class="code"
                                    ></vue-qrcode>
                                </div>
                            </div>
                            <!-- <div class="minter-content">
                                <van-image width="26" height="26" round :src="userImg" fit="cover" />
                                <div class="text1">{{ info.minter }}</div>
                                <div class="text2">铸造者</div>
                            </div> -->
                        </div>
                        <!-- <div class="sold xianliang" v-if="time">
                            <img src="@assets/shizhong.png" alt="" />
                            <span>即将开售：{{ time }}</span>
                        </div> -->
                    </div>
                </template>

                <div class="btn" @click.stop="" v-if="cordova">
                    <van-button type="primary" @click="save">保存图片</van-button>
                </div>
                <div class="tips" v-else @click="save">长按图片保存</div>
            </div>
        </van-overlay>
        <div class="share" v-if="!noButton" @click="init">
            <img src="@assets/svgs/icon-share.svg" alt="" />
            <span>分享</span>
        </div>
    </div>
</template>
<script>
import vueQrcode from '@chenfengyuan/vue-qrcode';
import html2canvas from 'html2canvas';
import product from '../mixins/product';
import resolveUrl from 'resolve-url';
import axios from 'axios';
import { isBefore, format } from 'date-fns';
import { abs } from 'mathjs';
import { ImagePreview } from 'vant';
export default {
    mixins: [product],
    props: {
        info: {
            type: Object,
            default: () => {
                return {
                    pic: []
                };
            }
        },
        pageUrl: {
            type: String,
            default: 'productDetail'
        },
        noButton: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            show: false,
            share: null,
            img: '',
            detailImg: '',
            userImg: '',
            cordova: window.cordova,
            shareBg: '',
            logoImg: ''
        };
    },
    computed: {
        url() {
            let pageUrl = this.pageUrl;
            let id = this.info.id;
            if (pageUrl === 'assetDetail') {
                id = this.info.collectionId;
                pageUrl = 'productDetail';
            }
            if (pageUrl === 'productDetail' && !this.assignment) {
                pageUrl = 'productDetail';
            }
            if (this.isLogin && this.assignment && pageUrl === 'productDetail') {
                return resolveUrl(
                    this.$baseUrl,
                    '9th/productTasks?id=' + id + '&invitor=' + this.$store.state.userInfo.id
                );
            } else if (this.isLogin) {
                return resolveUrl(
                    this.$baseUrl,
                    '9th/' + pageUrl + '?collectionId=' + id + '&invitor=' + this.$store.state.userInfo.id
                );
            } else {
                return resolveUrl(this.$baseUrl, '9th/' + pageUrl + '?id=' + id);
            }
        },
        banners() {
            return this.getImg(this.changeImgs(this.info.pic || []), '', 900);
        },
        isBuy() {
            return this.info.stock && this.info.onShelf && this.info.salable;
        },
        time() {
            if (this.info.startTime) {
                if (isBefore(new Date(this.info.startTime), new Date())) {
                    return format(new Date(this.info.startTime), 'mm月dd日');
                }
            }

            return '';
        }
    },
    components: {
        vueQrcode
    },
    methods: {
        init(value) {
            this.show = true;
            if (!this.img) {
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
                this.$nextTick(() => {
                    this.getImgBase64(require('@assets/icon@3x.png'), 'logoImg');
                    if (this.assignment && this.pageUrl === 'productDetail') {
                        this.getImgBase64(this.info.shareBg, 'shareBg');
                    } else {
                        this.getImgBase64(this.banners, 'detailImg');
                        this.getImgBase64(this.info.minterAvatar, 'userImg');
                    }
                    setTimeout(() => {
                        this.loadImg();
                    }, 1000);
                });
            }
        },
        loadImg() {
            html2canvas(this.$refs.post, {
                useCORS: true,
                allowTaint: true,
                backgroundColor: null,
                scale: 3
            }).then(canvas => {
                this.$toast.clear();
                this.img = canvas.toDataURL('image/png');
            });
        },
        getImgBase64(img2, key) {
            let img = new Image();
            img.crossOrigin = 'anonymous';
            let _this = this;
            img.onload = function () {
                let src = _this.image2Base64(img);
                _this[key] = src;
            };
            img.src = img2;
        },
        image2Base64(img) {
            let canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            let ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, img.width, img.height);
            let dataURL = canvas.toDataURL('image/png');
            return dataURL;
        },
        preview(index = 0, list = []) {
            console.log('266716');
            ImagePreview({
                images: [...list],
                startPosition: index
            });
        },
        save() {
            if (window.cordova) {
                let _this = this;
                imageSaver.saveBase64Image(
                    { data: this.img },
                    function (filePath) {
                        _this.$toast('图片已保存至文件夹');
                        _this.show = false;
                        console.log('File saved on ' + filePath);
                    },
                    function (msg) {
                        _this.$dialog.alert({
                            title: '提示',
                            message: msg + ',请尝试截图保存分享'
                        });
                        (1).then(() => {
                            _this.preview(0, [_this.img]);
                        });
                    }
                );
            }
        }
    }
};
</script>
<style lang="less" scoped>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.content {
    width: 80vw;
    background: @bg;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

.img {
    img {
        width: 80vw;
        display: block;
    }
}

.info {
    // padding: 12px 10px 7px;
    padding: 15px;
    .name {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 22px;
    }
    .title_tip {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 18px;
        opacity: 0.5;
    }
    .text {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 6px;

        .price {
            img {
                width: 10px;
                height: 11px;
            }
            span {
                font-size: 24px;
                font-family: OSP-DIN, OSP;
                color: @prim;
                line-height: 36px;
            }
        }
        .text1 {
            font-size: 14px;
            color: @text3;
            line-height: 24px;
            span + span {
                margin-left: 10px;
            }
        }
    }
}

.code {
    border-radius: 6px;
}

.minter {
    width: 100%;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    padding: 0px 10px 20px;
    box-sizing: border-box;
    .minter_con {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #1e222c;
        border-radius: 8px;
        .minter_con_one {
            display: flex;
            padding: 0 0px 6px 15px;
            box-sizing: border-box;
            align-items: center;
            .minter_con_one_text1 {
                width: 60px;
                height: 32px;
                position: relative;
                z-index: 99;
                // margin-right: 7px;
                // font-size: 20px;
                // color: #eacc9b;
            }
            .minter_con_one_text2 {
                padding: 2px 4px;
                border: 1px solid #f9ddb3;
                border-radius: 4px;
                font-size: 14px;
                color: #f9ddb3;
                margin-left: 1px;
                line-height: 14px;
            }
        }
        .minter_con_two {
            padding: 0px 0px 0px 15px;
            box-sizing: border-box;
            font-size: 10px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #f9ddb3;
            line-height: 18px;
        }
    }
    .minter-content {
        /deep/.van-image {
            img {
                display: block;
            }
        }
        .text1 {
            font-size: @font1;
            color: @text0;
            line-height: 17px;
            margin-top: 1px;
        }
        .text2 {
            font-size: @font1;
            color: @text3;
            line-height: 17px;
        }
    }
}

.tips {
    font-size: 17px;
    color: rgba(255, 255, 255, 1);
    line-height: 22px;
    margin-top: 30px;
}

.share {
    position: fixed;
    right: 16px;
    bottom: 20vh;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, @prim 0%, @warn 100%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 100px;
    justify-content: center;
    span {
        font-size: 12px;
        color: #333230;
        line-height: 17px;
    }
    img {
        display: block;
    }
}

.detailImg {
    width: 80vw;
    height: 80vw;
    display: block;
}
.tabs {
    .flex();
    margin-top: 6px;
    span {
        font-size: 12px;
        color: #939599;
        line-height: 22px;
        padding: 0 10px;
        background: @bg3;
        border-radius: 4px;
        margin-right: 6px;
    }
}

.status {
    font-size: 14px;
    color: #939599;
    line-height: 24px;
    padding-top: 11px;
}

.sold {
    background-color: #1c1e25;
    font-size: @font1;
    color: #939599;
    padding: 0 17px;
    border-radius: 13px;
    line-height: 24px;
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 3;

    &.xianliang {
        position: absolute;
        top: 16px;
        left: 16px;
        font-size: @font1;
        color: @prim;
        display: flex;
        align-items: center;
        // border-radius: 13px !important;
        z-index: 4;
        padding: 0 10px !important;

        img {
            width: 18px;
            height: 18px;
            margin-right: 3px;
        }
    }
}

.btn {
    padding: 40px;
    // width: 150px;
    font-size: 18px;
    align-self: center;
    /deep/ .van-button {
        height: 46px;
    }
}

.assignmentPost {
    width: 300px;
    height: 500px;
    background: #ffffff;
    border-radius: 30px;
    position: relative;
    .qrcode {
        background-color: @bg3;
        padding: 6px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 94px;
        border-radius: 6px;
        z-index: 20;
        /deep/canvas {
            display: block;
        }
    }
}
</style>