6 changed files with 386 additions and 8 deletions
@ -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 |
|||
}) |
|||
}, |
|||
}) |
|||
@ -0,0 +1,3 @@ |
|||
{ |
|||
"navigationStyle": "custom" |
|||
} |
|||
@ -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> |
|||
|
|||
@ -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; |
|||
} |
|||
Loading…
Reference in new issue