完成活动详情页、确认报名页面UI

common/js/mixin.js

@@ -105,7 +105,7 @@ export default{
 			if(beforePage && beforePage.route){
 				uni.navigateBack();
 			}else{
-				uni.switchTab({url:'/pages/index/index'});
+				uni.reLaunch({url:'/pages/index/index/index'});
 			}
 		}
 	}

components/index-nav/index-nav.vue

@@ -50,7 +50,7 @@ export default {
 			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
 			name: '会员服务'
 		},{
-			link: '/pages/index/eventRegistration/eventRegistration',
+			link: '/pages/index/activity/hot',
 			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
 			name: '活动报名'
 		},{

pages.json

@@ -797,12 +797,26 @@
 			}
 		},
 		{
-			"path" : "pages/index/eventRegistration/eventRegistration",
+			"path" : "pages/index/activity/hot",
 			"style" : {
 				"navigationBarTitleText": "热门活动",
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path" : "pages/index/activity/detail",
+			"style" : {
+				"navigationBarTitleText": "活动详情",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/index/activity/confirm",
+			"style" : {
+				"navigationBarTitleText": "确认报名",
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path" : "pages/user/member/code",
 			"style" : {

pages/index/activity/confirm.vue

@@ -0,0 +1,84 @@
+<template>
+	<view>
+		<lf-nav title="确认报名" :showIcon="true"></lf-nav>
+		<view class="content">
+			<view class="title">联系人信息</view>
+			<view class="list">
+				<view class="label">姓名</view>
+				<input v-model="name" class="input" placeholder="请输入您的姓名" />
+			</view>
+			<view class="list">
+				<view class="label">手机号</view>
+				<input v-model="phone" class="input" placeholder="请输入您的手机号" maxlength="11" />
+			</view>
+		</view>
+		<view class="fixed-btn" hover-class="lf-opacity" @click="confirm">确认报名（免费）</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				name: '',
+				phone: ''
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			confirm(){
+				if(!this.name || !this.phone) return this.$msg('请将信息补充完整');
+				this.$msg('报名成功').then(() => {
+					this.$toBack();
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		width: 750rpx;
+		height: max-content;
+		padding: 40rpx 32rpx;
+		box-sizing: border-box;
+		.title{
+			font-size: 32rpx;
+			color: #222222;
+			font-weight: bold;
+			margin-bottom: 20rpx;
+		}
+		.list{
+			width: 100%;
+			height: 100rpx;
+			border-bottom: 1rpx solid #e5e5e5;
+			display: flex;
+			align-items: center;
+			margin-top: 10rpx;
+			.label{
+				width: 130rpx;
+				font-size: 28rpx;
+				color: #777777;
+			}
+			.input{
+				width: 554rpx;
+				font-size: 28rpx;
+			}
+		}
+	}
+	.fixed-btn{
+		position: fixed;
+		bottom: 10vh;
+		left: calc(50% - 275rpx);
+		width: 550rpx;
+		height: 100rpx;
+		background-color: #15716E;
+		color: #FFFFFF;
+		text-align: center;
+		line-height: 100rpx;
+		font-size: 32rpx;
+		border-radius: 50rpx;
+	}
+</style>

pages/index/activity/detail.vue

@@ -0,0 +1,104 @@
+<template>
+	<view>
+		<lf-nav title="活动详情" :showIcon="true"></lf-nav>
+		<view class="content">
+			<view class="title">海蓝之谜美颜会 9月15日场10:30场</view>
+			<view class="level2-title">会员尊享美颜会</view>
+			<view class="level3-title">
+				<text>活动时间：</text>
+				<text class="color1">2021年9月15日 10:30-12:00场</text>
+			</view>
+			<view class="level3-title">
+				<text>报名时间：</text>
+				<text class="color2">即日起-9月12日24:00</text>
+			</view>
+			<view class="level3-title">
+				<text>活动内容：</text>
+				<text class="color2">美白课堂+现场DIY甜橙茶</text>
+			</view>
+			<view class="level3-title">
+				<text>活动人数：</text>
+				<text class="color2">5人</text>
+			</view>
+			<view class="level3-title">
+				<text>活动报名：</text>
+				<text class="color1">免费</text>
+			</view>
+			<view class="level3-title">
+				<view>活动规则：</view>
+				<view class="color2">
+					<view>1、金卡及以上会员可免费报名参加，每个ID仅可报名一场活动（以每个第一次报名场次为准，超出报名次数不予审核通过）；</view>
+					<view>2、报名成功后，店铺会在活动前一天联系您报名的手机号；</view>
+					<view>3、如有疑问，请致电海蓝之谜店铺联系电话：0315-743843474</view>
+				</view>
+			</view>
+			<button class="btn" 
+				hover-class="lf-opacity" 
+				:disabled="is_end" 
+				:class="{'lf-opacity': is_end}"
+				@click="submit">{{ is_end ? '名额已满' : '立即报名' }}
+			</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				is_end: false // 是否可报名，false为活动为结束可报名，否则不可报名
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			submit(){
+				if(this.is_end) return;
+				this.$url('/pages/index/activity/confirm');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		width: 750rpx;
+		height: max-content;
+		padding: 30rpx 32rpx;
+		box-sizing: border-box;
+		.title{
+			font-size: 36rpx;
+			color: #222222;
+			font-weight: bold;
+			min-height: 100rpx;
+		}
+		.level2-title{
+			font-size: 28rpx;
+			color: #222222;
+			font-weight: bold;
+			margin-top: 20rpx;
+		}
+		.level3-title{
+			margin-top: 30rpx;
+			font-size: 28rpx;
+			color: #777777;
+		}
+		.btn{
+			width: 550rpx;
+			height: 100rpx;
+			line-height: 100rpx;
+			background-color: #15716E;
+			border-radius: 50rpx;
+			color: #FFFFFF;
+			font-size: 32rpx;
+			margin-top: 60rpx;
+		}
+	}
+	.color1{
+		color: #F63434;
+	}
+	.color2{
+		color: #222222;
+	}
+</style>

pages/index/eventRegistration/eventRegistration.vue → pages/index/activity/hot.vue

@@ -8,7 +8,7 @@
 			<swiper-item v-for="(item, index) in tab_list" :key="index">
 				<scroll-view :style="{height: autoHeight}" :scroll-y="true">
 					<view class="scroll-content">
-						<view class="card" v-for="(item, index) in 3" :key="index">
+						<view class="card" v-for="(item, index) in 3" :key="index" @click="$url('/pages/index/activity/detail')">
 							<view class="cover">
 								<image class="img"></image>
 							</view>