qd_81fang/pages/activity/detail.vue

<template>
	<view class="content">
		<image class="banner" :src="info.activity.image">
		</image>
		<view class="aInfo">
			<view class="atitle">
				{{info.activity.activity_title}}
			</view>


			<view class="aitem">
				<view>{{info.activity.title1}}</view>
				<view>{{info.activity.content1}}</view>
			</view>


			<view class="aitem">
				<view>{{info.activity.title2}}</view>
				<!-- <view>{{ parse.filterTime(info.activity.start_time) }}至{{ parse.filterTime(info.activity.end_time) }}</view> -->
				<view>{{info.activity.content2}}</view>
			</view>

			<view class="aitem">
				<view>{{info.activity.title3}}</view>
				<view class="aAddress">{{info.activity.content3}}</view>
				<view class="aoperate">
					<image
						src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/47a789f04633b188498bb700002e2841.png">
					</image>
					<view></view>
					<image @click="callPhone"
						src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/d90e0ad7eb6fd669e1103fb241325593.png">
					</image>
				</view>
			</view>



		</view>





		<view class="aInfo" style="margin-top: 22rpx;padding-top: 24rpx;">

			<view class="mTip">
				<view class="mTitle">
					<view></view>
					<view>报名人员</view>
				</view>

				<view class="mMore" @click="goMore">
					<view>更多</view>
					<image
						src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/24ea2b5e78be1a4a66c94cdd670edb91.png">
					</image>
				</view>
			</view>

			<view class="mList">
				<view class="mItem" v-for="(item,index) in info.user_list" :key='index'>

					<image :src="item.avatar">
					</image>
					<view>{{item.username}}</view>

				</view>
			</view>
			
			<view v-if="!info.user_list.length" style='color:#999;text-align:center;margin:50rpx 0;font-size:30rpx'>暂无数据</view>

		</view>



		<view class="aInfo" style="margin-top: 22rpx;padding-top: 24rpx;">

			<view class="mTip">
				<view class="mTitle">
					<view></view>
					<view>活动介绍</view>
				</view>


			</view>


			<rich-text :nodes="info.activity.activity_detail"></rich-text>



		</view>


		<view class="bot">

			<button class="btn1" open-type="share">
				<image
					src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/dcc924cd0cd143a5e5c467ec74838c3f.png">
				</image>
				<view>
					活动分享
				</view>
			</button>


		<button class="btn2" @click="btnConfirm" >
				活动报名
			</button>
			
			

	<!-- 		<button class="btn2" @click="btnConfirm" v-if="infi.activity.activity_status==1&&phone">
				活动报名
			</button> -->


	<!-- 		<button class="btn2"   v-if="infi.activity.activity_status==1&&!phone"   open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
				活动报名
			</button> -->


			<view class="btn3" v-if="infi.activity.activity_status==0">
				活动结束
			</view>

		</view>


	</view>
	</view>
</template>
<script module="parse" lang="wxs">
	module.exports = {
		filterTime: function(time) {

			console.log(time)

			var nowDate = getDate(time * 1000);
			var year = nowDate.getFullYear();
			var month = nowDate.getMonth() + 1;
			var date = nowDate.getDate();
			var hours = nowDate.getHours();
			var minutes = nowDate.getMinutes();
			var seconds = nowDate.getSeconds();

			month = month > 9 ? month : '0' + month;
			date = date > 9 ? date : '0' + date;
			hours = hours > 9 ? hours : '0' + hours;
			minutes = minutes > 9 ? minutes : '0' + minutes;
			seconds = seconds > 9 ? seconds : '0' + seconds;

			return year + '-' + month + '-' + date + " " + hours + ":" + minutes + ":" + seconds;

		}
	}
