sundynix-pets/pets-fe/components/bottom-sheet/bottom-sheet.wxml

<wxs module="u">
module.exports.sel = function (map, key, index, def) {
  var v = map[key];
  if (v === undefined || v === null) v = def;
  return v === index;
};
</wxs>

<view class="overlay {{show ? 'show' : ''}}" bindtap="onMaskTap">
  <!-- 键盘避让：只用 transform 平移整张弹层（合成层操作，不触发 reflow，
       所以不会把聚焦中的 textarea 抖失焦 → 不再「弹一下就收」的死循环）。
       show/hide 的滑入滑出也并进这一个 transform，避免和 CSS 里的 transform 打架。 -->
  <view class="sheet {{innerType === 'comments' ? 'sheet-cmp' : ''}}" catchtap="noop"
        style="transform:translateY({{show ? (innerType === 'comments' && kbHeight ? ('-' + kbHeight + 'px') : '0px') : '106%'}})">
    <view class="sheetbar"></view>

    <!-- 评论：头 + 滚动列表 + 常驻输入栏。输入栏不能放进滚动区，
         否则列表一滚它就跟着走，点评论回复时还得再找回来 -->
    <block wx:if="{{innerType === 'comments'}}">
      <view class="cmp-head">共 {{total}} 条评论</view>

      <scroll-view class="cmp-list" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
        <view wx:for="{{comments}}" wx:key="id" class="cm"
              bindtap="onReplyTo" data-id="{{item.id}}" data-name="{{item.author_name}}">
          <view class="cm-av">{{item.initial}}</view>
          <view class="cm-body">
            <view class="cm-name">{{item.author_name}}<text wx:if="{{item.is_self}}" class="mine-tag">我</text></view>
            <view class="cm-text">{{item.content}}</view>
            <view wx:if="{{item.imgs.length}}" class="cm-imgs">
              <image wx:for="{{item.imgs}}" wx:for-item="u" wx:key="*this" class="cm-img"
                     src="{{u}}" mode="aspectFill" catchtap="onPreviewCommentImage"
                     data-urls="{{item.imgs}}" data-cur="{{u}}"></image>
            </view>
            <view class="cm-meta">
              <text>{{item.timeText}}</text>
              <text class="cm-reply-btn">回复</text>
              <text wx:if="{{item.is_self}}" class="cm-del" catchtap="onDeleteComment"
                    data-id="{{item.id}}" data-self="{{true}}">删除</text>
            </view>

            <!-- 回复只缩进一层，再深手机上没法读 -->
            <view wx:if="{{item.replies.length}}" class="cm-replies">
              <view wx:for="{{item.replies}}" wx:for-item="r" wx:key="id" class="cm-reply"
                    catchtap="onReplyTo" data-id="{{r.id}}" data-name="{{r.author_name}}">
                <view class="cm-av cm-av-sm">{{r.initial}}</view>
                <view class="cm-body">
                  <view class="cm-name">
                    {{r.author_name}}<text wx:if="{{r.is_self}}" class="mine-tag">我</text>
                    <text wx:if="{{r.reply_to_name}}" class="cm-at"> 回复 {{r.reply_to_name}}</text>
                  </view>
                  <view class="cm-text">{{r.content}}</view>
                  <view class="cm-meta">
                    <text>{{r.timeText}}</text>
                    <text class="cm-reply-btn">回复</text>
                    <text wx:if="{{r.is_self}}" class="cm-del" catchtap="onDeleteComment"
                          data-id="{{r.id}}" data-self="{{true}}">删除</text>
                  </view>
                </view>
              </view>
              <view wx:if="{{item.reply_n > item.replies.length}}" class="cm-more"
                    catchtap="onExpandReplies" data-id="{{item.id}}" data-index="{{index}}">
                — 展开全部 {{item.reply_n}} 条回复
              </view>
            </view>
          </view>
        </view>

        <view wx:if="{{!comments.length}}" class="cmp-empty">
          <view class="cmp-empty-ic"><pt-icon name="comment" size="{{72}}"></pt-icon></view>
          <view class="cmp-empty-t">还没有评论</view>
          <view class="cmp-empty-p">来抢个沙发，说点什么吧～</view>
        </view>
      </scroll-view>

      <!-- 常驻评论条：textarea 的 class / auto-height / 尺寸全程不变，回复时只置 focus。
           之前真机「闪 + 不聚焦」是因为聚焦同帧还改了 textarea 自身属性（mini→full、
           auto-height 切换），被微信当成 reflow 把焦点抖掉了。现在什么都不切。 -->
      <view class="cmp-dock">
        <view wx:if="{{replyTo.name}}" class="cm-replying">
          回复 {{replyTo.name}}
          <view class="cm-cancel" catchtap="onCancelReply"><pt-icon name="close" size="{{24}}"></pt-icon></view>
        </view>
        <textarea class="cm-ta" placeholder="{{replyTo.name ? '回复 @' + replyTo.name + '…' : '说点什么…'}}"
                  placeholder-class="placeholder" value="{{commentText}}" bindinput="onCommentInput"
                  focus="{{cmFocus}}" bindfocus="onCommentFocus" bindblur="onCommentBlur"
                  bindkeyboardheightchange="onKbChange"
                  maxlength="500" auto-height="{{true}}" show-confirm-bar="{{false}}"
                  adjust-position="{{false}}" cursor-spacing="16"></textarea>
        <view wx:if="{{commentImages.length}}" class="img-picker" style="margin-top:12rpx">
          <view wx:for="{{commentImages}}" wx:key="id" class="img-thumb">
            <image src="{{item.url}}" mode="aspectFill"></image>
            <view class="img-del" catchtap="onRemoveCommentImage" data-index="{{index}}"><pt-icon name="close" size="{{24}}"></pt-icon></view>
          </view>
        </view>
        <view class="cm-toolbar">
          <view class="cm-pic {{commentImages.length ? 'disabled' : ''}}" catchtap="onPickCommentImages"><pt-icon name="photo" size="{{44}}"></pt-icon></view>
          <text class="cm-count">{{commentText.length}}/500</text>
          <view class="cm-send {{commentText && !sendingComment ? 'on' : ''}}" catchtap="onSendComment">{{sendingComment ? '审核中…' : '发送'}}</view>
        </view>
        <view class="cm-tip">评论通过安全审核后才会公开显示，配图最多 1 张</view>
      </view>
    </block>


    <scroll-view wx:if="{{innerType !== 'comments'}}" class="sheet-scroll" scroll-y="{{true}}" enhanced="{{true}}" show-scrollbar="{{false}}">
    <!-- 那 9 种记录表单（体重/排便/饮食/异常/给药/记账/疫苗/驱虫/照片）已经整体
         搬到 pages/addrecord —— 字段由后端 record_types.fields 驱动，一个页面吃掉
         全部 24 种，不再每种一个 wx:elif。弹层现在只管「不是记一笔」的那些事：
         提醒、海报、档案、发帖、评论…… -->
    <!-- 就医前摘要。这是链上第一支，必须是 wx:if -->
    <block wx:if="{{innerType === 'vetSummary'}}">
      <view class="sheet-h3">就医前摘要</view>
      <view class="sheet-p pre">宠物：{{pet.name}}
