yicangzongtai_app_240321/pages/publicWelfare/index.vue

<template>
	<view class="main">
		<navbar :config="config" backColor="#666"></navbar>
		<view class="class-box">
			<view class="box" v-for="(item,index) in classList" :key="index" @click="goPage(item.url,item.method,item.needLogin)">
				<image class="icon" mode="heightFix" :src="item.imgPath"></image>
				<view class="text">{{item.text}}</view>
			</view>
		</view>
		<!-- <view class="project-list">
			<view class="list-title">
				<text>帮扶项目</text>
				<view class="right">
					<text>查看更多</text>
					<text class="right-icon iconfont">&#xe6c7;</text>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in 2" :key="index">
					<view class="left">
						<view class="title-box">
							<image class="tag" mode="aspectFit" src="/static/common/tag4.png"></image>
							<text>秭归大脐橙箱装10kg/箱</text>
						</view>
						<view class="desc">
							帮扶细节说明帮扶细节说明帮扶细节说明帮扶 细节说明帮扶细节说明
						</view>
					</view>
					<image class="cover" mode="aspectFit" :src="index==0?'/static/test/test5.png':'/static/test/test6.png'"></image>
				</view>
			</view>
		</view> -->
		<image @click="publicDonation()" mode="widthFix" class="donation-entrance" src="/static/publicWelfare/donationEntrance.png"></image>
		<view class="moudle">
			<view class="title-box">
				<text class="title">积分捐赠</text>
				<view class="line"></view>
				<text class="tip">捐赠积分获证书</text>
			</view>
			<scroll-view scroll-x class="list2" scroll-with-animation @scroll="scrollPointsBox">
				<view class="item" v-for="(item,index) in donationPoints" :key="item.id">
					<view class="cover" :style="`background-image: url(${item.img});`"></view>
					<!-- <image class="cover" mode="aspectFill" :src="item.img"></image> --><!-- /static/publicWelfare/integral.png -->
					<view style="height: 1px;color: transparent;">{{item.randomNum}}</view>
					<view class="bottom">
						<view class="collection-box">
							<text class="iconfont2 integral-icon">&#xe669;</text>
							<text class="integral-num">{{item.points}}</text>
						</view>
						<button @click="loveDonation(item)">去捐赠</button>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="moudle">
			<view class="title-box" style="margin-bottom: 3rpx;">
				<text class="title">公益申领</text>
				<view class="line"></view>
				<text class="tip">非认证用户也可领</text>
			</view>
		</view>
		<welfareGoods :listData="listData" :hasFilter="false"></welfareGoods>
		<uni-popup class="tip-popup" ref="donationPopup" type="center" :mask-click="false">
			<view class="content-box">
				<view class="title">官方捐赠渠道</view>
				<view class="content">
					<view class="tip">
						感谢您对绿马助残公益基金会支持，即将跳转到官方捐款渠道链接在线捐款。
					</view>
					<button class="btn donation">去捐赠</button>
					<view class="tip" style="color: #999999;">
						注意：官方渠道捐赠完成之后需要在本平台申领公益积分
					</view>
					<view class="btn-box">
						<button @click="closePublicDonation()">知道了</button>
						<button @click="goApplyPointsPage()">去申领</button>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup class="tip-popup" ref="lovePopup" type="center" :mask-click="false">
			<view class="content-box">
				<view class="title">确认捐赠</view>
				<view class="content">
					<view class="tip">
						感谢您捐赠 {{donationPointsItem.points}} 公益积分，为公益 助残事业做出的贡献！
					</view>
					<view class="btn-box">
						<button @click="closeloveDonation()">取消</button>
						<button @click="givePoints()">确认捐赠</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				//手机状态栏高度
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				config: {
					back: true,
					title: '公益专区',
					color: '#1a1a1a',
					backgroundColor: [1, "#fff"],
					statusBarFontColor: 'black'
				},
				classList: [{
					imgPath: '/static/publicWelfare/class-icon1.png',
					text: '公益专区',
					url: '/pages/publicWelfareZone/index',
					method: 'navigateTo',
					needLogin: false
				},{
					imgPath: '/static/publicWelfare/class-icon2.png',
					text: '身份认证',
					url: '/pages/authentication/index',
					method: 'navigateTo',
					needLogin: true
				},{
					imgPath: '/static/publicWelfare/class-icon3.png',
					text: '公益捐赠',
					url: '/pages/publicDonation/index',
					method: 'navigateTo',
					needLogin: true
				},{
					imgPath: '/static/publicWelfare/class-icon4.png',
					text: '申领物资',
					url: '/pages/freeCollection/index',
					method: 'switchTab',
					needLogin: false
				},{
					imgPath: '/static/publicWelfare/class-icon5.png',
					text: '推荐帮扶',
					url: '/pages/recommendDonation/index',
					method: 'navigateTo',
					needLogin: true
				}],
				donationPoints: [],
				donationPointsItem: {
					points: ''
				},
				listData: []
			}
		},
		onLoad() {
			this.getDonationPoints();
			this.getList();
		},
		onPullDownRefresh() {
			this.getDonationPoints();
			this.getList();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods:{
			getList(){
				this.$http.get('/goodsareafeature/page',{
						page: 1,
						limit: 6,
						order_type: 1,
						order_mode: '',
						area_feature: 3
					})
				.then(res=>{
					if (res.code == 200) {
						this.listData = res.page.list;
					}
				})
			},
			//顶部tab
			goPage(url,method = 'navigateTo',needLogin){
				let token = uni.getStorageSync("apiToken")
				if (!token && needLogin) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
					return ;
				}
				uni[method]({
					url
				})
			},
			//官方捐赠
			publicDonation(){
				this.$refs.donationPopup.open();
			},
			closePublicDonation(){
				this.$refs.donationPopup.close();
			},
			goApplyPointsPage(){
				let token = uni.getStorageSync("apiToken")
				if (!token) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
					return ;
				}
				uni.navigateTo({
					url: '/pages/applyPoints/index'
				})
			},
			//爱心捐赠
			loveDonation(item){
				this.donationPointsItem = item;
				this.$refs.lovePopup.open();
			},
			closeloveDonation(){
				this.$refs.lovePopup.close();
			},
			//积分捐赠列表
			getDonationPoints() {
				let that = this;
				this.$http.get('/donation/points/config/list',{})
				.then(res=>{
					if (res.code == 200) {
						let tempList = res.list;
						for(let i in tempList){
							tempList[i].randomNum = '';
						}
						that.donationPoints = tempList;
					}
				})
			},
			/**
			 * @copyright CYZ
			 * @description 解决ios手机出现的【滑动横向滚动容器后，会导致不可见区域的“图片”和“按钮背景颜色”变成白色的bug】
			 * 事实上图片加载完了，只不过视图不更新。所以需要让页面产生变化。
			 */
			scrollPointsBox(){
				//获取0-10000随机数
				let randomNum = Math.floor(Math.random() * (10000 - 0)) + 0
				
				for(let i in this.donationPoints){
					this.donationPoints[i].randomNum = randomNum;
				}
			},
			givePoints(){
				let that = this;
				uni.showLoading({
					title: '正在提交中...',
					mask: true
				});
				this.$http.post('/donation/points/donate',{
					config_id: this.donationPointsItem.id
				})
				.then(res=>{
					if (res.code == 200) {
						uni.showToast({
							icon: 'success',
							title: '捐赠积分成功'
						})
					}else{
						this.closeloveDonation();
					}
				})
				.finally(()=>{
					uni.hideLoading();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		background-color: #fcfcfc;
		overflow-x: hidden;
		.class-box{
			padding: 35rpx;
			box-sizing: border-box;
			width: 100%;
			display: flex;
			justify-content: space-between;
			.box{
				text-align: center;
				.icon{
					height: 101rpx;
				}
				.text{
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: center;
					color: #1a1a1a;
					line-height: 30rpx;
					margin-top: 16rpx;
				}
			}
		}
		.project-list{
			width: 690rpx;
			margin: 0 auto;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 23rpx 20rpx 0 20rpx;
			box-sizing: border-box;
			filter: drop-shadow(1px 2px 4px rgba(26,58,70,0.1));
			.list-title{
				font-size: 36rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #1a1a1a;
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				padding: 0 0 23rpx 10rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #e6e6e6;
				.right{
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: right;
					color: #333333;
					line-height: 24rpx;
					.iconfont{
						color: #666666;
						margin-left: 8.5rpx;
						vertical-align: middle;
					}
				}
			}
			.list{
				padding: 15rpx 0;
				box-sizing: border-box;
				.item{
					margin: 45rpx 0;
					.left{
						display: inline-block;
						.title-box{
							.tag{
								width: 70rpx;
								height: 30rpx;
								vertical-align: middle;
							}
							text{
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC-Regular;
								font-weight: 400;
								text-align: left;
								color: #1a1a1a;
								line-height: 36rpx;
								margin-left: 11rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								width: 480rpx;
							}
						}
						.desc{
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: left;
							color: #808080;
							line-height: 39rpx;
							margin-top: 15rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							word-break: break-word;
							width: 480rpx;
						}
					}
					.cover{
						width: 136rpx;
						height: 136rpx;
						background: rgba(0,0,0,0.00);
						border-radius: 10rpx;
						margin-left: 34rpx;
						vertical-align: top;
					}
				}
			}
		}
		.donation-entrance{
			width: 690rpx;
			display: block;
			margin: 20rpx auto 40rpx auto;
		}
		.moudle{
			padding: 0 30rpx;
			box-sizing: border-box;
			margin: 50rpx 0 0 0;
			.title-box{
				margin-bottom: 26rpx;
				.title{
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #1a1a1a;
					line-height: 30rpx;
					vertical-align: middle;
				}
				.line{
					margin: 0 15.5rpx 0 14.5rpx;
					display: inline-block;
					vertical-align: middle;
					width: 1px;
					height: 33rpx;
					background-color: #707070;
				}
				.tip{
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #666666;
					line-height: 24rpx;
					vertical-align: middle;
				}
			}
			.list2{
				overflow-x: auto;
				white-space: nowrap;
				padding: 10rpx;
				height: 410rpx;
				.item{
					display: inline-block;
					width: 292rpx;
					background: #ffffff;
					border-radius: 16rpx;
					padding: 20rpx 20rpx 26rpx 20rpx;
					box-sizing: border-box;
					margin-right: 20rpx;
					filter: drop-shadow(1px 2px 4px rgba(26,58,70,0.1));
					image{
						will-change: transform;
					}
					.cover{
						width: 252rpx;
						height: 252rpx;
						border-radius: 16rpx;
						margin-bottom: 23rpx;
						background-size: cover;
						background-position: center;
					}
					.bottom{
						height: 60rpx;
						line-height: 60rpx;
						display: flex;
						justify-content: space-between;
						.collection-box{
							margin-left: -10rpx;
							.integral-icon{
								font-size: 50rpx;
								color: #22a736;
								display: inline-block;
								vertical-align: middle;
							}
							.integral-num{
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								text-align: left;
								color: #808080;
								line-height: 24rpx;
							}
						}
						button{
							width: 138rpx;
							height: 63rpx;
							background: linear-gradient(180deg,#2eb82a, #027956);
							border-radius: 32rpx;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #ffffff;
							line-height: 63rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>