xhlred/pages/index/index.vue

<template>
	<view class="content">
		<view class="bg-img">
			<image src="../../static/img/ctbt.png" mode=""></image>
		</view>
		<view class="over-content">
			<view class="item-wrapper" style="height: 318rpx;padding: 70rpx 34rpx 0;">
				<view class="item-tit">
					线上捐款
				</view>
				<view class="item-info">
					孝感市红十字会现已开通线上捐款通道 ,点击下方按钮可直接进行线上捐款。
				</view>
				<view class="item-btn flex" >
					<image src="../../static/img/wings-left.png" mode="" class="xcb"></image>
					<view class="item-btn-btn" @click="goto()">
						立即捐款
					</view>
					<image src="../../static/img/wings-right.png" mode="" class="xcb"></image>
				</view>
			</view>
			
			<view class="item-wrapper" style="height: 259rpx;padding: 60rpx 34rpx;">
				<view class="item-tit">
					银行转账
				</view>
				<view class="item-info">
					<view class="">户名：孝感市红十字会</view>
					<view class="">银行账户：42001688608050002590</view>
					<view class="">开户行：建行孝感直属支行</view>
				</view>
			</view>
			<view class="item-wrapper" style="height: 259rpx;padding: 40rpx 34rpx;">
				<view class="item-tit">
					线下捐赠
				</view>
				<view class="item-info">
					<!-- <view class="">负责人：捐款杨敏，捐物宋欢</view> -->
					<view class="">咨询电话：捐款 0712-2875087</view>
					<view class="" style="padding-left: 160rpx;">捐物 0712-2851023</view>
					<view class="">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：孝感市城站路75号</view>
				</view>
			</view>
			<view class="item-wrapper" style="height: 410rpx;">
				<view class="item-tit">
					爱心榜
				</view>
				<scroll-view class="tab-wrap" >
					<view class="empty" style="width: 100%;height: 100%;text-align: center;line-height: 220rpx;font-size: 32rpx;color: #ed4530;" v-if="loveList.length == 0">
						暂无捐款数据
					</view>
					<view class="tab-item flex" v-for="item in loveList" v-if="loveList.length > 0">
						<view class="tab-item-name clamp" style="width: 200rpx;">{{item.donate_er}}</view>
						<view class="tab-item-time clamp" style="width: 180rpx;text-align: center;">{{item.pay_time | getTime}}</view>           
						<view class="tab-item-num clamp" style="width: 180rpx;text-align: right;">￥{{item.money}}</view>
					</view>
					<!-- <uni-load-more :status="loadingType" v-if="loveList.length > 0"></uni-load-more> -->
				</scroll-view>
				<!-- <view class="tab-wrap">
					
					<view class="tab-item flex" v-for="item in 7">
						<view class="tab-item-name">强儿</view>
						<view class="tab-item-time">2021/11/20</view>           
						<view class="tab-item-num">￥200</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loadIndexs,
		bannerlist,
		getListAED,
		getDistance,
		getListMechanism,
		getdis,
		tocall
	} from '@/api/index.js';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		userinfo
	} from '@/api/user.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	
	import {
		getLoca
	} from '@/utils/wxAuthorized.js';
	import {
		getcomAddress
	} from '@/api/index.js';
	import topTitle from '../../components/top-title/top-title.vue';
	// import { getInfo,getWxconfig } from '@/api/wx.js'
	import store from '@/store/index.js';
	import { loveList } from '@/api/order.js'
	export default {
		components: {
			uniPopup,
			uniLoadMore,
			topTitle,
			empty
		},
		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;
			},
		},
		data() {
			return {
				carouselList: [], //轮播
				loveList: [],//
				loadingType: 'more',
				page: 1,
				limit: 30,
				timer: '',
			};
		},
		onShow() {
			saveUrl();
			console.log(11, this);
			
			if (!this.hasLogin) {
				// 登录拦截
				interceptor();
			}
			
		},
		onLoad() {
			uni.hideTabBar()
			saveUrl();
			this.getLoveList()			
		},
		computed: {
			...mapState('user', ['userInfo', 'baseURL', 'hasLogin'])
		},
		// 下拉加载
		methods: {
			goto() {
				// uni.showModal({
				// 	title: '提示',
				// 	content: '在线捐款渠道正在建设中'
				// })
				this.navto('/pages/applic/contribution')
			},
			gundong() {
				let obj = this;
				if(obj.timer) {
					clearTimeout(obj.timer)
				}
				obj.timer = setTimeout(() => {
					obj.loveList.push(obj.loveList.shift());
					// console.log(obj.moreJxList)
					obj.gundong();
				}, 2000);
			},
			navto(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						})
					}
				})
			},
			// 获取爱心榜数据
			getLoveList() {
				let obj = this
				if(obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
					return
				}
				obj.loadingType = 'loading'
				loveList({
					page: obj.page,
					limit: obj.limit
				}).then(({data}) => {
					obj.loveList = obj.loveList.concat(data.list)
					obj.gundong()
					// obj.page++
					// if(data.list.length == obj.limit) {
					// 	obj.loadingType = 'more'
					// }else {
					// 	obj.loadingType = 'noMore'
					// }
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
	}

	.bg-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 2323rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
	.over-content {
		position: relative;
		top: 669rpx;
	}
	.item-wrapper {
		width: 636rpx;
		margin:0 auto 76rpx;
		border: 1px solid #C9101B;
		// background: #fff;
		border-radius: 10px;
		position: relative;
		.item-tit {
			width: 199rpx;
			height: 55rpx;
			background: linear-gradient(0,#C9101B, #F24D33);
			border-radius: 10rpx;
			text-align: center;
			line-height: 55rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;
			top: -28rpx;
			left: 64rpx;
		}
		.item-info {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ed4530;
			line-height: 49rpx;
			// background: linear-gradient(0deg, #C9101B 0%, #F24D33 99.267578125%);
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
			width: 100%;
		}
		.item-btn {
			justify-content: center;
			align-items: center;
			height: 72rpx;
			position: absolute;
			bottom: 50rpx;
			width: 568rpx;
			.xcb {
				width: 80rpx;
				height: 50rpx;
			}
			.item-btn-btn {
				width: 303rpx;
				height: 72rpx;
				margin: 0 10rpx;
				background: linear-gradient(0deg, #C9101B, #F24D33);
				border-radius: 36rpx;
				line-height: 72rpx;
				text-align: center;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		.tab-wrap {
			padding: 53rpx 40rpx 28rpx 33rpx;
			height: 410rpx;
			.tab-item {
				line-height: 45rpx;
				height: 45rpx;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ed4530;
				// background: linear-gradient(0deg, #C9101B 0%, #F24D33 99.267578125%);
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
			}
		}
		
	}
</style>