<style>
	.activeSignUp {
		height: 100vh;
		/* padding: 30rpx; */
	}

	.activeSighTitle {
		width: 100%;
		margin: 10rpx 0 40rpx 0;
		font-size: 35rpx;
		font-weight: bold;
	}

	.activeSignName {
		font-size: 28rpx;
		color: #1F1F1F;
		font-weight: bold;
	}

	.activeSign_Input {
		border-bottom: 1px solid #DADCE6;
		padding: 10rpx 0 20rpx 0;
	}

	.activeMainDiv {
		margin-bottom: 30rpx;
	}
	.activeSignAdd{
		display: flex;
		justify-content: flex-end;
	}
	.active_Nature text{
		display:inline-block;
		padding:6rpx 10rpx;
		background-color: gray;
		color:black;
		margin:0 30rpx 20rpx 0;
		border-radius: 10rpx;
	}
	.active_InTitle{
		font-size:30rpx;
		font-weight: bold;
		margin-bottom:30rpx;
	}
	.active_InTitle text{
		color:red;
		margin-right:5rpx;
	}
	.checkedNature{
		background-color: pink;
		color:red;
	}
	.activeTopImg{
		width:100%;
		height:150px;
	}
	.active_Main{
		width:100%;
		height:100%;
		background-color: #000815;
	}
</style>
<template>
	<view class="activeSignUp">
		<view class="activeTopImg">
            <image mode="heightFit" style="width:100%;height:100%" src="@/static/images/signBack.png" />
		</view>
		<view class="active_Main">
			<view style="width:100%;height:33px;">
				<image mode="heightFit" style="width:100%;height:100%" src="@/static/images/signJuan.png" />
			</view>
			<view class="activeSighTitle">
				2021中国（成都）首店经济发展大会参会回执
			</view>
			<view class="active_InTitle">
				<text>*</text>
				基础信息
			</view>
			<view class="activeMainDiv">
				<view class="activeSignName">单位/企业/机构名称</view>
				<input class="activeSign_Input" v-model="signMsg.CompanyName" />
			</view>
			<view class="activeMainDiv">
				<view class="activeSignName" style="margin-bottom:30rpx;">性质（单选）</view>
				<view class="active_Nature">
					<text v-for="(item,index) in natureList" @click="getckedId(item,index)" :class="{'checkedNature':commonIndex==index}" :key="index">{{item.Name}}</text>
				</view>
			</view>
			<view class="activeSignAdd">
				<u-icon class="u-icon" name="add-o" size="80" :color="mc"></u-icon>
			</view>
			<view>
				<view class="activeMainDiv">
					<view class="activeSignName">姓名</view>
					<input class="activeSign_Input" />
				</view>
				<view class="activeMainDiv">
					<view class="activeSignName">职务</view>
					<input class="activeSign_Input" />
				</view>
				<view class="activeMainDiv">
					<view class="activeSignName">所属国籍/省/市</view>
					<input class="activeSign_Input" />
				</view>
				<view class="activeMainDiv">
					<view class="activeSignName">手机号</view>
					<input class="activeSign_Input" />
				</view>
			</view>
			<view>
				<u-button size="80" :ripple="true" shape="circle" :custom-style="{
				  backgroundColor: mc,
				  height: '80rpx',
				  color: '#FFF',
				  fontSize: '14px',
				  margin: '0 3vw',
				  width: '40vw',
				}" @click="goSignUp()">立即报名</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				mc: "",
				value:1,
				natureList: [], //性质数组
				commonIndex:-1,
				signMsg:{
					ActivityIds:'7,8,9',
					CompanyName:'成都微途科技',
					Nature:'1',
					Remark:'',
					FirstShopLinkManList:[{
						LinkMan:'张三',
						LinkTel:'12345678',
						Post:'总经理',
						CountryInfo:'中国四川省成都市'
					}]
				}
			}
		},
		created() {},
		mounted() {
			this.mc = this.$uiConfig.mainColor;
			this.getNatureList();
		},
		onLoad(options) {
			console.log(options,'optionssss');
			uni.setNavigationBarTitle({
			  title: "活动报名",
			});
			uni.setNavigationBarColor({
			  frontColor: "#ffffff",
			  backgroundColor: "#000",
			  animation: {
			    duration: 400,
			    timingFunc: "easeIn",
			  },
			});
		},
		methods: {
			//获取性质
			getNatureList() {
				this.request2({
						url: "/api/AppletTrade/GetNatureEnumList",
						data: {},
					},
					(res) => {
						if (res.resultCode == 1) {
							console.log(res,'数据');
							this.natureList = res.data;
						}
					}
				);
			},
			//点击性质
			getckedId(item,index){
				this.commonIndex = index;
				this.signMsg.Nature = item.Id;
			},
			//立即报名
			goSignUp(){
				this.request2({
						url: "/api/AppletTrade/SetFirstShopActivityEnroll",
						data: this.signMsg,
					},
					(res) => {
						if (res.resultCode == 1) {
							console.log(res,'数据');
						}
					}
				);
			}
		},
	}
</script>

<style>
</style>
