邓平艺
5 years ago
7 changed files with 689 additions and 127 deletions
-
12pages.json
-
6pages/my/basicInformation.vue
-
32pages/my/qzone.vue
-
181pages/my/uploadInfo.vue
-
50pages/my/welfare.vue
-
141pages/register/basicInfo.vue
-
394pages/register/perfectInfo.vue
@ -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> |
|||
@ -0,0 +1,394 @@ |
|||
<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-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-777"> |
|||
请选择 |
|||
</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> |
|||
|
|||
<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: '', |
|||
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: 60rpx; |
|||
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
Reference in new issue