gaojian/app_tree_planting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

包名页面调整

Browse Source
This commit is contained in:
itgaojian163 2023-02-20 12:19:37 +08:00
parent 042a56e5ea
commit 5d9a26e568
1 changed files with 153 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

281
pages/duty/activitysign.vue
View File

@ -1,117 +1,95 @@
<template>
<view class="page">
<view class="content">
<view class="base-person">
<view class="item-box">
<view class="item-title">报名类型</view>
<radio-group @change="typeChange($event)" class="item-content">
<radio value="1" style="transform: scale(0.9);font-size: 28rpx;" checked="true" color="#54B585">
个人</radio>
<radio value="2" style="transform: scale(0.9);margin-left: 20rpx;font-size: 28rpx;"
color="#54B585">单位</radio>
</radio-group>
</view>
<view class="item-box" v-if="2==personType">
<view class="item-title">单位名称</view>
<input @input="inputOrgName" :value="name" placeholder="请输入单位名称" />
</view>
<view class="item-box">
<view class="item-title">您的姓名</view>
<input @input="inputBaseName" :value="name" placeholder="请输入您的姓名" />
</view>
<view class="item-box" v-if="1==personType">
<view class="item-title">身份证号码</view>
<input @input="inputBaseIdCard" :value="idcard" placeholder="请输入身份证号码" />
</view>
<view class="item-box" v-if="1==personType">
<view class="item-title">人员类型</view>
<radio-group @change="baseChange" class="item-content">
<radio value="适龄公民" style="transform: scale(0.8);" checked="true">适龄公民</radio>
<radio value="非适龄公民" style="transform: scale(0.8);margin-top: 10rpx;">非适龄公民</radio>
</radio-group>
</view>
<view>提示:依据<国务院关于开展全民义务植树运动的实施办法>适龄公民指男11岁至60岁,女11岁至55岁的中华人民共和国公民。</view>
<view class="item-box">
<view class="item-title">联系电话</view>
<input @input="inputBasePhone" :value="phone" placeholder="请输入常用手机号码" />
</view>
<view class="item-box-v">
<view class="item-title">备注留言</view>
<textarea class="item-content-bg" @input="inputBaseRemark" :value="remark"
placeholder="有什么想说的话可以在这里留言">
</textarea>
</view>
</view>
<!-- <view class="base-person">
<view class="item">
<view class="item-title">报名类型</view>
<radio-group @change="typeChange($event)" class="type-change-box">
<radio value="1" style="transform: scale(0.9);font-size: 28rpx;" checked="true">个人</radio>
<radio value="2" style="transform: scale(0.9);margin-left: 20rpx;font-size: 28rpx;">单位</radio>
</radio-group>
</view>
<view class="item" v-if="2==personType">
<view class="item-title">单位名称</view>
<input @input="inputOrgName" :value="name" placeholder="请输入单位名称" />
</view>
<view class="item">
<view class="item-title">您的姓名</view>
<input @input="inputBaseName" :value="name" placeholder="请输入您的姓名" />
</view>
<view class="item" v-if="1==personType">
<view class="item-title">身份证号码</view>
<input @input="inputBaseIdCard" :value="idcard" placeholder="请输入身份证号码" />
</view>
<view class="item" v-if="1==personType">
<view class="item-title">人员类型</view>
<radio-group @change="baseChange"
style="margin-top: 20rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;">
<radio value="适龄公民" style="transform: scale(0.8);" checked="true">适龄公民</radio>
<radio value="非适龄公民" style="transform: scale(0.8);margin-top: 10rpx;">非适龄公民</radio>
</radio-group>
<view>提示:依据<国务院关于开展全民义务植树运动的实施办法>适龄公民指男11岁至60岁,女11岁至55岁的中华人民共和国公民。</view>
<view v-if="personList.length==0" class="add-person" @click="addPerson">添加人员</view>
</view>
<view class="item">
<view class="item-title">联系电话</view>
<input @input="inputBasePhone" :value="phone" placeholder="请输入常用手机号码" />
</view>
<view class="item">
<view class="item-title">备注留言</view>
<input @input="inputBaseRemark" :value="remark" placeholder="有什么想说的话可以在这里留言" />
</view>
</view> -->
<!-- 动态添加人员 -->
<!-- <view class="base-person" v-for="(item,index) in personList" :key="index">
<view class="item">
<view class="item-title-box">
<view class="item-title-name">您的姓名</view>
<view class="item-title-del" @click="delPerson(index)">删除该人员</view>
<scroll-view scroll-y="true" style="height: 95%;padding-bottom: 150rpx;margin-bottom: 150rpx;">
<view class="base-person">
<view class="thick-divider"></view>
<view class="item-box">
<view class="item-title">报名类型</view>
<radio-group @change="typeChange($event)" class="item-content">
<radio value="1" style="transform: scale(0.7);font-size: 32rpx;" :checked="personType==1"
color="green">
个人</radio>
<radio value="2" style="transform: scale(0.7);margin-left: 20rpx;font-size: 32rpx;"
:checked="personType==2" color="green">单位</radio>
</radio-group>
</view>
<input @input="addPersonInputName($event,index)" :value="item.name" placeholder="请输入您的姓名" />
<view class="thick-divider"></view>
<block v-if="personType==1">
<view class="item-box">
<view class="item-title">您的姓名</view>
<input @input="inputBaseName" :value="name" placeholder="请输入您的姓名" class="item-content"
placeholder-class="item-input" style="text-align: right;" />
</view>
<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
<view class="item-box" style="margin-top: 0px;">
<view class="item-title">身份证号码</view>
<input placeholder-class="item-input" @input="inputBaseIdCard" :value="idcard"
placeholder="请输入身份证号码" class="item-content" style="text-align: right;" />
</view>
<view class="thick-divider"></view>
<view class="item-box">
<view class="item-title" style="flex: 1;">是否为适龄公民</view>
<radio-group @change="baseChange" class="item-content" style="flex:1.9;">
<radio value="适龄公民" style="transform: scale(0.7);font-size: 32rpx;" color="green"
checked="true">是</radio>
<radio value="非适龄公民" style="transform: scale(0.7);margin-left: 10rpx;font-size: 32rpx;"
color="green">否</radio>
</radio-group>
</view>
<view v-if="1==personType" class="hint-txt">提示:依据<国务院关于开展全民义务植树运动的实施办法>
适龄公民指男11岁至60岁,女11岁至55岁的中华人民共和国公民。</view>
<view class="item-box">
<view class="item-title">联系电话</view>
<input placeholder-class="item-input" @input="inputBasePhone" :value="phone"
placeholder="请输入常用手机号码" class="item-content" style="text-align: right;" />
</view>
<view class="thick-divider"></view>
<view class="item-box-v">
<view class="item-title">备注留言</view>
<view class="item-content-bg">
<textarea maxlength="50" @input="inputBaseRemark" :value="remark"
placeholder="有什么想说的话可以在这里留言">
</textarea>
<text class="hint-num">{{remark.length}}/50</text>
</view>
</view>
</block>
<!-- 单位报名信息 -->
<block v-else>
<view class="item-box">
<view class="item-title">单位名称</view>
<input @input="inputOrgName" :value="orgName" placeholder="请输入单位名称" class="item-content"
placeholder-class="item-input" style="text-align: right;" />
</view>
<view class="thick-divider"></view>
<view class="item-box">
<view class="item-title">您的姓名</view>
<input @input="inputBaseName" :value="name" placeholder="请输入您的姓名" class="item-content"
placeholder-class="item-input" style="text-align: right;" />
</view>
<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
<view class="item-box" style="margin-top: 0rpx;">
<view class="item-title">联系电话</view>
<input placeholder-class="item-input" @input="inputBasePhone" :value="phone"
placeholder="请输入常用手机号码" class="item-content" style="text-align: right;" />
</view>
<view class="thick-divider"></view>
<view class="item-box-v">
<view class="item-title">备注留言</view>
<view class="item-content-bg">
<textarea maxlength="50" @input="inputBaseRemark" :value="remark"
placeholder="有什么想说的话可以在这里留言">
</textarea>
<text class="hint-num">{{remark.length}}/50</text>
</view>
</view>
</block>
</view>
<view class="item">
<view class="item-title">身份证号码</view>
<input @input="addPersonInputIdCard($event,index)" :value="item.idcard" placeholder="请输入身份证号码" />
</view>
<view class="item">
<view class="item-title">人员类型</view>
<radio-group @change="addChange($event,index)"
style="margin-top: 20rpx;display: flex;flex-direction: column;justify-content: flex-start;align-items: flex-start;">
<radio value="适龄公民" style="transform: scale(0.8);" checked="true">适龄公民</radio>
<radio value="非适龄公民" style="transform: scale(0.8);margin-top: 10rpx;">非适龄公民</radio>
</radio-group>
<view>提示:依据<国务院关于开展全民义务植树运动的实施办法>适龄公民指男11岁至60岁,女11岁至55岁的中华人民共和国公民。</view>
<view v-if="index == personList.length-1" class="add-person" @click="addPerson">添加人员</view>
</view>
<view class="item">
<view class="item-title">联系电话</view>
<input @input="addPersonInputPhone($event,index)" :value="item.phone" placeholder="请输入常用手机号码" />
</view>
</view> -->
<view class="save-btn" @click="doSave">确认提交</view>
</scroll-view>
<view class="btn-box">
<view class="save-btn" @click="doSave">确认提交</view>
</view>
</view>
</view>
</template>
@ -148,6 +126,7 @@
},
inputBaseName(event) {
this.name = event.target.value
console.log(this.name)
},
inputBaseIdCard(event) {
this.idcard = event.target.value
@ -387,9 +366,9 @@
display: flex;
flex: 1;
flex-direction: column;
overflow: auto;
overflow: hidden;
height: 100%;
background: #f2f2f2;
background: white;
}
.content {
@ -409,6 +388,19 @@
margin-bottom: 20rpx;
width: 100%;
.thick-divider {
height: 15rpx;
background: #f2f2f2;
width: 100%;
}
.hint-txt {
padding: 10rpx 40rpx;
color: darkred;
font-size: 20rpx;
background: #f2f2f2;
}
.item-box-v {
display: flex;
flex-direction: column;
@ -417,10 +409,11 @@
background: white;
align-items: flex-start;
width: 100%;
padding-bottom: 50rpx;
.item-title {
font-size: 28rpx;
padding: 30rpx;
padding: 10rpx 30rpx;
}
.item-content {
@ -428,19 +421,35 @@
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 30rpx;
padding: 10rpx 30rpx;
font-size: 28rpx;
input {
font-size: 28rpx;
}
}
.item-content-bg {
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 30rpx;
padding: 20rpx;
width: 85%;
background: #f3f3f3;
border-radius: 10rpx;
align-self: center;
height: 220rpx;
textarea {
font-size: 28rpx;
text-align: left;
width: 100%;
}
.hint-num {
align-self: flex-end;
}
}
}
@ -454,10 +463,14 @@
align-items: center;
width: 100%;
.item-input {
font-size: 28rpx;
}
.item-title {
font-size: 28rpx;
flex: 0.5;
padding: 30rpx;
padding: 15rpx 30rpx;
}
.item-content {
@ -466,7 +479,7 @@
justify-content: flex-end;
align-items: center;
flex: 1.5;
padding: 30rpx;
padding: 15rpx 30rpx;
}
}
@ -526,18 +539,30 @@
padding: 10rpx;
}
.save-btn {
color: white;
background-color: green;
width: 95%;
border-radius: 10rpx;
text-align: center;
align-self: center;
margin-top: 5rpx;
border-radius: 10rpx;
padding: 10rpx;
.btn-box {
width: 100%;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
background: white;
bottom: 0;
position: fixed;
.save-btn {
color: white;
background-color: green;
width: 95%;
border-radius: 10rpx;
text-align: center;
align-self: center;
margin-top: 5rpx;
border-radius: 10rpx;
padding: 10rpx;
}
}
.type-change-box {
margin-top: 20rpx;
display: flex;