web-base-h5/pages/specialArea/share.vue

<template>
    <view>
        <backIcon></backIcon>
        <view class="shareImg" @click="show = true">
            <u-icon name="more-dot-fill" size="24" color="#fff">
            </u-icon>
        </view>
        <view class="contain" v-if="specialArea == 7" id="myImage">
            <img class="bgPic" src="@/static/images/shareBg.jpg" alt="">
            <img class="qrImg" :src="shareImg" alt="">
            <view class="mem">{{ memberCode }}</view>
            <img class="btImg2" src="@/static/images/btnShare.png" @click="show = true" alt="">
        </view>
        <view class="contain1" v-if="specialArea == 21" id="myImage">
            <img class="bgPic" src="@/static/images/hai.jpeg" alt="">
            <img class="qrImg" :src="shareImg" alt="">
            <view class="mem">{{ memberCode }}</view>
            <img class="btImg" src="@/static/images/btnShare.png" @click="show = true" alt="">
        </view>
        <u-action-sheet :actions="list" @select='checkList' :safeAreaInsetBottom="true" @close='closeList' :closeOnClickOverlay="true" :show="show"></u-action-sheet>
    </view>
</template>

<script>
import * as api from '@/config/goods'
import html2canvas from 'html2canvas'
import backIcon from '@/components/backIcon.vue'
export default {
    components: {
        backIcon,
    },
    data() {
        return {
            specialArea: '',
            shareImg: '',
            list: [{
                    name: '保存图片',
                    id: 0,
                },
                {
                    name:  '取消',
                    id: 1,
                },
            ],
            memberCode:'',
            show: false,
        }
    },
    onLoad(options) {
        this.specialArea = options.specialArea
        this.memberCode = uni.getStorageSync('User').memberCode
        this.getQr()
        let titLabel = ''
        if (this.specialArea == 7) {
            titLabel = '海粉分享'
        } else {
            titLabel = '免费注册'
        }
        uni.setNavigationBarTitle({
            title: titLabel,
            success: () => {},
        })
    },
    methods: {
        closeList() {
            this.show = false
        },
        checkList(e) {
            if (e.id == 1) {
                this.closeList()
            } else {
                this.saveImage()
                this.closeList()
            }
        },
        getQr() {
            let url
            if (this.specialArea == 7) {
                url = api.fansCode
            } else {
                url = api.shareCode
            }
            url().then((res) => {
                this.shareImg = 'data:image/png;base64,' + res.data.dataStr
            })
        },
        saveImage() {
            const options = {
                backgroundColor: null,
                scale: window.devicePixelRatio,
                dpi: 300
            }
            html2canvas(document.querySelector('#myImage'), options).then(
                (canvas) => {
                    let url = canvas.toDataURL('image/png')
                    let a = document.createElement('a')
                    a.href = url
                    a.setAttribute('download', 'sharePost')
                    a.click()
                }
            )
        },
    },
}
</script>

<style lang="scss" scoped>
.contain {
    // background: url('@/static/images/shareBg.png') no-repeat;
    // background-size: 100% 100%;
    // background-position: 50% 50%;
    height: 100vh;
    // width: 100%;
    .qrImg {
        width: 320rpx;
        height: 320rpx;
        position: absolute;
        bottom: 18%;
        left: 50%;
        transform: translateX(-50%);
    }
    .mem{
      position: absolute;
        bottom: 15%;
        left: 50%;
        font-size: 18px;
        font-weight: 500;
        transform: translateX(-50%);
    }
    .btImg2{
       width: 300rpx;
    height: 100rpx;
        position: absolute;
        bottom: 9%;
        left: 50%;
        transform: translateX(-50%);
    }
}

.contain1 {
    // background: url('@/static/images/hai.jpeg') no-repeat;
    // background-size: 100% 100%;
    // background-position: 50% 50%;
    height: 100vh;
    // width: 100%;
    .qrImg {
        width: 320rpx;
        height: 320rpx;
        position: absolute;
        bottom: 35%;
        left: 50%;
        transform: translateX(-50%);
    }
    .mem{
      position: absolute;
        bottom: 31%;
        left: 50%;
        font-size: 18px;
        font-weight: 500;
        transform: translateX(-50%);
    }
    .btImg{
      width: 300rpx;
    height: 100rpx;
        position: absolute;
        bottom: 24%;
        left: 50%;
        transform: translateX(-50%);
    }
}

.bgPic {
    width: 100%;
    height: 100%;
}

.shareImg {
    position: fixed;
    margin: 14rpx 24rpx;
    z-index: 9999;
    right: 20rpx;
    top: 5rpx;
}
</style>