WebDevelopmentFramework/pages/index/index.vue

<template>
	<view class="container">
		<view style="background-color: #FFFFFF;width: 750rpx;height: 72px;">
			<image src="../../static/touxiang.png" class="touxiang"></image>
			<view class="username">{{name}}</view>
			<text class="phone">{{phone}}</text>
			<image src="../../static/share.png" class="share" @click="share"></image>
			<image src="../../static/loginout.png" class="loginout" @click="loginout"></image>
		</view>
		<!-- 项目列表 -->
		<view class="list-item" v-for="(item,index) in list" :key="index">
			<view class="list-title">快乐体操</view>
			<view class="list-icon"></view>
			<view class="list-title2">学习视频</view>
			<!-- 视频 -->
			<view style="margin-left: 40px;height: 104px;margin-top: 10px;">
				<image class="video" @click="playVideo(item)" :src="item.pictureUrl"></image>
				<view class="jieshao">{{item.videoName}}</view>
				<view class="xiang">{{item.videoDescription}}</view>
			</view>
			<view class="list-icon"></view>
			<view class="list-title2">学习资料</view>
			<!-- 资料 -->
			<view style="width: 690rpx;margin-left: 40px;margin-top: 10px;">
				<view class="ziliao">{{item.courseName}}</view>
				<image src="../../static/xiazai.png" class="xiazai" @click="download(item)"></image>
			</view>
			<view style="height:20px"></view>
			<!-- <view style="width: 690rpx;margin-left: 40px;margin-top: 10px;">
				<view class="ziliao">资料2</view>
				<image src="../../static/xiazai.png" class="xiazai"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'xxx',//用户名
				phone:'xxxxxxxxxxx',//手机号
				fileUrl:'https://chuanghai-tech.com/video/txt.pdf',//下载链接
				list:[],//当前页面数组数据
				token:'',//缓存token
				resultDecodeN:'',//解密后数据
			}
		},
		onLoad() {
			if(wx.getStorageSync('userName')!='' || wx.getStorageSync('telPhone')!=''){
				this.name=wx.getStorageSync('userName')
				this.phone=wx.getStorageSync('telPhone')
			}
			this.token=wx.getStorageSync('token')
			this.getList()
		},
		methods: {
			//列表
			getList(){
				this.$axios.get('/shareVideo/api/video/video',
				{
					headers:{
						'token':this.token
					}
				}
				).then(res => {
					if (res.data.success) {
						console.log(res.data)
						var shu=res.data.data
						// 开始解密
						this.resultDecodeN = this.$fns.rsaDecode(shu[0])+
						this.$fns.rsaDecode(shu[1])+this.$fns.rsaDecode(shu[2])+
						this.$fns.rsaDecode(shu[3])+this.$fns.rsaDecode(shu[4])+
						this.$fns.rsaDecode(shu[5])+this.$fns.rsaDecode(shu[6])+
						this.$fns.rsaDecode(shu[7])+this.$fns.rsaDecode(shu[8])+
						this.$fns.rsaDecode(shu[9])
						//解析
						console.log(JSON.parse(this.resultDecodeN));
						//获取数组
						JSON.parse(this.resultDecodeN).forEach(data => {
							this.list.push(data)
						})
					} else {
						uni.showToast({ title: res.data.message, icon: 'none' });
					}
				}).catch(res =>{
				});
			},
			//跳转播放视频
			playVideo(item){
				uni.navigateTo({
					url:'/pages/video/video?id='+item.id
				})
			},
			//下载文件
			download(item) {
				if(this.isIos()){
						uni.navigateTo({
						    url:'/pages/IOSDownLoad/IOSDownLoad?url='+item.courseUrl
					    })
					}else{
				        //直接在浏览器中打开
						window.location.href = item.courseUrl;
					}
			},
			//判断是否ios
			isIos() {
				let u = navigator.userAgent
				let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
			 
				if (isIOS) {
					return true
				} else {
					return false
				}
			},
			//分享链接
			share(){
				wx.setClipboardData({
					data: uni.getStorageSync('url'),
					
					success: function(res) {
						wx.showToast({
							title: '复制'+uni.getStorageSync('url')+'成功',
							icon: "none",
							mask: "true"
						})
					}
				})
			},
			//退出登录
			loginout(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 10px 20px 20px 0px;
		font-size: 16px;
		line-height: 24px;
	}
	.touxiang{
		width: 100rpx;
		height: 100rpx;
		padding: 10px 10px 10px 10px;
	}
	.username{
		margin-left: 70px;
		margin-top: -65px;
	}
	.phone{
		margin-left: 70px;
		font-size: 14px;
	}
	.share{
		width: 50rpx;
		height: 50rpx;
		/* position: absolute; */
		margin-left: 140px;
		margin-top: -15px;
	}
	.loginout{
		width: 50rpx;
		height: 50rpx;
		/* position: absolute; */
		margin-left: 10px;
		margin-top: -15px;
	}
	/* 项目列表 */
	.list-item{
		margin-top: 10px;
		width: 750rpx;
		height: auto;
		border-radius: 15rpx;
		background-color: #FFFFFF;
	}
	.list-title{
		padding-top: 20px;
		font-size: 27px;
		text-align: center;
	}
	.list-icon{
		margin-left: 20px;
		margin-top: 20rpx;
		width: 8rpx;
		height: 32rpx;
		opacity: 1;
		border-radius: 33rpx;
		background: #1E7DFB;
	}
	.list-title2{
		margin-top: -20px;
		margin-left: 30px;
	}
	/* 视频 */
	.video{
		width: 394rpx;
		height: 200rpx;
		background-color: antiquewhite;
		/* float: left; */
	}
	.jieshao{
		margin-top: -100px;
		margin-left: 220px;
	}
	.xiang{
		margin-left: 220px;
		margin-top: 10px;
	}
	/* 资料 */
	.ziliao{
		line-height: 40rpx;
		font-size: 32rpx;
		float: left;
	}
	.xiazai{
		width: 40rpx;
		height: 40rpx;
		margin-left: 120px;
		/* float: right; */
	}
</style>