Leadfyy.co
/
blindDate
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

会员注册择偶要求/工作家庭页面

master
石可 5 years ago
parent
f7c89d88df
commit
cf329094cc
5 changed files with 809 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      pages.json
  2. 2
      pages/register/basicInfo.vue
  3. 385
      pages/register/chooseMate.vue
  4. 4
      pages/register/perfectInfo.vue
  5. 409
      pages/register/workFamily.vue

12
pages.json
View File

@ -29,6 +29,18 @@
"navigationBarTitleText": "会员注册-完善信息" "navigationBarTitleText": "会员注册-完善信息"
} }
}, },
{
"path": "pages/register/chooseMate",
"style": {
"navigationBarTitleText": "会员注册-择偶条件"
}
},
{
"path": "pages/register/workFamily",
"style": {
"navigationBarTitleText": "会员注册-工作家庭"
}
},
{ {
"path": "pages/upTheWall/upTheWall", "path": "pages/upTheWall/upTheWall",
"style": { "style": {

2
pages/register/basicInfo.vue
View File

@ -67,7 +67,7 @@
</view> </view>
</view> </view>
<button class="btn" hover-class="lf-opacity">下一步</button>
<button class="btn" hover-class="lf-opacity" @click="$url('/pages/register/perfectInfo')">下一步</button>
</view> </view>
</view> </view>
</template> </template>

385
pages/register/chooseMate.vue
View File

@ -0,0 +1,385 @@
<template>
<view class="lf-p-30">
<view class="up-the-wall">
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>婚史要求</view>
<view class="lf-font-28 lf-color-333">
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
<text>{{ marriage[marriage_index] || '请选择' }}</text>
</picker>
</view>
</view>
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>最低身高</view>
<view class="lf-font-28 lf-color-333">
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
<text>{{ marriage[marriage_index] || '请选择' }}</text>
</picker>
</view>
</view>
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>最低学历要求</view>
<view class="lf-font-28 lf-color-333">
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
<text>{{ marriage[marriage_index] || '请选择' }}</text>
</picker>
</view>
</view>
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
<view class="lf-font-28 lf-color-333"><text class="lf-font-28" style="color: #E21196;">*</text>最低年薪要求</view>
<view @tap="showModal" data-target="ChooseModal" class="lf-font-28 lf-color-333">
请选择
</view>
</view>
<view class="tag-content">
<view class="personal-tag" :class="item.hot?'personal-special1':'personal-active1'" v-for="item of chooseList">{{item.name}}</view>
</view>
<view class="cu-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
<view class="cu-dialog">
<view class="lf-p-b-30 lf-font-32" style="color: #E21196;">
请选择你的家庭成员
</view>
<view class="tag-content1">
<view class="personal-tag1" :class="item.checked?'personal-active':''" :data-value="item.value" v-for="(item,index) of checkbox" @tap.stop="ChooseCheckbox">{{item.name}}</view>
</view>
<view class="lf-row-center">
<view class="work-btn1 work-btn" @click.stop="makeSure()">
确认选择
</view>
</view>
</view>
</view>
<button class="btn" hover-class="lf-opacity">最后一步</button>
</view>
</view>
</template>
<script>
export default {
data(){
return {
marriage: ['已婚', '未婚'],
marriage_index: null,
birth_date: '',
modalName: null,
checkbox: [{
value: 0,
name: '父亲',
checked: true,
hot: false,
}, {
value: 1,
name: '母亲',
checked: true,
hot: false,
}, {
value: 2,
name: '哥哥',
checked: false,
hot: false,
}, {
value: 3,
name: '姐姐',
checked: false,
hot: false,
}, {
value: 4,
name: '儿子',
checked: false,
hot: false,
}, {
value: 5,
name: '儿子(离异归对方)',
checked: false,
hot: true,
}],
chooseList: []
}
},
onLoad(){
},
methods: {
getValue(current, event){
this[current +'_index'] = event.detail.value;
},
showModal(e) {
this.modalName = e.currentTarget.dataset.target
},
hideModal(e) {
this.modalName = null
},
makeSure(e) {
this.chooseList = [];
this.checkbox.forEach(item => {
if(item.checked == true) {
this.chooseList.push(item)
}
});
this.modalName = null
},
ChooseCheckbox(e) {
let items = this.checkbox;
let values = e.currentTarget.dataset.value;
for (let i = 0, lenI = items.length; i < lenI; ++i) {
if (items[i].value == values) {
items[i].checked = !items[i].checked;
break
}
}
}
}
}
</script>
<style>
page {
background-color: #F5F5F5;
}
</style>
<style scoped lang="scss">
.perfance-area {
background-color: #F5F5F5;
width: 560rpx;
border-radius: 10rpx;
padding: 30rpx;
}
.up-the-wall {
width: 100%;
height: max-content;
padding: 21rpx 32rpx 21rpx;
background-color: white;
border-radius: 10rpx;
}
/deep/.input-placeholder {
/* placeholder颜色 */
color: #777777;
/* placeholder字体大小 */
font-size: 28rpx;
}
.border-register {
border-bottom: 1px solid #f5f5f5;
}
.btn{
width: 100%;
height: 90rpx;
line-height: 90rpx;
margin-top: 20rpx;
padding-bottom: 10rpx;
background: #E21196;
border-radius: 46rpx;
color: #FFFFFF;
}
.tag-content {
width: 600rpx;
flex-wrap: wrap;
display: flex;
margin-top: 10rpx;
}
.personal-tag {
margin: 10rpx 4rpx;
width: max-content;
padding: 2rpx 20rpx;
height: 55rpx;
border-radius: 28rpx;
border: 1rpx solid #E21196;
color: #E21196;
font-size: 28rpx;
margin-right: 15rpx;
display: flex;
justify-content: center;
align-items: center;
&:nth-child(5n) {
margin-right: 0;
}
&:nth-child(n + 6) {
margin-top: 20rpx;
}
}
.tag-content1 {
width: 600rpx;
flex-wrap: wrap;
display: flex;
}
.personal-tag1 {
width: max-content;
padding: 8rpx 25rpx;
height: 55rpx;
border-radius: 10rpx;
border: 1rpx solid #ccc;
color: #969090;
font-size: 28rpx;
margin-right: 15rpx;
display: flex;
justify-content: center;
align-items: center;
&:nth-child(5n) {
margin-right: 0;
}
&:nth-child(n + 6) {
margin-top: 20rpx;
}
}
.personal-active {
border: 1rpx solid #E21196!important;
color: #E21196!important;
}
.personal-special {
border: 1rpx solid orange!important;
color: orange!important;
}
.personal-active1 {
border: none!important;
background-color: #E21196!important;
color: #fff!important;
}
.personal-special1 {
border: none!important;
background-color: orange!important;
color: #fff!important;
}
.work-btn1 {
border-radius: 10rpx!important;
}
.work-btn {
width: 626rpx;
height: 90rpx;
background: #E21196;
border-radius: 45rpx;
color: white;
font-size: 32rpx;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
margin-top: 60rpx;
}
.work-tag {
height: 100%!important;
}
.work-tag {
width: 686rpx;
height: 215rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin: 30rpx auto;
display: flex;
flex-direction: column;
/* justify-content: space-around; */
padding: 30rpx;
}
//窗口
.cu-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1110;
opacity: 0;
outline: 0;
text-align: center;
-ms-transform: scale(1.185);
transform: scale(1.185);
backface-visibility: hidden;
perspective: 2000upx;
background: rgba(0, 0, 0, 0.6);
transition: all 0.3s ease-in-out 0s;
pointer-events: none;
}
.cu-modal::before {
content: "\200B";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.cu-modal.show {
opacity: 1;
transition-duration: 0.3s;
-ms-transform: scale(1);
transform: scale(1);
overflow-x: hidden;
overflow-y: auto;
pointer-events: auto;
}
.cu-dialog {
position: relative;
display: inline-block;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
width: 680upx;
max-width: 100%;
background-color: #f8f8f8;
border-radius: 10upx;
overflow: hidden;
padding: 30rpx;
}
.cu-modal.bottom-modal::before {
vertical-align: bottom;
}
.cu-modal.bottom-modal .cu-dialog {
width: 100%;
border-radius: 0;
}
.cu-modal.bottom-modal {
margin-bottom: -1000upx;
}
.cu-modal.bottom-modal.show {
margin-bottom: 0;
}
.cu-modal.drawer-modal {
transform: scale(1);
display: flex;
}
.cu-modal.drawer-modal .cu-dialog {
height: 100%;
min-width: 200upx;
border-radius: 0;
margin: initial;
transition-duration: 0.3s;
}
.cu-modal.drawer-modal.justify-start .cu-dialog {
transform: translateX(-100%);
}
.cu-modal.drawer-modal.justify-end .cu-dialog {
transform: translateX(100%);
}
.cu-modal.drawer-modal.show .cu-dialog {
transform: translateX(0%);
}
.cu-modal .cu-dialog>.cu-bar:first-child .action{
min-width: 100rpx;
margin-right: 0;
min-height: 100rpx;
}
</style>

4
pages/register/perfectInfo.vue
View File

@ -27,7 +27,7 @@
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register"> <view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
<view class="lf-font-28 lf-color-333"><text class="lf-font-28" style="color: #E21196;">*</text>家庭成员</view> <view class="lf-font-28 lf-color-333"><text class="lf-font-28" style="color: #E21196;">*</text>家庭成员</view>
<view @tap="showModal" data-target="ChooseModal" class="lf-font-28 lf-color-777">
<view @tap="showModal" data-target="ChooseModal" class="lf-font-28 lf-color-333">
请选择 请选择
</view> </view>
</view> </view>
@ -62,7 +62,7 @@
<textarea class="perfance-area" maxlength="200" v-model="contentArea" placeholder="展现自己,也可以说出您的故事~" /> <textarea class="perfance-area" maxlength="200" v-model="contentArea" placeholder="展现自己,也可以说出您的故事~" />
</view> </view>
</view> </view>
<button class="btn" hover-class="lf-opacity">不错,下一步</button>
<button class="btn" hover-class="lf-opacity" @click="$url('/pages/register/workFamily')">下一步</button>
</view> </view>
</view> </view>
</template> </template>

409
pages/register/workFamily.vue
View File

@ -0,0 +1,409 @@
<template>
<view class="lf-p-30">
<view class="up-the-wall">
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>单位性质</view>
<view class="lf-font-28 lf-color-333">
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
<text>{{ marriage[marriage_index] || '请选择' }}</text>
</picker>
</view>
</view>
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>所属行业</view>
<view class="lf-font-28 lf-color-333">
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
<text>{{ marriage[marriage_index] || '请选择' }}</text>
</picker>
</view>
</view>
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>户籍地</view>
<view class="lf-font-28 lf-color-333">
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
<text>{{ marriage[marriage_index] || '请选择' }}</text>
</picker>
</view>
</view>
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>居住情况</view>
<view class="lf-font-28 lf-color-333">
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
<text>{{ marriage[marriage_index] || '请选择' }}</text>
</picker>
</view>
</view>
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>住房情况</view>
<view class="lf-font-28 lf-color-333">
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
<text>{{ marriage[marriage_index] || '请选择' }}</text>
</picker>
</view>
</view>
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>购房情况</view>
<view class="lf-font-28 lf-color-333">
<picker mode="selector" @change="getValue('marriage', $event)" :range="marriage" :value="marriage_index">
<text>{{ marriage[marriage_index] || '请选择' }}</text>
</picker>
</view>
</view>
<view class="lf-row-between lf-p-t-30 lf-p-b-30 border-register">
<view class="lf-font-28 lf-color-333"><text class="lf-font-28" style="color: #E21196;">*</text>家庭成员</view>
<view @tap="showModal" data-target="ChooseModal" class="lf-font-28 lf-color-333">
请选择
</view>
</view>
<view class="tag-content">
<view class="personal-tag" :class="item.hot?'personal-special1':'personal-active1'" v-for="item of chooseList">{{item.name}}</view>
</view>
<view class="cu-modal" :class="modalName=='ChooseModal'?'show':''" @tap="hideModal">
<view class="cu-dialog">
<view class="lf-p-b-30 lf-font-32" style="color: #E21196;">
请选择你的家庭成员
</view>
<view class="tag-content1">
<view class="personal-tag1" :class="item.checked?'personal-active':''" :data-value="item.value" v-for="(item,index) of checkbox" @tap.stop="ChooseCheckbox">{{item.name}}</view>
</view>
<view class="lf-row-center">
<view class="work-btn1 work-btn" @click.stop="makeSure()">
确认选择
</view>
</view>
</view>
</view>
<button class="btn" hover-class="lf-opacity" @click="$url('/pages/register/chooseMate')">不错,下一步</button>
</view>
</view>
</template>
<script>
export default {
data(){
return {
marriage: ['已婚', '未婚'],
marriage_index: null,
birth_date: '',
contentArea: '',
modalName: null,
checkbox: [{
value: 0,
name: '父亲',
checked: true,
hot: false,
}, {
value: 1,
name: '母亲',
checked: true,
hot: false,
}, {
value: 2,
name: '哥哥',
checked: false,
hot: false,
}, {
value: 3,
name: '姐姐',
checked: false,
hot: false,
}, {
value: 4,
name: '儿子',
checked: false,
hot: false,
}, {
value: 5,
name: '儿子(离异归对方)',
checked: false,
hot: true,
}],
chooseList: []
}
},
onLoad(){
},
methods: {
getValue(current, event){
this[current +'_index'] = event.detail.value;
},
showModal(e) {
this.modalName = e.currentTarget.dataset.target
},
hideModal(e) {
this.modalName = null
},
makeSure(e) {
this.chooseList = [];
this.checkbox.forEach(item => {
if(item.checked == true) {
this.chooseList.push(item)
}
});
this.modalName = null
},
ChooseCheckbox(e) {
let items = this.checkbox;
let values = e.currentTarget.dataset.value;
for (let i = 0, lenI = items.length; i < lenI; ++i) {
if (items[i].value == values) {
items[i].checked = !items[i].checked;
break
}
}
}
}
}
</script>
<style>
page {
background-color: #F5F5F5;
}
</style>
<style scoped lang="scss">
.perfance-area {
background-color: #F5F5F5;
width: 560rpx;
border-radius: 10rpx;
padding: 30rpx;
}
.up-the-wall {
width: 100%;
height: max-content;
padding: 21rpx 32rpx 21rpx;
background-color: white;
border-radius: 10rpx;
}
/deep/.input-placeholder {
/* placeholder颜色 */
color: #777777;
/* placeholder字体大小 */
font-size: 28rpx;
}
.border-register {
border-bottom: 1px solid #f5f5f5;
}
.btn{
width: 100%;
height: 90rpx;
line-height: 90rpx;
margin-top: 20rpx;
padding-bottom: 10rpx;
background: #E21196;
border-radius: 46rpx;
color: #FFFFFF;
}
.tag-content {
width: 600rpx;
flex-wrap: wrap;
display: flex;
margin-top: 10rpx;
}
.personal-tag {
margin: 10rpx 4rpx;
width: max-content;
padding: 2rpx 20rpx;
height: 55rpx;
border-radius: 28rpx;
border: 1rpx solid #E21196;
color: #E21196;
font-size: 28rpx;
margin-right: 15rpx;
display: flex;
justify-content: center;
align-items: center;
&:nth-child(5n) {
margin-right: 0;
}
&:nth-child(n + 6) {
margin-top: 20rpx;
}
}
.tag-content1 {
width: 600rpx;
flex-wrap: wrap;
display: flex;
}
.personal-tag1 {
width: max-content;
padding: 8rpx 25rpx;
height: 55rpx;
border-radius: 10rpx;
border: 1rpx solid #ccc;
color: #969090;
font-size: 28rpx;
margin-right: 15rpx;
display: flex;
justify-content: center;
align-items: center;
&:nth-child(5n) {
margin-right: 0;
}
&:nth-child(n + 6) {
margin-top: 20rpx;
}
}
.personal-active {
border: 1rpx solid #E21196!important;
color: #E21196!important;
}
.personal-special {
border: 1rpx solid orange!important;
color: orange!important;
}
.personal-active1 {
border: none!important;
background-color: #E21196!important;
color: #fff!important;
}
.personal-special1 {
border: none!important;
background-color: orange!important;
color: #fff!important;
}
.work-btn1 {
border-radius: 10rpx!important;
}
.work-btn {
width: 626rpx;
height: 90rpx;
background: #E21196;
border-radius: 45rpx;
color: white;
font-size: 32rpx;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
margin-top: 60rpx;
}
.work-tag {
height: 100%!important;
}
.work-tag {
width: 686rpx;
height: 215rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin: 30rpx auto;
display: flex;
flex-direction: column;
/* justify-content: space-around; */
padding: 30rpx;
}
//窗口
.cu-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1110;
opacity: 0;
outline: 0;
text-align: center;
-ms-transform: scale(1.185);
transform: scale(1.185);
backface-visibility: hidden;
perspective: 2000upx;
background: rgba(0, 0, 0, 0.6);
transition: all 0.3s ease-in-out 0s;
pointer-events: none;
}
.cu-modal::before {
content: "\200B";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.cu-modal.show {
opacity: 1;
transition-duration: 0.3s;
-ms-transform: scale(1);
transform: scale(1);
overflow-x: hidden;
overflow-y: auto;
pointer-events: auto;
}
.cu-dialog {
position: relative;
display: inline-block;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
width: 680upx;
max-width: 100%;
background-color: #f8f8f8;
border-radius: 10upx;
overflow: hidden;
padding: 30rpx;
}
.cu-modal.bottom-modal::before {
vertical-align: bottom;
}
.cu-modal.bottom-modal .cu-dialog {
width: 100%;
border-radius: 0;
}
.cu-modal.bottom-modal {
margin-bottom: -1000upx;
}
.cu-modal.bottom-modal.show {
margin-bottom: 0;
}
.cu-modal.drawer-modal {
transform: scale(1);
display: flex;
}
.cu-modal.drawer-modal .cu-dialog {
height: 100%;
min-width: 200upx;
border-radius: 0;
margin: initial;
transition-duration: 0.3s;
}
.cu-modal.drawer-modal.justify-start .cu-dialog {
transform: translateX(-100%);
}
.cu-modal.drawer-modal.justify-end .cu-dialog {
transform: translateX(100%);
}
.cu-modal.drawer-modal.show .cu-dialog {
transform: translateX(0%);
}
.cu-modal .cu-dialog>.cu-bar:first-child .action{
min-width: 100rpx;
margin-right: 0;
min-height: 100rpx;
}
</style>
Write Preview
Loading…
Cancel
Save