jp-railway/pages/staffHome/filesonic.vue

<template>
	<view>
		<u-navbar title="分享空间"></u-navbar>
		<!-- 图片 -->
		<view class="image" v-if="false">
			<u-image width="100%" height="200rpx" :src="src" border-radius="16"></u-image>
		</view>
		<view class="tabs"  v-if="false">
			<u-tabs bar-width="60" :bold="false" inactive-color="#B3B3B3" active-color="#333333" height="88"
				:list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<!-- 分享内容 -->
		<view class="share-content">
			<view class="item"  v-for="(item,i) in list" :key="i" @click="ckItem(item)">
				<view class="infos">
					<view class="person">
						<view class="photo">
							<img  v-if="item.regUser" :src="item.regUser.headImg" alt="">
						</view>
						<view class="name">
							{{item.createName}}
						</view>
					</view>
					<view class="date">
						{{item.createTime}}
					</view>
				</view>
				<view class="share-text">
					{{item.synopsis}}
				</view>
				<view class="pictures" >
					<template v-for="(pic,i2) in item.listShareFiles" >
						<img   v-if="isPic" :key="i2"
						@click="previewImage(item.listShareFiles,i2)"
						:src="pic.url" alt="">
						
						<video  :key="i2" :src="pic.url"
						                    enable-danmu danmu-btn controls></video>
					</template>
					
					
				</view>

				<view class="tag" :class="item.activityId" >
					<text class="symbol">#</text>
					<text class="text">{{item.activityName}}</text>
					<text class="icon" v-if="false">
						<u-icon size="28" color="#cccccc" name="arrow-right"></u-icon>
					</text>
				</view>
			</view>
			
			
			
		</view>
		<u-divider  :isnone="list.length==0" nonetext="没有找到相关内容" border-color="#CFD2D5">已经到底了</u-divider>
		
		 <view class="bottom"  @click="gotoUrl('pages/mine/issue')" >
		 	<img src="../../assets/img/riFill-camera-fill@2x.png">
		 </view>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/share.js'
	
	export default {
		data() {
			return {
				listForm:{
					pageIndex:1,
					pageSize:20,
					
				},
				list:[],
				recordsTotal:0,
				tabList: [{
					name: '全部'
				}, {
					name: '体育健身'
				}, {
					name: '摄影摄像',
				}, {
					name: '书法绘画',
				}, {
					name: '其他',
				}],
				current: 0
			}
		},
		onLoad(op){
				this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			previewImage(img,i) {
				let imgs = [];
				img.forEach(it=>{
					imgs.push(it.url)
				})
				
				
				uni.previewImage({
					indicator:"default",
					loop:true,
					urls: imgs,
					current: i
				})
			},
			ckItem(item){
				
			},
			getList(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.pageList(this.listForm).then((res) => {
					
					uni.hideLoading();
					//this.list=response.data.data
					if(this.listForm.pageIndex==1){
						this.list = res.data.data;
					}else{
						this.list = [
							...this.list,
							...res.data.data
						];
					}
					this.recordsTotal = res.data.recordsTotal;
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList();
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
		padding-bottom: 100px;
	}

	.image {
		padding: 0 32rpx;
		margin: 24rpx 0;
	}

	.tabs {
		background-color: rgba(255, 255, 255, 1);
		padding: 0 32rpx;

		/deep/.u-tab-item {
			flex: none !important;
			margin-right: 32rpx;
		}

		/deep/.u-tabs-scorll-flex {
			justify-content: start;
		}
	}

	// 分享内容
	.share-content {
		margin: 48rpx 32rpx 0 32rpx;

		.item {
			padding-bottom: 32rpx;
			border-bottom: 1px solid rgba(232, 232, 232, 1);
			margin-top: 48rpx;

			.infos {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.person {
					display: flex;
					align-items: center;

					.photo {
						img {
							width: 64rpx;
							height: 64rpx;
							border-radius: 50px;
						}
					}

					.name {
						color: rgba(51, 51, 51, 1);
						font-size: 16px;
						margin-left: 24rpx;
					}
				}
			}

			.share-text {
				margin-top: 24rpx;
				color: #101010;
				font-size: 16px;
				line-height: 22px;
			}

			.pictures {
				display: flex;
				justify-content: start;
				flex-wrap: wrap;
				margin-top: 16rpx;
				video {
					width: 100%;
					height: 216rpx;
					border-radius: 16rpx;
					margin-bottom: 16rpx;
					margin-left: 16rpx;
				}
				img {
					width: 31%;
					height: 216rpx;
					border-radius: 16rpx;
					margin-bottom: 16rpx;
					margin-left: 16rpx;
				}
			}
			.video{
				margin-top: 16rpx;
				uni-video{
					width: 100%;
					height: 380rpx;
					border-radius: 8px;
				}
			}

			.tag {
				margin-top: 16rpx;
				line-height: 24px;

				.symbol {
					color: rgba(31, 74, 153, 100);
					font-size: 16px
				}

				.text {
					color: rgba(31, 74, 153, 1);
					margin-left: 14rpx;
				}
			}
		}

	}

	.item:last-of-type {
		border: none;
		margin-bottom: 26rpx;
	}

   .bottom{
	   z-index: 999;
	   background: linear-gradient(223.81deg, rgba(0,90,217,1) 14.24%,rgba(0,52,148,1) 86.67%);
	   width: 104rpx;
	   height: 104rpx;
	   border-radius: 50px;
	   display: flex;
	   justify-content: center;
	   align-items: center;
	   position: fixed;
	   right: 72rpx;
	   bottom: 72rpx;
	   img{
		   width: 56rpx;
		   height: 56rpx;
		   
	   }
   }
</style>