sundynix-pets/pets-fe/pages/petform/petform.js

const store = require('../../utils/store.js');
const api = require('../../utils/api.js');
const upload = require('../../utils/upload.js');
const { toastErr } = require('../../utils/ui.js');

const GENDERS = ['男孩', '女孩', '不确定'];
// 性格标签预设，多选，存成逗号分隔串
const PERSONA_TAGS = ['活泼', '亲人', '粘人', '高冷', '贪吃', '胆小', '好奇', '温顺'];
// 阶段列表和划分标准都从后端来。原来这里写死 4 个，后端细分成 5 段
// （而且狗还按体型走不同阈值）之后就对不上了 —— 而且不会报错，只是少两个选项。
// 「刚到家 0-30 天」在后端列表的第一个，它和年龄正交，是叠加层

function pad2(n) {
  return n < 10 ? '0' + n : '' + n;
}
function ymd(d) {
  return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate());
}
function monthsSince(bday) {
  const b = new Date(String(bday).slice(0, 10) + 'T00:00:00');
  if (isNaN(b.getTime())) return -1;
  const n = new Date();
  const m = (n.getFullYear() - b.getFullYear()) * 12 + (n.getMonth() - b.getMonth());
  return m < 0 ? 0 : m;
}
function ageLabel(bday) {
  const m = monthsSince(bday);
  if (m < 0) return '';
  return m < 24 ? m + '个月' : Math.floor(m / 12) + '岁';
}
// 和后端 service.StageFromBirthday 一套口径：<12 月幼年，>=7 年老年，其余成年。
// 前端算是为了在用户填完生日时就给出建议值，最终仍以用户选的为准
function stageFromBirthday(bday) {
  const m = monthsSince(bday);
  if (m < 0) return '';
  if (m < 12) return '幼年期';
  if (m >= 84) return '老年期';
  return '成年期';
}

