ChuangHengWx/pagesPublish/rechargeCenter.vue

<template>
	<view class="default_page adffc" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='充值中心' bgColor="transparent"></cus-header>
		<div class="info adfac">
			<div class="info-left">
				<image :src="avatar"></image>
			</div>
			<div class="info-right">
				<div class="info-right-name">{{'龙傲天'}}</div>
				<div class="info-right-tip">{{'尚未激活问卷，无法开始PREILL评估'}}</div>
			</div>
		</div>
		<div class="box">
			<div class="box-tab adfacjb">
				<div class="box-tab-pre" :class="{'active':tindex===index}" 
					v-for="(item,index) in tabList" :key="index" @click="changeTab(index)">{{item}}</div>
			</div>
			<template v-if="tindex===0">
				<div class="box-price adf">
					<div class="box-price-pre adffcac" :class="{'active':pindex===index}"
						v-for="(item,index) in priceList" :key="index" @click="changePrice(item,index)">
						<div class="box-price-pre-once" v-if="index===0">限时优惠</div>
						<div class="box-price-pre-times">{{item.times}}</div>
						<div class="box-price-pre-money"><span>￥</span>{{item.money}}<span v-if="index===priceList.length-1">/次</span></div>
						<div class="box-price-pre-bottom">{{item.tip}}</div>
					</div>
				</div>
				<div class="box-other adfacjb" v-if="pindex===priceList.length-1">
					<div class="box-other-left">其他次数</div>
					<div class="box-other-right">
						<cus-number-box :min="otherTimes" :number="otherTimes" @valueChange="valueChange"></cus-number-box>
					</div>
				</div>
			</template>
			<div class="box-memo">
				<div class="box-memo-title">服务条款说明</div>
				<div class="box-memo-p">
					1、未激活的问卷：付费后使用有效期1年，过期将不能使用。<br/>
					2、已进行中问卷：创建者可以设置答题截止时间，修改时间，以支持少数用户延期做问卷。<br/>
					3、其他次数不能低于10次。
				</div>
			</div>
			<div class="box-btn adfacjb">
				<div class="box-btn-left adfac">
					<div class="box-btn-left-text">实付</div>
					<div class="box-btn-left-money adfac"><span>￥</span>{{590}}<span style="margin-left: 9rpx;">/{{10}}次</span></div>
				</div>
				<div class="box-btn-right">确认协议并购买</div>
			</div>
		</div>
	</view>
</template>

<script>
	import CusNumberBox from '@/components/CusNumberBox/index.vue'
	export default {
		components:{ CusNumberBox },
		data(){
			return {
				avatar:this.$imgBase+'avatar.png',
				tabList:['基础版','专业版','专家版'],
				tindex:0,
				pindex:0,
				priceList:[
					{times:'1次',money:99,tip:'首次登录赠送1次'},
					{times:'5次',money:395,tip:'￥79/次'},
					{times:'10次',money:590,tip:'￥59/次'},
					{times:'超过10次',money:39,tip:'超过10次，¥39/次'}
				],
				otherTimes:11
			}
		},
		methods:{
			changeTab(index){
				this.tindex = index;
			},
			changePrice(item,index){
				this.pindex = index;
			},
			valueChange(val){
				this.otherTimes = val;
			}
		}
	}
</script>

<style scoped lang="scss">
	.default_page{
		padding: 0;
		background: #F9F6EE;
		box-sizing: border-box;
		
		.info{
			padding: 40rpx 36rpx 37rpx;
			&-left{
				width: 98rpx;
				height: 98rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			&-right{
				width: calc(100% - 98rpx);
				padding-left: 20rpx;
				box-sizing: border-box;
				&-name{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 36rpx;
					color: #795021;
					line-height: 32rpx;
				}
				&-tip{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #667E90;
					line-height: 24rpx;
					margin-top: 22rpx;
				}
			}
		}
		
		.box{
			flex: 1;
			overflow-y: auto;
			background: #FFFFFF;
			border-radius: 36rpx 36rpx 3rpx 3rpx;
			padding: 32rpx 30rpx 60rpx;
			
			&-tab{
				&-pre{
					width: calc(100% / 3);
					position: relative;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #667E90;
					line-height: 45rpx;
					text-align: center;
					&.active{
						font-weight: bold;
						color: #002846;
						&::after{
							content: '';
							width: 48rpx;
							height: 6rpx;
							background: #002846;
							border-radius: 3rpx;
							position: absolute;
							left: 50%;
							margin-left: -24rpx;
							bottom: -15rpx;
						}
					}
				}
			}
		
			&-price{
				margin-top: 34rpx;
				justify-content: space-between;
				flex-wrap: wrap;
				&-pre{
					width: calc(50% - 10rpx);
					margin-top: 16rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					border: 2rpx solid #FBEBCB;
					position: relative;
					&-once{
						width: 121rpx;
						height: 35rpx;
						background: linear-gradient( 270deg, #EF923B 0%, #EA4F27 100%);
						border-radius: 10rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 35rpx;
						text-align: center;
						position: absolute;
						left: 0;
						top: 0;
					}
					&-times{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #002846;
						line-height: 30rpx;
						text-align: center;
						margin-top: 36rpx;
					}
					&-money{
						font-family: D-DINCondensed, D-DINCondensed;
						font-weight: bold;
						font-size: 80rpx;
						color: #002846;
						line-height: 87rpx;
						margin-top: 20rpx;
						span{
							font-size: 54rpx;
							line-height: 59rpx;
						}
					}
					&-bottom{
						width: 100%;
						height: 56rpx;
						background: #FFF3CB;
						border-radius: 0rpx 0rpx 24rpx 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #95581C;
						line-height: 56rpx;
						text-align: center;
						margin-top: 31rpx;
					}
					
					&.active{
						background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/price_bg.png') no-repeat;
						background-size: 100% 100%;
						.box-price-pre-times,.box-price-pre-money{
							color: #955A1D;
						}
						.box-price-pre-bottom{
							background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/price_bottom2.png') no-repeat;
							color: #795021;
						}
					}
				}
			}
		
			&-other{
				margin-top: 51rpx;
				&-left{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #002846;
					line-height: 42rpx;
				}
			}
		
			&-memo{
				margin-top: 48rpx;
				&-title{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #667E90;
					line-height: 40rpx;
				}
				&-p{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #95A5B1;
					line-height: 40rpx;
					margin-top: 16rpx;
				}
			}
		
			&-btn{
				margin-top: 206rpx;
				width: 100%;
				height: 100rpx;
				background: linear-gradient(to right, #242424 0%, #575757 50%);
				border-radius: 24rpx;
				&-left{
					padding-left: 30rpx;
					&-text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 33rpx;
					}
					&-money{
						font-family: D-DINCondensed, D-DINCondensed;
						font-weight: bold;
						font-size: 48rpx;
						color: #FCEED2;
						line-height: 52rpx;
						margin-left: 9rpx;
						span{
							font-family: D-DINCondensed, D-DINCondensed;
							font-weight: bold;
							font-size: 24rpx;
							color: #FCEED2;
							line-height: 26rpx;
						}
					}
				}
				&-right{
					width: 365rpx;
					height: 100rpx;
					background: #11120F;
					border-radius: 24rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FCEED2;
					line-height: 100rpx;
					text-align: center;
					letter-spacing: 2rpx;
				}
			}
		}
	}
</style>