106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
<template>
|
||
<scroll-view class="panel-scroll" scroll-y>
|
||
<view class="card">
|
||
<text class="label">我是谁（恋爱相关的自我描述）</text>
|
||
<textarea
|
||
class="area"
|
||
v-model="local.selfIntro"
|
||
placeholder="例如：我的性格、价值观、在关系里看重什么…"
|
||
maxlength="2000"
|
||
:show-confirm-bar="false"
|
||
/>
|
||
</view>
|
||
<view class="card">
|
||
<text class="label">对另一半的要求</text>
|
||
<textarea
|
||
class="area"
|
||
v-model="local.partnerExpect"
|
||
placeholder="例如：希望对方具备的特质、相处方式、底线与期待…"
|
||
maxlength="2000"
|
||
:show-confirm-bar="false"
|
||
/>
|
||
</view>
|
||
<button class="btn-save" type="primary" @click="save">保存</button>
|
||
</scroll-view>
|
||
</template>
|
||
|
||
<script>
|
||
const KEY = 'xixi_who_am_i';
|
||
|
||
export default {
|
||
name: 'XixiWhoAmI',
|
||
data() {
|
||
return {
|
||
local: {
|
||
selfIntro: '',
|
||
partnerExpect: '',
|
||
},
|
||
};
|
||
},
|
||
mounted() {
|
||
this.load();
|
||
},
|
||
methods: {
|
||
load() {
|
||
try {
|
||
const raw = uni.getStorageSync(KEY);
|
||
if (raw && typeof raw === 'object') {
|
||
this.local.selfIntro = raw.selfIntro || '';
|
||
this.local.partnerExpect = raw.partnerExpect || '';
|
||
}
|
||
} catch (e) {
|
||
/* ignore */
|
||
}
|
||
},
|
||
save() {
|
||
try {
|
||
uni.setStorageSync(KEY, { ...this.local });
|
||
uni.showToast({ title: '已保存', icon: 'success' });
|
||
this.$emit('saved');
|
||
} catch (e) {
|
||
uni.showToast({ title: '保存失败', icon: 'none' });
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.panel-scroll {
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
padding: 24rpx 28rpx 32rpx;
|
||
}
|
||
.card {
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 28rpx;
|
||
margin-bottom: 24rpx;
|
||
box-shadow: 0 4rpx 24rpx rgba(233, 30, 140, 0.06);
|
||
}
|
||
.label {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.area {
|
||
width: 100%;
|
||
min-height: 220rpx;
|
||
font-size: 28rpx;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
padding: 16rpx;
|
||
background: #fff8fa;
|
||
border-radius: 12rpx;
|
||
}
|
||
.btn-save {
|
||
margin-top: 12rpx;
|
||
border-radius: 999rpx;
|
||
background: linear-gradient(135deg, #ff6b9d, #e91e8c);
|
||
border: none;
|
||
}
|
||
</style>
|