志愿者表单

miniprogram/subpages/volunteer/components/recruitOrder/index.js

@@ -0,0 +1,134 @@
+// subpages/volunteer/components/volunteerComponents/index.js
+const app = getApp()
+Page({
+
+	/**
+	 * 页面的初始数据
+	 */
+	data: {
+		statusHeight: app.globalData.deviceInfo.statusHeight, // 自定义头部状态栏高度
+		navigationHeight: app.globalData.deviceInfo.navigationHeight,
+		type: 0,
+		volunteerTypeArr: ['镇街服务队', '社区服务队'],
+		volunteerType: 0,
+		volunteerTypeOneInfo: {
+			neme: "",
+			IDnumber: "",
+			phone: "",
+			street: "",
+			community: "", //社区
+			workUnit: "", //工作单位
+			speciality: "" //特长
+		},
+		streetArr: ['张家楼街道', '藏马镇'],
+		communityArr: ['登台村', '将军台社区'],
+	},
+
+	/**
+	 * 生命周期函数--监听页面加载
+	 */
+	onLoad(options) {
+
+	},
+
+	/**
+	 * 生命周期函数--监听页面初次渲染完成
+	 */
+	onReady() {
+
+	},
+
+	/**
+	 * 生命周期函数--监听页面显示
+	 */
+	onShow() {
+
+	},
+
+	/**
+	 * 生命周期函数--监听页面隐藏
+	 */
+	onHide() {
+
+	},
+
+	/**
+	 * 生命周期函数--监听页面卸载
+	 */
+	onUnload() {
+
+	},
+
+	/**
+	 * 页面相关事件处理函数--监听用户下拉动作
+	 */
+	onPullDownRefresh() {
+
+	},
+
+	/**
+	 * 页面上拉触底事件的处理函数
+	 */
+	onReachBottom() {
+
+	},
+
+	/**
+	 * 用户点击右上角分享
+	 */
+	onShareAppMessage() {
+
+	},
+	back() {
+		//返回上一级，关闭当前页面
+		wx.navigateBack({
+			delta: 1
+		})
+	},
+	change(e) {
+		this.setData({
+			type: e.target.dataset.type == "0" ? 1 : 0
+		})
+	},
+	bindPickerChange: function(e) {
+		console.log('picker发送选择改变，携带值为', e.detail)
+		this.setData({
+			volunteerType: e.detail.value
+		})
+	},
+	bindPickerStreet: function(e) {
+		this.setData({
+			["volunteerTypeOneInfo.street"]: e.detail.value
+		})
+	},
+	bindPickerCommunity: function(e) {
+		this.setData({
+			["volunteerTypeOneInfo.community"]: e.detail.value
+		})
+	},
+	bindNameInput: function(e) {
+		this.setData({
+			["volunteerTypeOneInfo.name"]: e.detail.value
+		})
+	},
+	bindIDnumberInput: function(e) {
+		this.setData({
+			["volunteerTypeOneInfo.IDnumber"]: e.detail.value
+		})
+	},
+	bindphoneInput: function(e) {
+		this.setData({
+			["volunteerTypeOneInfo.phone"]: e.detail.value
+		})
+	},
+	bindworkUnitInput: function(e) {
+		this.setData({
+			["volunteerTypeOneInfo.workUnit"]: e.detail.value
+		})
+	},
+	bindspecialityInput: function(e) {
+		this.setData({
+			["volunteerTypeOneInfo.speciality"]: e.detail.value
+		})
+	},
+})

miniprogram/subpages/volunteer/components/recruitOrder/index.json

@@ -0,0 +1,3 @@
+{
+	"navigationStyle": "custom"
+  }

miniprogram/subpages/volunteer/components/recruitOrder/index.wxml

