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="activity_schedule_id"
				  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">
			   <!-- @click="getTitle(item)" -->
				 <view  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(item)"
			                :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="item.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="removeMembers(index)" style="width: 60rpx;height: 60rpx;">
				<u-icon name="trash" color="#858789" size="20" ></u-icon>	
				</view>
			</view>
			<!--  -->
	
			<view class="tjbm_btn" @click="submitActivitySignupInfo">提交报名</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 class="bt2" @click="volhow=false">我已知悉</view>
			</view>
		</u-popup>

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

<script>
	let that;
export default {
	data() {
		return {
			radioName: '',
			signupParams : [],
			activityId: 1,
			activityDesc: '',
			activityTitle: '',
			volhow:false,
			xyShow:false,
			// 家庭成员
			cyList:[],
			ydxyShow:false,
			// 默认选中第一个
			activity_schedule_id: 1,
			scheduleList: [],
			params:{
				activity_schedule_id: 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);
		that.params.activity_id = option.id;
	}, 
	onShow() {
		// console.log(uni.getStorageSync('selectedMembers'), 'selectedMembers');
		that.loadMembers();
	},
	computed: {
		// 筛选出 type 为 radio 的数据
		radioItems() {
		  return this.signupParams.filter((item) => item.type === "radio");
		},
	},
	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;
						//这边需要把每个参都存到params里面
						that.signupParams.forEach((item) => {
							that.params[item.name] = '';
						});
						console.log(that.params,'sparams');
						// console.log(that.signupParams,'that.signupParams')
					}
				}
			);
		},
		submitActivitySignupInfo() {
			console.log(that.xyShow);
			if (that.xyShow === false) {
				that.$common.errorToShow('请阅读并同意协议');
				return;
			}
			let params = that.params;
			if (that.cyList.length === 0) {
				that.$common.errorToShow('请选择报名成员');
				return;
			}
			params.identities = that.cyList.map(item => item.id).join(",");
			console.log(params, 'params');
			this.$api.submitActivitySignupInfo(params,
				data => {
					if (data.code == 0) {
						that.$common.errorToShow(data.msg);
						return;
					} else {
						that.$common.successToShow(data.msg);
						if (data.code == 1) {
							setTimeout(
								function(){
								  uni.navigateBack({
									delta: 1
								  });
							}, 1500);
						}
					}
				}
			);
		},
		volhowChange(volhow){
			that.volhow = !volhow;
			console.log(that.volhow);
		},
		radioChange(n) {
			const [field, value] = n.split("-");
			let title = field;
			that.params[title] = value;
			// console.log(that.params,'that.params');
		},
		scheduleChange(n) {
			that.activity_schedule_id = n;
			that.params.activity_schedule_id = n;
			// console.log(that.params);
	        // console.log('scheduleChange',that.activity_schedule_id);
	    },
		onInput(item) {
			that.$set(that.params, item.name, item.value); // 使用Vue的$set方法保证响应式
			// console.log('this.params:', this.params);
		},
		tjcyBtn(){
			uni.navigateTo({
				url: '/index_fenbao/XuanJiangYuan/ck_page'
			});
		},
		  // 从本地存储中获取乘客信息
		loadMembers() {
		    const storedSelectedMembers = uni.getStorageSync('selectedMembers');
			// console.log(storedSelectedMembers, 'storedSelectedMembers')
		    if (storedSelectedMembers) {
				that.cyList = storedSelectedMembers;
		    } else {
		        that.cyList = [];
		    }
		},
		removeMembers(index) {
		   // 移除乘客并更新本地存储
		   that.cyList.splice(index, 1);
		   // 更新本地存储中的乘客信息
		   uni.setStorageSync('selectedMembers', that.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>