WenWuGuanJia/index_fenbao/XuanJiangYuan/bm_page.vue

<template>
	<view class="box">
		<u-navbar :title="activityTitle" autoBack :placeholder="true" bgColor="#fee1b9"></u-navbar>
		
		<view class="ban">
			<view class="hdjs_box">
				<view class="hdjs_tit">活动介绍</view>
				<view class="hdjs_xq" style="overflow: scroll">{{activityDesc}}</view>
			</view>
			
			<!--  -->
			<view class="ld">报名资料填写</view>
			<view class="radio_box">
				<u-radio-group
				  v-model="scheduleValue"
				  placement="column"
				 
				>
				  <u-radio
				    :customStyle="{marginBottom: '8px'}"
				    v-for="(item, index) in scheduleList"
				    :key="index"
				    :label="item.desc"
				    :name="item.id"
				    @change="scheduleChange"
				  >
				  </u-radio>
				</u-radio-group>
			</view>
			 
			<!-- 动态表单 -->
			<block v-for="item in signupParams" :key="item.id">
			     <view @click="getTitle(item)" class="" style="margin-top: 30rpx;">
			       <text >{{ item.title }}</text>
			       <!-- <text v-if="item.tip" class="tip">{{ item.tip }}</text> -->
			       <!-- 根据 type 属性决定渲染哪种类型的输入 -->
			       <u--input v-if="item.type === 'string'"
			               v-model="item.value"
								 border="surround"
			                @change="onInput"
			                :placeholder="item.tip" />
				
			      <u-radio-group   v-if="item.type === 'radio'" placement="column">
			         <u-radio v-for="(fruitName, fruitId) in item.params" :key="fruitId"
			                  :label="fruitName"
			                :name="fruitName"
							  @change="radioChange"
							  :customStyle="{ marginBottom: '8px', height: '30px' }"
							  >
			           <!-- {{ fruitName }} -->
			         </u-radio>
			       </u-radio-group>
				
			       <!-- 其他类型可以根据需要添加 -->
			     </view>
			   </block>

			<view class="bm_btn" @click="tjcyBtn">添加家庭成员</view>
			<view class="cy_box" v-for="(item,index) in cyList" :key="index">
				<view class=""  style="display: flex;">
					<view class="icon_box">
						<u-icon name="account" color="#000000" size="20"></u-icon>
					</view>
					<view style="margin-left: 20rpx">
						<view class="cy_name">{{item.name}}</view>
						<view class="cy_age">年龄:{{item.age}}</view>
						
					</view>
				</view>
			
				<view @click="removePassenger(index)" style="width: 60rpx;height: 60rpx;">
				<u-icon name="trash" color="#858789" size="20" ></u-icon>	
				</view>
			</view>
			<!--  -->
	
			<view class="tjbm_btn">提交报名</view>
			<!-- 阅读协议 -->
			<view class="ydxy">
			 <u-checkbox-group @change="xyShow=!xyShow" >
			 	<u-checkbox v-model="xyShow" shape="circle" ></u-checkbox>
			 </u-checkbox-group>
				<view class="" @click="volhow=true">
					阅读并同意《隐私政策》和《用户协议》
				</view>
			</view>

		</view>
	
		<!-- 协议弹层 -->
		<u-popup bgColor="#f2c8a2" :show="volhow"  mode="center" customStyle="width:600rpx;padding: 30rpx;" round="20rpx">
			<view style="text-align: center; font-size: 30rpx">请阅读以下协议</view>
			<view style="margin-top: 20rpx"></view>
			<view class="bt_box">
				
				<view @click="volhow=false" class="bt2">我已知悉</view>
			</view>
		</u-popup>

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

<script>
	let that;