@@ -0,0 +1,81 @@
+<view class="header">
+     <image src="../../images/back.png" class="back" style=" top: {{statusHeight}}px;"  bindtap="back"></image>
+    <!-- <image class="header-bg" src="../../images/volunteer/redSail_bg.png" mode="widthFix" /> -->
+    <view class="navigation" style="height: {{navigationHeight}}px; top: {{statusHeight}}px;">
+        申请加入红色尖兵志愿服务队
+    </view>
+</view>
+<view class="backGround">
+	<view class="concat"  wx:if="{{type==0}}">
+		<view class="recruitConditions">
+		<view class="h1">红色尖兵志愿服务队招募条件</view>
+		<view class="h2"> 
+			<view class="h2_view">1.中共党员或中共预备党员;</view>
+			<view class="h2_view">2.自愿从事志愿服务工作;</view>
+			<view class="h2_view">3.承认和遵守志愿者管理有关制度和规定;</view>
+			<view class="h2_view">4.政治素质过硬,道德品行端正,能够</view>
+			<view class="h2_view">5.自觉接受志愿服务队领导,认真执行各项决定和任务;</view>
+			<view class="h2_view">6.具备从事志愿服务的身体条件、服务技能和服务资格;</view>
+			<view class="h2_view">7.具有相应的民事行为能力。</view>
+		</view>
+		</view>
+		<view class="concatBottom">
+			<view class="button" data-type="0" bindtap="change">
+				申请加入红色尖兵志愿服务队
+			</view>
+		</view>
+	</view>
+	<view class="concat" wx:if="{{type==1}}">
+		<view>
+		<view class="recruitConditions">
+		<view>
+<picker bindchange="bindPickerChange" value="{{index}}" range="{{volunteerTypeArr}}">
+    <view class="order">
+		<view class="orderName">志愿服务队类型</view>
+		<view>{{volunteerTypeArr[volunteerType]}}</view>
+    </view>
+  </picker>
+		</view>
+		</view>
+		<view class="recruitConditions">
+		<view class="order">
+			<view class="orderName">姓名</view>
+			<input style="width:25%;text-align: end;"  maxlength="10" bindinput="bindNameInput"  placeholder="请输入"/>
+		</view>
+		<view class="order" style="background-color: #fafafa;">
+		<view class="orderName" >身份证号</view>
+		<input style="width:25%;text-align: end;"  bindinput="bindIDnumberInput"  placeholder="请输入"/>
+		</view>
+		<view class="order">
+		<view class="orderName">手机号码</view>
+		<input style="width:25%;text-align: end;"  bindinput="bindphoneInput"  placeholder="请输入"/>
+		</view>
+		<picker bindchange="bindPickerStreet" value="{{index}}" range="{{streetArr}}">
+		    <view class="order" style="background-color: #fafafa;">
+				<view class="orderName">所属镇街</view>
+				<view>{{streetArr[volunteerTypeOneInfo.street]?streetArr[volunteerTypeOneInfo.street]:"请选择"}}</view>
+		    </view>
+		  </picker>
+		  <picker bindchange="bindPickerCommunity" value="{{index}}" range="{{communityArr}}" wx:if="{{volunteerType==0}}">
+		      <view class="order">
+		  		<view class="orderName">所属社区</view>
+		  		<view>{{communityArr[volunteerTypeOneInfo.community]?communityArr[volunteerTypeOneInfo.community]:"请选择"}}</view>
+		      </view>
+		    </picker>
+			<view class="order" style="background-color: #fafafa;">
+			<view>现工作单位</view>
+			<input style="width:25%;text-align: end;"  bindinput="bindworkUnitInput"  placeholder="请输入"/>
+			</view>
+			<view class="order" >
+			<view>个人特长</view>
+			<input style="width:25%;text-align: end;"  bindinput="bindspecialityInput"  placeholder="请输入"/>
+			</view>
+		</view>
+	</view>
+		<view class="typeOneButton">
+			<view class="typeOneButtonOne" data-type="1" bindtap="change">返回</view>
+			<view class="typeOneButtonTwo">提交</view>
+		</view>
+	</view>
+</view>
+

miniprogram/subpages/volunteer/components/recruitOrder/index.wxss

