充值中心静态页完成

App.vue

@@ -121,6 +121,10 @@
 	  display: flex;
 	  align-items: center;
 	}
+	.adffc{
+	  display: flex;
+	  flex-direction: column;
+	}
 	.adfacjc{
 	  display: flex;
 	  align-items: center;

components/CusNumberBox/index.vue

@@ -0,0 +1,82 @@
+<template>
+	<view class="box adfac">
+		<div class="box-btn l" @click="valueChange(1)">-</div>
+		<div class="box-input">
+			<u-input :min="min" v-model="value" @change="e=>valueChange(3,e)" @blur="valueBlur" border="none" fontSize="30rpx" color="#002846"></u-input>
+		</div>
+		<div class="box-btn r" @click="valueChange(2)">+</div>
+	</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			min:{
+				typeof:Number,
+				default:0
+			},
+			number:{
+				typeof:Number,
+				default:0
+			}
+		},
+		data(){
+			return {
+				value:0
+			}
+		},
+		mounted() {
+			this.value = this.number;
+		},
+		methods:{
+			valueChange(type,e){
+				if(type===1){
+					if(this.value<=this.min) return this.$showToast(`当前限制最小值为${this.min}`)
+					this.value--;
+				} 
+				else if(type===2) this.value++;
+				else if(type===3) this.value = e;
+				this.$emit('valChange',this.value)
+			},
+			valueBlur(e){
+				if(e<=this.min){
+					this.value = this.min;
+					return this.$showToast(`当前限制最小值为${this.min}`)
+				} 
+				this.value = e;
+				this.$emit('valChange',this.value)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	
+	.box{
+		background: #FFFFFF;
+		height: 64rpx;
+		border-radius: 10rpx;
+		border: 2rpx solid #E5E7EB;
+		&-btn{
+			width: 54rpx;
+			height: 64rpx;
+			background: #F5F8FA;
+			font-family: PingFangSC, PingFang SC;
+			font-weight: 400;
+			font-size: 30rpx;
+			color: #002846;
+			line-height: 64rpx;
+			text-align: center;
+			&.l{
+				border-radius: 10rpx 0rpx 0rpx 10rpx;
+			}
+			&.r{
+				border-radius: 0rpx 10rpx 10rpx 0rpx;
+			}
+		}
+		&-input{
+			width: 70rpx;
+			padding: 0 20rpx;
+		}
+	}
+</style>

pages.json

@@ -91,6 +91,19 @@
 			}
 		}
 	],
