uni-zhihuikuangshan/pages/index/record/record.vue

<template>
	<view>
		<view class="pageItemList" v-for="(item,index) in pageItemList" :key="index">
			<!-- 纯文本模块 -->
			<view class="TEXT">
				<view v-if="item.pageRelation.businessType === 'TEXT'">
					<!-- 将内容所在父模块的索引保存到新数组 判断新数组中的索引值==循环的索引值时，让内容模块渲染（textVo_index[index_2] == index）保证了内容模块的排序问题 -->
					<view v-if="textVo_index[index_2] == index" v-for="(item_2,index_2) in textVo" :key="index_2">
						<e-text :textVo="textVo[index_2]"></e-text>
					</view>
				</view>
			</view>
			
			<!-- 图文模块 -->
			<view class="IMAGE_TEXT">
				<view v-if="item.pageRelation.businessType === 'IMAGE_TEXT'">
					<view v-if="imageText_index[index_2] == index" v-for="(item_2,index_2) in imageText" :key="index_2">
						<e-image-text :imageText="imageText[index_2]"></e-image-text>
					</view>
				</view>
			</view>
			
			<!-- 图集模块 -->
			<view class="PICTURE">
				<view v-if="item.pageRelation.businessType === 'PICTURE'">
					<view v-if="pictureList_index[index_2] == index" v-for="(item_2,index_2) in pictureList" :key="index_2">
						<e-picture :pictureList="pictureList[index_2]"></e-picture>
					</view>
				</view>
			</view>
			
			
			<!-- 文件模块 -->
			<view class="FILE">
				<view v-if="item.pageRelation.businessType === 'FILE'">
					<view v-if="fileList_index[index_2] == index" v-for="(item_2,index_2) in fileList" :key="index_2">
						<e-file :fileList="fileList[index_2]"></e-file>
					</view>
				</view>
			</view>
			
			<!-- 链接模块 -->
			<view class="LINKS">
				<view v-if="item.pageRelation.businessType === 'LINKS'">
					<view v-if="linksList_index[index_2] == index" v-for="(item_2,index_2) in linksList" :key="index_2">
						<e-link :linksList="linksList[index_2]" :mine_code="mine_code"></e-link>
					</view>
				</view>
			</view>
			
			<!-- 视频模块 -->
			<view class="VIDEO">
				<view v-if="item.pageRelation.businessType === 'VIDEO'">
					<view v-if="videoList_index[index_2] == index" v-for="(item_2,index_2) in videoList" :key="index_2">
						<e-video :videoList="videoList[index_2]"></e-video>
					</view>
				</view>
			</view>
			
			<!-- 设备铭牌模块 -->
			<view class="EQUIPMENT">
				<view v-if="item.pageRelation.businessType === 'EQUIPMENT'">
					<view v-if="equipmentList_index[index_2] == index" v-for="(item_2,index_2) in equipmentList" :key="index_2">
						<e-equipment :equipmentList="equipmentList[index_2]"></e-equipment>
					</view>
				</view>
			</view>
			
		</view>
		

		<!-- 浏览记录 -->
		<view v-if="browse.length != 0">
			<e-browse :browse="browse" :mine_code="mine_code" :pageId="pageId" :bgColor="bgColor"></e-browse>
		</view>
		
	</view>
</template>

