canvasScreen/components/tanchuang/videoval.vue

<template>
	<view  class="content">
		<!-- 列表 -->
		<view class="artic">
			<view class="justy">
				<view class="rdlist" v-for="(item,ind) in readlists" :key="ind"
				 @click="togglePopup(item, 'image')">
					<view class="justy-type">
						<view class="rdlist-img">
							<image :src="item.localCover"
							 mode="scaleToFill" class="listimg"></image>
						</view>
						<view class="rdlist-name">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 插屏弹窗 -->
		<uni-popup ref="image" :custom="true" :mask-click="true" >
			<view class="tc-image">
				<view class="x">
					<image class="background" src="../../static/img/yuewen_03.png" mode="" />
					<view class="tcartic">
						<view class="tctitle">人工智能的终极探索</view>
						<view class="container">
							<view class="" v-if="ifShow" >
								<view class="qrimg-i">
									<tki-qrcode 
									ref="qrcode" 
									:val="val" 
									:size="size" 
									:unit="unit" 
									:background="background" 
									:foreground="foreground" 
									:pdground="pdground" 
									:icon="icon" 
									:iconSize="iconsize" 
									:lv="lv" 
									:onval="onval" 
									:loadMake="loadMake" 
									:usingComponents="true" 
									@result="qrR" />
								</view>
							</view>
							<view class="saoma">扫码免费阅读本文</view>
						</view>
						<view class="tcfoot">
							<view class="ewm">
								<view class="ewmimg">
									<image :src="listcont.localCover" mode="" class="ewmimage"></image>
								</view>
								<view class="cpgroup">
									<view class="cptit">标题：{{listcont.name}}</view>
									<view class="cpauter">作者：{{listcont.creator}}</view>
								</view>
							</view>
							<view class="tcjj">{{listcont.desc}}</view>
							<view class="out"  @click="cancel('image')" >
								<image src="../../static/img/yuewen_06.png" class="outto"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
import {LocalData, getStorage,serialNum} from '@/utils/global.js'
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
export default {
	components: {
		uniPagination,
		uniPopup,
		tkiQrcode
	},
	props:{
		readlists: {
		  type: Array,
		  default: () => {
		    return []
		  }
		}
	},
	data() {
		return {
			// 弹窗
			ifShow: true,
			val: '', // 要生成的二维码值
			size: 125, // 二维码大小
			unit: 'upx', // 单位
			background: '#ffffff', // 背景色
			foreground: '#000000', // 前景色
			pdground: '#000000', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: false, // val值变化时自动重新生成二维码
			loadMake: false, // 组件加载完成后自动生成二维码
			src: '' ,// 二维码生成后的图片地址或base64
			listcont:'' //简介
		}
	},
	methods: {
		qrR(res) {
			this.src = res
			// console.log(res)
		},
		togglePopup(item,open) {
			console.log(item)
			this.listcont=item
			this.ifShow = false
			this.loadMake = false
			this.$refs[open].open()
			let that=this
			this.$nextTick(function(){
				that.ifShow = true
				that.loadMake = true
			})
			let h5ReaderUrl=uni.getStorageSync('h5ReaderUrl')
			this.val=h5ReaderUrl+"?name=read&sn="+serialNum+"&id="+item.resourceId
			console.log("196-",this.val)
		},
		cancel(type) {
			this.$refs[type].close()
		},
	},
	onLoad(e) {
		getStorage()
		this.togglePopup(this.readlists, 'image')
	}
}
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	/* height: 1335upx; */
	background: rgb(0,21,52);
	color: white;
}
.unihead-title{
	width: 100%;
	height: 120upx;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 34upx 8%;
}
.title{
	width: 50%;
	margin-top: 13upx;
	font-size: 34upx;
	font-weight: 600;
}
.unihead-right{
	display: flex;
	justify-content: space-between;
}
.icon-item{
	width: 11%;
	min-width: 102upx;
	display: flex;
	justify-content: flex-end;
}
.help{
	margin-left: 10upx;
	line-height: 90upx;
	font-size: 0.5rem;
}
.iconhelp{
	margin-top: 30upx;
	width: 28upx;
	height: 28upx;
}
.helps{
	background: url(../../static/img/help.png) no-repeat;
	background-size: 100%;
}
.home{
	background: url(../../static/img/home.png) no-repeat;
	background-size: 100%;
}
.back{
	background: url(../../static/img/back.png) no-repeat;
	background-size: 100%;
}
.artic{
	width: 100%;
	margin: 0 auto;
	height: 1015upx;
	margin-top: 10upx;
}
.justy{
	width: 100%;
	box-sizing: border-box;
	padding: 0 6%;
	margin-top: 20upx;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}
