<template>
	<view class="box hasfixedbottom">
		<view class="box1">
			<trainFold title="培训费" :cost="signInfo.trainFee" :text="signInfo.trainCount + '项'">
				<view class="conter-liner" v-for="item in signInfo.trainList" :key="item.id">
					<view class="liner-left">{{ item.name }}</view>
					<view class="liner-right">{{ item.price }}元</view>
				</view>
			</trainFold>
		</view>
		<view class="box1">
			<trainFold title="考试费" :cost="signInfo.examFee" :text="signInfo.examCount  + '项'">
				<view class="conter-liner" v-for="item in signInfo.examList" :key="item.id">
					<view class="liner-left">{{ item.name }}</view>
					<view class="liner-right">{{ item.price }}元</view>
				</view>
			</trainFold>
		</view>
		<view class="fixedBottom">
			<view class="big-right">
				合计:
				<text class="text-warning">{{ signInfo.totalFee }}</text> 元
			</view>
		</view>

	</view>
</template>

<script setup>
import { ref, getCurrentInstance, reactive, toRef, toRefs } from 'vue';
import { onLoad, onReady, onShareAppMessage, onShareTimeline, onPullDownRefresh } from '@dcloudio/uni-app';
import trainFold from '@/myCenter/mytrain/fold.vue';
import * as my from '@/myCenter/center_api.js';
const data = reactive({
	id:'',
	signInfo:{}
});
const { id,signInfo } = toRefs(data);


onLoad(option => {
	id.value = option.id;
	initData()
});

// 获取用户支付信息
function initData() {
	my.getSignInfo({
    activityId:id.value
  }).then(res=>{
	      signInfo.value = res.data
	      signInfo.value.receivingInfo = params.receivingInfo

  })
}




</script>

<style scoped lang="scss">
	.fixedBottom{justify-content: end;padding:30rpx;    align-items: baseline;
		.small-left{font-size: 28rpx;color: #999;display: flex;
			view{margin-right:20rpx;}
		}
		.big-right{ text-align: right;}
	}
.box {
	padding: 35rpx 25rpx;
	padding-bottom: 100rpx;

	.box1 {
		background-color: #fff;
		margin-bottom: 40rpx;
		padding: 10rpx;
		border-radius: 15rpx;

		.text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #2b3133;
		}

		.conter-liner {
			display: flex;
			justify-content: space-between;
			margin-top: 32rpx;
			padding-bottom: 30rpx;

			.liner-left {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #7b7f83;
			}

			.liner-right {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ff8124;
			}
		}
	}

	.box2 {
		padding: 10rpx;

		.text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #2b3133;
			margin-bottom: 40rpx;
		}

		.conter {
			background-color: #fff;
			border-radius: 15rpx;
			padding: 25rpx 10rpx;
		}

		.radio {
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.radio-cost {
				display: flex;

				.left {
					width: 50rpx;
					height: 50rpx;

					.image {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.radio-right {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
					margin-left: 10rpx;
				}

				.vip {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #4c5359;
				}
			}
		}
	}

	.box3 {
		display: flex;
		justify-content: space-between;
		border: 1rpx solid #dcdcdc;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;

		.left {
			display: flex;
			line-height: 100rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #7b7f83;
			padding-left: 30rpx;

			.cost {
				font-size: 45rpx;
				font-family: DIN Alternate;
				font-weight: bold;
				color: #ff8124;
				padding-left: 10rpx;
			}
		}

		.ToPay {
			background: #ff8124;
			border: 1px solid #dcdcdc;
			color: #fff;
			width: 214rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
		}
	}
}

.dialog {
	width: 95%;
	background-color: #000;
	border-radius: 30rpx;
	padding: 50rpx 0;
	margin: 0 auto;
	opacity: 0.8;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	.size {
		color: #fff;
		text-align: center;
	}

	.butotn {
		margin: 0 auto;
		margin-top: 63rpx;
		width: 268rpx;
		height: 80rpx;
		background: linear-gradient(270deg, #54e1b9, #00caa6);
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}
}
</style>