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">
  <view class="sheet {{innerType === 'comments' ? 'sheet-cmp' : ''}}" catchtap="noop">
    <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>

      <!-- 收起态：一条细条，点了才展开成大写评论面板（小红书那套） -->
      <view wx:if="{{!composing}}" class="cm-collapsed" catchtap="onStartCompose">
        <view class="cm-collapsed-pill {{commentText ? 'has' : ''}}">{{commentText || '说点什么…'}}</view>
        <view class="cm-collapsed-ic"><pt-icon name="photo" size="{{40}}"></pt-icon></view>
      </view>

      <!-- 展开态：大输入面板，浮在键盘上方 -->
      <view wx:else class="cmp-dock" style="padding-bottom:{{kbHeight ? kbHeight + 'px' : 'calc(20rpx + env(safe-area-inset-bottom))'}}">
        <view class="cm-dock-head">
          <text class="cm-dock-title">{{replyTo.name ? '回复 ' + replyTo.name : '写评论'}}</text>
          <view class="cm-dock-close" catchtap="onCloseCompose"><pt-icon name="close" size="{{30}}"></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"
                  maxlength="500" auto-height="{{true}}" show-confirm-bar="{{false}}"
                  adjust-position="{{false}}" cursor-spacing="12"></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" catchtap="onPickCommentImages"><pt-icon name="photo" size="{{44}}"></pt-icon></view>
          <text class="cm-count">{{commentText.length}}/500</text>
          <view class="cm-send {{commentText ? 'on' : ''}}" catchtap="onSendComment">发送</view>
        </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">{{pet.emoji}}</view>
        <view class="muted">{{pet.age}}｜{{pet.weight}}｜{{pet.stage}}</view>
        <view class="poster-list pre">✓ 完成任务 {{poster ? poster.tasks_completed : 0}} 项
✓ 体重记录 {{poster ? poster.weight_records : 0}} 次
✓ 疫苗记录 {{poster ? poster.vaccine_records : 0}} 次
✓ 高风险异常 {{poster ? poster.high_risk_count : 0}} 次</view>
        <view class="bold">健康状态：{{poster ? poster.headline : '稳定成长'}}</view>
        <view class="muted" style="font-size:24rpx;margin-top:20rpx">生成自：肉垫计划</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>