@@ -0,0 +1,142 @@
+.backGround {
+	background-color: #f5f5f5;
+	margin-top: -80rpx;
+}
+
+.concat {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	height: 86vh;
+}
+
+.recruitConditions {
+	background-color: #fff;
+	margin: 24rpx;
+	border-radius: 8rpx;
+	padding: 0 12rpx;
+	height: auto;
+	box-shadow: 0rpx 10rpx 500rpx 10rpx rgba(85, 85, 85, 0.10);
+}
+
+.h1 {
+	text-align: center;
+	padding: 20rpx 0;
+	border-bottom: 2rpx #dfdfdf solid;
+}
+
+.h2 {
+	padding: 22rpx 8rpx;
+	font-weight: 400;
+}
+
+.h2_view {
+	margin-bottom: 8rpx;
+	text-indent: 2em;
+}
+
+.concatBottom {
+	background-color: #fff;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 130rpx;
+}
+
+.button {
+	border-radius: 8rpx;
+	background-color: #E82C19;
+	padding: 16rpx 160rpx;
+	color: #fff;
+	font-size: 28rpx;
+}
+
+.typeOneButton {
+	background-color: #fff;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	height: 130rpx;
+}
+
+.typeOneButtonOne {
+	border-radius: 6rpx;
+	color: #E82C19;
+	border: 1rpx solid #E82C19;
+	padding: 16rpx 130rpx;
+}
+
+.typeOneButtonTwo {
+	border-radius: 6rpx;
+	color: #fff;
+	background-color: #ccc;
+	padding: 16rpx 130rpx;
+}
+
+.order {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding: 28rpx 16rpx;
+}
+
+.orderName::before {
+	content: '*';
+	color: red;
+	font-size: 100%;
+}
+
+page {
+	width: 100%;
+	height: auto;
+	overflow-y: auto;
+	background: #f7f7f7;
+	font-family: PingFang SC;
+	background: linear-gradient(180deg, #E82C19 0%, #F7F7F9 30%);
+}
+
+.header {
+
+	width: 100%;
+	height: 250rpx;
+
+	/* position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000; */
+}
+
+.header .header-bg {
+	width: 100%;
+	height: 100%;
+	/* position: absolute;
+    z-index: 10;
+    left: 0;
+    top: 0; */
+	position: absolute;
+	height: 100%;
+	z-index: -999;
+}
+
+.header .navigation {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: rgba(255, 255, 255, 0.9);
+	font-size: 32rpx;
+	position: relative;
+	z-index: 1;
+}
+
+
+.back {
+	width: 20rpx;
+	height: 20rpx;
+	margin-left: 20rpx;
+	position: absolute;
+	margin-top: 20rpx;
+	border-radius: 0rpx;
+	z-index: 2;
+}

miniprogram/subpages/volunteer/pages/volunteer/volunteer.js

@@ -8,6 +8,24 @@ Page({
     data: {
         statusHeight: app.globalData.deviceInfo.statusHeight, // 自定义头部状态栏高度
         navigationHeight: app.globalData.deviceInfo.navigationHeight,
+		list:[
+			{
+				id:0,
+				url:'/subpages/volunteer/components/recruitOrder/index',
+				firstText:"招募令",
+				secondTetx:"中共党员或中共预备党员。",
+				src:'../../images/01.png',
+				rightSrc:'../../images/right.png'
+			},
+			{
+				id:1,
+				url:'',
+				firstText:"志愿风采",
+				secondTetx:"XXXXXXXXXXXXXXXXXXXX···",
+				src:'../../images/03.png',
+				rightSrc:'../../images/right.png'
+			}
+		]
     },
 
     /**

miniprogram/subpages/volunteer/pages/volunteer/volunteer.wxml

@@ -7,18 +7,18 @@
 </view>
 <view class="mtf80">
     <view class="list">
-        <view class="item ">
+        <navigator wx:for="{{list}}" wx:key="index"  url="{{item.url}}" class="item">
-            <image src="../../images/01.png" class="icon"></image>
+            <image src="{{item.src}}" class="icon"></image>
             <view class="vcenter flex1">
-                <view class="h1">招募令</view>
+                <view class="h1">{{item.firstText}}</view>
                 <view class="h2">
-                    中共党员或中共预备党员。
+                    {{item.secondTetx}}
                 </view>
             </view>
             <view class="vcenter w20">
-                <image src="../../images/right.png"  class="go"></image>
+                <image src="{{item.rightSrc}}" class="go"></image>
             </view>
-        </view>
+        </navigator>
         <!-- <view class="item ">
             <image src="../../images/02.png" class="icon"></image>
             <view class="vcenter flex1">
@@ -31,7 +31,7 @@
                 <image src="../../images/right.png"  class="go"></image>
             </view>
         </view> -->
-        <view class="item ">
+       <!-- <view class="item ">
             <image src="../../images/03.png" class="icon"></image>
             <view class="vcenter flex1">
                 <view class="h1">志愿风采</view>
@@ -42,7 +42,7 @@
             <view class="vcenter w20">
                 <image src="../../images/right.png"  class="go"></image>
             </view>
-        </view>
+        </view> -->
         
 
     </view>