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.id">
					<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>
		<view class="asset-box">
			<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}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { assetList, studyNew, getImage } from '@/api/visitor.js'
	export default {
		name: 'Visitor-Index',
		data() {
			return {
				assetList: [],
				studyList: []
			}
		},
		methods: {
			getAssetList() {
				assetList().then(res => {
					this.assetList = res
				})
			},
			getNewStudy() {
				studyNew(5).then(res => {
					this.studyList = res
					console.log('研究成果数据', res);
				})
			},
			imgSrc(src) {
				return getImage(src)
			},
			imgError(err) {
				console.log('图片异常', err.detail.errMsg);
			},
			/** 搜索框 */
			search() {},
			toDetail(asset) {
				console.log('资产信息', asset);
				uni.navigateTo({
					url: '/pages/visitor/assetDetail/assetDetail?barCode=' + asset.barCode
				});
			}
		},
		onLoad() {
			this.getNewStudy()
			this.getAssetList()
		}
	}
</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: 36rpx;
				margin-bottom: 20rpx;
			}
			
			.study {
				line-height: 50rpx;
				margin-bottom: 10rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #dddddd;
				
				.title {
					font-size: 36rpx;
					width: 100%;
					text-align: left;
					font-weight: 500;
					margin-bottom: 5rpx;
					overflow: hidden;  /*超出部分隐藏*/
					white-space: nowrap;  /*禁止换行*/
					text-overflow: ellipsis; /*省略号*/
				}
				.content {
					font-size: 24rpx;
					line-height: 40rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}
			}
		}
		
		.asset-box{
			margin-top: 40rpx;
			
			.title{
				font-weight: bold;
				font-size: 36rpx;
				margin-bottom: 20rpx;
			}
			
			.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: 30rpx;
					margin-bottom: 45rpx;
					.left {
						flex: 1;
						.image {
							width: 200rpx;
						}
						margin-right: 20rpx;
					}
					.right {
						flex: 4;
						.name {
							font-size: 42rpx;
							margin-bottom: 20rpx;
							overflow: hidden;  /*超出部分隐藏*/
							white-space: nowrap;  /*禁止换行*/
							text-overflow: ellipsis; /*省略号*/
						}
						.introduce {
							line-height: 50rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 4;
							overflow: hidden;
						}
					}
				}
			}
		}
	}
</style>