WenWuGuanJia/index_fenbao/XuanJiangYuan/xq_page.vue

<template>
	<view class="box">
		<u-navbar title="厦门文物跑活动报名" 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">厦门文物跑活动旨在打造一场具有文化认同感的跑步之旅，号召公众关注及保护珍贵文物古迹，用脚步.</view>
			</view>
			
			<!--  -->
			<view class="ld">报名资料填写</view>
			<!-- 动态表单 -->
			<block v-for="(item,index) in configItems" :key="item.id">
			     <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"
			                :placeholder="item.tip" />
				
			       <u-radio-group   v-if="item.type === 'radio'" placement>
			         <u-radio v-for="(fruitName, fruitId) in item.content" :key="fruitId"
			                  :label="item.content[fruitId]"
			                :name="fruitId"
							  @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 in cyList" :key="index">
				<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 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>
export default {
	data() {
		return {
			 configItems : [
				 {
				     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"
			 },
		 
			],
			volhow:false,
			xyShow:false,
			mobile: '',
			mailbox: '',
			// 家庭成员
			cyList:[],
			ydxyShow:false,
			// 默认选中第一个
			radiovalue: 1,
			radioList: [
				{
					name: '1.5公里线路(适合家庭及儿童)',
					id: 1
				},
				{
					name: '3公里线路(适合初学者)',
					id: 2
				},
				{
					name: '5公里线路(适合跑步爱好者)',
					id: 3
				}
			]
		};
	},
	onShow() {
	    // 从本地存储中获取乘客信息
	    const storedPassengers = uni.getStorageSync('passengers');
	    if (storedPassengers) {
			console.log(storedPassengers,'storedPassengers')
	      this.cyList = storedPassengers;
	    }
	  },
	methods: {
		radioChange(n) {
			// 拿到的content对应的key
			console.log('radioChange', n,);
		
		},
  onInput(e) {
      // 更新字符串值
    console.log(e)
    },
  tjcyBtn(){
	uni.navigateTo({
		url: '/index_fenbao/XuanJiangYuan/ck_page'
	});
}
	}
};
</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-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;
}
.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;
}
</style>