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

会员注册基本信息/会员注册完善信息页面

master
石可 5 years ago
parent
8a238cf507
commit
c7c2518969
4 changed files with 261 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      pages.json
  2. 6
      pages/my/basicInformation.vue
  3. 141
      pages/register/basicInfo.vue
  4. 102
      pages/register/perfectInfo.vue

12
pages.json
View File

@ -17,6 +17,18 @@
"enablePullDownRefresh": true
}
},
{
"path": "pages/register/basicInfo",
"style": {
"navigationBarTitleText": "会员注册-基本信息"
}
},
{
"path": "pages/register/perfectInfo",
"style": {
"navigationBarTitleText": "会员注册-完善信息"
}
},
{
"path": "pages/upTheWall/upTheWall",
"style": {

6
pages/my/basicInformation.vue
View File

@ -144,6 +144,12 @@
}
</style>
<style lang="scss" scoped="scoped">
/deep/.input-placeholder {
/* placeholder颜色 */
color: #777777;
/* placeholder字体大小 */
font-size: 28rpx;
}
.content{
padding: 30rpx 32rpx;
width: 750rpx;

141
pages/register/basicInfo.vue
View File

@ -0,0 +1,141 @@
<template>
<view>
<view class="up-the-wall">
<view class="lf-row-between">
<view class="lf-font-32 lf-color-black">上传照片</view>
</view>
<scroll-view class="scroll-bar" :scroll-x="true">
<view class="lf-flex lf-row-between lf-h-100 border-register">
<view class="user-item" @click="$url('/pages/upTheWall/upTheWall')">
<lf-image class="add-icon" src="../../static/images/add_icon.png"></lf-image>
</view>
<!-- <view class="user-item" v-for="item in 6" :key="item">
<image class="avatar" src="https://picsum.photos/200"></image>
<view class="lf-m-t-12 lf-color-555 lf-font-24 lf-line-1">编号 73949</view>
</view> -->
<view class="lf-color-777">
上传近期美照可更引人关注哦~
</view>
</view>
</scroll-view>
<view class="lf-row-between">
<view class="lf-font-28 lf-color-333"><text class="lf-color-primary">*</text>微信号</view>
<view class="lf-font-28 lf-color-333">_abcaca</view>
</view>
<view class="lf-p-t-30 lf-p-b-30 lf-font-24 lf-flex-column lf-color-777 border-register">
<view>1.提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示</view>
<view class="lf-m-t-10">2.提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示提示</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>
<button class="btn" hover-class="lf-opacity">下一步</button>
</view>
</view>
</template>
<script>
export default {
data(){
return {
marriage: ['已婚', '未婚'],
marriage_index: null,
birth_date: ''
}
},
onLoad(){
},
methods: {
getValue(current, event){
this[current +'_index'] = event.detail.value;
}
}
}
</script>
<style lang="scss" scoped>
.border-register {
border-bottom: 1px solid #f5f5f5;
}
.up-the-wall{
width: 750rpx;
height: max-content;
padding: 21rpx 32rpx 0;
.scroll-bar{
width: 100%;
height: 164rpx;
padding: 30rpx 0;
.user-item{
width: 136rpx;
margin-right: 40rpx;
display: flex;
justify-content: center;
flex-wrap: wrap;
&:last-child{
margin-right: 0rpx;
}
}
.add-icon{
width: 110rpx;
height: 110rpx;
border-radius: 50%;
}
.avatar{
width: 110rpx;
height: 110rpx;
border: 5rpx solid #E21196;
border-radius: 50%;
box-sizing: border-box;
}
}
}
.btn{
width: 100%;
height: 90rpx;
line-height: 90rpx;
margin-top: 60rpx;
padding-bottom: 10rpx;
background: #E21196;
border-radius: 46rpx;
color: #FFFFFF;
}
</style>

102
pages/register/perfectInfo.vue
View File

@ -0,0 +1,102 @@
<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 lf-row-between">
<input class="input" placeholder="请输入" style="text-align: right;" />
<text class="lf-m-l-10">cm</text>
</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">性格特征(选填)</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-flex-column lf-m-b-30 lf-p-t-30">
<view class="lf-font-28 lf-color-333 lf-m-b-20 lf-row-between">
<view><text class="lf-font-28 lf-color-primary">*</text>内心独白</view>
<view class="lf-m-r-10">{{ contentArea.length }}/200</view>
</view>
<view>
<textarea class="perfance-area" maxlength="200" v-model="contentArea" placeholder="展现自己,也可以说出您的故事~" />
</view>
</view>
<button class="btn" hover-class="lf-opacity">不错,下一步</button>
</view>
</view>
</template>
<script>
export default {
data(){
return {
marriage: ['已婚', '未婚'],
marriage_index: null,
birth_date: '',
contentArea: ''
}
},
onLoad(){
},
methods: {
getValue(current, event){
this[current +'_index'] = event.detail.value;
}
}
}
</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: 60rpx;
padding-bottom: 10rpx;
background: #E21196;
border-radius: 46rpx;
color: #FFFFFF;
}
</style>
Write Preview
Loading…
Cancel
Save