hz-zhhq-app/pages/production/production_apply.vue

<template>
	<view class="container">
		<view class="titleWrap">后勤保障服务清单与能力需求</view>
		
		<view class="main">
			<view v-for="(item,index) in kinds">
				<view class="moduleTitle">{{getChinese(index+1)}}、{{item.name}}</view>
				<view v-for="(subItem,subIndex) in item.subSelectorList">
					<view class="levelWrap" v-if="choosedLevelIdList[index][subIndex].id == levelIndex" v-for="(levelItem,levelIndex) in subItem.levelList">
						<view class="prodctionTitle">{{subIndex+1}}. {{subItem.name}}-{{levelItem.name}}</view>
						<view class="uni-list prodsList" v-if="levelItem.name != '跳过'">
							<checkbox-group style="word-break: keep-all;">
								 <label class="produnctionWrap" v-for="(prodItem,prodIndex) in levelItem.prods" :key="item.value">
									<checkbox disabled="true" class="productionCheckbox" :value="prodItem.value" :checked="prodItem.isChecked==1?true:false" />{{prodItem.name}}
								</label>
							</checkbox-group>	
						</view>
						<view class="uni-list skipWrap" v-if="levelItem.name == '跳过'">
							暂未选择产品
						</view>
					</view>
				</view>
			</view>
			
			<view>
				<view class="mid_view">
					<view class="tab_left">
						姓　名：<!-- <text style="color: red;position: absolute;">*</text> -->
					</view>
					<view class="tab_rig">
						<input class="tab_text"  v-model="userName" placeholder="请填写姓名" maxlength="10" />
					</view>
				</view>
				<view class="mid_view">
					<view class="tab_left">
						手机号：<!-- <text style="color: red;position: absolute;">*</text> -->
					</view>
					<view class="tab_rig">
						<input class="tab_text" v-model="userPhone" type="number"  placeholder="请填写手机号码" maxlength="11"/>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<view class="footer-box left" @click="goBack()">
			<text>上一步</text>
		</view>
		<view class="footer-box right" @click="submit()">
			<text>确认</text>
		</view>
	</view>
</template>

<script>
	import { getAllProdunctions,getCatagoryList,getProductionList,saveMyProductionApply } from '@/common/api.js';
	import { callbackRequest, alertTip, sureAlterTip, getStorage ,setStorage,transformNum2Chinese} from '@/common/util.js';
	export default {
		data() {
			return {
				kinds:[],
				choosedLevelIdList:[],
				choosedLevelIds:[],
				userId:'',
				userName:'',
				userPhone:'',
			}
		},
		onLoad:function (option) { //option为object类型，会序列化上个页面传递的参数
			let self = this;
			self.kinds = getStorage('kinds');
			self.choosedLevelIdList = getStorage('choosedLevelIdList');
			self.getChoosedLevelIdList();
			
			let userInfo = getStorage('userInfo');
			if(userInfo&&userInfo.id){
				this.userId=userInfo.userId;
				this.userName=userInfo.userName;
				this.userPhone=userInfo.telnumber;
			}
		},
		
		methods: {
			getChoosedLevelIdList(){
				let self = this;
				// console.log(self.kinds);
				// console.log(self.choosedLevelIdList);
				self.choosedLevelIds = [];
				for(var i=0;i<self.kinds.length;i++){
					// console.log(self.kinds[i].subSelectorList);
					for(var j=0; j<self.kinds[i].subSelectorList.length;j++){
						// console.log(self.kinds[i].name+self.kinds[i].subSelectorList[j].name)
						// console.log(self.kinds[i].subSelectorList[j].levelList[self.choosedLevelIdList[i][j].id])
						console.log(self.kinds[i].subSelectorList[j].levelList[self.choosedLevelIdList[i][j].id])
						self.choosedLevelIds.push((self.kinds[i].subSelectorList[j].levelList[self.choosedLevelIdList[i][j].id]).id);
					}
					
				}
				console.log(self.choosedLevelIds)
			},
			submit(){
				let self = this;
				if(!self.userName){
					alertTip('请输入姓名！');
					return;
				}
				if(!self.userPhone){
					alertTip('请输入手机号！');
					return;
				}
				if(self.userPhone.toString().length < 11){
					alertTip('请输入正确的手机号！');
					return;
				}
				let userInfo = getStorage('userInfo');
				let data = {
					method: saveMyProductionApply,
					data: 
						{ 
							userId: self.userId,
							userName:self.userName,
							userPhone:self.userPhone,
							choosedLevelIds:this.choosedLevelIds
						}
				};
				callbackRequest(data).then(res => {
					if (res.data.returnCode == 1) {
						let result = res.data.returnData;
						
						uni.navigateTo({
						    url: './production_apply_result?applyId='+result.applyId
						});
					}
				});
			},
			goBack(){
				uni.navigateBack({
				    delta: 1
				});
			},
			getChinese(value){
				return transformNum2Chinese(value);
			},
		},
	}
</script>

<style lang="scss">
	
	uni-checkbox-group uni-label{
		width: 33% !important;
		 display: inline-flex;
		 padding:20upx 0;
		 text-align: left;
		 line-height: 46upx;
		 display:inline-block;
	  }
	
	.container {
		min-height: 100vh;
		overflow: hidden;
		background: #f8f8f8;
		
		.produnctionWrap{
			font-size: 24upx;
			text-align: center;
		}
		.productionCheckbox{
			 transform:scale(0.7);
		}
		
		.titleWrap{
			text-align: center;
			font-weight: 600;
			font-size: 36upx;
			padding:20upx 0upx;
			border-bottom: solid #CFCFCF 1px;
		}
		
		.main {
			position: absolute;
			// margin: 42upx 40upx 0;
			width: 100%;
			height:100%;
		}
		
		.moduleTitle{
			text-align: center;
			margin: 24upx 0;
		}
		
		.prodctionTitle{
			text-align: left;
			margin-left: 30upx;
			font-size: 30upx;
			margin-top: 20upx;
		}
		
		.levelWrap{
			border-bottom:1px solid #eee;
		}
		
		.skipWrap{
			text-align: center;
			font-size: 30upx;
			margin:20upx 0;
		}
		
		.right{
			right:20upx;
		}
		
		.left{
			left:20upx;
		}
		
		.footer-box {
			position: fixed;
			bottom: 5upx;
			border-radius: 10upx;
			width: 45%;
			height: 80upx;
			background: #348ff1;
			text-align: center;
			line-height: 80upx;
			
			text {
				font-size: 30upx;
				color: #fff;
				vertical-align: middle;
				padding-left: 10upx;
			}
		}
		
		.mid_view {
			padding: 3vw 0;
			display: flex;
			border-bottom: 1px solid #eee;
			font-size: 26upx;
		}
		
		.tab_left {
			width: 25vw;
			text-align: right;
			margin-right: 3vw;
			line-height:50rpx;
		}
		
		.tab_rig {
			width: 55vw;
			line-height:50rpx;
			input{
				height: 50rpx;
			}
		}
		
		.tab_text{
			font-size:26upx;
		}
	}
</style>