jp-railway/pages/staffHome/activityReward/activityReward.vue

<template>
	<view>
		<u-navbar title="活动奖励"></u-navbar>
		<view class="main">
			<view class="reward-detail"  v-for="(item,i) in list" :key="i" @click="ckItem(item)"  >
				<view class="content">
					<view class="title">
						{{item.title}}
					</view>
					<view class="tag">
						<view class="item">
							活动
						</view>
					</view>
					
				</view>
				 <view class="picture">
				 	<img v-if="item.pic1" @click="previewImage(item.pic1)"  :src="item.pic1" alt="">
				 	<img v-else-if="item.pic2"  @click="previewImage(item.pic2)"  :src="item.pic2" alt="">
				 	<img v-else-if="item.pic3"  @click="previewImage(item.pic3)"   :src="item.pic3" alt="">
				 	
				 </view>
			</view>
			
			 
			
		</view>
		<u-divider :isnone="list.length==0" nonetext="没有找到相关内容" bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
		<view class="bottom" v-if="false">
			<img src="../../../assets/img/riFill-camera-fill@2x.png">
		</view>
<!-- 		<u-divider bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
 -->	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/activity.js'
	
	export default {
		data() {
			return {
				listForm:{
					pageIndex:1,
					pageSize:20,
					
				},
				list:[],
				recordsTotal:0,
			}
		},
		onLoad(op){
		
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			previewImage(pic) {
				let imgs = [pic];
				
				uni.previewImage({
					indicator:"default",
					loop:true,
					urls: imgs,
					current: i
				})
			},
			ckItem(item){
				var url="/pages/staffHome/activityReward/rewardDetail?id="+item.id;
				uni.navigateTo({
					url:url
				})
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList();
			},
			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"
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.bottom{
		   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;
			   
		   }
	}
	.main{
		padding: 24rpx 32rpx 0 32rpx;
		.reward-detail{
			background-color: #fff;
			padding: 24rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 24rpx;
			.content{
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				margin-right:24rpx;
				.title{
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
					line-height: 23px;
				}
				.tag{
					display: flex;
					.item{
						margin-top: 32rpx;
						line-height: 48rpx;
						padding: 0 12rpx;
						border: 1px solid rgba(31, 74, 153, 1);
						color:rgba(31, 74, 153, 1) ;
						border-radius: 8rpx;
						font-size: 24rpx;
						text-align: center;
					}
					.item1{
						border: 1px solid rgba(238, 49, 56, 1);
						color:rgba(238, 49, 56, 1) ;
					}
				}
			}
			.picture{
				width: 224rpx;
				height: 86px;
				border-radius:5px ;
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
	}

</style>