Browse Source

[完成] 基本资料页面UI

master
邓平艺 5 years ago
parent
commit
353d0ea00b
  1. 6
      pages.json
  2. 179
      pages/my/basicInformation.vue
  3. 8
      pages/my/editInfo.vue

6
pages.json

@ -166,6 +166,12 @@
"style": {
"navigationBarTitleText": "内心独白"
}
},
{
"path": "pages/my/basicInformation",
"style": {
"navigationBarTitleText": "基本资料"
}
}
],
"globalStyle": {

179
pages/my/basicInformation.vue

@ -0,0 +1,179 @@
<template>
<view class="content">
<view class="card">
<view class="lf-row-between lf-m-b-30">
<view>
<text class="lf-color-primary">*</text>
<text class="lf-font-28 lf-color-333">个人昵称</text>
</view>
<view>
<input class="input" placeholder="请输入" />
</view>
</view>
<view class="lf-row-between lf-m-b-30">
<view>
<text class="lf-color-primary">*</text>
<text class="lf-font-28 lf-color-333">性别</text>
</view>
<view>
<input class="input" placeholder="请输入" />
</view>
</view>
<view class="lf-row-between lf-m-b-30">
<view>
<text class="lf-color-primary">*</text>
<text class="lf-font-28 lf-color-333">婚姻状况</text>
</view>
<view class="picker-w">
<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-m-b-30">
<view>
<text class="lf-color-primary">*</text>
<text class="lf-font-28 lf-color-333">户籍地</text>
</view>
<view class="picker-w">
<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-m-b-30">
<view>
<text class="lf-color-primary">*</text>
<text class="lf-font-28 lf-color-333">学历</text>
</view>
<view class="picker-w">
<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-m-b-30">
<view>
<text class="lf-color-primary">*</text>
<text class="lf-font-28 lf-color-333">身高</text>
</view>
<view>
<input class="input" placeholder="请输入" />
</view>
</view>
<view class="lf-row-between lf-m-b-30">
<view>
<text class="lf-color-primary">*</text>
<text class="lf-font-28 lf-color-333">体重</text>
</view>
<view>
<input class="input" placeholder="请输入" />
</view>
</view>
<view class="lf-row-between lf-m-b-30">
<view>
<text class="lf-color-primary">*</text>
<text class="lf-font-28 lf-color-333">生日</text>
</view>
<view class="picker-w">
<picker mode="date" @change="e => birth_date = e.detail.value">
<text>{{ birth_date || '请选择' }}</text>
</picker>
</view>
</view>
<view class="lf-row-between lf-m-b-30">
<view>
<text class="lf-color-primary">*</text>
<text class="lf-font-28 lf-color-333">属相</text>
</view>
<view class="picker-w">
<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-m-b-30">
<view>
<text class="lf-color-primary">*</text>
<text class="lf-font-28 lf-color-333">星座</text>
</view>
<view class="picker-w">
<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-m-b-30">
<view>
<text class="lf-font-28 lf-color-333 lf-m-l-14">外貌</text>
</view>
<view class="picker-w">
<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>
page{
background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped="scoped">
.content{
padding: 30rpx 32rpx;
width: 750rpx;
height: max-content;
box-sizing: border-box;
.card{
width: 686rpx;
height: max-content;
background-color: #FFFFFF;
border-radius: 10rpx;
padding: 30rpx;
box-sizing: border-box;
.input{
width: 400rpx;
text-align: right;
}
.picker-w{
width: 400rpx;
text-align: right;
}
.btn{
width: 100%;
height: 90rpx;
line-height: 90rpx;
margin-top: 60rpx;
padding-bottom: 10rpx;
background: #E21196;
border-radius: 46rpx;
color: #FFFFFF;
}
}
}
</style>

8
pages/my/editInfo.vue

@ -13,17 +13,17 @@
</view>
<view class="edit-tag">
<view class="lf-row-between lf-w-100 lf-m-b-30">
<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">为什么要实名认证</view>
<view class="lf-font-28 lf-color-777">去编辑<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view>
<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">内心独白</view>
<view class="lf-font-28 lf-color-777" @click="$url('/pages/my/innerMonologue')">去编辑<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view>
</view>
<view class="lf-color-777 lf-font-28">
为给大家创建一个真实安全的优质的脱单环境确保会员真诚相亲每个都是人工审核
了解Ta的购车住房情况和家庭成员资料成员资料成员资料成员资料成员资料成员资料成员资料
</view>
</view>
<view class="edit-tag edit-tag1">
<view class="lf-row-between lf-w-100 lf-m-b-30">
<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20">基本资料</view>
<view class="lf-font-28 lf-color-777">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view>
<view class="lf-font-28 lf-color-777" @click="$url('/pages/my/basicInformation')">去完善<u-icon name="arrow-right lf-m-l-15 lf-font-22"></u-icon></view>
</view>
<view class="lf-color-777 lf-font-28 tag-content">
<view class="personal-tag">其他省市</view>

Loading…
Cancel
Save