tongshanred/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">
						<image :src="baseURL + 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 flex">
				<view class="list-tip" style="display: inline-block;">{{list.category}}</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.amount || '暂无' }}</view>
				<view v-if="starting == true">已有{{list.apply_sum || 0}}人申请</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.content"></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="(!list.is_apply) && (starting == true)" @click="shenqing"><text
						class="">申请援助</text></view>
				<view class="submit yijieshu" v-if="(list.is_apply) && (starting == true)"><text class="">已申请援助</text></view>
				<view class="submit yijieshu" v-if="starting == false"><text class="">已结束</text></view>
			</view>
			<view class="btn-right" :class="{'yijieshu': starting == false}">
				<view class="" @click="starting?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>
					<input class="phone-ipt" placeholder="请输入姓名" v-model="username"/>
					<input class="phone-ipt" placeholder="请输入手机号码" v-model="phone"/>
					<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 {
		getHelpDetail,
		userApply
	} from '@/api/help.js'
	import {
		weixindata
	} from '@/utils/wxAuthorized.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			uniPopup,
			uniCountdown
		},
		computed: {
			...mapState(['baseURL','urlFile']),
			...mapState('user',['userInfo'])
		},
		data() {
			return {
				username: '',
				phone: '',
				cname: '',
				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) {
			this.cname = option.cname
			console.log(333, option)
			this.id = option.id;
			this.loadData();
			this.IndexShare();
			this.username = this.userInfo.ext.full_name
			this.phone = this.userInfo.mobile
		},

		methods: {
			loadData() {
				let obj = this;
				let id = obj.id;
				console.log(9090, id)
				getHelpDetail({
					// id: obj.id
				},obj.id).then(data => {
					console.log(9785, data.data)
					obj.list = data.data;
					console.log(data.data)

					// if (data.data.arr.info1.img) {
					// 	obj.imgList = data.data.arr.info1.img.split(';');	// 上传资料图片
					// }

					obj.banner = data.data.userimages.split(',');
					if (obj.list.content) {
						obj.list.content = obj.list.content.replace(/\<img/gi, '<img class="rich-img"');
					} //小程序商品详情图超出屏幕问题
					var date = obj.list.end_time + '.0';
					date = date.substring(0,19);    
					date = date.replace(/-/g,'/'); 
					var timestamp = new Date(date).getTime();
					console.log(timestamp,'timestamp++++')
					// let time = data.data.endActivityTime;
					// this.endTime = time*1000;
					// obj.StartDate();
					// 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 = timestamp;
					obj.StartDate();
				})
			},
			IndexShare() {
				let obj = this;
				let id = obj.id
				getHelpDetail({
					// id: obj.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: this.baseURL + this.urlFile + '/#/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/contribution?helpid=' + this.id + '&order_name=' + this.list.full_name
				});
				// pages/applic/loveDonate
			},
			// 关闭弹窗
			close() {
				this.$refs.popup.close()
			},
			// 确认
			corfim() {
				let obj =this
				if(obj.phone == '' ) {
					return obj.$api.msg('请完善联系方式')
				}
				if(obj.username == '' ) {
					return obj.$api.msg('请完善姓名')
				}
				userApply({
					// hid: this.id,
					help_id: obj.list.id,
					phone: obj.phone,
					full_name: obj.username
				}).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;
		}
		view {
			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;
			.phone-ipt {
				margin-top: 20rpx;
				display: block;
				border: 1px solid #ff727e;
				height: 50rpx;
				line-height: 50rpx;
				padding-left: 20rpx;
				font-size: 32rpx;
			}
			.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: 40rpx;
				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>