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

<template>
	<view class="browse">
		<view class="list" v-if="browse.length > 0">
			<view class="item" v-for="(item,index) in browse" :key="index" @click="click(item)">
				<view class="img">
					<view v-if="item.img">
						<image :src="item.img" mode="aspectFill"></image>
					</view>
					<view v-if="!item.img">
						<view class="img_tip" :style="{backgroundColor:bgColor[index]}">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="name">{{item.name}}</view>
			</view>
		</view>


		<uni-popup ref="popup" type="center">
			<view class="popup_box">
				<view class="img">
					<view v-if="user.img">
						<image :src="user.img" mode="aspectFill"></image>
					</view>
					<view v-if="!user.img">
						<view class="img_tip" :style="{backgroundColor:bgColor[Math.ceil(Math.random()*10)]}">
							{{user.name}}
						</view>
					</view>
				</view>
				
				<view class="name">姓名：{{user.name}}</view>
				<view class="section">部门：{{user.department}}</view>
				<view class="time">最近浏览时间：{{user.createDate}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {set_base_url} from '@/common/set_base_url.js'
	export default {
		data() {
			return {
				mine_code: "",
				base_url: "",
				// 二维码ID
				pageId: '',


				bgColor: [],
				browse: [],
				
				user:{}
			};
		},
		onLoad(option) {
			// console.log(option)
			this.mine_code = option.mine_code
			// 根据矿编码切换首页接口不同的请求基础路径
			this.base_url = set_base_url(this.mine_code)
			
			// 获取二维码ID
			this.pageId = option.pageId

			// 获取浏览记录
			this.get_browse()
		},
		methods: {
			// 获取浏览记录
			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

						for (let i = 0; i < this.browse.length; 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
						this.$set(this.browse)
					}
				})
			},

			click(item) {
				// console.log(item)
				
				this.user = item
				this.$refs.popup.open()
			}
		}
	}
</script>

<style lang="scss">
	.browse {
		margin-top: 20rpx;
		margin-bottom: 40rpx;

		.list {
			overflow: hidden;

			.item {
				float: left;
				width: 140rpx;
				text-align: center;
				margin-right: 12rpx;
				margin-bottom: 20rpx;
				
				font-size: 30rpx;

				.img {
					margin: 0 auto;
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 120rpx;
						height: 120rpx;
					}

					.img_tip {
						width: 120rpx;
						height: 120rpx;

						text-align: center;
						line-height: 120rpx;
						color: #FFFFFF;
					}
				}

				.name {
					margin-top: 20rpx;
					width: 140rpx;

					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.item:nth-child(5n) {
				margin-right: 0;
			}
		}
	}
	
	
	.popup_box{
		background-color: #FFFFFF;
		border-radius: 12rpx;
		
		box-sizing: border-box;
		padding: 50rpx 30rpx;
		
		text-align: center;
		font-size: 30rpx;
		.img {
			margin: 0 auto;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
		
			image {
				width: 120rpx;
				height: 120rpx;
			}
		
			.img_tip {
				width: 120rpx;
				height: 120rpx;
		
				text-align: center;
				line-height: 120rpx;
				color: #FFFFFF;
			}
		}
		.name{
			margin-top: 20rpx;
			line-height: 60rpx;
		}
		.section{
			line-height: 60rpx;
		}
		.time{
			line-height: 60rpx;
			color: #888888;
		}
	}
</style>