<template> <div class="box"> <div class="box_pic" v-if="background"> <img :src="background" /> </div> <div class="contextCss"> <div class="modelBox" v-for="(v, i) in modelList" :key="i"> <div class="titleCss">{{ v.name }}</div> <!--相册--> <div v-if="v.type == 1" class="typeOne"> <div class="pic" v-for="(x, y) in v.imgList" :key="y" @click="openImg(x, y, v)" > <img :src="x.response" /> </div> </div> <!--视频--> <div v-if="v.type == 2" class="typeTwo"> <div class="videoTwo" v-for="(x, y) in v.videoList" :key="y" > <video controls :poster="imgUrl" preload="none"> <source :src="x" type="video/mp4" /> </video> </div> </div> <!--图文--> <div v-if="v.type == 3" class="typeThree"> <div class="contextThree" v-html="v.context"></div> </div> </div> <div class="thumbs" v-if="resData.likeStatus"> <img src="@/assets/dz_on.png" @click="toDZ(false)" /> <span @click="toDZ(false)">{{ resData.likeNumber ? resData.likeNumber : 0 }}</span> </div> <div class="thumbs thumbs_grey" v-else> <img src="@/assets/dz_off.png" @click="toDZ(true)" /> <span @click="toDZ(true)">{{ resData.likeNumber ? resData.likeNumber : 0 }}</span> </div> </div> </div> </template> <script> import { ImagePreview } from "vant"; export default { data() { return { arr: 0, modelList: [], background: "", imgUrl: "", resData: { likeStatus: 0, likeNumber: 0, } }; }, methods: { //获取数据 getTable() { this.yxAxios .get( `${this.kqUrl}/schoolConsult/consultDetails?consultId=` + this.$route.query.dataId + `&userNum=` + JSON.parse(localStorage.getItem("userInfo")).centerNo ) .then((res) => { if (res.data.code == 200) { this.imgUrl = res.data.data.imgUrl; if (!res.data.data.background) { this.background = res.data.data.imgUrl; } else { this.background = res.data.data.background; } let arr = JSON.parse(res.data.data.modelList); this.modelList = arr; this.resData = res.data.data; // this.showFrame(); } else { this.$toast.fail(res.data.message); } }); }, //打开图片 openImg(x, y, v) { let imgList = v.imgList.map((v) => v.response); ImagePreview({ images: imgList, startPosition: y, }); }, //添加浏览量 addReadNum() { this.yxAxios .post(`${this.kqUrl}/visitRecord/setConsultVisit`, { consultId: this.$route.query.dataId, userId: JSON.parse(localStorage.getItem("userInfo")) .centerNo, }) .then((res) => { if (res.data.code == 200) { console.log("阅读量成功"); } else { console.log("阅读量失败"); } }); }, //视频 showFrame() { const video = document.createElement("video"); console.log("sfsddf"); video.addEventListener("loadeddata", function (e) { canvas.width = this.videoWidth; canvas.height = this.videoHeight; width = this.videoWidth; height = this.videoHeight; ctx.drawImage(this, 0, 0, width, height); var src = canvas.toDataURL("image/jpeg"); console.log("sfsf"); img.src = src; // var currentTime = this.currentTime // duration = this.duration // var fps = duration / 30 }); }, //点赞 true点赞,false取消 toDZ(val) { this.yxAxios .post(`${this.kqUrl}/visitRecord/setConsultLike`, { consultId: this.$route.query.dataId, userId: JSON.parse(localStorage.getItem("userInfo")) .centerNo, status: val ? 1 : 0, }) .then((res) => { if (res.data.code == 200) { console.log("点赞成功"); } else { this.$toast.fail(res.data.message); console.log("点赞失败"); } this.getTable(); }); }, }, mounted() { this.getTable(); this.addReadNum(); }, }; </script> <style lang="scss" scoped> .box { background-color: #f5f6fa; min-height: 100vh; .box_pic { width: 100%; height: 100vh; background-color: #999; img { width: 100%; height: 100%; } } .contextCss { width: 90vw; position: absolute; top: 600px; left: 5vw; border-radius: 5vw; background-color: #fff; padding: 3vw; box-sizing: border-box; box-shadow: 1px 1px 1px 1px rgb(221, 220, 220); .modelBox { margin: 3vw; display: flex; justify-content: center; flex-wrap: wrap; .titleCss { width: 60vw; padding: 3.5vw; box-sizing: border-box; font-size: 4.6vw; font-weight: bold; background-image: url("../../assets/yxcg/red_title.png"); -moz-background-size: 100% 100%; background-size: 100% 100%; text-align: center; margin-bottom: 5vw; color: #fff; } .typeOne { margin: 5vw; .pic { width: 90vw; // height: 45vw; margin-bottom: 5vw; img { width: 100%; // height: 100%; } } } .typeTwo { margin: 5vw; .videoTwo { width: 80vw; height: 50vw; margin-bottom: 5vw; video { width: 100%; height: 100%; } } } .typeThree { margin: 5vw; .contextThree { width: 70vw; margin-bottom: 5vw; font-size: 4.5vw; overflow: auto; ::v-deep img { max-width: 60vw !important; height: 50vw; } } } } .thumbs { width: 100%; font-size: 33px; font-weight: bold; color: #ed2323; text-align: center; display: flex; justify-content: center; align-items: center; img { width: 32px; margin-right: 13px; } } .thumbs_grey { color: #999; } } } </style>