xiaoyou-h5/pages/activity/active_detail.vue

<template>
	<view class="active_detail">

		<!-- 立即报名弹框 -->
		<u-popup v-model="show" mode="center" border-radius="19" :closeable="true" @close="close">
			<view class="pop_wrap">
				<view class="pop_top">
					<text class="title">请填写报名信息</text>
				</view>
				<view class="pop_center">
					<!-- 		<text>活动名称：{{prop.title}}</text>
					<text>活动时间：{{prop.start_time}}</text>
					<text>活动组织：{{prop.organization ? prop.organization.name :'--'}}</text>
					<text>发起人：{{prop.contact_name}}</text> -->
					<u-form label-width='120'>
						<u-form-item label="姓名" class="position">
							<view class="star">
								*
							</view>
							<u-input v-model="name" :clearable='false' placeholder="请填写姓名" />
						</u-form-item>
						<u-form-item label="手机号" class="position">
							<view class="star">
								*
							</view>
							<u-input v-model="mobile" :clearable='false' placeholder="请填写手机号" />
						</u-form-item>
					</u-form>
				</view>
				<view class="pop_bootom">
					<button type="default" @click="sure_sign">确认</button>
				</view>
			</view>
		</u-popup>

		<view class="first">
			<view class="top_img"
				:style="{backgroundImage:'url('+ (content.cover_resource==null?'':content.cover_resource.url) +')'}">
				<!-- <image :src="content.cover_resource? content.cover_resource.url : ''" mode=""></image> -->
			</view>
			<view class="wrap">
				<text class="title">{{content.title}}</text>
				<view class="icon">
					<image class="eye" src="../../static/images/eye.png" mode=""></image>
					<text class="people_num">{{content.view_nums}}</text>
					<!-- <image src="../../static/images/zhuan.png" mode=""></image>
					<text class="zhuan_num"></text> -->
				</view>
				<view class="from">
					<view class="from_item">
						<image class="clock" src="../../static/images/clock.png" mode=""></image>
						<text>时间：{{content.start_time}}-{{content.end_time}}</text>
					</view>
					<view class="from_item">
						<image class="local" src="../../static/images/active_local.png" mode=""></image>
						<text>地点：{{content.address}}</text>
					</view>
					<!-- <view class="from_item">
						<image class="money" src="../../static/images/money.png" mode=""></image>
						<text class="money_text">收费：{{content.money}}</text>
					</view> -->
				</view>
				<text class="name">发起人 {{content.contact_name}}</text>
			</view>
		</view>
		<view class="sec">
			<view class="sign_up">
				<view class="top">
					<view class="left">
						已报名({{content.sign_up_nums}})
					</view>
					<view class="right" @click="more" v-if="active_list.length>0">
						<text>查看更多</text>
						<image src="../../static/images/right.png" mode=""></image>
					</view>
				</view>
				<view class="empty" v-if="active_list.length == 0">
					暂无报名
				</view>
				<view class="avater_wrap" v-if="active_list.length>0">
					<view class="img" v-for="(item,index) in active_list" :key='index'>
						<image :src="item.user ? item.user.headimg : '../../static/images/active_avater.png'" mode="">
						</image>
					</view>

				</view>
			</view>
			<view class="detail">
				<text class="title">活动详情</text>
				<u-read-more ref="uReadMore" :toggle="true">
					<u-parse :html="content.body" @load="parseLoaded"></u-parse>
					<!-- <u-parse :html="content.body"></u-parse> -->
				</u-read-more>
			</view>
			<view class="img_wrap" v-if="wonderful_list.length != 0">
				<view class="title" @click="addWonderful">
					<text>精彩瞬间</text>
					<view class="right">
						<text>{{wonderful_list.length}}张</text>
						<image src="../../static/images/right.png" mode=""></image>
					</view>
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true">
					<view class="imgs_wrap">
						<view class="imgs" v-for="(item,index) in wonderful_list" :key='index'>
							<image :src="item.path" mode="aspectFill"></image>
						</view>

					</view>
				</scroll-view>
			</view>
			<view class="comment_wrap">
				<view class="title">
					<text>活动评论</text>
					<view class="right">
						<text>{{pinglun_list.length}}条</text>
						<!-- <image src="../../static/images/right.png" mode=""></image> -->
					</view>
				</view>
				<view class="comment_content">
					<view class="empty" v-if="pinglun_list.length == 0">
						暂无内容
					</view>
					<view class="item_wrap" v-for="(item,index) in pinglun_list" :key="index" v-else>
						<view class="wrap">
							<view class="left">
								<view class="img">
									<image :src="item.user.headimg" mode=""></image>
								</view>
							</view>
							<view class="name">
								<text>{{item.user.name}}</text>
								<text class="time">{{item.created_at}}</text>
							</view>

						</view>
						<view class="center">
							{{item.body}}
						</view>


					</view>
				</view>

			</view>
			<view v-if="content.state.status != 5" class="ping" @click="isPing = true">
				评论
			</view>
			<view v-else class="ping1">
				评论
			</view>
			<view class="cai" @click="to_add(content.id)"
				v-if="vuex_user.role == 1 || (vuex_user.role == 2 && vuex_user.organization_id == content.organization_id)">
				<!-- v-if="vuex_user.role == 1 || (vuex_user.role == 2 && vuex_user.organization_id == content.organization.id)" -->
				彩
			</view>
			<view class="bottom">
				<view class="left">
					<view class="tel_wrap" @click="call">
						<image src="../../static/images/tel.png" mode=""></image>
						<view>咨询</view>
					</view>
					<!-- <view class="share_wrap" @click="share">
						<image src="../../static/images/share.png" mode=""></image>
						<view>分享</view>
					</view> -->
					<view class="mine_wrap" @click="to_mine">
						<image src="../../static/images/active_mine.png" mode=""></image>
						<view>我的</view>
					</view>

				</view>
				<!-- .state. -->
				<view class="right" v-if="content.state.status == 1" @click="signUp">
					马上报名
				</view>
				<view class="right1" v-else>
					{{content.state.status_text}}
				</view>
			</view>
		</view>

		<u-popup v-model="isPing" mode="bottom" width="300px" height="190px">
			<view class="pinglun">
				<text>添加评论</text>
				<u-input type="textarea" placeholder="想说点什么？" v-model="pinglun_text.body" />

			</view>
			<view class="send_btn" @click="send_pinglun(content)">
				立即评论
			</view>
		</u-popup>
	</view>