export default {
	data() {
		return {
			 signupParams : [
				 // {
				 //     id: 1,
				 //     name: "fruit",
				 //     group: "basic",
				 //     title: "请选择参赛类型",
				 //     tip: "请选择一款水果",
				 //     type: "radio",
				 //     value: "",
				 //     content: { 1: "1.5公里线路(适合家庭及儿童)", 2: "3公里线路(适合初学者)", 3: "5公里线路(适合跑步爱好者)" },
				 //     rule: "required"
				 // },
			    {
			        id: 2,
			        name: "name",
			        group: "basic",
			        title: "姓名",
			        tip: "请填写姓名",
			        type: "string",
			        value: "张宁",
			        rule: "required"
			    },
				{
				    id: 3,
				    name: "name",
				    group: "basic",
				    title: "年龄",
				    tip: "请填写年龄",
				    type: "string",
				    value: "18",
				    rule: "required"
				},
			 {
			     id: 4,
			     name: "name",
			     group: "basic",
			     title: "手机",
			     tip: "请填写手机号",
			     type: "string",
			     value: "1866166265",
			     rule: "required"
			 },
		 
			],
			activityId: 1,
			activityDesc: '',
			activityTitle: '',
			volhow:false,
			xyShow:false,
			mobile: '',
			mailbox: '',
			// 家庭成员
			cyList:[],
			ydxyShow:false,
			// 默认选中第一个
			scheduleValue: 1,
			scheduleList: [],
			params:{
				scheduleValue: 1,
			}
		};
	},
	onLoad(option) {
		console.log(option);
		that = this;
		that.activityId = option.id;
		that.activityDesc = option.desc;
		that.activityTitle = option.title;
		that.getActivityScheduleList(that.activityId);
		that.getActivitySignupParams(that.activityId);
		this.loadPassengers();
	},
	methods: {
		//获取活动日程列表
		getActivityScheduleList(id) {
			this.$api.activityScheduleList(
				{
					activity_id: id
				},
				data => {
					if (data.code == 0) {
						that.$common.errorToShow(data.msg);
						return;
					} else {
						that.scheduleList = data.data;
						// console.log(that.scheduleList);
					}
				}
			);
		},
		//获取活动报名参数
		getActivitySignupParams(id) {
			this.$api.activitySignupParams(
				{
					activity_id: id
				},
				data => {
					if (data.code == 0) {
						that.$common.errorToShow(data.msg);
						return;
					} else {
						that.signupParams = data.data;
						console.log(that.signupParams);
					}
				}
			);
		},
		  // 从本地存储中获取乘客信息
		loadPassengers() {
		    const storedSelectedPassengers = uni.getStorageSync('selectedPassengers');
		    if (storedSelectedPassengers) {
				this.cyList = storedSelectedPassengers;
		    } else {
		        this.cyList = [];
		    }
		},
		getTitle(title) {
				console.log(title, 'title');
		},
		radioChange(n) {
			console.log(n, 'n');
			let title = '性别';
			that.params[title] = n;
			console.log(that.params);
		},
		scheduleChange(n) {
			that.scheduleValue = n;
			that.params.scheduleValue = n;
			console.log(that.params);
	        console.log('scheduleChange',that.scheduleValue);
	      },
		onInput(e) {
			// 更新字符串值
			console.log(e)
		},
  tjcyBtn(){
	uni.navigateTo({
		url: '/index_fenbao/XuanJiangYuan/ck_page'
	});
},
  removePassenger(index) {
       // 移除乘客并更新本地存储
       this.cyList.splice(index, 1);
       // 更新本地存储中的乘客信息
       uni.setStorageSync('passengers', this.cyList);
       // 提示删除成功
       uni.showToast({
         title: '删除成功',
         icon: 'success'
       });
     }
   
	}
};
</script>

<style>
.box {
	min-height: 100%;
height: auto;
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/gj_bg.png');
	background-repeat: repeat-y;
	background-size: 100%;
}
.ban {
	width: 92%;
	margin: auto;
}
.top_tit {
	width: 100%;
	height: 60rpx;
	color: black;
	line-height: 60rpx;
	text-align: center;
	font-size: 30rpx;
	background-color: #fee1b9;
}
.hdjs_box {
	height: 200rpx;
	color: black;
	margin-top: 10rpx;
	border-radius: 10rpx;
	padding: 20rpx;
	background-color: #fff0e3;
}
.hdjs_box2 {
	color: black;
	margin-top: 10rpx;
	border-radius: 10rpx;
	margin-bottom: 30rpx;
	padding: 20rpx;
	background-color: #fff0e3;
}
.hdjs_tit {
	font-size: 30rpx;
}
.hdjs_xq {
	margin-top: 10rpx;
	font-size: 26rpx;
}
.ld {
	font-size: 30rpx;
	font-weight: 700;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}
.u-input.data-v-113bc24f {
	background-color: #fee1b9 !important ;
	margin-top: 20rpx;
}
.bm_btn {
	width: 100%;
	height: 80rpx;
	font-size: 30rpx;
	line-height: 80rpx;
	text-align: center;
	color: black;
	border-radius: 10rpx;
	background-color: #fee1b9;
	margin-top: 20rpx;
}.bt2 {
	width: 244rpx;
	height: 78rpx;
	background: #ca5642;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: #ffffff;
}
.cy_box {
	display: flex;
	margin-top: 20rpx;
	justify-content: space-between;
}
.icon_box {
	width: 90rpx;
	height: 90rpx;
	display: flex;
	justify-content: center;
	background-color: #fee1b9;
	border-radius: 10rpx;
}
.cy_name {
	color: black;
	font-size: 28rpx;
	line-height: 50rpx;
}
.cy_age {
	font-size: 24rpx;
	color: #858789;
}
.bt_box {
	display: flex;
	margin-top: 50rpx;
	justify-content: space-around;
}
.tjbm_btn {
	width: 100%;
	height: 80rpx;
	font-size: 30rpx;
	line-height: 80rpx;
	text-align: center;
	color: #ffffff;
	border-radius: 10rpx;
	background-color: #fb5a02;
	margin-top: 50rpx;
}
.ydxy{
	display: flex;
align-items: center;
	margin-top: 20rpx;
	height: 50rpx;

	font-size: 24rpx;
	color:#03A9F4;
}
.radio_box{
	background-color: #fee1b9;
	padding: 20rpx;
	border-radius: 10rpx;
}
</style>