Page({
  data: {
    editing: false,
    petId: '',
    step: 0,
    steps: ['名字', '品种', '资料', '方案'],
    genders: GENDERS,
    stages: [],
    stageRules: [],
    stageBasis: '',
    sizeLabel: '',
    today: '',
    stageAuto: '',
    form: {
      name: '', avatar_file_id: '', avatar_url: '',
      species: 'cat', breed: '',
      gender: '不确定', birthday: '', arrived_at: '',
      weight: '', color: '', stage: '',
      personality: '', allergy: '', notes: '',
      // 第四步挑的方案。'' 是「先空着自己排」，不是「没选」——
      // 所以初始值给 null，用来区分「还没走到第四步」
      template_id: null,
    },
    personaTags: PERSONA_TAGS,
    personaSel: {}, // 性格标签选中态 map
    tplOptions: [],
    breedShow: false,
    breedGroups: [],
    breedAnchor: '',
    saving: false,
  },
  onLoad(q) {
    this.setData({ today: ymd(new Date()) });
    this.loadStages();
    const id = (q && q.id) || '';
    if (!id) return;
    // 编辑：不分步，一屏全放开——用户是来改某一项的，不该被按顺序走一遍
    store
      .ready()
      .then(() => {
        const p = (store.getPets() || []).find((x) => x.id === id) || store.getPet() || {};
        this.setData({
          editing: true,
          petId: id,
          form: {
            name: p.name || '',
            avatar_file_id: '',
            avatar_url: p.avatar_url || '',
            species: p.type === '狗狗' ? 'dog' : 'cat',
            breed: p.breed || '',
            gender: GENDERS.indexOf(p.gender) >= 0 ? p.gender : '不确定',
            birthday: p.birthday ? String(p.birthday).slice(0, 10) : '',
            arrived_at: p.arrived_at ? String(p.arrived_at).slice(0, 10) : '',
            weight: (p.weight || '').replace('kg', ''),
            color: p.color || '',
            personality: p.personality || '',
            allergy: p.allergy || '',
            notes: p.notes || '',
            stage: p.stage || '',
          },
          personaSel: (p.personality || '').split(',').filter(Boolean).reduce((m, t) => ((m[t] = true), m), {}),
        });
      })
      .catch((e) => toastErr(e));
  },

  onName(e) {
    this.setData({ 'form.name': e.detail.value });
  },
  pickAvatar() {
    upload
      .chooseAndUploadImage()
      .then((f) => this.setData({ 'form.avatar_file_id': f.id, 'form.avatar_url': f.url }))
      .catch((e) => {
        if (e && e.canceled) return;
        toastErr(e, '上传失败');
      });
  },
  pickSpecies(e) {
    const sp = e.currentTarget.dataset.sp;
    if (sp === this.data.form.species) return;
    // 换了物种，原来选的品种一定不对了
    this.setData({ 'form.species': sp, 'form.breed': '', breedGroups: [] });
    this.loadStages();
  },
  pickGender(e) {
    this.setData({ 'form.gender': e.currentTarget.dataset.v });
  },
  pickStage(e) {
    const v = e.currentTarget.dataset.v;
    this.setData({ 'form.stage': v, stageBasis: this.basisOf(v) });
  },
  basisOf(stage) {
    const r = (this.data.stageRules || []).find((x) => x.stage === stage);
    return r ? r.range + ' · ' + r.basis : '';
  },
  // 阶段的划分标准要按物种和体型取：同样 10 个月，吉娃娃已经是青年期，
  // 大丹犬还在幼年期。体型从选中品种的 size_class 来
  loadStages() {
    const f = this.data.form;
    let size = '';
    (this.data.breedGroups || []).forEach((g) =>
      g.items.forEach((b) => {
        if (b.name === f.breed) size = b.size_class || '';
      }),
    );
    api
      .lifeStages(f.species, size)
      .then((d) => {
        const rules = (d && d.stages) || [];
        this.setData({
          stageRules: rules,
          // 阶段选项 = 「刚到家」+ 五个年龄段。刚到家是叠加层，后端的
          // CareStages 里也在第一个，这里保持一致
          stages: ['刚到家 0-30 天'].concat(rules.map((r) => r.stage)),
          sizeLabel: (d && d.sizes && d.sizes[size]) || '',
          stageBasis: this.basisOf(f.stage),
        });
      })
      .catch(() => {});
  },
  onBirthday(e) {
    const v = e.detail.value;
    const auto = stageFromBirthday(v);
    const patch = { 'form.birthday': v, stageAuto: auto };
    // 用户还没手选过阶段就跟着生日走；选过就不动他的选择
    if (auto && !this.data.form.stage) {
      patch['form.stage'] = auto;
      patch.stageBasis = this.basisOf(auto);
    }
    this.setData(patch);
  },
  onArrived(e) {
    this.setData({ 'form.arrived_at': e.detail.value });
  },
  onWeight(e) {
    this.setData({ 'form.weight': e.detail.value });
  },
  onColor(e) {
    this.setData({ 'form.color': e.detail.value });
  },
  onAllergy(e) {
    this.setData({ 'form.allergy': e.detail.value });
  },
  onNotes(e) {
    this.setData({ 'form.notes': e.detail.value });
  },
  // 性格标签多选：切换选中态，再拼回逗号串存进 form.personality
  togglePersona(e) {
    const tag = e.currentTarget.dataset.v;
    const sel = Object.assign({}, this.data.personaSel);
    if (sel[tag]) delete sel[tag];
    else sel[tag] = true;
    const personality = this.data.personaTags.filter((t) => sel[t]).join(',');
    this.setData({ personaSel: sel, 'form.personality': personality });
  },

  // ── 品种选择器 ──
  openBreed() {
    this.setData({ breedShow: true });
    if (this.data.breedGroups.length) return;
    api
      .breeds(this.data.form.species)
      .then((groups) => this.setData({ breedGroups: groups || [] }))
      .catch((e) => toastErr(e));
  },
  closeBreed() {
    this.setData({ breedShow: false });
  },
  noop() {},
  pickBreed(e) {
    this.setData({ 'form.breed': e.currentTarget.dataset.name, breedShow: false });
    this.loadStages(); // 换了品种可能换了体型，阶段阈值跟着变
  },
  clearBreed() {
    // 「不确定」要留：领养的串串确实说不出品种，逼着选一个只会得到假数据
    this.setData({ 'form.breed': '', breedShow: false });
  },
  jumpInitial(e) {
    this.setData({ breedAnchor: 'bi-' + e.currentTarget.dataset.i });
  },

  loadTemplates() {
    const f = this.data.form;
    api
      .careTemplates(f.species, f.stage)
      .then((opts) => {
        const list = opts || [];
        this.setData({
          tplOptions: list,
          // 默认选第一套：多数用户是新手，给一个合理默认比让他面对空白好。
          // 但「先空着」就在下面，一眼能看到，不是藏起来的
          'form.template_id': list.length ? list[0].id : '',
        });
      })
      .catch(() => this.setData({ tplOptions: [], 'form.template_id': '' }));
  },
  pickTemplate(e) {
    this.setData({ 'form.template_id': e.currentTarget.dataset.id });
  },

  // ── 分步 ──
  prev() {
    if (this.data.step > 0) this.setData({ step: this.data.step - 1 });
  },
  // 每一步只校验这一步的东西。三步全填完才校验的话，用户在第三步才被告知
  // 第一步没填名字，还得翻回去
  stepError() {
    const f = this.data.form;
    if (this.data.step === 0 && !f.name.trim()) return '先给它起个名字';
    if (this.data.step === 1 && !f.species) return '选一下是猫还是狗';
    if (this.data.step === 2 && !f.stage) return '选一下现在是哪个阶段 —— 方案是按阶段配的';
    return '';
  },
  next() {
    if (this.data.saving) return;
    if (!this.data.editing) {
      const err = this.stepError();
      if (err) return wx.showToast({ title: err, icon: 'none' });
      if (this.data.step < 3) {
        const next = this.data.step + 1;
        this.setData({ step: next });
        if (next === 3) this.loadTemplates(); // 方案按阶段取，得等第三步填完
        return;
      }
    } else if (!this.data.form.name.trim()) {
      return wx.showToast({ title: '名字不能空', icon: 'none' });
    }
    this.submit();
  },
  body() {
    const f = this.data.form;
    const isDog = f.species === 'dog';
    const body = {
      name: f.name.trim(),
      type: isDog ? '狗狗' : '猫猫',
      // emoji 是老字段，列表和海报还在用它兜底；有头像时它不显示
      emoji: isDog ? '🐶' : '🐱',
      gender: f.gender,
      birthday: f.birthday,
      arrived_at: f.arrived_at,
      weight: f.weight,
      color: f.color.trim(),
      breed: f.breed,
      personality: f.personality,
      allergy: f.allergy.trim(),
      notes: f.notes.trim(),
      stage: f.stage || stageFromBirthday(f.birthday) || '成年期',
      age: ageLabel(f.birthday),
    };
    // 没重新传头像就不带这个字段，别把已有头像覆盖成空
    if (f.avatar_file_id) body.avatar_file_id = f.avatar_file_id;
    return body;
  },
  submit() {
    this.setData({ saving: true });
    const b = this.body();
    const tplID = this.data.form.template_id;
    const req = this.data.editing ? api.updatePet(this.data.petId, b) : api.createPet(b);
    req
      // 套方案要等档案建出来才有 pet id。套用失败不算建档失败——
      // 档案已经建好了，方案之后在计划页还能套，不该把用户退回表单
      .then((pet) => {
        if (this.data.editing || !tplID || !pet || !pet.id) return;
        return api.applyTemplate(pet.id, tplID, 0).catch(() => {});
      })
      .then(() => store.loadPets())
      .then(() => {
        this.setData({ saving: false });
        wx.showToast({ title: this.data.editing ? '已保存' : '建好啦', icon: 'success' });
        setTimeout(() => wx.navigateBack(), 700);
      })
      .catch((e) => {
        this.setData({ saving: false });
        toastErr(e, '保存失败');
      });
  },
});