dianpin-h5-4000-0827/pages/home/index.vue

<template>
	<view>
		<view class="home-pages">
			<view style="position: absolute;top: 0; left: 0; height: 188rpx; width: 100%; z-index: 100; background-color: #FFFFFF; box-shadow: 0px 15px 10px -15px #E8E8E8;">
				<view style="margin: 28rpx 24rpx; display: flex;" @click="newDetail()">
					<image :showLoading="true" :src="userInfo?userInfo.headImage : morenSrc" style="width: 148rpx;height: 148rpx;border-radius: 50%;"></image>
					<view style="padding: 28rpx;">
						<view style="font-size: 32rpx;font-weight: 600">{{userInfo?userInfo.nickName: '点击登录'}}</view>
					</view>
				</view>
			</view>
			
			<view class="home-content">
				<view class="pay-btn-2" @click="seeDetail()">
					刊物介绍
				</view>
				<view style="margin: 10rpx; font-weight: 200;">
					<span >订阅申请</span>
				</view>
				
				<view class="from">
					
					<view class="from-line">
						<span class="label-class">姓名:</span>
						<view><input v-model="release.name" placeholder="请输入学生姓名"/></view>
					</view>
					<view class="from-line">
						<span class="label-class">电话:</span>
						<view><input v-model="release.address" placeholder="请输入手机号码"/></view>
					</view>
					<view class="from-line">
						<span class="label-class">地区:</span>
						<view class="uni-list-cell-left">
							<picker @change="selectedVs" @columnchange="selectedVs" mode="multiSelector" :range="vsc">
								<input v-model="release.vsClass" placeholder="请选择地区"/>
							</picker>
						</view>
					</view>
					<view class="from-line">
						<span class="label-class">学历:</span>
						<view class="uni-list-cell-left">	
							<picker @change="selectedXl" :range="xls">
								<input v-model="release.xl" placeholder="请选择学历"/>
							</picker>
						</view>
					</view>
					<view class="from-line">
						<span class="label-class">学校:</span>
						<view><input v-model="release.unit" placeholder="请选择学校"/></view>
					</view>
					<view class="from-line">
						<span class="label-class">年级:</span>
						<view><input v-model="release.unit" placeholder="请选择年级"/></view>
					</view>
					<view class="from-line">
						<span class="label-class">班级:</span>
						<view><input v-model="release.unit" placeholder="请选择班级"/></view>
					</view>
					
					<view class="home-modal" v-show="showj">
						<view class="title">订阅项目</view>
						<view @click='clickLable(0)' class="label-class" :class="{'active': release.topid === 0}"> ￥43.88 语文 </view>
						<view @click='clickLable(1)' class="label-class" :class="{'active': release.topid === 1}"> ￥43.88 数学 </view>
						<view @click='clickLable(2)' class="label-class" :class="{'active': release.topid === 2}"> ￥43.88 英语 </view>
						<view @click='clickLable(3)' class="label-class" :class="{'active': release.topid === 3}"> ￥43.88 化学 </view>
						<view @click='clickLable(4)' class="label-class" :class="{'active': release.topid === 4}"> ￥43.88 物理 </view>
						<view @click='clickLable(5)' class="label-class" :class="{'active': release.topid === 5}"> ￥43.88 历史 </view>
					</view>

				</view>
				<view class="pay-btn" @click="fabujianzhi()">
					提交申请
				</view>
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isChecked:false,
				morenSrc:require('@/static/img/logon-icon.png'),
				userInfo:null,
				showj: false,
				xls: ['小学','初中','高中'],
				vsc: [['广东省','湖南省'], ['怀山区','广州区']],
				release:{
					name:"",
					address:"",
					vsClass:"",
					money:"",
					unit:"",
					startTime:"",
					endTime:"",
					phone:"",
					wx:"",
					myValue:"",
					xl:"",
					topid: ""
				}
			}
		},
		onShow() {
			
		},
		onLoad() {
			
		},
		onReady() {
			this.$com.displayNav()
		},
		methods:{
			checkboxChange(e) {
				let values = e.detail.value;
				if (values[0] == 1) {
					this.isChecked = true;
				} else {
					this.isChecked = false;
				}
			},
	
			getmyInfo(){
				this.$api('myInfo')
				.then(res=>{
					if(res.code == 200){
						this.role = res.result.role;
						this.userInfo = res.result;
						this.$store.commit('set_userInfo',res.result)
					}else{
						this.userInfo = null
					}
				})
			},
			//跳转刊物介绍
			seeDetail(){
				uni.navigateTo({
					url:`/pages/my/kanwus`
				})
			},
			//跳转订阅记录
			newDetail(){
				uni.navigateTo({
					url:`/pages/my/orders`
				})
			},
			lower(){
				
			},
			selectedXl(event){
				if(event.detail.value){
					this.release.xl = this.xls[event.detail.value]
					if(this.release.xl === '高中'){
						this.showj = true
					}
				}
			},
			selectedVs(event){
				if(event.type === 'columnchange'){
					if(event.detail.column === 0){
						const value = this.vsc[event.detail.column][event.detail.value];
						console.log("选中：" + value);
						if(1 === event.detail.value){
							this.vsc[1] = ["永州教育区","长沙教育区"]
						}
					}
				} else {
					if(event.detail){
						this.release.vsClass = ""
						event.detail.value.forEach((v,k) => {
							this.release.vsClass += (this.vsc[k][v] + " ");
						})
					}
				}
			},
			clickLable(id){
				this.release.topid = id
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.home-content {
		.from {
			margin-top: 20rpx;
			background-color: #F7F7F7;
		}
		.from-line {
			height: 108rpx;
			display: flex;
			background-color: #FFFFFF;
			.label-class{
				text-align: justify;
				text-align-last: justify;
				line-height: 68rpx;
				width: 88rpx;
				padding: 0 24rpx;
			}
			input{
				padding-left: 10rpx;
				height: 68rpx;
			}	
		}
		.from-line-box {
			background-color: #FFFFFF;
			height: 328rpx;
			margin-right: 50rpx;
			display: flex;
			.label-class{
				text-align: justify;
				text-align-last: justify;
				line-height: 128rpx;
				width: 128rpx;
				padding: 0 24rpx;
			}
			input{
				padding-left: 20rpx;
			}	
		}
		.pay-btn{
			text-align: center;
			border-radius: 12rpx;
			line-height: 78rpx;
			background-color:  #00CCCC;
			color: #FFFFFF;
		}
		.pay-btn-2{
			margin:10rpx auto;
			text-align: center;
			border-radius: 12rpx;
			height: 78rpx;
			line-height: 78rpx;
			font-size: 48;
			background-color: #FFFFFF;
		}
	}
	.home-pages {
		padding: 188rpx 10rpx 0;
		background-color: #F7F7F7;
		.scroll-Y {
			height: calc(100vh - 200rpx);
			padding-top: 20rpx;
		}
	}
	.home-modal {
		width: 100vw;
		min-height: 20vh;
		
		.title {
			line-height: 100rpx;
			margin-top: 40rpx;
			background-color: #FFF;
		}
		
		.label-class {
			line-height: 100rpx;
			padding: 0 26rpx;
			background-color: #FFF;
			position: relative;
		}
		
		.label-class::after {
			content: " ";
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			border: 1rpx solid #888;
			
			position: absolute;
			right: 36rpx;
			top: calc((100rpx - 32rpx) / 2);
		}
		
		.label-class.active::after {
			background-color: #544AFF;
			border-color: #544AFF;
		}
		
		.label-class.active::before {
			background-color: #FFF;
			border: none;
			content: ' ';
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			z-index: 1;
			
			position: absolute;
			top: calc((100rpx - 12rpx) / 2);
			right: 46rpx;
		}
	
	}
		
</style>