</template>

<script>
	export default {
		data() {
			return {
				content: {
					title: '河南中医药大学药学院举办校友-2021校友会迎新活动',
					eye_num: 666,
					share_num: 66,
					time: '2021-09-28 09:30 至2021–10-28 12:00',
					localtion: '河南中医药大学仲景学院南国际楼一楼403南国际楼一楼40',
					money: '免费',
					people: '肖晓波',
					sign_up_people: 666,
					organization_id:'',
					detail: '班级总人数88人班级总人数88人班级总人数88人班级总班级总人数88人班级总人数88人班级总人数88人班级总班级总人数88人班级总人数88人班级总人数',
					state: {
						status: ''
					}
				},

				active_list: [], //报名人员
				pinglun_text: {},
				pinglun_list: [],
				wonderful_list: [],
				id: '', //
				prop: '',
				show: false,
				name: '',
				mobile: '',
				status: '',
				isPing: false
			}

		},
		onLoad(options) {

			let id = options.id
			this.id = id
			this.getDetails(id)
			this.getActiveList(id)
			this.get_plList(id)

		},
		onShow() {
			
			this.getWonderful(this.id)
		},
		methods: {
			parseLoaded() {
				this.$refs.uReadMore.init();
			},
		
			//获取精彩瞬间
			getWonderful(id) {
				this.$u.get('/page/activities-scenes/' + id).then(res => {
					
					let data = res.data.data
					this.wonderful_list = data
					
				})
			},
			//跳转精彩瞬间列表
			addWonderful() {
				console.log(this.vuex_user, 'user')
				console.log(this.content, 'content')
				uni.navigateTo({
					url: './wonderful_list?id=' + this.id
				})


			},

			getDetails(id) {
				this.$u.get('/page/activities/' + id).then(res => {
					console.log(res, '详情')
					this.content = res.data
				})
			},
			getActiveList(id) {
				this.$u.get('/page/activities-sign-ups', {
					activity_id: id
				}).then(res => {
					console.log(res, '报名人员')
					this.active_list = res.data.data
				})
			},
			//评论
			send_pinglun(item) {
				this.pinglun_text.activity_id = item.id
				this.pinglun_text.organization_id = this.vuex_user.organization_id
				this.$u.post('/page/organization-activity-comments', this.pinglun_text).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						})
						this.pinglun_text.body = ''
						this.isPing = false
						this.get_plList(this.content.id)
					}
				})
			},
			get_plList(id) {
				this.$u.get('/page/activities-comments/' + id).then(res => {
					console.log(res)
					this.pinglun_list = res.data.data
				})
			},
			to_mine() {
				uni.switchTab({
					url: '../mine/mine'
				})
			},
			to_add(id) {
				//添加精彩瞬间
				uni.navigateTo({
					url: './wonderful?activity_id=' + id
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.content.contact_mobile
				})
			},
			share() {
				uni.share({
					provider: "weixin",

				})
			},
			more() {
				uni.navigateTo({
					url: 'more?id=' + this.id
				})
			},
			//立即报名
			signUp() {
				this.show = true
			},

			//确认报名
			sure_sign() {

				if (!this.name) {
					uni.showToast({
						title: '请输入姓名!',
						icon: 'none'
					})
					return
				}
				if (!this.mobile) {
					uni.showToast({
						title: '请输入手机号!',
						icon: 'none'
					})
					return
				}
				let data = {
					activity_id: this.id,
					name: this.name,
					mobile: this.mobile
				}
				this.$u.post('/page/sign-up-activity', data).then(res => {
					console.log(res, '报名提交成功')
					this.show = false
					this.name = ''
					this.mobile = ''
					uni.reLaunch({
						url: '../organization/success'
					})
				})
			},
			close() {
				this.name = ''
				this.mobile = ''
			},
			//生成并保存图片
			shengcheng: function() {
				var that = this
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300,
				});
				uni.showLoading({
					title: '图片生成中',
				})
				setTimeout(function() {
					html2canvas(document.querySelector('#shareImage'), {
						scale: 2,
						x: 0, // x坐标
						y: 0, // y坐标
						foreignObjectRendering: true, // 是否在浏览器支持的情况下使用ForeignObject渲染
						async: false, // 是否异步解析和呈现元素
						background: "#ffffff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
						// dpi: 300, // 处理模糊问题
						useCORS: true,

					}).then(imgDom => {
						let previewFile = imgDom.toDataURL('image/png');
						var image = new Image();
						image.src = previewFile;
						image.style.width = '100%';
						document.getElementById('boxImage').appendChild(image);
					});
					uni.hideLoading()
					that.status = 3
					that.isShow = false
					uni.showToast({
						title: '图片已生成'
					})
				}, 1000)


			},
			saveImage() {
				html2canvas(document.querySelector('#shareImage'), {
					useCORS: true,
				}).then(canvas => {
					let previewFile = canvas.toDataURL('image/png');
					this.download(previewFile)
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	//下载图片按钮
	// .down {
	// 	position: fixed;
	// 	bottom: 0;
	// 	height: 100upx;
	// 	line-height: 100upx;
	// 	width: 100%;
	// 	text-align: center;
	// 	z-index: 9999999999999;
	// }
	page{
		// padding: 16px 0;
	}
	//添加弹框
	.pop_wrap {
		width: 290px;
		height: 280px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.pop_top {
			margin-top: 20px;

			text {
				display: block;
				font-size: 13px;
				color: rgba(40, 40, 40, 0.5);
				text-align: center;
				line-height: 22px;
				padding: 0 20px;
			}

			.title {
				font-size: 18px;
				font-weight: bold;
				color: #282828;
				line-height: 25px;
				margin-bottom: 2px;
			}
		}

		.pop_center {
			margin-top: 15px;


			text {
				font-size: 14px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 20px;
				color: #353535;
				opacity: 0.79;
				display: block;
				margin-bottom: 6px;
			}
			.position{
				position: relative;
				.star{
					position: absolute;
					left: -10px;
					color: red;
				}
			}
		}

		.pop_bootom {
			margin-top: 25px;

			button {
				border: 1px solid #FF5A26;
				width: 98px;
				// height: 36px;
				padding: 0 5px;
				line-height: 36px;
				background-color: #fff;
				color: #FF5A26;
			}
		}
	}

	.active_detail {
		background-color: #EEEEEE;
		position: relative;

		.ping {
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			color: #fff;
			font-size: 16px;
			font-weight: 600;
			position: fixed;
			right: 10px;
			background-color: #79573D;
			border-radius: 50%;
			bottom: 70px;
		}
		.ping1{
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			color: #fff;
			font-size: 16px;
			font-weight: 600;
			position: fixed;
			right: 10px;
			background-color: #a0a0a0;
			border-radius: 50%;
			bottom: 70px;
		}

		.cai {
			// background: url(../../static/images/cai.png);
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			color: #fff;
			font-size: 23px;
			font-weight: 500;
			position: fixed;
			right: 10px;
			background-color: #79573D;
			border-radius: 50%;
			bottom: 130px;
		}

		.first {
			background-color: #fff;

			.top_img {
				height: 198px;
				background-position: center;
				background-size: 100% auto;
				background-repeat: no-repeat;
				overflow: hidden;
				margin-bottom: 20px;
			}

			.wrap {
				padding: 0 16px;

				.title {
					font-size: 17px;
					font-family: Graphit;
					font-weight: 500;
					line-height: 20px;
					color: #282828;
				}

				.icon {
					font-size: 13px;
					font-family: PingFang HK;
					font-weight: 400;
					height: 17px;
					line-height: 17px;
					color: #A2A2A2;
					text-align: right;

					image {
						width: 15px;
						height: 13px;
						display: inline-block;
						margin-right: 3px;
					}

					.eye {
						width: 16px;
						height: 11px;
					}

					.people_num {
						margin-right: 20px;
					}

					.zhuan_num {
						margin-right: 10px;
					}
				}

				.from {
					.from_item {
						height: 40px;
						display: flex;
						align-items: center;
						margin-top: 16px;
						border-bottom: 1px solid #707070;
						border-color: rgba($color: #707070, $alpha: 0.1);

						.clock {
							width: 15px;
							height: 15px;
						}

						.local {
							width: 14px;
							height: 16px;
						}

						.money {
							width: 14px;
							height: 15px;
						}

						image {
							// display: inline-block;
							margin-right: 6px;
						}

						text {
							font-size: 14px;
							font-family: Graphit;
							font-weight: 500;
							color: #898686;
							display: block;
							overflow: hidden;
							-webkit-line-clamp: 1;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
						}
					}
				}

				.name {
					display: block;
					width: 100%;
					text-align: right;
					padding: 17px 10px 14px 0;
					font-size: 15px;
					font-family: Graphit;
					font-weight: 500;
					line-height: 20px;
					color: #898686;
				}
			}
		}

		.sec {
			padding-bottom: 90px;
			margin-top: 17px;
			background-color: #fff;

			.sign_up {
				box-shadow: 0px 8px 12px rgba(12, 20, 61, 0.06);
				padding: 14px 18px;

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						font-size: 15px;
						font-family: Graphit;
						font-weight: 500;
						line-height: 20px;
						color: #898686;
					}

					.right {
						font-size: 13px;
						font-family: Graphit;
						font-weight: 500;
						line-height: 20px;
						color: #898686;

						image {
							width: 5px;
							height: 8px;
							margin-left: 3px;
						}
					}
				}

				.avater_wrap {
					margin-top: 28px;
					padding: 0 0 0 11px;

					.img {
						width: 40px;
						height: 40px;
						border-radius: 50%;
						overflow: hidden;
						display: inline-block;
						margin-right: 12px;
						margin-bottom: 10px;
						flex: 1;

						image {
							width: 40px;
							height: 40px;
						}
					}

				}
			}

			.detail {
				margin-top: 25px;
				padding: 0 16px;
				font-size: 14px;
				font-family: PingFang HK;
				font-weight: 400;
				line-height: 20px;
				color: #696969;
				text-align: justify;
				.title {
					font-size: 17px;
					font-family: Graphit;
					font-weight: 500;
					line-height: 20px;
					color: #282828;
					display: block;
					margin-bottom: 10px;
				}
			}

			.img_wrap {
				margin-top: 35px;
				padding: 0 16px;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 17px;
					font-family: Graphit;
					font-weight: 500;
					line-height: 20px;
					color: #282828;

					.right {
						font-size: 13px;
						font-family: Graphit;
						font-weight: 500;
						line-height: 20px;
						color: #898686;

						image {
							width: 5px;
							height: 8px;
							margin-left: 7px;
						}
					}
				}

				.scroll-view_H {
					margin-top: 20px;
					width: 100%;
					overflow: hidden;
					white-space: nowrap;

					.imgs_wrap {
						height: 97px;

						.imgs {
							height: 97px;
							width: 161px;
							overflow: hidden;
							border-radius: 6px;
							display: inline-block;
							margin-right: 11px;

							image {
								height: 97px;
								width: 161px;
							}
						}

					}
				}
			}

			.empty {
				font-size: 14px;
				font-family: Graphit;
				font-weight: 500;
				line-height: 50px;
				color: #282828;
				opacity: 0.38;
				text-align: center;
				height: 50px;
				margin-top: 10px;
			}

			.comment_wrap {
				margin-top: 30px;
				padding: 0 16px;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 17px;
					font-family: Graphit;
					font-weight: 500;
					line-height: 20px;
					color: #282828;

					.right {
						font-size: 13px;
						font-family: Graphit;
						font-weight: 500;
						line-height: 20px;
						color: #898686;

						image {
							width: 5px;
							height: 8px;
							margin-left: 7px;
						}
					}
				}

				.comment_content {
					margin-top: 20px;
					margin-bottom: 15px;


					.item_wrap {
						margin-bottom: 10px;
						border-bottom: 1px solid;
						border-color: rgba($color: #000000, $alpha: 0.08);
						// display: flex;
						// align-items: center;
						// justify-content: space-between;

						// height: 60px;
						.wrap {
							// height: 60px;
							display: flex;
							align-items: center;
						}

						.left {
							font-size: 12px;
							margin-right: 10px;

							.img {
								width: 35px;
								height: 35px;
								border-radius: 50%;
								overflow: hidden;

								image {
									width: 35px;
									height: 35px;
								}
							}
						}

						.name {
							text {
								display: block;
							}

							flex-shrink: 0;
							font-size: 13px;
							margin-right: 10px;

							.time {
								color: #898686;
								font-size: 12px;
								margin-top: 3px;
							}
						}

						.center {
							flex-shrink: 0;
							font-size: 15px;
							overflow: hidden;
							width: 100%;
							padding: 10px 0 10px 40px;
						}

						// .right {
						// 	flex-shrink: 0;

						// 	// width: 40px;
						// 	text {
						// 		display: block;
						// 	}

						// 	font-size: 13px;
						// 	color: #898686;
						// }
					}
				}


			}

			.bottom {
				position: fixed;
				bottom: 0;
				display: flex;
				width: 100%;
				background-color: #FFFFFF;
				border-top: solid 1px #E4E7ED;
				justify-content: space-between;

				.left {
					// padding: 4px 32px;
					display: flex;
					// justify-content: space-between;
					justify-content: space-around;
					align-items: center;
					font-size: 10px;
					font-family: PingFang SC;
					font-weight: 400;
					// line-height: 20px;
					color: #6C6C6C;
					width: 50%;

					.tel_wrap {
						text-align: center;

						image {
							width: 19px;
							height: 19px;
							display: block;
						}
					}

					.share_wrap {
						text-align: center;

						image {
							display: inline-block;
							width: 20px;
							height: 20px;

						}
					}

					.mine_wrap {
						image {
							width: 24px;
							height: 22px;
							display: block;
						}

						text-align: center;
					}

					.addimg_wrap {

						// width: 40px;
						image {
							width: 24px;
							height: 24px;
							display: block;
						}

						.text {
							// height: 16px;
							text-align: center;
							word-break: break-all;
						}

					}
				}

				.right {
					// width: 151px;
					width: 50%;
					height: 55px;
					background: #79573D;
					line-height: 55px;
					text-align: center;
					font-size: 17px;
					font-family: Graphit;
					font-weight: 500;
					color: #fff;
				}

				.right1 {
					width: 280px;
					height: 55px;
					background: #A0A0A0;
					line-height: 55px;
					text-align: center;
					font-size: 17px;
					font-family: Graphit;
					font-weight: 500;
					color: #fff;
				}
			}
		}

		.pinglun {
			padding: 10px 10px;
			text-align: center;
			font-size: 17px;
			// font-weight: 600;
			display: flex;
			line-height: 25px;
			flex-direction: column;
			// height: 90px;
			// width: 100%;	
			border-bottom: 1px solid;
			border-color: rgba($color: #898686, $alpha: 0.3);

			text {
				margin-bottom: 10px;
			}
		}

		.send_btn {
			position: absolute;
			right: 10px;
			border-radius: 10px;
			background-color: #79573D;
			color: #fff;
			height: 35px;
			line-height: 35px;
			text-align: center;
			width: 80px;
			font-size: 15px;
			display: inline-block;
			margin-top: 20px;
		}
	}
</style>