.justy-type{
	width: 83%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 6upx 0;
	background: url(../../static/img/yuewen2_03.png) no-repeat;
	background-size:100% 100%;
	
}
.rdlist{
	width: 25%;
	height: 176upx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 28upx;
	/* background-color: red; */
}
.rdlist-img{
	width: 90%;
	height: 80%;
	border-radius: 2upx;
}
.listimg{
	width: 100%;
	height: 100%;
}
.rdlist-name{	
	width: 95%;
	height: 50upx;
	margin-left:5upx;
	font-size: 0.5rem;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 分页 */
.example-body{
	height: 200upx;
	padding: 70upx 2%;
	box-sizing: border-box;
}
/* 插屏广告 */
uni-popup{
width: 100%;
height: 100%;
}
.content>>>.uni-popup__wrapper.center{
	align-items: flex-start;
}
.tc-image {
position: relative;
text-align: left;
}

.tc-image .background {
width: 600upx;
height: 800upx;
}
.x{
position: relative;
}
.tcartic{
	position: absolute;
	top: 12%;
	left: 0;
	padding: 0 70upx;
}
.tctitle{
	font-weight: 700;
	font-size: 0.8rem;
	padding-bottom: 4upx;
	margin-bottom: 30upx;
	border-bottom: 2px solid rgb(2,68,106);
}
.container{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.tki-qrcode{
	display: inline-block;
	padding: 5upx;
	text-align: center;
	background: white;
	font-size: 0;
}
.saoma{
	font-size: 0.5rem;
}
.qrimg-i{
	padding: 4upx;
}
.uni-image-close {
position: absolute;
right: -30px;
top: -30px;
z-index: 2;
}
.tcfoot{
	margin-top: 30upx;
	box-sizing: border-box;
	padding: 30upx;
	width: 100%;
	display: flex;
	flex-flow: column wrap;
	border: 1px solid rgb(19,96,125) ;
}
.ewm{
	width: 100%;
	display: flex;
}
.ewmimg{
	width: 132upx;
	height: 132upx;
	background: url(../../static/img/yuewen_10.png) no-repeat;
	background-size:100% ;
	margin-right: 16upx;
	padding: 10upx;
}
.cpgroup{
	width: 70%;
	display: flex;
	flex-flow: column wrap;
}
.cptit,.cpauter{
	font-size: 0.5rem;
}
.ewmimage{
	width: 100%;
	height: 91%;
}
.tcjj{
	font-size: 0.4rem;
	height: 120upx;
	overflow: hidden;
	/* background: #007AFF; */
}
.out{
	width: 30upx;
	height: 30upx;
	position: absolute;
	top: -20upx;
	right: 80upx;
}
.outto{
	width: 100%;
	height: 100%;
}

.leftbutton{
	width: 5%;
	height: 200upx;
	position: fixed;
	top:40%;
	left:0;
}
.leftbutton image{
	width: 100%;
	height: 100%;
}
.rightbutton{
	width: 5%;
	height: 200upx;
	position: fixed;
	top:40%;
	right:0;
}
.rightbutton image{
	width: 100%;
	height: 100%;
}
</style>