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">
				<block v-for="(item, index) in info.user_list" :key="index">
					<view class="mItem" v-if="index<=4">

						<image
							:src="item.avatar||'http://cdn.shop.weivee.com/shop/20200408/6162b21922f336ae9b320bc06582ab7f.png'">
						</image>
						<view>{{item.username}}</view>

					</view>
				</block>
			</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>





			<view class="btn3" v-if="info.join_status==1">
				已报名
			</view>


			<block v-if="info.join_status==0">

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


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






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

			</block>
			
	

		</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.phone = uni.getStorageSync('userInfo').mobile || ''

			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('/User/get_phone', 'GET', {
					access_token: uni.getStorageSync('access_token') || '',
					code: e.detail.code
				});

				if (res) {

					this.phone = res

					var userInfo = uni.getStorageSync('userInfo');

					userInfo.mobile = this.phone;

					uni.setStorageSync('userInfo', userInfo)
				}


			},
			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 || ''
							});

							
							setTimeout(function(){
									that.getinfo()
							},1000)

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




			},
			goMore() {
				uni.navigateTo({
					url: "/pages/activity/memberlist?activity_id="+this.id
				})
			},
			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>