gsred/pages/index/aixin.vue

<template>
	<view class="content">
		<image src="../../static/img/aixin-bg.png" mode="" class="bg-img"></image>
		
		<image src="../../static/img/aixin-top.png" mode="" class="bg-img-1"></image>
		<view class="kk-base kk-1">
			<image src="../../static/img/kk.png" mode="" class="bk"></image>
			<view class="kk-tit">
				<image src="../../static/img/kk-tit.png" mode=""></image>
				<view class="kk-tit-tit">
					线上捐款
				</view>
			</view>
			<view class="item-info">
				广水市红十字会现已开通线上捐款通道 ,点击下方按钮可直接进行线上捐款。
			</view>
			<view class="item-btn-btn" @click="goto()">
				立即捐款
			</view>
		</view>
		<view class="kk-base kk-2">
			<image src="../../static/img/kk.png" mode="" class="bk"></image>
			<view class="kk-tit">
				<image src="../../static/img/kk-tit.png" mode=""></image>
				<view class="kk-tit-tit">
					银行转账
				</view>
			</view>
			<view class="item-info">
				<view class="">开 户 名：广水市红十字会</view>
				<view class="">银行账户：82010000002762099</view>
				<view class="">开 户 行：湖北广水农村商业银行营业部</view>
			</view>
		</view>
		<view class="kk-base kk-3">
			<image src="../../static/img/kk.png" mode="" class="bk"></image>
			<view class="kk-tit">
				<image src="../../static/img/kk-tit.png" mode=""></image>
				<view class="kk-tit-tit">
					线下捐款
				</view>
			</view>
			<view class="item-info">
				<view class="">负责人：王小菊</view>
				<view class="">咨询电话：18372208795</view>
				<view class="" style="padding-left: 160rpx;">0722-6696066</view>
				<view class="">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：湖北省随州市广水市应</view>
				<view class="" style="padding-left: 145rpx;">山办事处广安路16号</view>
			</view>
		</view>
		<view class="kk-base kk-4">
			<image src="../../static/img/kk.png" mode="" class="bk"></image>
			<view class="kk-tit">
				<image src="../../static/img/kk-tit.png" mode=""></image>
				<view class="kk-tit-tit">
					爱心榜
				</view>
			</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>
				<template v-if="loveList.length > 0">
					<!-- <view></view> -->
					<view class="tab-item flex" v-for="item in loveList" >
						<view class="tab-item-name clamp" style="width: 200rpx;">{{ item.is_open == '1' ? (item.name || item.contact || '佚名') : '佚名'}}</view>
						<view class="tab-item-time clamp" style="width: 180rpx;text-align: center;">
							{{item.paytime | getTime}}</view>
						<view class="tab-item-num clamp" style="width: 180rpx;text-align: right;">￥{{item.amount}}</view>
					</view>
				</template>
				
				<!-- <uni-load-more :status="loadingType" v-if="loveList.length > 0"></uni-load-more> -->
			</scroll-view>
		</view>
		<view class="btm-tit">
			感谢今天奉献爱心的你
		</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
				}) => {
	
					if(data.data) {
						obj.loveList = obj.loveList.concat(data.data)
					}
					console.log(data)
					if(obj.loveList.length >4) {
						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;
		height: 2325rpx;
		width: 750rpx;
		
	}

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

		// image {
		// 	width: 100%;
		// 	height: 100%;
		// }
		display: block;
		height: 2325rpx;
		width: 750rpx;
		
	}
	.bg-img-1 {
		position: absolute;
		top: 50rpx;
		left: 0;
		right: 0;
		margin: auto;
		width: 670rpx;
		height: 477rpx;
	}
	.kk-base {
		// 670 x 359
		width: 670rpx;
		height: 359rpx;
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		
		.item-info {
			width: 100%;
			position: absolute;
			top: 117rpx;
			padding: 0 50rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #d81719;
			line-height: 49rpx;
			width: 100%;
		}
		.bk {
			width: 670rpx;
			height: 359rpx;
		}
		.kk-tit {
			width: 200rpx;
			height: 111rpx;
			// background-color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
			color: #fff;
			image {
				width: 200rpx;
				height: 111rpx;
			}
			.kk-tit-tit {
				position: absolute;
				top: 0rpx;
				height: 100rpx;
				// font-family: bold;
				font-weight: bold;
				text-align: center;
				line-height: 100rpx;
				width: 200rpx;
				font-size: 36rpx;
			}
		}
	}
	.kk-1 {
		top: 590rpx;
		// .item-info {
		// 	width: 100%;
		// 	position: absolute;
		// 	top: 117rpx;
		// 	padding: 0 50rpx;
		// 	font-size: 32rpx;
		// 	font-weight: bold;
		// 	color: #d81719;
		// 	line-height: 49rpx;
		// 	width: 100%;
		// }
		.item-btn-btn {
			width: 303rpx;
			height: 72rpx;
			background: linear-gradient(0deg, #C9101B, #F24D33);
			border-radius: 36rpx;
			line-height: 72rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;
			top: 236rpx;
			left: 0;
			right: 0;
			margin: auto;
		}
	}
	.kk-2 {
		top: calc(590rpx + 383rpx);
		.item-info {
			padding-top: 20rpx;
		}
	}
	.kk-3 {
		top: calc(590rpx + 383rpx + 383rpx);
		height: 389rpx;
		.bk {
			height: 389rpx;
		}
	}
	.kk-4 {
		top: calc(590rpx + 383rpx + 383rpx + 415rpx);
		height: 389rpx;
		.bk {
			height: 389rpx;
		}
		.tab-wrap {
			padding: 30rpx 40rpx 28rpx 33rpx;
			height: 270rpx;
			position: absolute;
			top: 90rpx;
			.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;
			}
		}
	}
	.btm-tit {
		font-size: 36rpx;
		width: 750rpx;
		text-align: center;
		color: #d11d20;
		position: absolute;
		top: calc(590rpx + 383rpx + 383rpx + 383rpx + 444rpx + 20rpx);
		font-weight: bold;
	}
	
</style>