<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' :disabled='true' @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">
			<view class="box-c-l">支付方式</view>
			<u-radio-group v-model="addMsg.PaymentWay" >
				<u-radio 
					shape="circle"
					:active-color='mainColor'
					@change="radioChange" 
					v-for="(item, index) in list" :key="index" 
					:disabled="item.disabled"
					:name="item.Id"
				>
					{{item.name}}
				</u-radio>
			</u-radio-group>
		</view>
		<!-- <view class="box-c-i" v-if="details.IsFree==2" style="justify-content: flex-end;border-bottom: none;height: 35px;margin-top: 10px;">
			<view><text class="box-c-l">{{addMsg.PaymentWay==1?'现金单价:':'点数单价:'}} </text>{{addMsg.PaymentWay==1?addMsg.UnitPrice:addMsg.UnitPoint}}{{addMsg.PaymentWay==1?'元':'点'}}</view>
		</view> -->
		<view class="box-c-i" v-if="details.IsFree==2" style="justify-content: flex-end;border-bottom: none;height: 35px;">
			<view><text  class="box-c-l">{{addMsg.PaymentWay==1?'现金总价:':'点数总价:'}}</text>{{addMsg.PaymentWay==1?addMsg.Money:addMsg.TotalPoint}}{{addMsg.PaymentWay==1?'元':'点'}}</view>
		</view>
		<view class="box-c-i" v-if="details.IsFree==1" style="justify-content: flex-end;border-bottom: none;height: 35px;">
			<view class="box-c-l" style="text-align: right;">免费</view>
		</view>
		<view class="btn" @click="btnshow == true?signup():''" :style="{background:mainColor}">
			报名
		</view>
	</view>
	
  </view>
</template>

<script>

export default {
  components: {
    
  },
  data() {
    return {
      pageTitle: "报名订单",
     mainColor:'',
	 details:{},
	 addMsg:{
		 ActivityId:0,
		 LinkMan:'',
		 LinkTel:'',
		 Remark:'',
		 PeopleNum:1,
		 UnitPrice:0,
		 Money:0,
		 PaymentWay:1,
		 PayWay:1,
		 UnitPoint:0,
		 TotalPoint:0,
	 },
	 list: [{name: '在线支付',Id: 1,disabled:false},{name: '点数支付',Id: 6,disabled:false}],
	 orderInfo:{},
	 btnshow:true,
    };
  },
  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
   if(this.details.IsFree==1){
	   this.addMsg.PaymentWay = 6;
		this.list=[{name: '点数支付',Id: 6,disabled:false}]
   }else{
	   this.addMsg.UnitPrice = this.details.Price;
	   this.addMsg.UnitPoint = this.details.PointNum;
	   this.addMsg.Money = this.addMsg.UnitPrice * this.addMsg.PeopleNum;
	   this.addMsg.TotalPoint = this.addMsg.UnitPoint * this.addMsg.PeopleNum;
	   if(this.addMsg.UnitPrice==0){
		   this.addMsg.PaymentWay = 6;
		   this.list=[{name: '点数支付',Id: 6,disabled:false}]
	   }
	   if(this.addMsg.UnitPoint==0){
		   this.addMsg.PaymentWay = 1;
			this.list=[{name: '在线支付',Id: 1,disabled:false}]
	   }
   }
  
 
	
  },
  methods: {
	  valChange(e){
		  this.addMsg.PeopleNum = e.value
		  this.addMsg.Money = this.addMsg.UnitPrice * this.addMsg.PeopleNum;
		
	  },
	  radioChange(){
		  // console.log(this.addMsg.PaymentWay)
	  },
	signup(){
		
		this.btnshow= false
		if(this.addMsg.LinkMan == ''){
			uni.showToast({
				title: '请填写姓名',
				icon: 'none',
			})
			this.btnshow= true
			return
		}
		if(this.addMsg.LinkTel == ''){
			uni.showToast({
				title: '请填写联系电话',
				icon: 'none',
			})
			this.btnshow= true
			return
		}
		uni.showLoading({
		    title: '报名中'
		});
		if(this.addMsg.PaymentWay==6){
			this.addMsg.UnitPrice = 0;
			this.addMsg.Money = 0;
			this.addMsg.PayWay = 0
		}
		if(this.addMsg.PaymentWay==1){
			this.addMsg.UnitPoint = 0;
			this.addMsg.TotalPoint = 0;
			this.addMsg.PayWay = 1
		}
		this.request2({
				url: '/api/WeChatPay/SetActivityEnrollInfo',
				data: this.addMsg
			},
			res => {
				uni.hideLoading()
				if (res.resultCode == 1) {
					this.btnshow= true
					if(this.addMsg.PaymentWay==6){
						uni.showToast({
							title:'报名成功',
							icon: 'none',
							duration: 2000
						});
						this.getbackurl()//返回列表
					}else{
						this.orderInfo = JSON.parse(res.data);
						this.Pay()
					}
				}
			},
			error=>{
				console.log('进入错误')
				uni.hideLoading()
				this.btnshow= true
			}
		);
	},
	Pay(){
		let that=this;
		
		uni.requestPayment({
			provider: 'wxpay',
			timeStamp: this.orderInfo.timeStamp,
			nonceStr: this.orderInfo.nonceStr,
			package: this.orderInfo.package,
			signType: this.orderInfo.signType,
			paySign: this.orderInfo.sign,
			success: function(res) {
				console.log('success', res);
				uni.showToast({
					title: "支付成功"
				})
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 3]; // 前2个页面
				setTimeout(()=>{
					uni.navigateBack({
					    delta: 2,
						success: function() {
							beforePage.$vm.getorder(); // 执行前一个页面的方法
						}
					});
				},1000)
			},
			fail: function(err) {
				console.log('fail:', err);
				uni.showToast({
					title: "支付失败"
				})
			}
		});
	},
	getbackurl(){
		let pages = getCurrentPages(); // 当前页面
		let beforePage = pages[pages.length - 3]; // 前2个页面
		setTimeout(()=>{
			uni.navigateBack({
			    delta: 2,
				success: function() {
					beforePage.$vm.getorder(); // 执行前一个页面的方法
				}
			});
		},1000)
		
	}
		
	


  },
};
</script>
