|
|
<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>
|
