cpdm_pc/src/views/PopularizationScience.vue

<script setup lang="ts">
import CpmdHeader from '@/components/CpmdHeader.vue';
import { onMounted, onUnmounted, ref } from 'vue'
import { format } from 'date-fns/format';
import { menuStatusStore, userInfoStore } from '@/stores'
import { userPlanApi } from '@/api/home';
import { getUnread, planNumGet } from '@/utils/test';
const userInfo = userInfoStore()
const menuStatus = menuStatusStore();

menuStatus.saveActiveIndex('2')

const homeHeaderOut = ref<any>()
const height = ref<number>()
//心灵探索高度
const xlts = ref<number>()

//计划提醒的高度
const plan_jihua = ref<number>()

//显示标题及文本的标志
const flag_text = ref<number>(1)
//定时器标志
const flag_time = ref<any>()

//
const centerDialogVisible = ref<boolean>(false)
const moreList = ref<any>([
    {
        id: '6',
        title: 'MBTI16型人格测试',
        poster: 'mb',// 展示图
        qrCode: 'mbCode',
        isProfession: true,
        isRecommend: true
    },
    {
        id: '1',
        title: '标准情商测试',
        poster: 'qs',// 展示图
        qrCode: 'qsCode',
        isProfession: true,
        isRecommend: true
    },
    {
        id: '4',
        title: '你让异性心动指数有多高？',
        poster: 'xd',// 展示图
        qrCode: 'xdCode',
        isProfession: false,
        isRecommend: true
    },
    {
        id: '2',
        title: '测测你的睡眠质量吧！',
        poster: 'sm',// 展示图
        qrCode: 'smCode',
        isProfession: false,
        isRecommend: true
    },
    {
        id: '9',
        title: '职业心理年龄测试',
        poster: 'zy',// 展示图
        qrCode: 'zyCode',
        isProfession: true,
        isRecommend: false
    },
    {
        id: '3',
        title: '看一下自己“神经”是否正常？',
        poster: 'sj',// 展示图
        qrCode: 'sjCode',
        isProfession: false,
        isRecommend: false
    },

    {
        id: '5',
        title: '你是否正在逐渐老化？',
        poster: 'lh',// 展示图
        qrCode: 'lhCode',
        isProfession: false,
        isRecommend: false
    },
    {
        id: '8',
        title: '你的家庭关系健康吗？',
        poster: 'jk',// 展示图
        qrCode: 'jkCode',
        isProfession: false,
        isRecommend: false
    },
    {
        id: '10',
        title: '工作倦怠测试',
        poster: 'jd',// 展示图
        qrCode: 'jdCode',
        isProfession: false,
        isRecommend: false
    },
    {
        id: '7',
        title: '在婚姻里，你有安全感吗？',
        poster: 'aq',// 展示图
        qrCode: 'aqCode',
        isProfession: false,
        isRecommend: false
    }]
)
// vue3+vite   实现动态加载图片
const requireImg = (name: string) => {
    return new URL(`../assets/moreTest/${name}.png`, import.meta.url).href
}
//保存二维码的变量
const scaleObj = ref<any>({
    title: '你的家庭关系健康吗？',
    qrCode: 'jkCode',
})
//打开二维码
const openCode = (item: any) => {
    scaleObj.value = item;
    centerDialogVisible.value = true

}
//得到图片，进行canvas下载
const downImgByCanvas = () => {
    let id = "img";
    const canvas = document.createElement('canvas')
    const ctx: any = canvas.getContext('2d')
    //得到原始的宽高
    let sourceImage: any = document.getElementById(id);
    canvas.width = sourceImage.naturalWidth;
    canvas.height = sourceImage.naturalHeight;
    //保存图片到canvas
    ctx.drawImage(sourceImage, 0, 0);
    downJpgByCanvas(canvas);
}
//得到图片的url,然后下载
const downImgByUrl = () => {
    let img: any = document.getElementById('img');
    downJpgByUrl(img.src);
}
//下载图片:通过canvas
const downJpgByCanvas = (canvas: any) => {
    var oA = document.createElement("a");
    let time = timeFormat();
    oA.download = "img_" + time + '.jpg';// 设置下载的文件名，默认是'下载'
    oA.href = canvas.toDataURL("image/jpeg");
    document.body.appendChild(oA);
    oA.click();
    oA.remove(); // 下载之后把创建的元素删除
}
const downJpgByUrl = (url: string) => {
    let time = timeFormat();
    var a = document.createElement('a');      // 创建一个a节点插入的document
    var event = new MouseEvent('click')          // 模拟鼠标click点击事件
    a.download = "img_" + time + '.jpg';                  // 设置a节点的download属性值
    a.href = url;                                     // 将图片的src赋值给a节点的href
    a.dispatchEvent(event)
    a.remove(); // 下载之后把创建的元素删除
}

//格式化时间
const timeFormat = () => {
    var time = new Date();

    return format(time, "yyyy年MM月dd日 HH时mm分ss秒");
}


// //补0
// const add0 = (m: number) => {
//     return m < 10 ? '0' + m : m
// }

//刚进入页面就将高度设置为页面需要的
onMounted(() => {
    if (userInfo.token) {
        getUnread()
        planNumGet()
    }
    //进到界面开始轮询
})
//界面销毁函数


//退出页面销毁 方法
onUnmounted(() => {

})




</script>

