cfc/cfc-frontend/pages/profile/portrait-edit.vue

<template>
  <view class="portrait-edit-page">
    <view class="section">
      <view class="section-title">我的画像描述</view>
      <view class="hint">请输入你的个人画像描述，AI 会根据这些信息提供更有针对性的建议（最多 2000 字）</view>

      <textarea
        class="portrait-textarea"
        :value="portraitPrompt"
        placeholder="例如：我家孩子 8 岁，偏瘦，挑食，容易积食，睡眠不足..."
        maxlength="2000"
        @input="onInput"
        auto-height
      ></textarea>
      <view class="char-count">{{ portraitPrompt.length }}/2000</view>
    </view>

    <view class="section" v-if="renderedSnapshot">
      <view class="section-title">参考指标（自动生成）</view>
      <view class="snapshot-text">{{ renderedSnapshot }}</view>
    </view>
  </view>

  <view class="save-bar">
    <button class="save-btn" :loading="saving" @click="onSave">保存</button>
  </view>
</template>

<script>
import { getPortrait, editPortrait } from '../../utils/api.js'
export default {
  data() {
    return {
      portraitPrompt: '',
      renderedSnapshot: '',
      saving: false
    }
  },
  onLoad() {
    this.loadPortrait()
  },
  methods: {
    async loadPortrait() {
      try {
        const res = await getPortrait({ memberId: this.$store.state.currentMemberId })
        if (res.code === 200 && res.data) {
          this.portraitPrompt = res.data.portraitPrompt || ''
          this.renderedSnapshot = res.data.renderedSnapshot || ''
        }
      } catch (e) {
        console.error('加载画像失败', e)
      }
    },
    onInput(e) {
      this.portraitPrompt = e.detail.value
    },
    async onSave() {
      this.saving = true
      try {
        const res = await editPortrait({ portraitPrompt: this.portraitPrompt })
        if (res.code === 200) {
          uni.showToast({ title: '保存成功', icon: 'success' })
          this.loadPortrait()
        } else {
          uni.showToast({ title: res.message || '保存失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '保存失败', icon: 'none' })
      } finally {
        this.saving = false
      }
    }
  }
}
</script>

<style scoped>
.portrait-edit-page {
  padding: 24rpx;
  padding-bottom: 160rpx;
  min-height: 100vh;
  background: #f5f5f5;
  box-sizing: border-box;
}
.section {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
}
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
  color: #333;
}
.hint {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 16rpx;
}
.portrait-textarea {
  width: 100%;
  min-height: 500rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 16rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  line-height: 1.6;
}
.char-count {
  text-align: right;
  font-size: 22rpx;
  color: #999;
  margin-top: 8rpx;
}
.snapshot-text {
  font-size: 26rpx;
  color: #555;
  white-space: pre-wrap;
  line-height: 1.6;
}
.save-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx 24rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  z-index: 100;
}
.save-btn {
  background: #F97316;
  color: #fff;
  border-radius: 44rpx;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 32rpx;
}
</style>