<script>
	import {set_base_url} from '@/common/set_base_url.js'
	import Base64 from "@/common/js-base64.js"
	
	export default {
		data() {
			return {
				mine_code:"",
				base_url:"",
				// 二维码ID
				pageId:'',
				
				// 模块数组
				pageItemList:[],
				
				
				// 纯文本模块
				textVo:[],
				// 所在模块索引
				textVo_index:[],
				// base wenben
				textVo_dataContent:[],
				
				
				// 图文模块
				imageText:[],
				// 所在模块索引
				imageText_index:[],
				// base wenben
				imageText_dataContent:[],
				
				// 图集模块
				pictureList:[],
				// 所在模块索引
				pictureList_index:[],
				
				// 文件模块
				fileList:[],
				// 所在模块索引
				fileList_index:[],
				
				// 链接模块
				linksList:[],
				// 所在模块索引
				linksList_index:[],
				
				// 视频模块
				videoList:[],
				videoList_index:[],
				
				// 设备铭牌模块
				equipmentList:[],
				// 所在模块索引
				equipmentList_index:[],
				
				
				
				// 浏览记录
				browse:[],
				// 随即色
				bgColor:[],
				
				
			}
		},
		onLoad(option) {
			this.mine_code = option.mine_code
			// 根据矿编码切换首页接口不同的请求基础路径
			this.base_url = set_base_url(this.mine_code)
			
			// 获取二维码ID
			this.pageId = option.pageId
			
			
			// 获取二维码详情
			this.get_inner()
			
			// 获取浏览记录
			this.get_browse()
			
		},
		methods: {
			
			// 获取二维码详情
			get_inner(){
				uni.request({
					url: this.base_url + "/swagger/api/page/v1/detailPage?pageId="+this.pageId+"&sourceType=&organizationIds=&userId=&userName=",
					success: (res) => {
						console.log(res.data.data)
						const data = res.data.data
						
						// 设置页面标题
						uni.setNavigationBarTitle({
							title: data.page.title
						})
						
						// 获取模块数组
						this.pageItemList = data.pageItemList
						
						// 判断模块属性
						for(let i = 0; i < data.pageItemList.length; i++){
							if(data.pageItemList[i].pageRelation.businessType === 'TEXT'){
								// console.log("纯文本模块",i)
								// 内容模块数组
								this.textVo.push(data.pageItemList[i].textVo)
								// 保存内容所在父模块的索引
								this.textVo_index.push(i)
								// base64解码 替换原数组属性
								this.textVo_dataContent.push(data.pageItemList[i].textVo.dataContent)
								for(let i = 0; i < this.textVo_dataContent.length; i++){
									this.textVo[i].dataContent = Base64.decode(this.textVo_dataContent[i])
								}
								// console.log(this.textVo_dataContent)
								// console.log(this.textVo)
								// console.log(this.textVo_index)
							}else if(data.pageItemList[i].pageRelation.businessType === 'IMAGE_TEXT'){
								// console.log("图文模块",i)
								// 图文模块
								this.imageText.push(data.pageItemList[i].imageText)
								// 保存内容所在父模块的索引
								this.imageText_index.push(i)
								// base64解码 替换原数组属性
								this.imageText_dataContent.push(data.pageItemList[i].imageText.dataContent)
								for(let i = 0; i < this.imageText_dataContent.length; i++){
									this.imageText[i].dataContent = Base64.decode(this.imageText_dataContent[i])
								}
							}else if(data.pageItemList[i].pageRelation.businessType === 'PICTURE'){
								// console.log("图集模块",i)
								this.pictureList.push(data.pageItemList[i].pictureList)
								this.pictureList_index.push(i)
							}else if(data.pageItemList[i].pageRelation.businessType === 'FILE'){
								// console.log("文件模块",i)
								// 文件模块
								this.fileList.push(data.pageItemList[i].fileList)
								this.fileList_index.push(i)
							}else if(data.pageItemList[i].pageRelation.businessType === 'LINKS'){
								// console.log("链接模块",i)
								this.linksList.push(data.pageItemList[i].linksList)
								this.linksList_index.push(i)
							}else if(data.pageItemList[i].pageRelation.businessType === 'VIDEO'){
								// console.log("视频模块",i)
								// 视频模块
								this.videoList.push(data.pageItemList[i].videoList)
								this.videoList_index.push(i)
							}else if(data.pageItemList[i].pageRelation.businessType === 'EQUIPMENT'){
								// console.log("设备铭牌模块",i)
								// 设备铭牌模块
								this.equipmentList.push(data.pageItemList[i].equipmentList)
								this.equipmentList_index.push(i)
							}else if(data.pageItemList[i].pageRelation.businessType === 'RECORD'){
								// console.log("记录管理模块",i)
							}
							
						}
						
						
					}
				})
			},
			
			
			// 获取浏览记录
			get_browse(){
				uni.request({
					url: this.base_url + "/swagger/api/pageuser/v1/getPageUserByPageId/"+this.pageId,
					success: (res) => {
						console.log(res.data.data)
						this.browse = res.data.data
						this.browse.length = 3
						console.log(this.browse)
						
						for(let i=0;i<3;i++){
							// 获取随机色
							let r = parseInt(Math.random() * 256)
							let g = parseInt(Math.random() * 256)
							let b = parseInt(Math.random() * 256)
							
							// ES6 字符串拼接
							// this.bgColor = `rgba(${r},${g},${b},0.3)`
							let color = "rgba(" + r + "," + g + "," + b + "," + 0.3 + ")"
							// console.log(color)
							this.bgColor.push(color)
						}
						
						this.$forceUpdate()
					}
				})
			},
			
			
		},
	}
</script>

<style lang="scss">
	page{
		box-sizing: border-box;
		padding: 25rpx;
		
		margin-bottom: 90px;
	}
	.pageItemList{
		width: 700rpx;
		margin-bottom: 40rpx;
	}
	
	.bottom_btn{
		position: fixed;
		left: 0;
		bottom: 0;
		
		width: 750rpx;
		line-height: 60px;
		background-color: #009FE8;
		color: #FFFFFF;
		text-align: center;
		font-weight: 700;
		
	}
	
</style>