109 lines
2.4 KiB
Vue
109 lines
2.4 KiB
Vue
<template>
|
|
<scroll-view class="panel-scroll" scroll-y>
|
|
<view class="card">
|
|
<text class="label">现在两个人的关系</text>
|
|
<textarea
|
|
class="area area-sm"
|
|
v-model="local.relationshipStatus"
|
|
placeholder="例如：刚认识 / 暧昧期 / 已确定关系 / 异地恋…"
|
|
maxlength="800"
|
|
:show-confirm-bar="false"
|
|
/>
|
|
</view>
|
|
<view class="card">
|
|
<text class="label">本次见面要达到的结果</text>
|
|
<textarea
|
|
class="area"
|
|
v-model="local.meetingGoal"
|
|
placeholder="例如：更了解对方家庭观、约定下次约会、化解上次误会…"
|
|
maxlength="2000"
|
|
:show-confirm-bar="false"
|
|
/>
|
|
</view>
|
|
<button class="btn-save" type="primary" @click="save">保存</button>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script>
|
|
const KEY = 'xixi_first_meeting';
|
|
|
|
export default {
|
|
name: 'XixiFirstMeeting',
|
|
data() {
|
|
return {
|
|
local: {
|
|
relationshipStatus: '',
|
|
meetingGoal: '',
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
this.load();
|
|
},
|
|
methods: {
|
|
load() {
|
|
try {
|
|
const raw = uni.getStorageSync(KEY);
|
|
if (raw && typeof raw === 'object') {
|
|
this.local.relationshipStatus = raw.relationshipStatus || '';
|
|
this.local.meetingGoal = raw.meetingGoal || '';
|
|
}
|
|
} 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: 200rpx;
|
|
font-size: 28rpx;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
box-sizing: border-box;
|
|
padding: 16rpx;
|
|
background: #fff8fa;
|
|
border-radius: 12rpx;
|
|
}
|
|
.area-sm {
|
|
min-height: 120rpx;
|
|
}
|
|
.btn-save {
|
|
margin-top: 12rpx;
|
|
border-radius: 999rpx;
|
|
background: linear-gradient(135deg, #ff6b9d, #e91e8c);
|
|
border: none;
|
|
}
|
|
</style>
|