xiaoyou-h5/pages/activity/index.vue

<template>
	<view class="">
		<view class="bg">

		</view>
		<view class="active position">

			<!-- 立即报名弹框 -->
			<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">
						<u-form label-width='120'>
							<u-form-item label="姓名" class="position">
								<view class="star">
									*
								</view>
								<u-input v-model="name" placeholder="请填写姓名" />
							</u-form-item>
							<u-form-item label="手机号" class="position">
								<view class="star">
									*
								</view>
								<u-input v-model="mobile" placeholder="请填写手机号" />
							</u-form-item>
						</u-form>
					</view>
					<view class="pop_bootom">
						<button type="default" @click="sure_sign">确认</button>
					</view>
				</view>
			</u-popup>
			<!-- <view :class="[this.is_weixin()?'':'wrap1','wrap']"> -->
			<view class="wrap">

				<view class="top_wrap">
					<!-- <view :class="[this.is_weixin()?'':'top1','top']"> -->
						<view class="top">
						<view class="search">
							<image src="../../static/images/search.png" mode=""></image>
							<input type="text" value="" v-model="query.title" placeholder="请输入活动名称"
								placeholder-style="font-size:14px;color:#D9D0C8;" @confirm="search" @input="get_text" />
						</view>
						<view class="search_right" @click="to_create">
							<image src="../../static/images/user-plus.png" mode=""></image>
							<text>发起活动</text>
						</view>
					</view>
					<view :class="[is_click?'':'close','menu']">
						<u-dropdown active-color="#674023" inactive-color="#6F6F6F" title-size="30"  @open="menuClick"
							@close="close_menu">
							<u-dropdown-item v-model="active_type" title="活动类型" :options="type" @change="type_select">
							</u-dropdown-item>
							<u-dropdown-item v-model="sctive_shape" title="活动形式" :options="shape"
								@change="shape_select">
							</u-dropdown-item>
						</u-dropdown>
					</view>
				</view>

			</view>
			<!-- </view> -->
			<view class="active_list">

				<view class="empty" v-if="my_list.length == 0">
					<image src="../../static/images/empty_active.png" mode=""></image>
					<text>暂无内容</text>
				</view>
				<view class="item" v-for="(item,index) in my_list" :key="index" @click="to_detail(item)">
					<view class="img">
						<image :src="item.cover_resource.url" mode="aspectFill"></image>
					</view>
					<view class="right">
						<view class="title">{{item.title}}</view>
						<view class="logo">
							<image :src="item.organization?item.organization.logo:logo" mode=""></image>
							<text>{{item.organization?item.organization.name:'--'}}</text>
						</view>
						<view class="time">
							<!-- <text>{{item.start_time}}--{{item.end_time}}</text>|<text>{{item.shape_text}}活动</text> -->
							<text>{{getTime(item.start_time)}}-{{getTime(item.end_time)}}</text>|<text>{{item.shape_text}}活动</text>
						</view>
						<view class="bottom">
							<view class="free">
								<!-- {{item.money}} -->
								{{item.sign_up_nums}}/{{item.total_nums}}
							</view>
							<view class="btn" @click.stop="signUp(item)" v-if="item.state.status == 1">
								马上报名
							</view>
							<view v-else :class="item.state.status == 3 ? 'btn_over' :'btn_check'">

								{{item.state.status_text}}
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				show: false,
				prop: '',
				type: [
					{
					label: '全部',
					value: 0
				},
				],
				shape: [
					{
						label: '全部',
						value: 0
					}
				],
				active_type: '',
				sctive_shape: '',
				my_list: [],
				query: {},
				logo: '../../static/images/logo.png',
				page: 1,
				last: false,
				mobile: '',
				name: '',
				// 解决吸顶遮挡问题
				is_click: false
			}
		},
		onShow() {
		
		},
		async onLoad() {

			this.page = 1
			this.my_list = []
			this.last = false
			await this.getList()
			this.get_shape()
			this.get_setting()
		},
		onReachBottom() {
			if (!this.last) {
				this.page++
			}
			this.getList()
		},
		methods: {

			menuClick(e) {
				this.is_click = true
			},
			close_menu() {
				this.is_click = false
			
			},
			to_detail(item) {
				uni.navigateTo({
					url: '/pages/activity/active_detail?id=' + item.id,
					success: res => {
					},
					fail: (e) => {
					},
					complete: () => {}
				})
			},
			getTime(time) {
				let time1 = time.split(' ')
				let time2 = time1[0]
				return time2.replace(/\-/g, '.')
			},
			close() {
				this.name = ''
				this.mobile = ''
			},
			//立即报名
			signUp(item) {
				if (this.vuex_token) {
					this.prop = item
					let time = item.start_time
					let time1 = time.split(' ')
					let time2 = time1[0]
					this.prop.start_time = time2
					this.show = true
				} else {
					uni.reLaunch({
						url: '../login/index'
					})
				}

			},
			sure_sign(id) {
				if (!this.name) {
					uni.showToast({
						title: '请输入姓名!',
						icon: 'none'
					})
					return
				}
				if (!this.mobile) {
					uni.showToast({
						title: '请输入手机号!',
						icon: 'none'
					})
					return
				}
				let data = {
					activity_id: this.prop.id,
					name: this.name,
					mobile: this.mobile
				}
				this.$u.post('/page/sign-up-activity', data).then(res => {
					console.log(res, '报名提交成功')
					this.show = false
					uni.reLaunch({
						url: '../organization/success'
					})
				})
			},
			get_text(e) {
				console.log(e, '0000')
				this.query.title = e.detail.value
			},
			search() {
				this.page = 1
				this.my_list = []
				console.log(this.query, 'query')
				this.getList()
			},
			//获取活动
			getList() {
				this.query.page = this.page
				this.$u.get('/page/activities', this.query).then(res => {
					console.log(res, 'ppp')

					if (this.page > 1 && res.data.data.length == 0) {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						})
						this.last = true
					} else {
						this.my_list = this.my_list.concat(res.data.data)
						// this.my_list = this.my_list.map(item => {
						// 	item.start_time = item.start_time.slice(0, 10)
						// 	item.end_time = item.end_time.slice(0, 10)
						// 	return item
						// })
					}
				})
			},
			//点击下拉菜单
			search_type(e) {
				console.log(e, 'searchj')
			},
			//选择活动类型
			type_select(e) {
				console.log(e, 'tuyp')
				this.query.type_id = e
				this.page = 1
				this.last = false
				this.my_list = []
				this.getList()
				console.log(this.type, 'type')
			},
			//选择活动形式
			shape_select(e) {
				this.query.shape = e
				console.log(this.query.shape, 'this.query.shape')
				this.page = 1
				this.last = false
				this.my_list = []
				this.getList()
				console.log(this.shape, 'shape')
			},
			//获取类型配置
			get_setting() {
				this.$u.get('/setting/get-lists?key=ACTIVITY_TYPE').then(res => {
					console.log(res.data, 'leix')
					this.type = this.type.concat(res.data.data.map((item, index) => {
						return {
							label: item.value,
							value: item.id
						}
					}))
					console.log(this.type, '11111111')
					uni.setStorageSync('type', this.type)
				})
			},
			//获取活动形式
			get_shape() {
				this.$u.get('/common/enums').then(res => {
					console.log(res,'0000000000000')
					for(var key in res.data.ActivityShapeEnum){
						console.log(key,'key')
						this.shape.push({label: res.data.ActivityShapeEnum[key],
													value: key})
					}
					 
					console.log(this.shape,'shapoe')
					uni.setStorageSync('shape', this.shape)
				})
			},
			to_create() {
				if (this.vuex_token) {
					uni.navigateTo({
						url: './create_active',
						success: res => {
							console.log(111)
						},
						fail: (e) => {
							console.log(e)
						},
						complete: () => {}
					})
				} else {
					uni.reLaunch({
						url: '../login/index'
					})
				}

			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		// padding-top: 10px;
		background-color: #F9F9FB;
	}

	.active {
		padding: 0 0 20px;
		// background-color: #F9F9FB;

		//添加弹框
		.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;
				}
			}
		}

		.wrap {
			position: fixed;
			width: 100%;
			background-color: #F9F9FB;
			top: 0;
			z-index: 12;
			height: 140px;			
		}
		.wrap1{
			height: 160px;
		}


		.top_wrap {
			position: fixed;
			// top: 40px;
			top: 0;
			left: 16px;
			right: 16px;
			z-index: 12;
			// background-color: #F9F9FB;

		}

		// .top_wrap1 {
		// 	position: fixed;
		// 	// top: 10px;
		// 	left: 16px;
		// 	right: 16px;
		// 	z-index: 12;
		// 	background-color: #F9F9FB;
		// }

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding: 0 16px;
			// padding-top: 10px;
			margin-top: 10px;
			height: 52px;

			.search {
				display: flex;
				align-items: center;
				height: 52px;
				box-shadow: 0px 8px 16px rgba(12, 20, 61, 0.06);
				border-radius: 10px;
				flex-shrink: 0;
				margin-right: 14px;
				flex: 1;

				image {
					width: 16px;
					height: 16px;
					margin-left: 20px;
					margin-right: 20px;
				}
			}


			.search_right {
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #84705E;
				// width: 48px;
				height: 39px;
				text-align: center;

				image {
					width: 25px;
					height: 20px;
				}

				text {
					display: block;
				}

			}
		}

		.top1 {
			margin-top: 50px
		}




		.menu {
			height: 40px;
			// margin-top: 100px;
			margin-top: 20px;
			// overflow: hidden;
		}

		.close {
			overflow: hidden;
		}

		.active_list {
			padding: 120px 16px 0;
			// padding: 0 16px;
			// margin-top: 120px;
			.empty {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				font-family: PingFang HK;
				font-weight: 400;
				line-height: 20px;
				color: #696969;
				opacity: 0.47;

				image {
					width: 94px;
					height: 51px;
					margin-bottom: 25px;
				}
			}

			.item {
				// height: 113px;
				background: #FFFFFF;
				box-shadow: 0px 8px 12px rgba(12, 20, 61, 0.06);
				border-radius: 10px;
				display: flex;
				align-items: center;
				margin-top: 14px;
				padding: 16px 10px;
				&:first-child{
					// margin-top: 45px;
				}
				.img {
					width: 100px;
					height: 92px;
					overflow: hidden;
					border-radius: 6px;
					flex-shrink: 0;
					margin-right: 8px;

					image {
						width: 100px;
						height: 92px;
					}
				}

				.right {
					width: 100%;

					.title {
						font-size: 15px;
						font-family: Graphit;
						font-weight: 500;
						color: #282828;
						overflow: hidden;
						-webkit-line-clamp: 1;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}

					.logo {
						display: flex;
						align-items: center;
						font-size: 13px;
						font-family: Graphit;
						font-weight: 500;
						color: #696969;
						margin-top: 2px;

						image {
							width: 24px;
							height: 24px;
							border-radius: 50%;
							margin-right: 6px;
						}
					}

					.time {
						font-size: 12px;
						font-family: PingFang HK;
						font-weight: 400;
						color: #B2B2B2;
						margin-top: 2px;
						overflow: hidden;
						-webkit-line-clamp: 1;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;

						text:first-child {
							margin-right: 2px;

						}

						text:last-child {
							margin-left: 2px;
						}
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 6px;

						.free {
							font-size: 14px;
							font-family: PingFang HK;
							font-weight: 500;
							color: #79573D;
						}

						.btn {
							width: 80px;
							height: 22px;
							background: #79573D;
							border-radius: 6px;
							font-size: 12px;
							font-family: PingFang HK;
							font-weight: 400;
							line-height: 22px;
							color: #FFFFFF;
							text-align: center;
							margin-right: 10px;
						}

						.btn_over {
							background: #A0A0A0;
							width: 80px;
							height: 22px;
							border-radius: 6px;
							font-size: 12px;
							font-family: PingFang HK;
							font-weight: 400;
							line-height: 22px;
							color: #FFFFFF;
							text-align: center;
							margin-right: 10px;
						}

						.btn_check {
							background: #fff;
							width: 80px;
							height: 22px;
							border-radius: 6px;
							font-size: 12px;
							font-family: PingFang HK;
							font-weight: 400;
							line-height: 20px;
							color: #79573D;
							text-align: center;
							margin-right: 10px;
							border: 1px solid #79573D;
						}
					}
				}
			}
		}
	}
</style>