xhlred/pages/fu/fuInfo.vue

<template>
	<view class="container">
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="swiper in banner" :key="swiper.id"><image :src="swiper"></image></swiper-item>
				</swiper>
				<view class="indicator"><view class="dots" v-for="(swiper, index) in banner" :class="[swiperCurrent >= index ? 'on' : '']" :key="index"></view></view>
			</view>
		</view>
		
		<view class="info-item">
			<view class="flex_item">
				<view class="list-tip">{{list.cname}}</view>
				<view class="info-title clamp">{{list.title}}</view>
			</view>
			<view class="info-tip">{{list.info}}</view>
			<view class="info-number">
				<!-- <view v-if="starting == true">
					<view class="flex_item">
						<view class="name-text">还剩</view>
						<uni-countdown
							color="#E62129"
							background-color="#ffffff"
							:show-day="true"
							:day='startday'
							:hour="starthour"
							:minute="startminute"
							:second="startsecond"
						></uni-countdown>
					</view>
				</view>
				<view class="starting" v-if="starting == false">活动已结束</view> -->
				<view>资金：{{list.money }}</view>
				<view v-if="starting == true">已有{{list.sales}}人申请</view>
				<view v-if="starting == false">已结束</view>
			</view>
		</view>
		<view class="introduce-item">
			<view class="introduce-title ellipsis">项目介绍</view>
			<view class="introduce-info">
				<rich-text :nodes="list.description"></rich-text>
			</view>
		</view>
		<!-- <view class="introduce-item">
			<view class="introduce-title ellipsis">捐款通道</view>
			<view class="introduce-info">银行账户：{{list.bank_account}}</view>
		</view> -->
		<view class="btn-bottom">
			<view class="btn-left">
				<view class="submit" v-if="starting == true && list.is == 0" @click="shenqing"><text class="">申请援助</text></view>
				<view class="submit yijieshu"  v-if="starting == true && list.is == 1"><text class="">已申请援助</text></view>
				<view class="submit yijieshu"  v-if="starting == false" ><text class="">已结束</text></view>
			</view>
			<view class="btn-right">
				<view class="" @click="loveDona">
					爱心捐款
				</view>
			</view>
		</view>
	
		
		<uni-popup ref="popup" type="center">
			<view class="pop-box">
				<image class="pop-img" src="../../static/images/sqyz.png"></image>
				<view class="pop-frame">
					<view class="pop-text">是否确认申请援助</view>
					<view class="pop-btnBox">
						<view class="pop-btn" @click="close">取消</view>
						<view class="pop-btn queren" @click="corfim()">确认</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import { one_detail, enroll } from '@/api/applyHelp.js';
	import { timeComputed } from '@/utils/rocessor.js';
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
	import {
			weixindata
		} from '@/utils/wxAuthorized.js';
	export default {
		components: {
			uniPopup,
			uniCountdown
		},
		data() {
			return {
				id:'',
				money:99,
				list: '',
				description:'',
				swiperCurrent: 0, //轮播图
				swiperHeight: 300,
				banner:[],//轮播图
				img:'',
				startday:0,
				starthour:0,//距离今天开始时间
				startminute:0,
				startsecond:0,
				title:'',
				endTime:'',//结束时间
				starting: false, //判断活动是否结束
			};
		},
		onLoad(option) {
			console.log(333,option)
			this.id = option.id;
			this.loadData();
			this.IndexShare();
		},
		
		methods: {
			loadData(){
				let obj = this;
				let id = obj.id;
				console.log(9090,id)
				one_detail({
					id: obj.id
				}).then(data => {
					console.log(9785,data.data)
						obj.list = data.data;
						obj.banner =  data.data.slider_image;
						console.log('轮播图', obj.banner)
						if (obj.list.description) {
							obj.description = obj.list.description.replace(/\<img/gi, '<img class="rich-img"');
							obj.description.repeat(/[&]quot;/g,'')
							console.log(obj.description,'123456')
						} //小程序商品详情图超出屏幕问题
						let time = data.data.endActivityTime;
						this.endTime = time*1000;
						obj.StartDate();
					})
			},
			IndexShare() {
				let obj = this;
				let id = obj.id
				one_detail({
					id: obj.id
				}).then(data => {
					console.log(9785,data.data)
						let img = data.data.slider_image[0]
						let title = data.data.title
						let info = data.data.info
						let item = {
							link:  'http://dxhred.igxys.com/index/#/pages/fu/fuInfo?id=' +id,// 分享链接
							imgUrl: img,
							desc: info,
							title: title,
							success: console.log('分享加载成功')
						};
						console.log('分享',item)
						weixindata(item);
					})
				
			},
			StartDate() {
				let obj = this;
				// 获取当前时间
				let now = new Date();
				let year = now.getFullYear(); //得到年份
				let month = now.getMonth(); //得到月份
				let date = now.getDate(); //得到日期
				let hour = now.getHours(); //得到小时
				let minu = now.getMinutes(); //得到分钟
				let sec = now.getSeconds(); //得到秒
				//获取现在时间的时间戳
				let time = new Date(year, month, date, hour, minu, sec);
				let nowTime = time.getTime();
				if (nowTime < obj.endTime) {
					console.log(nowTime,obj.endTime)
					console.log('现在时间小于活动时间，活动进行中');
					obj.starting = true;
					console.log(obj.starting, '显示');
					let starTime = obj.endTime - nowTime;
					console.log(starTime,'starTime')
					let day =  Math.floor(starTime / 1000 / 60 / 60 / 24); //获取剩余天数
					let hours = Math.floor((starTime / 1000 / 60 / 60) % 24); //获取剩余小时数
					let minutes = Math.floor((starTime / 1000 / 60) % 60); //获取分钟
					let seconds = Math.floor((starTime / 1000) % 60); //获取秒数
					obj.startday = day;
					obj.starthour = hours;
					obj.startminute = minutes;
					obj.startsecond = seconds;
					console.log('时间差是: '+ obj.startday + '天, ' + obj.starthour + '小时, ' + obj.startminute + '分钟, ' + obj.startsecond + '秒', '距离活动结束还剩多少时间');
				}else{
					obj.starting = false;
				}
			},
			//轮播图
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			},
			// 申请援助
			shenqing() {
				this.$refs.popup.open()
			},
			// 爱心捐款
			loveDona(){
				console.log('爱心捐款',this.id)
				uni.navigateTo({
					url: '/pages/applic/loveDonate?id=' + this.id
				});
				// pages/applic/loveDonate
			},
			// 关闭弹窗
			close() {
				this.$refs.popup.close()
			},
			// 确认
			corfim() {
				enroll({
					hid: this.id,
				}).then(res => {
					this.close();
					this.$api.msg('申请成功');
					this.loadData();
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
		.container{
			height: 100%;
			padding-bottom: 180rpx;
		}
	}
	.rich-img {
		width: 100% !important;
		height: auto;
	}
	//轮播图
	.swiper {
		width: 100%;
		display: flex;
		justify-content: center;
		.swiper-box {
			width: 100%;
			height:650rpx;
			overflow: hidden;
			// box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;
			swiper {
				width: 100%;
				height: 100%;
				swiper-item {
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;
				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;
					&.on {
						width: (100%/3);
					}
				}
			}
		}
	}
	.info-item{
		background-color: #FFFFFF;
		padding: 45rpx 25rpx;
		.list-tip{
			background-color: $motif-color;
			color: #FFFFFF;
			border-radius:8rpx;
			padding: 5rpx 12rpx;
			padding-bottom: 8rpx !important;
			margin-right: 15rpx;
			text-align: center;
			font-size: 24rpx;
		}
		.info-title{
			max-width: 75%;
			font-size:36rpx;
			font-weight:500;
			color:rgba(34,34,34,1);
		}
		.info-tip{
			font-weight:400;
			color:rgba(102,102,102,1);
			font-size: 28rpx;
			padding: 15rpx 0rpx;
		}
		.info-number{
			padding-top: 25rpx;
			color: #EF3D28;
			font-size: 24rpx;
			// text-align: right;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.name-text{
				color: #666666;
			}
			.starting{
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	.introduce-item{
		background-color: #FFFFFF;
		padding: 45rpx 25rpx;
		margin-top: 25rpx;
		.introduce-title{
			padding-bottom: 40rpx;
			font-size: 36rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #222222;
		}
		.introduce-info{
			font-size: 28rpx;
			font-weight: 500;
			color: #222222;
		}
	}
	.static{
		padding: 0rpx !important;
		width: 70%;
		padding-left:25rpx !important;
	}
	.btn-bottom{
		position:fixed;
		bottom: 0rpx;
		padding: 24rpx 32rpx;
		// height: 88rpx;
		width: 100%;
		color: #FFFFFF;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
	}
	.btn-left{
		padding: 12rpx 0;
		width: 45%;
		// padding: 25rpx 180rpx;
		// background:rgba(223,312,18,1);
		background: $motif-color;
		border-radius:50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn-right{
		padding: 6rpx 0;
		width: 45%;
		display: flex;
		justify-content: center;
		align-items: center;
		// padding: 25rpx 180rpx;
		// background:rgba(223,36,18,1);
		background: $motif-color;
		border-radius:50rpx;
	}
	// .submit{
		// width: 45%;
		// text-align: center;
		// padding: 50rpx 0rpx;
		// font-size: $font-lg;
		// text{
		// 	padding: 25rpx 180rpx;
		// 	// background:rgba(223,36,18,1);
		// 	background: $motif-color;
		// 	border-radius:50rpx;
		// }
	// }
	.yijieshu {
		// padding: 12rpx 0;
		// width: 45%;
		// background-color: #999999;
		text{
			color: #C3C3C3;
		}
	}
	.red{
		text{
			padding: 25rpx 180rpx;
			background:rgba(223,36,18,0.6);
			border-radius:50rpx;
		}
	}
	.pop-box {
		.pop-img {
			width: 542rpx;
			height: 280rpx;
			display: block;
		}
		.pop-frame {
			margin: 0 16rpx;
			padding: 35rpx 40rpx;
			background: #FFFFFF;
			box-shadow: 0px 5rpx 20rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 0 0 10rpx 10rpx;
			.pop-text {
				margin-top: 30rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333C4C;
				line-height: 40rpx;
				text-align: center;
			}
			.pop-btnBox {
				margin-top: 78rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.pop-btn {
					width: 199rpx;
					height: 78rpx;
					border: 1px solid #FF727E;
					border-radius: 10rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FF727E;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.queren {
					background: #FF727E;
					color: #FFFFFF;
				}
			}
		}
	}
</style>