<template>
    <div class="home_header_out" ref="homeHeaderOut">
        <div class=" home_header_inner">
            <CpmdHeader />
            <div style="text-align: center;">
                <!-- <img class="xlts_img" style="margin-top:40px" src="../assets/home/other_text.png" /> -->
            </div>
        </div>

        <div style="background: linear-gradient( 180deg, #B2EDFF 0%, #FFFFFF 33%);padding-top: 20px;">
            <div class="leave_message">
                <!-- <img class="img" src="../assets/zs/community.png" alt=""> -->
                <div class="font_blue"> 更多测试 </div>
            </div>
            <div class="kply">
                <div class="kply_inner">
                    <div
                        style="padding:10px 0px;width: 100%;display: flex;flex-wrap: wrap;padding-bottom:20px;justify-content: space-between;">
                        <div v-for="item in moreList" :key="item.id" class="out">
                            <img class="poster" :src="requireImg(item.poster)">
                            <div class="des">
                                <div>
                                    <div class="scale_title">
                                        {{ item.title }}
                                    </div>
                                    <div style="display: flex;">
                                        <div v-show="item.isProfession">
                                            <!-- <img style="width: 80px;":src="requireImg('isProfession')"> -->
                                            <div class="isProfession">专业报告</div>

                                        </div>
                                        <span v-show="item.isProfession"> &nbsp;&nbsp;</span>

                                        <div v-show="item.isRecommend">
                                            <div class="isM">强烈推荐</div>
                                            <!-- <img style="width: 80px;" :src="requireImg('isM')"> -->
                                        </div>

                                    </div>
                                </div>

                                <div class="cyc"><span class="cyc_te" @click="openCode(item)">测一测</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>


    </div>
    <div class="code_dig">
        <el-dialog v-model="centerDialogVisible" :title="scaleObj.title" width="500" align-center>
            <template #footer>
                <div style="text-align: center;">
                    <img id="img" :src="requireImg(scaleObj.qrCode)">
                </div>
                <div class="dialog-footer">
                    <!-- <el-button @click="centerDialogVisible = false">关闭</el-button>
                    <el-button type="primary">
                        下载
                    </el-button> -->
                    <div style="display: flex;justify-content: end;">
                        <div class="close_code" @click="centerDialogVisible = false">关闭</div>
                        <div class="down_code" @click="downImgByCanvas">下载</div>
                    </div>

                    <!-- <div>

                    </div> -->
                </div>
            </template>
        </el-dialog>

    </div>

</template>
<style>
.code_dig>>>.el-dialog {
    /* border-radius: 40px !important; */
}
</style>
<style lang="scss" scoped>
:deep(.el-dialog) {
    border-radius: 40px !important;
}

.home_header_out {
    scroll-snap-align: start;
    flex: 1;
    // position: relative;
    padding-bottom: 60px;
    width: 100%;
    min-width: 1200px;

    background-repeat: no-repeat;
    background-size: contain;

    // background-color: #B3F1DA; //估计是需要动态


    .home_header_inner {
        min-height: 1;
        left: 0;
        right: 0;
        margin: auto;
        // height: 100px;
        width: 100%;

        .xlts_img {
            height: 60px;
        }
    }

    .leave_message {

        left: 0;
        right: 0;
        margin: auto;
        width: 1200px;
        margin-bottom: 20px;
        // margin-top: 20px;

        .font_blue {
            position: relative;
            color: #30D5DD;
            font-weight: 700;
            font-size: 22px;
            font-family: 'Rammetto One-Regular';
            padding-top: 30px;
            z-index: 10;
            background: url(../assets/zs/more_test2.png) no-repeat;
            background-size: auto 50px;
        }
    }

    .kply {
        width: 100%;

        .kply_inner {
            left: 0;
            right: 0;
            margin: auto;
            width: 1200px;
            background-color: transparent;
            border-radius: 40px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            .out {
                margin-bottom: 40px;
                background-color: #ffffff;
                width: 48%;
                // background-color: antiquewhite;
                display: flex;

                // box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.17);
                ;
                box-shadow: 0px 4px 31px 0px rgba(0, 0, 0, 0.09);
                padding: 20px;
                box-sizing: border-box;
                border-radius: 36px;

                .poster {
                    width: 150px;
                    // padding-left: 40px;
                }

                .des {
                    padding-left: 20px;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    // background-color: aqua;

                    .scale_title {
                        letter-spacing: 3px;
                        font-size: 20px;
                        font-weight: 700;
                        line-height: 40px;
                    }

                    .cyc {
                        text-align: right;

                        .cyc_te {
                            margin-right: 40px;
                            cursor: pointer;
                            // width: 100px;
                            border-radius: 14px;
                            border: 2px solid #FF52CE;
                            color: #ffffff;
                            background-color: #000000;

                            padding: 8px 30px;
                            cursor: pointer;
                            margin-bottom: 5px;
                            // display: flex;
                            align-items: center;
                        }
                    }

                    .isProfession {
                        color: #836000;
                        background-color: #FFFF9F;
                        font-size: 10px;
                        border: 1px solid #E7DF42;
                        padding: 2px 10px;
                        border-radius: 4px;
                    }

                    .isM {
                        color: #266208;
                        background-color: #CFFF9F;
                        font-size: 10px;
                        border: 1px solid #6FEB32;
                        padding: 2px 10px;
                        border-radius: 4px;
                    }
                }

            }
        }
    }


}

.close_code {
    border: 1px solid #cccaca;
    padding: 2px 20px;
    border-radius: 10px;
    cursor: pointer;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}

.down_code {
    margin-left: 20px;
    cursor: pointer;
    border: 2px solid #FF52CE;
    padding: 2px 20px;
    border-radius: 10px;
    background-color: #000000;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    font-size: 14px;
}
</style>