JP-ChargeTeam51/pages/user/freeInstallment.vue

<template>
	<view class="all">
		<u-navbar title="免费安桩" :is-back="back" ></u-navbar>
	    <view class="main">
			<view class="text">
				     为响应政府号召，积极推动充电桩普及，“51充电联盟”现面向公共停车场、私家车位提供“免费安桩”服务，有意加盟“51充电联盟”的机构和个人，均可申请免费安装电动汽车/摩托车/自行车充电桩，在平台的运营支持下，共享风口红利。
			</view>
	    	<view class="suited">
	    		<p class="title">适合对象 :</p>
				<view class="content">
					<p>1.停车场、停车棚</p>
					<view class="suited-text">
						商超、小区、园区、医院等停车场。通过经营充电业务开源增收。
					</view>
				</view>
				<view class="content">
					<p>2.私人车位所有者</p>
					<view class="suited-text">
						可通过共享车位空闲时段，为他人提供充电便利获取被动收入。
					</view>
				</view>
	    	</view>
			
			<view class="application-form ">
				<view class="name">
					<p>申请人姓名</p>
					<u-input v-model="name"   :customStyle="placeholderStyle" :placeholderStyle="placeholderStyle" placeholder=""></u-input>
				</view>
				<view class="tel">
					<p>联系电话</p>
					<u-input v-model="subForm.phone" :customStyle="placeholderStyle" :placeholderStyle="placeholderStyle" placeholder=""></u-input>
				</view>
				<view class="place">
					<p>安装地点</p>
					<u-input class="textarea" type="textarea"  height="200"  v-model="address" placeholder="填写详细位置" ></u-input>
				</view>
				<view class="type">
					<p>场地类型</p>
					<view class="checkbox">
							<view class="">
									<u-checkbox-group  active-color="#00B962">
										<u-checkbox 
										 
											v-model="item.checked" 
											v-for="(item, index) in typeList" :key="index" 
											:name="item.name"
										>{{item.name}}</u-checkbox>
									</u-checkbox-group>
									
								</view>
						</view>
				</view>
				<view class="want">
					<p>想要安装</p>
					<view class="checkbox">
							<view class="">
									<u-checkbox-group   active-color="#00B962">
										<u-checkbox 
										 
											v-model="item.checked" 
											v-for="(item, index) in wantList" :key="index" 
											:name="item.name"
										>{{item.name}}</u-checkbox>
									</u-checkbox-group>
									
								</view>
						</view>
				</view>
			      <view class="hint">
			      	<span style="color: red;">*</span>请保持手机畅通，我们将安排专人与您联系。您也可以拨打 
					 <text class="tel-num">400-8899-619</text>查询申请审核进度！
			      </view>
				 <u-button type="warning" @click="submit" >提交申请</u-button>
			</view>
	    </view>
	</view>
</template>

