hssred/pages/index/love3.vue

<template>
	<view class="content">
		<view class="lists">
			<view class="search-wrap flex">
				<view class="logo flex">
					<image src="../../static/img/003.png" mode="widthFix" style="width: 40px"></image>
					<text>黄石市红十字会</text>
				</view>
				<view class="search">
					<input type="text" v-model="keyword" placeholder="请输入捐赠者进行搜索" class="" @keyup.enter="getLoveList('re')" />
					<image src="../../static/img/search.png" class="hand" @click="getLoveList('re')">
				</view>
			</view>
			<view >
				<view class="list flex topp">
					<text class="">捐赠方</text>
					<text>捐赠金额</text>
					<text>捐赠日期</text>
					<text>捐赠意向</text>
				</view>
			</view>
			<view :class="{ top: animate == true }" style="padding-top: 94px;">
				<view class="list flex" v-for="(item,index) in loveList" :key="index">
					<text class="shabi clamp">{{item.name || '佚名'}}</text>
					<text class="shabi2 clamp">{{item.amount }}</text>
					<text class=" clamp">{{item.paytime | getTime}}</text>
					<text class="shabi clamp">{{item.order_name}}</text>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {
		loveList
	} from '@/api/index.js';
	export default {
		data() {
			return {
				animate: false,
				timer: null,
				loveList: [],
				page: 1,
				limit: 100,
				loaded: false,
				loadingType: 'more',
				keyword: '',
			}
		},
		methods: {
			scroll() {
				this.animate = true;
				setTimeout(() => {
					this.loveList.push(this.loveList[0]);
					this.loveList.shift();
					this.animate = false;
				}, 1000);
			},
			getLoveList(type) {
				let obj = this
				if(type == 're') {
					obj.page =1
					obj.loveList = []
					obj.loadingType = 'more'
				}
				if (obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
					return
				}
				obj.loadingType = 'loading'
				loveList({
					page: obj.page,
					limit: obj.limit,
					key: obj.keyword
				}).then(({
					data
				}) => {
					obj.loveList = obj.loveList.concat(data.data)
					if (obj.limit == data.data.length) {
						obj.page++
						obj.loadingType = 'more'
					} else {
						obj.loadingType = 'noMore'
					}
					obj.loaded = true
				})
			}
		},
		filters: {
			getTime(val) {
				let date = new Date(val * 1000);
				let Y = date.getFullYear();
				let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
				let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				return Y + '/' + M + '/' + D;
			},
		},
		onLoad() {
			const userAgent = navigator.userAgent.toLowerCase();
			if (/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(userAgent)) {
				// 移动端
				console.log('移动端')
				uni.navigateTo({
					url:'/pages/index/love2'
				})
			} else {
				// pc端
				console.log('PC端')
			}

		},
		onReachBottom() {
		},
		onShow() {
			this.getLoveList()
		}
	}

</script>

<style lang="less">
	
		.content{
			display: flex;
			height: 100vh;
			color: #ed4530;
			max-width: 1160px;
			margin: auto;
			// padding: 0 30rpx;
		}
		.topp {
			background-color:#fef5f1;
			z-index: 999;
			position: fixed;
			top: 50px;
			width: 100%;
			max-width: 1160px;
			background-color: #ed4530;
			color: #fef5f1;
		}
		.lists{
			background-color: #fef5f1;
			// height: 500rpx;
			overflow: hidden;
			width: 100%;
			max-width: 1160px;
			text-align: center;
		}
		.list{
			height: 100rpx;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			border-bottom: 1px solid #ed4530;
		}
		text{
			line-height: 100rpx;
			height: 100%;
			padding-left: 20rpx;
			width: 25%;
			flex-grow: 1;
			border: 1px solid #fef5f1;
		}
		.top {
		    transition: all 1s;
		    margin-top: -100rpx;
		  }
	.shabi {
		border-left: #ed4530 1px solid;
		border-right: #ed4530 1px solid;
	}
	.shabi2 {
		border-right: #ed4530 1px solid;
	}
	.search-wrap {
		width: 100%;
		max-width: 1160px;
		height:  50px;
		position: fixed;
		top: 0;
		z-index: 999;
		background-color: #fef5f1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.logo {
		align-items: center;
		font-size: 46rpx;
		font-weight: bold;
		}
	}
	.search {
		
		padding-left: 13px;
		padding-right: 13px;
		width: 295px;
		height: 33px;
		line-height: 33px;
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
		border-radius: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		input {
			width: 235px;
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			outline: none;
			border: none;
		}
	
		image {
			width: 20px;
			height: 20px;
		}
	}
	.input-box {
	
		background-color: #ffffff;
		height: 50px;
		z-index: 999;
		position: fixed;
		top: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.rushu {
			border: 1px solid #333;
			color: red;
			display: block;
			height: 40px;
			width: 80%;
		}
	}
</style>