</script>
<script>
	// pages/backstage/index/index.js
	var app = getApp();
	// import { request } from '../../../utils/request.js';
	export default {
		data() {
			return {
				info: "",
				id: "",
				phone:""
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			this.id = options.id || 4
			this.getinfo();
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */

		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			return {
				title: this.info.activity.activity_title,
				imageUrl: this.info.activity.image,
				path: ''
			}
		},
		methods: {
			async decryptPhoneNumber(e){
				var that = this
				console.log(e)
				
				let res = await that.$api.request('/Activity/activity_join', 'GET', {
					code: e.detail.code
				});
				
				if(res){
					this.phone = res
				}
				
				
			},
			btnConfirm() {

				var that = this;

				uni.showModal({
					title: '提示',
					content: '确认报名?',
					async success(res) {
						if (res.confirm) {

							let res = await that.$api.request('/Activity/activity_join', 'GET', {
								activity_id: that.id,
								phone:that.phone||''
							});

							if (res) {

								uni.showToast({
									title: '报名成功'
								})

							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});




			},
			goMore() {
				uni.navigateTo({
					url: "/pages/activity/memberlist"
				})
			},
			callPhone() {

			},
			async getinfo() {
				var that = this;

				let res = await this.$api.request('/Activity/detail', 'GET', {
					id: this.id
				});

				console.log(res)
				if (res) {

					res.activity.activity_detail = res.activity.activity_detail.replace(/\<img/gi,
						'<img style="max-width:100%;height:auto;display:block;"');

					this.info = res

				}

			},


		}
	};
</script>
<style>
	page {
		background: #F6F3F7;
	}

	.content {
		padding-bottom: 120rpx;
	}

	.banner {
		width: 100%;

	}


	.aInfo {

		width: 100%;
		padding: 46rpx 40rpx 28rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.atitle {
		font-size: 40rpx;
		color: #010101;
		font-weight: 700;
		text-align: center;
		padding: 0 140rpx 38rpx;
		border-bottom: 1px solid #E5E2E5;
	}


	.aitem {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		position: relative;
	}


	.aitem>view:nth-child(1) {
		font-size: 26rpx;
		color: #8E8E8E;
	}

	.aitem>view:nth-child(2) {
		font-size: 26rpx;
		color: #000000;
		margin-left: 22rpx;

	}

	.aAddress {
		width: 360rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.aoperate {
		display: flex;
		align-items: center;
		position: absolute;
		right: 0;
	}

	.aoperate>view {
		width: 1px;
		height: 36rpx;
		background: #818181;
		margin: 0 14rpx;
	}

	.aoperate>image {
		width: 44rpx;
		height: 44rpx;
	}


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


	.mTitle {
		display: flex;
		align-items: center;
		justify-content: space-be
	}

	.mTitle>view:nth-child(1) {
		width: 8rpx;
		height: 34rpx;
		background: #F94E6F;
		border-radius: 4rpx;
	}


	.mTitle>view:nth-child(2) {
		font-size: 32rpx;
		color: #000000;
		margin-left: 10rpx;
	}


	.mMore {
		display: flex;
		align-items: center;

	}

	.mMore>view {
		font-size: 24rpx;
		color: #8E8E8E;
	}


	.mMore>image {
		width: 12rpx;
		margin-left: 10rpx;
		height: 20rpx;
	}


	.mList {
		margin-top: 56rpx;
		display: flex;
	}

	.mItem {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 30rpx;
	}

	.mItem>view {
		font-size: 28rpx;
		color: #010101;
		margin-top: 20rpx;
	}


	.mItem>image {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}



	rich-text {
		margin-top: 30rpx;
	}



	.bot {

		width: 100%;
		height: 112rpx;
		position: fixed;
		background: #fff;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0 30rpx;
	}


	.btn1 {
		width: 224rpx;
		height: 86rpx;

		display: flex;
		align-items: center;
		background: #FB4C6F;
		justify-content: center;
		border-radius: 60rpx;
	}


	.btn1>image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 12rpx;
	}


	.btn1>view {
		font-size: 28rpx;
		color: #fff;
	}


	.btn2 {
		width: 224rpx;
		height: 86rpx;

		display: flex;
		align-items: center;
		background: #FB4C6F;
		justify-content: center;
		border-radius: 60rpx;
		color: #FFF;
	}


	.btn3 {
		width: 224rpx;
		height: 86rpx;

		display: flex;
		align-items: center;
		background: #8E8E8E;
		justify-content: center;
		border-radius: 60rpx;
		color: #FFF;
	}

	button {
		margin: 0;
	}
</style>