<script>
	import * as API from '@/apis/friends.js'
	import {
		checkPhone
	} from '@/utils'
	export default{
		data() {
				return {
					name:"",
					address:"",
					back:false,
					text1:[],
					text2:[],
					subForm:{
						phone:"",
						openId:"",
						type:"2",
						content:""
					},
					
					elderMode:false,
					placeholderStyle:{
						'font-size':'28rpx'
					},
					typeList: [
									{
										name: '停车场',
										checked: false,
										disabled: false
									},
									{
										name: '私家车位',
										checked: false,
										disabled: false
									},
									{
										name: '停车棚',
										checked: false,
										disabled: false
									}
								],
								wantList: [
													{
														name: '电动汽车充电桩',
														checked: false,
														disabled: false
													},
													{
														name: '电动摩托/自行车充电桩',
														checked: false,
														disabled: false
													},
													
												]
							
								
				};
				
			},
			onLoad(op) {
				if(op.isback){
					this.back=true;
				}
			},
			methods:{
				
				submit(){
				
					var obj=[]
					if(!this.name){
						uni.showToast({
							title:"请输入申请人姓名"
						})
						return
					}
					if(!this.subForm.phone){
						uni.showToast({
							title:"请输入联系电话"
						})
						return
					}
					var checkPhoneResult = checkPhone(this.subForm.phone);
								
					if (checkPhoneResult !== true) {
						uni.showToast({
							title: checkPhoneResult,
						})
						return;
					}
					if(!this.address){
						uni.showToast({
							title:"请填写详细位置"
						})
						return
					}
					obj.push({
						name:"申请人姓名",
						value:this.name,
						type:"text"
					})
					obj.push({
						name:"安装地点",
						value:this.address,
						type:"text"
					})
					this.text1="";
					this.text1b=false;
					this.text2="";
					this.text2b=false;
					var list1=this.typeList.map(item=>{
						if(item.checked){
							this.text1+="1"
							this.text1b=true;
						}else{
							this.text1+="0"
						}
						return item.name
					})
					
					
					var list2=this.wantList.map(item=>{
						if(item.checked){
							this.text2+="1"
								this.text2b=true;
						}else{
							this.text2+="0"
						}
						return item.name
					})
					
					if(!this.text1b){
						uni.showToast({
							title:"请至少勾选一项“场地类型”"
						})
						return
					}
					if(!this.text2b){
						uni.showToast({
							title:"请至少勾选一项“想要安装”"
						})
						return
					}
					obj.push({
						name:"场地类型",
						value:this.text1,
						type:"list",
						list:list1
					})
					obj.push({
						name:"想要安装",
						value:this.text2,
						type:"list",
						list:list2
					})
					this.subForm.openId=this.carhelp.getOpenId();
					this.subForm.content=JSON.stringify(obj);
					console.log(this.subForm)
					
					uni.showLoading({
						title: "加载中",
						mask: true,
					})		
					API.submit(this.subForm).then((res) => {
						uni.hideLoading()
						uni.showModal({
							showCancel:false,
							title:"提示",
							content:"提交成功！",
							confirmText:"前往主页",
							success() {
								uni.reLaunch({
									url:"/"
								})
							}
						})
						
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				},
				theme(type) {
					
				  if(type == 'elder')	
				  {
					document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
					 let data = {
					 	"font-size":'32rpx', 
					 	};
					 this.placeholderStyle = data;
				  }
				  else
				  {
					document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
					 let data = {
					 	"font-size":'28rpx'
					 	};
					 this.placeholderStyle = data;
				  } 
				}
			},
			onReady(){
				this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
				if(this.elderMode)
					this.theme('elder')
				else
					this.theme('standard')
			}
	}
</script>

<style>
	page{
		background-color: #00b962;
	}
</style>

<style lang="scss" scoped>
	@import "@/_theme.scss";
	.all{
		@include themeify{
			font-size: themed('font-size2');
		}
	}
	.main{
		
	   padding: 36px 28px 85px;
	   .text{
		   color: rgba(255, 255, 255, 100);
		   @include themeify{
		   	font-size: themed('font-size4');
		   }
/*		   font-size: 18px;*/
		   text-align: justify;

	   }
	   .suited{
		   background-color: #fff;
		   margin-top: 24px;
		   padding: 24px;
		   border-radius: 16px;
		   .title{
			   /*height: 18px;*/
			   color: rgba(16, 16, 16, 100);
			   @include themeify{
			   	font-size: themed('font-size4');
			   	height: themed('font-size4');			   
				}
/*			   font-size: 18px;*/
			   font-weight: 600;
		   }
		   .content{
			   margin-top: 12px;
			   p{
				   font-weight: 550;
				   @include themeify{
				   	font-size: themed('font-size2');
    				}
/*				   font-size: 14px*/
			   }
			   .suited-text{
				   margin-top: 10px;
				   line-height: 20px;
			   }
		   }
	   }
	
	
	.application-form{
		background-color: #fff;
		 border-radius: 16px;
		 margin-top: 24px;
		  padding: 24px;
		  .u-input{
			  border-radius: 50px;
			  background-color: rgba(232, 236, 234, 100);
			  margin-top: 12px;
			
		  }
		  /deep/.uni-input-input{
			  margin: 20px;
		  }
		  /deep/.u-input__right-icon{
			  margin-right: 10px;
		  }
		  p{
			  @include themeify{
			  	font-size: themed('font-size4');
			  	line-height: themed('font-size4');
			  	height: themed('font-size4');
  				}
/*		  				  height: 18px;
						  line-height: 18px;*/
		  				  color: rgba(16, 16, 16, 100);
/*		  				  font-size: 18px;*/
		  }
		  
		  .tel,.place,.type,.want{
			  margin-top: 24px;
		  }
		  .textarea{
			  width: 72.2vw;
			  height: 140px;
			  border-radius: 22px;
			  background-color: rgba(232, 236, 234, 100);
			   margin-top: 12px;
			 overflow-y: scroll;
			   @include themeify{
			    	font-size: themed('font-size2');
			    	line-height: themed('font-size2'); 
			   }
			 .uni-textarea-placeholder{
				 padding: 12px;
				 @include themeify{
				 	font-size: themed('font-size2');
				 	line-height: themed('font-size2'); 
   				}
			 }
			/deep/.uni-textarea-textarea{
								 width: 90%;
								 padding: 10px 20px;
								  
			}
			/deep/.u-input__right-icon {
								 display: none;
			}
		  }
	}
	.type{
		.checkbox{
			margin-top: 12px;
			/deep/.u-checkbox{
				width: 50% !important;
				margin-top: 4px;
			}
		}
		
	}
	.want{
		/deep/.u-checkbox{
			margin-top: 8px;
		}
	}
	.hint{
		margin-top: 12px;
		@include themeify{
			font-size: themed('font-size2');
			line-height: themed('font-size5'); 
		}
		/*
		font-size: 14px;
		line-height: 20px;
		*/
		text-align: justify;
		.tel-num{
			color: #9FC7FF;
		}
	}
	/deep/.u-btn{
		border-radius: 50px ;
		margin-top: 24px;
	}
	}
	
</style>