<style>
.stickSignUp {
  width: 100%;
  height: 100vh;
  background: #FFF;
 
}
.stickSignUp .box{
	padding: 15px;
	border-bottom: 1px solid #E2E2E2;
}
.stickSignUp .box-top{
	width: 100%;
	height: 67px;
	display: flex;
	align-items: center;
}
.stickSignUp .box-title{
	width: calc(100vw - 30px - 110px - 10px);
	height: 67px;
	font-size: 15px;
	color: #000000;font-weight: 500;
	line-height: 22px;
	margin-left: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.stickSignUp .box-c{
	padding: 15px;
	
}
.stickSignUp .box-c-i{
	width: 100%;
	height: 52px;
	display:flex;
	align-items: center;
	border-bottom: 1px solid #E2E2E2;
}
.stickSignUp .box-c-i input{
	font-size: 12px;
	width: calc(100vw - 30px - 70px);
}
.stickSignUp .box-c-l{
	width: 70px;
	font-size: 12px;
	color: #666666;
}
.btn{
	width: 100%;
	height: 45px;
	border-radius: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #FFFFFF;
	margin: 30px 0;
}
</style>

<template>
  <view class="stickSignUp" >
    <view class="box">
		<view class="box-top">
			<image :src="details.CoverImg" mode="aspectFill" style="width: 110px;height: 67px;border-radius: 8px;"></image>
			<view class="box-title">{{details.ActivityName}}</view>
		</view>
	</view>
	<view class="box-c">
		<view style="font-size: 16px;color: #111111;">请填写报名资料</view>
		<view class="box-c-i">
			<view class="box-c-l">姓名</view>
			<input type="text" v-model="addMsg.LinkMan" placeholder="请填写姓名">
		</view>
		<view class="box-c-i">
			<view class="box-c-l">联系电话</view>
			<input type="number" v-model="addMsg.LinkTel" placeholder="请填写联系电话">
		</view>
		<view class="box-c-i">
			<view class="box-c-l">报名人数</view>
			
			<u-number-box v-model="addMsg.PeopleNum" :min='1' @change="valChange"></u-number-box>
		</view>
		<view class="box-c-i">
			<view class="box-c-l">备注</view>
			<input type="text" v-model="addMsg.Remark" placeholder="请填写备注内容">
		</view>
		<view class="box-c-i" style="justify-content: flex-end;border-bottom: none;height: 35px;margin-top: 10px;">
			<view><text class="box-c-l">单价星星数：</text>{{addMsg.UnitPrice}}</view>
		</view>
		<view class="box-c-i" style="justify-content: flex-end;border-bottom: none;height: 35px;">
			<view><text  class="box-c-l">总价星星数：</text>{{addMsg.Money}}</view>
		</view>
		<view class="btn" @click="signup" :style="{background:mainColor}">
			报名
		</view>
	</view>
	
  </view>
</template>

<script>

export default {
  components: {
    
  },
  data() {
    return {
      pageTitle: "报名订单",
     mainColor:'',
	 details:{},
	 addMsg:{
		 ActivityId:0,
		 LinkMan:'',
		 LinkTel:'',
		 PeopleNum:1,
		 Remark:'',
		 UnitPrice:0,
		 Money:0,
	 }
    };
  },
  created() {
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
  },
  mounted() {
   
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
	
  },
  onLoad: function (option) {    
   this.details = JSON.parse(decodeURIComponent(option.details))
   this.addMsg.ActivityId = this.details.Id
   this.addMsg.UnitPrice = this.details.Price;
   this.addMsg.Money = this.addMsg.UnitPrice * this.addMsg.PeopleNum;
	
  },
  methods: {
	  valChange(e){
		  this.addMsg.PeopleNum = e.value
		  this.addMsg.Money = this.addMsg.UnitPrice * this.addMsg.PeopleNum;
		
	  },
	signup(){
		console.log(this.addMsg.PeopleNum)
		if(this.addMsg.LinkMan == ''){
			uni.showToast({
				title: '请填写姓名',
				icon: 'none',
			})
			return
		}
		if(this.addMsg.LinkTel == ''){
			uni.showToast({
				title: '请填写联系电话',
				icon: 'none',
			})
			return
		}
		this.request2({
				url: '/api/AppletTrade/SetCommerceConsult',
				data: this.addMsg
			},
			res => {
				if (res.resultCode == 1) {
					uni.showToast({
						title:'报名成功',
						icon: 'none',
						duration: 2000
					});
					setTimeout(()=>{
						uni.redirectTo({
							url: '/pages/kotra/baomingorder' 
						})
					},1000)
					
					
				}
			}
		);
	}
		
	


  },
};
</script>
