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

<template>
	<view>
		<view class="navbar">
			<view class="status_bar"></view>

			<view class="box">
				<view class="left" @click="navbar_back()">
					<uni-icons type="arrowleft" color="#fff" size="26"></uni-icons>
				</view>
				<view class="title">{{navbar_title}}</view>
				<view class="right" @click="navbar_more()">
					<uni-icons type="more-filled" color="#fff" size="24"></uni-icons>
				</view>
			</view>
		</view>
		<view class="status_bar"></view>
		<view style="height: 88rpx;"></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 {
				navbar_title: "",


				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: {
			navbar_back() {
				uni.navigateBack()
			},
			navbar_more() {
				uni.showActionSheet({
					itemList: ['添加到常用'],
					success: (res) => {
						// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');

						if (res.tapIndex == 0) {
							console.log(this.pageId)
							uni.showLoading({
								mask: true
							})
							this.$api.addCommonMenu({
								page_id: this.pageId,
								page_name: this.navbar_title
							}).then((res) => {
								uni.hideLoading()
								uni.showToast({
									icon: "none",
									title: "添加成功"
								})
								// console.log(res)
							})
						}
					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				});
			},

			// 获取二维码详情
			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.navbar_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({
					method:"POST",
					url: this.base_url + "/swagger/api/pageuser/v1/addPageUser/",
					data:{
						createBy:"",
						createDate:"",
						id:"",
						userId: uni.getStorageSync('user').staff_num,
						pageId:this.pageId,
						status:"CREATE"
					},
					success: (res) => {
						// console.log(res)
					}
				})
				
				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;

	}


	// 标题栏
	.navbar {
		z-index: 999;
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #009FE8;

		color: #FFFFFF;

		.box {
			background-color: #009FE8;
			display: flex;
			justify-content: space-between;
			align-items: center;

			height: 88rpx;

			.left {
				width: 80rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
			}

			.title {
				font-size: 36rpx;
				height: 88rpx;
				line-height: 88rpx;
				font-weight: 500;
			}

			.right {
				width: 80rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: left;
			}
		}
	}
</style>