equipment-rental-mini/pages/visitor/index.vue

<template>
	<view class="container">
		<!-- <view class="search-area">
			<u-search 
			placeholder="搜索设备" 
			v-model="keyword" 
			shape="square" 
			:clearabled="true"
			:show-action="true" 
			action-text="搜索" 
			:animation="true"
			search-icon-color="#000"
			color="#000"
			placeholder-color="#5c5b5b"
			@search="search"
			bgColor="#fff"
			height="40"
			@custom="search"></u-search>
		</view> -->
		
		<view class="study-box">
			<view class="title">
				研究成果栏
			</view>
			<view class="list">
				<view class="study" v-for="study in studyList" :key="study.noticeId" @click="toNotice(study.noticeId)">
					<view class="title">
						{{study.noticeTitle}}
					</view>
					<view class="content">
						<rich-text :nodes="study.noticeContent" style="text-indent: 2em;"></rich-text>
					</view>
				</view>
				<view class="study" v-if="!studyList.length">
					<view class="title" style="text-align: center;">
						暂无数据
					</view>
				</view>
			</view>
			<view class="more" v-if="studyList.length" @click="toList">
				更多
			</view>
		</view>
		<view class="asset-box" v-show="assetList.length > 0">
			<view class="title">
				公开设备
			</view>
			
			<view class="list">
				<view class="asset" v-for="asset in assetList" @click="toDetail(asset)">
					<view class="left">
						<image class="image" :src="imgSrc(asset.img)" mode="aspectFit" @error="imgError"></image>
					</view>
					
					<view class="right">
						<view class="name">
							{{asset.name}}
						</view>
						<view class="introduce">
							<text>简介：{{asset.introduce === null ? '暂无' : asset.introduce}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="asset-box" v-show="videoList.length > 0">
			<view class="title">
				公开视频
				<view class="right" @click="toMoreVideo">更多&gt;&gt;&gt;</view>
			</view>
			
			<view class="list">
				<view class="video" v-for="(video, index) in videoList" :key="video.id">
					<video :src="playerURL(video.url)" controls :id="video.id" :data-id="video.id" :title="video.name" @play="videoPlay" :type="video.type"></video>
					<view class="info">{{video.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { assetList, studyNew, getImage, demoVideo, playerVideo } from '@/api/visitor.js'
	export default {
		name: 'Visitor-Index',
		data() {
			return {
				studyNumber: 3,
				assetList: [],
				studyList: [],
				videoList: []
			}
		},
		methods: {
			getAssetList() {
				assetList().then(res => {
					this.assetList = res
				})
			},
			getNewStudy() {
				studyNew(this.studyNumber).then(res => {
					this.studyList = res
				})
			},
			getDemoVideo() {
				demoVideo(1, 3).then(res => {
					this.videoList = res.data.rows
				})
			},
			playerURL(url) {
				return playerVideo(url)
			},
			videoPlay(e) {
				// 获取当前视频id
				let currentId = e.currentTarget.dataset.id;
				// uni.createVideoContext获取视频上下文对象
				this.videoContent = uni.createVideoContext(currentId);
				// 获取json对象并遍历, 停止非当前视频
				let videoList = this.videoList;
				for (let i = 0; i < videoList.length; i++) {
					let temp = videoList[i].id;
					if (temp !== currentId) {
						uni.createVideoContext(temp).pause();
					}
				}
			},
			imgSrc(src) {
				return getImage(src)
			},
			imgError(err) {
				console.log('图片异常', err.detail.errMsg);
			},
			/** 搜索框 */
			search() {},
			toList() {
				uni.navigateTo({
					url: '/pages/visitor/noticeList'
				});
			},
			toDetail(asset) {
				uni.navigateTo({
					url: '/pages/visitor/assetDetail/assetDetail?barCode=' + asset.barCode
				});
			},
			toNotice(id){
				uni.navigateTo({
					url:'/pages/notice/notice?id='+id,
				})
			},
			toMoreVideo() {
				uni.navigateTo({
					url: '/pages/visitor/modeVideo/modeVideo'
				});
			}
		},
		onLoad() {
			this.getNewStudy()
			this.getAssetList()
			this.getDemoVideo()
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f6fa;
	}
	.container{
		padding: 20rpx 24rpx;
		
		.study-box{
			margin-top: 20rpx;
			// min-height: 400rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 10rpx 20rpx;
			// box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
			
			.title{
				width: 100%;
				text-align: center;
				// font-weight: bold;
				font-size: $uni-title-font-size;
				margin-bottom: 40rpx;
			}
			
			.study {
				line-height: $uni-line-height;
				margin-bottom: 10rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #dddddd;
				
				.title {
					font-size: $uni-title-font-size;
					width: 100%;
					text-align: left;
					font-weight: 500;
					margin-bottom: 5rpx;
					overflow: hidden;  /*超出部分隐藏*/
					white-space: nowrap;  /*禁止换行*/
					text-overflow: ellipsis; /*省略号*/
				}
				.content {
					font-size: $uni-font-size;
					line-height: $uni-line-height;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}
			}
			.more {
				text-align: right;
				padding-top: 10rpx;
			}
		}
		
		.asset-box{
			margin-top: 40rpx;
			
			.title{
				font-weight: 500;
				font-size: $uni-title-font-size;
				margin-bottom: 20rpx;
				position: relative;
				
				.right{
					position: absolute;
					font-size: 28rpx;
					font-weight: 400;
					right: 20rpx;
					top: 25%;
				}
			}
			
			.list{
				.asset {
					display: flex;
					background-color: #fff;
					align-items: center;
					height: 260rpx;
					border-radius: 20rpx;
					// box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
					
					padding: 60rpx 30rpx;
					margin-bottom: 45rpx;
					.left {
						flex: 1;
						.image {
							width: 200rpx;
						}
						margin-right: 20rpx;
					}
					.right {
						flex: 4;
						.name {
							font-size: $uni-title-font-size;
							margin-bottom: 20rpx;
							overflow: hidden;  /*超出部分隐藏*/
							white-space: nowrap;  /*禁止换行*/
							text-overflow: ellipsis; /*省略号*/
						}
						.introduce {
							line-height: $uni-line-height;
							font-size: $uni-font-size;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							overflow: hidden;
						}
					}
				}
				
				.video {
					text-align: center;
					// box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
					margin-bottom: 50rpx;
					
					&:last-child {
						margin-bottom: 20rpx;
					}
					.info {
						padding: 10rpx;
					}
				}
			}
		}
	}
</style>