阶段：{{pet.stage}}
当前体重：{{pet.weight}}
近期重点：疫苗期、换粮观察、排便记录
建议携带：排便/呕吐照片、饮食变化、疫苗驱虫记录。</view>
      <button class="btn btn-primary btn-block" bindtap="onSave">保存摘要</button>
    </block>

    <!-- 记录用药 -->
    <!-- 提醒中心 -->
    <block wx:elif="{{innerType === 'reminders'}}">
      <view class="sheet-h3">提醒中心</view>
      <view class="sheet-p">疫苗、驱虫这些别靠记，设好日期到时候提醒你。</view>

      <view wx:for="{{reminders}}" wx:key="id" class="mtask-row">
        <view class="mtask-body">
          <text class="mtask-b">{{item.title}}</text>
          <view class="mtask-p">{{item.when}}</view>
        </view>
        <view class="mtask-op" catchtap="onEditReminder" data-index="{{index}}">改</view>
        <view class="mtask-op del" catchtap="onDeleteReminder" data-index="{{index}}">删</view>
      </view>
      <view wx:if="{{!reminders.length}}" class="sheet-p">还没有提醒，下面加一条吧。</view>

      <view class="field" style="margin-top:12rpx"><label>{{remForm.id ? '修改提醒' : '新增提醒'}}</label>
        <input class="input" placeholder="提醒名，例如：第 3 针疫苗" placeholder-class="placeholder" value="{{remForm.title}}" bindinput="onRemTitle"/></view>
      <view class="field"><label>类型 / 到期日</label>
        <view class="mtask-form-row">
          <picker mode="selector" range="{{remTypeLabels}}" value="{{remForm.typeIdx}}" bindchange="onRemType">
            <view class="picker-box">{{remTypeLabels[remForm.typeIdx]}}</view>
          </picker>
          <picker mode="date" value="{{remForm.date}}" bindchange="onRemDate">
            <view class="picker-box">{{remForm.date || '选择到期日'}}</view>
          </picker>
        </view>
      </view>
      <view class="field"><label>重复频率（可选）</label>
        <input class="input" placeholder="例如：每月一次；填了可不选到期日" placeholder-class="placeholder" value="{{remForm.freq}}" bindinput="onRemFreq"/></view>
      <button class="btn btn-primary btn-block" bindtap="onSaveReminder">{{remForm.id ? '保存修改' : '添加提醒'}}</button>
    </block>

    <!-- 任务详情 -->

    <!-- 成长海报 -->
    <block wx:elif="{{innerType === 'poster'}}">
      <view class="poster">
        <view class="poster-h3">{{pet.name}} 的成长报告</view>
        <view class="poster-avatar">
          <image wx:if="{{poster.pet_avatar_url || pet.avatar_url}}" class="poster-avatar-img" src="{{poster.pet_avatar_url || pet.avatar_url}}" mode="aspectFill"></image>
          <block wx:else>{{pet.emoji}}</block>
        </view>
        <view class="poster-meta">{{pet.age}}｜{{pet.weight}}｜{{pet.stage}}</view>
        <view wx:if="{{poster.period}}" class="poster-period">近 7 天 · {{poster.period}}</view>
        <view class="poster-list">
          <view class="poster-row"><view class="poster-tick"><pt-icon name="check" size="{{22}}"></pt-icon></view><text class="poster-rt">完成任务</text><text class="poster-rn">{{poster ? poster.tasks_completed : 0}} 项</text></view>
          <view class="poster-row"><view class="poster-tick"><pt-icon name="check" size="{{22}}"></pt-icon></view><text class="poster-rt">体重记录</text><text class="poster-rn">{{poster ? poster.weight_records : 0}} 次</text></view>
          <view class="poster-row"><view class="poster-tick"><pt-icon name="check" size="{{22}}"></pt-icon></view><text class="poster-rt">疫苗记录</text><text class="poster-rn">{{poster ? poster.vaccine_records : 0}} 次</text></view>
          <view class="poster-row"><view class="poster-tick"><pt-icon name="check" size="{{22}}"></pt-icon></view><text class="poster-rt">高风险异常</text><text class="poster-rn">{{poster ? poster.high_risk_count : 0}} 次</text></view>
        </view>
        <view class="poster-status">健康状态<text class="poster-badge">{{poster ? poster.headline : '稳定成长'}}</text></view>
        <view class="poster-from">生成自 · 肉垫计划</view>
      </view>
      <view class="sheet-actions" style="margin-top:28rpx">
        <button class="btn btn-ghost" open-type="share">分享给朋友</button>
        <button class="btn btn-primary" bindtap="onSavePoster" disabled="{{posterSaving}}">
          {{posterSaving ? '生成中…' : '保存到相册'}}
        </button>
      </view>
      <!-- 离屏画布：海报要存成图片才能进相册。不能用 display:none，否则取不到节点 -->
      <canvas type="2d" id="posterCanvas" class="poster-canvas"></canvas>
    </block>

    <!-- 报告详情 -->
    <block wx:elif="{{innerType === 'reportDetail'}}">
      <view class="sheet-h3">本周成长报告</view>
      <view class="sheet-p">{{reportDetail ? reportDetail.summary : '正在汇总本周数据…'}}</view>
      <view wx:if="{{reportDetail}}" class="sheet-p"><text class="bold">下周重点：</text>{{reportDetail.next_week_focus}}</view>
      <button class="btn btn-primary btn-block" data-type="poster" bindtap="goSheet">生成分享卡片</button>
    </block>

    <!-- Pro 会员 -->
    <block wx:elif="{{innerType === 'pro'}}">
      <view class="sheet-h3">肉垫计划 Pro</view>
      <view class="sheet-p">解锁 365 天计划、PDF 健康档案、月度报告、多宠物管理与年度账单。</view>
      <view class="check-list">
        <view wx:for="{{proInfo.features}}" wx:key="*this" class="check selected"><view class="box"><pt-icon name="check" size="{{26}}"></pt-icon></view>{{item}}</view>
      </view>
      <button wx:if="{{proInfo.status === 'active'}}" class="btn btn-soft btn-block" bindtap="close"><pt-icon name="check" size="{{30}}"></pt-icon>已开通 Pro</button>
      <button wx:else class="btn btn-soft btn-block" disabled="true">即将开放</button>
      <view wx:if="{{proInfo.status !== 'active'}}" class="sheet-p" style="text-align:center;margin-top:16rpx;font-size:24rpx">
        会员功能还在准备中，暂未开放购买。
      </view>
    </block>

    <!-- 添加宠物 -->
    <!-- 添加/编辑宠物已经整体搬到 pages/petform：三步向导（名字+头像 → 猫狗+品种
         → 其他资料），品种从后端 breeds 表来、按首字母索引。弹层塞不下这些 -->
    <block wx:elif="{{innerType === 'createPost'}}">
      <view class="sheet-h3">发布图文</view>
      <view class="sheet-p">用你的昵称分享养宠日常。</view>
      <!-- 点整块 field 都能聚焦：原生 textarea 在 scroll-view 里命中区域会偏 -->
      <view class="field" bindtap="onPostFieldTap"><label>内容</label>
        <textarea class="textarea" focus="{{pfFocus}}" placeholder="分享养宠日常、求助问题、经验笔记..." placeholder-class="placeholder" value="{{postContent}}" bindinput="onPostInput" bindblur="onPostBlur"></textarea></view>
      <view class="mini-options">
        <view class="option {{u.sel(optSel,'ptag',0,0)?'selected':''}}" data-group="ptag" data-index="0" bindtap="onOpt">晒宠</view>
        <view class="option {{u.sel(optSel,'ptag',1,0)?'selected':''}}" data-group="ptag" data-index="1" bindtap="onOpt">新手求助</view>
        <view class="option {{u.sel(optSel,'ptag',2,0)?'selected':''}}" data-group="ptag" data-index="2" bindtap="onOpt">经验</view>
      </view>
      <view class="field"><label>图片（可选，最多 2 张）</label>
        <view class="img-picker">
          <view wx:for="{{postImages}}" wx:key="id" class="img-thumb">
            <image src="{{item.url}}" mode="aspectFill"></image>
            <view class="img-del" catchtap="onRemovePostImage" data-index="{{index}}"><pt-icon name="close" size="{{24}}"></pt-icon></view>
          </view>
          <view wx:if="{{postImages.length < 2}}" class="img-add" bindtap="onPickPostImages"><pt-icon name="plus" size="{{48}}"></pt-icon></view>
        </view>
      </view>
      <button class="btn btn-primary btn-block" bindtap="onCreatePost">发布到宠友圈</button>
    </block>

    <!-- 任务管理那一支删了：它管的是 DailyTask，而「今日任务」已经并进计划节点，
         增删改都在计划页做。留着会出现「这里加的任务」和「计划页加的节点」进不同的表 -->
    <block wx:elif="{{innerType === 'managePets'}}">
      <view class="sheet-h3">多宠物管理</view>
      <view class="sheet-p">点一只切换为当前宠物，或编辑它的档案。</view>
      <view wx:for="{{myPets}}" wx:key="id" class="mtask-row">
        <view class="mtask-body" catchtap="onSwitchPet" data-id="{{item.id}}">
          <text class="mtask-b">{{item.emoji}} {{item.name}}<text wx:if="{{item.current}}" class="mtask-pri">当前</text></text>
          <view class="mtask-p">{{item.meta}}</view>
        </view>
        <view class="mtask-op" catchtap="onEditPetFromList" data-id="{{item.id}}">编辑</view>
      </view>
      <view wx:if="{{!myPets.length}}" class="sheet-p">还没有毛孩子。</view>
      <button class="btn btn-primary btn-block" style="margin-top:16rpx" data-type="addPet" bindtap="goSheet">＋ 添加毛孩子</button>
    </block>

    <!-- 导出健康档案 -->
    <block wx:elif="{{innerType === 'exportData'}}">
      <view class="sheet-h3">导出健康档案</view>
      <view class="sheet-p">整理成一段文字，可复制后发给医生或存到备忘录。</view>
      <view class="export-box">{{exportText || '正在整理…'}}</view>
      <button class="btn btn-primary btn-block" bindtap="onCopyExport">复制全部内容</button>
    </block>

    <!-- 意见反馈 -->
    <block wx:elif="{{innerType === 'feedback'}}">
      <view class="sheet-h3">意见反馈</view>
      <block wx:if="{{!fbDone}}">
        <view class="sheet-p">用着哪儿别扭、想要什么功能，都可以告诉我们。</view>
        <view class="field"><label>你的反馈</label>
          <textarea class="textarea" placeholder="例如：希望能记录洗澡时间" placeholder-class="placeholder" value="{{fbContent}}" bindinput="onFbContent"></textarea></view>
        <view class="field"><label>联系方式（可选）</label>
          <input class="input" placeholder="微信号或邮箱，方便回复你" placeholder-class="placeholder" value="{{fbContact}}" bindinput="onFbContact"/></view>
        <button class="btn btn-primary btn-block" bindtap="onSubmitFeedback" disabled="{{saving}}">{{saving ? '提交中…' : '提交反馈'}}</button>
      </block>
      <block wx:else>
        <view class="sheet-p">已收到，谢谢你的反馈 🐾</view>
        <button class="btn btn-primary btn-block" bindtap="close">好的</button>
      </block>
    </block>

    <!-- 关于我们 -->
    <block wx:elif="{{innerType === 'about'}}">
      <view class="sheet-h3">关于肉垫计划</view>
      <view class="sheet-p pre">肉垫计划是给新手养宠人做的照护记录工具。

按猫狗的品类和成长阶段生成每日照护任务和养护计划，随手记录体重、饮食、排便、用药、疫苗和开支，疫苗驱虫到期前提醒你，并把这些整理成成长报告。

版本：v0.2
反馈：我的 → 意见反馈</view>
      <view class="sheet-p" style="color:var(--muted);font-size:24rpx">本小程序提供的是记录与观察建议，不能替代医生诊断。宠物出现持续异常请及时就医。</view>
      <button class="btn btn-primary btn-block" bindtap="close">知道了</button>
    </block>

    </scroll-view>

  </view>
</view>