Browse Source

免费安桩

常志远 3 năm trước cách đây
mục cha
commit
6971a7b846
3 tập tin đã thay đổi với 242 bổ sung1 xóa
  1. 5 0
      pages.json
  2. 230 0
      pages/user/freeInstallment.vue
  3. 7 1
      pages/user/index.vue

+ 5 - 0
pages.json

@@ -391,6 +391,11 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},{ "name":"免费安桩",
+			"path": "pages/user/freeInstallment",
+			"style": {
+				"navigationStyle": "custom"
+			}
 		}
         
     ],

+ 230 - 0
pages/user/freeInstallment.vue

@@ -0,0 +1,230 @@
+<template>
+	<view >
+		<u-navbar title="免费安桩"></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 placeholder=""></u-input>
+				</view>
+				<view class="tel">
+					<p>联系电话</p>
+					<u-input placeholder=""></u-input>
+				</view>
+				<view class="place">
+					<p>安装地点</p>
+					<textarea class="textarea" placeholder="填写详细位置"></textarea>
+				</view>
+				<view class="type">
+					<p>场地类型</p>
+					<view class="checkbox">
+							<view class="">
+									<u-checkbox-group @change="checkboxGroupChange" active-color="#00B962">
+										<u-checkbox 
+											@change="checkboxChange" 
+											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 @change="checkboxGroupChange" active-color="#00B962">
+										<u-checkbox 
+											@change="checkboxChange" 
+											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">
+			      	*请保持手机畅通,我们将安排专人与您联系。您也可以拨打 
+					 <text class="tel-num">400-8899-619</text>查询申请审核进度!
+			      </view>
+				 <u-button type="warning">提交申请</u-button>
+			</view>
+	    </view>
+	</view>
+</template>
+
+<script>
+	export default{
+		data() {
+				return {
+					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
+													},
+													
+												]
+							
+								
+				};
+				
+			},
+	}
+</script>
+
+<style>
+	page{
+		background-color: #00b962;
+	}
+</style>
+
+<style lang="scss" scoped>
+	.main{
+	   padding: 36px 28px 85px;
+	   .text{
+		   color: rgba(255, 255, 255, 100);
+		   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);
+			   font-size: 18px;
+			   font-weight: 600;
+		   }
+		   .content{
+			   margin-top: 12px;
+			   p{
+				   font-weight: 550;
+				   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-left: 10px;
+		  }
+		  p{
+		  				  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: 100px;
+			  border-radius: 22px;
+			  background-color: rgba(232, 236, 234, 100);
+			   margin-top: 12px;
+			 .uni-textarea-placeholder{
+				 padding: 12px;
+			 }
+			 /deep/.uni-textarea-textarea{
+				 margin: 10px;
+			 }
+		  }
+	}
+	.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;
+		
+		font-size: 14px;
+		line-height: 20px;
+		text-align: justify;
+		.tel-num{
+			color: #9FC7FF;
+		}
+	}
+	/deep/.u-btn{
+		border-radius: 50px ;
+		margin-top: 24px;
+	}
+	}
+	
+</style>

+ 7 - 1
pages/user/index.vue

@@ -61,7 +61,11 @@
 					<u-icon name="menu_cwcl" custom-prefix="custom-icon" color="#6BC6A7" size="36"></u-icon>
 					<p>车辆管理</p>
 				</view>
-				<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="32"></u-icon>
+				<view class="">
+					<text class="add">添加车牌号</text>
+					<u-icon name="arrow-right-s-line" custom-prefix="custom-icon" color="#B3B3B3" size="32"></u-icon>
+				</view>
+				
 			</view>
 			<view class="userCell-item" @click="gotoUrl('pages/user/help')">
 				<view class="userCell-title">
@@ -376,7 +380,9 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
+		
 	}
+
 	.userIcon-main{
 		margin-top: 16px;
 		display: flex;