+	"subPackages": [
+		{
+			"root": "pagesPublish",
+			"pages": [
+				{
+					"path": "rechargeCenter",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				}
+			]
+		}
+	],
 	"globalStyle": {
 		"navigationBarTitleText": "创衡汇教练AI智能体",
 		"navigationBarBackgroundColor": "#FFFFFF",

pages/publish.vue

@@ -1,22 +1,181 @@
 <template>
 	<view class="tabPage" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
-		
+		<cus-header title='发布问卷' :showback="false"></cus-header>
+		<image :style="{'top':mt+'px'}" :src="imgBase+'publish_bg.png'" mode="widthFix"></image>
+		<div class="list">
+			<div class="list-item adfacjb" v-for="(item,index) in list" :key="index" @click="handleTurnPage('')">
+				<div class="list-item-left">
+					<div class="list-item-left-title">{{item.title}}</div>
+					<div class="list-item-left-type">{{typeDict[item.type]||'默认版'}}</div>
+				</div>
+				<image class="list-item-right" :src="imgBase+'publish_arrow_right.png'"></image>
+			</div>
+		</div>
+		<div class="dialog adffcacjc" v-if="buyShow">
+			<div class="dialog-box adffcac">
+				<image :src="imgBase+'new_free_close.png'" @click="buyShow=false"></image>
+				<div class="dialog-box-list adf">
+					<div class="dialog-box-list-item adffcac" v-for="(item,index) in buyImgList" :key="index">
+						<image :src="item.img"></image>
+						<text>{{item.text}}</text>
+					</div>
+				</div>
+				<div class="dialog-box-btn" @click="handleTurnPage('/pagesPublish/rechargeCenter')">立即购买</div>
+			</div>
+		</div>
+		<Tabbar :tabbarIndex="1"></Tabbar>
 	</view>
 </template>
 
 <script>
+	import Tabbar from '@/components/CusTabbar/index.vue'
 	export default {
+		components:{ Tabbar },
 		data(){
 			return {
-				
+				list:[
+					{ title:'GW+MC PREILL36测评题库版本', type:1 },
+					{ title:'GW+MC PREILL36测评题库版本', type:2 },
+					{ title:'PREILL BANK 模型问题库 CN120道', type:2 },
+				],
+				typeDict:{
+					1:'基础版',
+					2:'专业版'
+				},
+				buyShow:false,
+				buyImgList:[
+					{img:this.$imgBase+'buy_img1.png',text:'全球200+客户'},
+					{img:this.$imgBase+'buy_img2.png',text:'企业正念'},
+					{img:this.$imgBase+'buy_img3.png',text:'国际教练专业认证'},
+					{img:this.$imgBase+'buy_img4.png',text:'4A领导力'}
+				]
 			}
 		},
 		methods:{
-			
+			handleTurnPage(url){
+				if(!url) this.buyShow = true;
+				else uni.navigateTo({ url })
+			},
 		}
 	}
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
+	.tabPage{
+		padding: 0;
+		
+		&>image{
+			width: 100%;
+			position: absolute;
+			left: 0;
+			right: 0;
+		}
+		
+		.list{
+			margin-top: 369rpx;
+			position: relative;
+			padding: 0 24rpx;
+			&-item{
+				margin-top: 20rpx;
+				background: #FFFFFF;
+				border-radius: 24rpx;
+				padding: 40rpx 30rpx;
+				&:first-child{
+					margin-top: 0;
+				}
+				&-left{
+					width: calc(100% - 50rpx);
+					padding-right: 30rpx;
+					box-sizing: border-box;
+					&-title{
+						font-family: PingFang-SC, PingFang-SC;
+						font-weight: bold;
+						font-size: 30rpx;
+						color: #002846;
+						line-height: 42rpx;
+						text-overflow: ellipsis;
+						overflow: hidden;
+						white-space: nowrap;
+					}
+					&-type{
+						background: #FFEFB9;
+						border-radius: 8rpx;
+						margin-top: 20rpx;
+						padding: 2rpx 13rpx;
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #6F4611;
+						line-height: 33rpx;
+						letter-spacing: 2rpx;
+						display: inline-block;
+					}
+				}
+				&-right{
+					width: 50rpx;
+					height: 50rpx;
+				}
+			}
+		}
 	
+		.dialog{
+			position: fixed;
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			z-index: 1000;
+			background: rgba(0, 0, 0, .6);
+			
+			&-box{
+				width: calc(100% - 48rpx);
+				background: url('https://gitee.com/hw_0302/chuang-heng-wechat-images/raw/master/buy_bg.png') no-repeat;
+				background-size: 100% 100%;
+				padding: 308rpx 30rpx 40rpx;
+				box-sizing: border-box;
+				position: relative;
+				&>image{
+					width: 48rpx;
+					height: 48rpx;
+					position: absolute;
+					top: 0;
+					right: 30rpx;
+				}
+				&-list{
+					width: 100%;
+					justify-content: space-between;
+					&-item{
+						width: calc(25% - 16rpx);
+						image{
+							width: 80rpx;
+							height: 80rpx;
+						}
+						text{
+							font-family: PingFangSC, PingFang SC;
+							font-weight: 400;
+							font-size: 22rpx;
+							color: #6F4611;
+							line-height: 30rpx;
+							text-align: center;
+							margin-top: 24rpx;
+						}
+					}
+				}
+				&-btn{
+					width: calc(100% - 70rpx);
+					height: 88rpx;
+					background: linear-gradient( 90deg, #EBB56C 0%, #FCEAD0 100%);
+					border-radius: 44rpx;
+					margin-top: 27rpx;
+					font-family: PingFang-SC, PingFang-SC;
+					font-weight: bold;
+					font-size: 32rpx;
+					color: #6F4611;
+					line-height: 88rpx;
+					text-align: center;
+					letter-spacing: 2rpx;
+				}
+			}
+		}
+	}
 </style>

pagesPublish/rechargeCenter.vue

@@ -0,0 +1,312 @@
+<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>