past-go/weapp/pages/settings/settings.wxml

<view class="app-shell app-shell--secondary" style="{{layoutStyle}}">
<launch-transition />
<!-- pages/settings/settings.wxml -->
<app-nav title="设置" back="{{true}}" />

<scroll-view class="page-bg" scroll-y show-scrollbar="{{false}}" bounces="{{true}}">
  <view class="j-body">
    <view class="section-heading">外观与通知</view>
    <!-- 首页背景 -->
    <view class="j-profile-setting" bindtap="showBgModal">
      <view class="setting-info">
        <view class="j-small-title">首页背景</view>
        <view class="j-caption">自定义上传背景图片</view>
      </view>
      <text class="j-link">›</text>
    </view>

    <!-- 消息通知 -->
    <view class="j-profile-setting" bindtap="showSubscribeModal">
      <view class="setting-info">
        <view class="j-small-title">消息通知</view>
        <view class="j-caption">管理订阅消息推送</view>
      </view>
      <text class="j-link">›</text>
    </view>

    <view class="section-heading">关系与账号</view>
    <!-- 操作记录 -->
    <view class="j-profile-setting" bindtap="goToHistory">
      <view class="setting-info">
        <view class="j-small-title">操作记录</view>
        <view class="j-caption">查看双方所有操作日志</view>
      </view>
      <text class="j-link">›</text>
    </view>

    <page-state wx:if="{{bindingError}}" kind="error" title="绑定状态加载失败" action="重试" bind:action="onShow" />
    <view class="j-profile-setting" bindtap="onShow" wx:if="{{!bindingKnown && !bindingError}}">
      <view class="setting-info"><view class="j-small-title">正在获取绑定状态</view><view class="j-caption">若加载失败，点击重试</view></view>
      <text class="j-link">›</text>
    </view>

    <view class="j-profile-setting" bindtap="goBind" wx:if="{{bindingKnown && !hasPartner}}">
      <view class="setting-info">
        <view class="j-small-title" style="color:#B74768;">绑定情侣</view>
        <view class="j-caption">输入对方 ID 或分享邀请</view>
      </view>
      <text class="j-link">›</text>
    </view>

    <!-- 解除绑定（根据状态动态显示） -->
    <view class="j-profile-setting" bindtap="showUnbind" wx:if="{{bindingKnown && hasPartner}}">
      <view class="setting-info">
        <view wx:if="{{unbindStatus == 'pending' && unbindIsRequester}}" class="j-small-title" style="color:#FF9800;">取消解绑请求</view>
        <view wx:elif="{{unbindStatus == 'pending' && !unbindIsRequester}}" class="j-small-title" style="color:#FF4757;">待回应的解绑请求</view>
        <view wx:else class="j-small-title" style="color:#FF4757;">解除绑定</view>
        <view wx:if="{{unbindStatus == 'pending' && unbindIsRequester}}" class="j-caption">点击撤销已发起的请求</view>
        <view wx:elif="{{unbindStatus == 'pending' && !unbindIsRequester}}" class="j-caption">{{unbindRequesterName}} 发起了解绑</view>
        <view wx:else class="j-caption">发起解绑需对方确认</view>
      </view>
      <text class="j-link">›</text>
    </view>

    <view class="section-heading">关于与帮助</view>
    <!-- 我们past -->
    <view class="j-profile-setting" bindtap="showAboutModal">
      <view class="setting-info">
        <view class="j-small-title">我们past</view>
        <view class="j-caption">了解本小程序的功能</view>
      </view>
      <text class="j-link">›</text>
    </view>

    <!-- 联系我们 -->
    <view class="j-profile-setting" bindtap="showContactModal">
      <view class="setting-info">
        <view class="j-small-title">联系我们</view>
        <view class="j-caption">软件功能建议与反馈</view>
      </view>
      <text class="j-link">›</text>
    </view>

  </view>

</scroll-view>

  <!-- 背景图编辑页 - 全屏背景预览 -->
  <view class="edit-page" wx:if="{{showBgModal}}">
    <!-- 全屏背景 -->
    <image wx:if="{{bgPreview}}" src="{{bgPreview}}" mode="aspectFill" class="bg-full" catchtouchstart="onBgTouchStart" catchtouchend="onBgTouchEnd" />
    <view wx:else class="bg-placeholder" catchtouchstart="onBgTouchStart" catchtouchend="onBgTouchEnd"></view>
    
    <!-- 左滑或点击空白区域返回 -->
    <view class="edit-nav" bindtap="hideBgModal">
      <view class="back-btn-wrap transparent">
        <image src="/images/back.svg" mode="aspectFit" class="back-nav-icon" />
      </view>
    </view>
    
    <!-- 底部操作区 -->
    <view class="bg-edit-footer">
      <view class="bg-edit-card">
        <text class="modal-subtitle" style="text-align:center;display:block;margin-bottom:24rpx;">上传你喜欢的背景图片</text>
        <view class="bg-btn-row">
          <button class="btn btn-select" bindtap="chooseBgImage" hover-class="none">📷 选择</button>
          <button class="btn btn-save" bindtap="saveBgImage" hover-class="none">💾 保存</button>
          <button class="btn btn-restore" bindtap="removeBgImage" hover-class="none">🔄 恢复</button>
        </view>
      </view>
    </view>
  </view>

  <!-- 消息通知管理弹窗 -->
  <view class="modal-overlay" wx:if="{{showSubscribeModal}}" bindtap="hideSubscribeModal">
    <view class="modal" catchtap="noop" style="max-height:75vh;overflow-y:auto;">
      <text class="modal-heart">🔔</text>
      <text class="title">消息通知</text>
      <text class="modal-subtitle">开启后，当TA有操作时会通过微信服务通知提醒你</text>

      <!-- 加载状态 -->
      <view wx:if="{{subscribeLoading}}" class="subscribe-loading">
        <view class="loading-spinner"></view>
        <text class="loading-text">加载中...</text>
      </view>

      <!-- 通知开关 -->
      <view wx:else class="subscribe-section">
        <view class="subscribe-card {{subscribeChecked ? 'active' : ''}}">
          <view class="subscribe-card-left">
            <view class="subscribe-icon-wrap" style="background:{{subscribeChecked ? '#FFE4EC' : '#F5F5F5'}};">
              <text class="subscribe-icon">💕</text>
            </view>
            <view class="subscribe-info">
              <text class="subscribe-name">操作通知</text>
              <text class="subscribe-desc">TA有新的操作时通知你</text>
            </view>
          </view>
          <switch checked="{{subscribeChecked}}" bindchange="toggleSubscribe" color="#B74768" style="transform:scale(0.75);" />
        </view>

        <!-- 状态提示 -->
        <view class="subscribe-tip {{subscribeChecked ? 'on' : 'off'}}">
          <block wx:if="{{subscribeChecked}}">
            <text class="tip-icon">✅</text>
            <text class="tip-text">通知已开启，TA的操作会第一时间通知你</text>
          </block>
          <block wx:else>
            <text class="tip-icon">💡</text>
            <text class="tip-text">开启后即可收到TA的操作通知</text>
          </block>
        </view>

        <!-- 说明 -->
        <view class="subscribe-note">
          <text class="note-title">📌 温馨提示</text>
          <text class="note-item">• 通知通过微信「服务通知」推送</text>
          <text class="note-item">• 每次操作后可能会请求一次订阅授权</text>
          <text class="note-item">• 若收不到通知，可重新开启此开关</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 固定标题和关闭按钮，长内容独立滚动 -->
  <view class="modal-overlay info-overlay" wx:if="{{showAboutModal}}" bindtap="hideAboutModal">
    <view class="modal info-dialog" catchtap="noop">
      <view class="info-header">
        <image class="info-mark" src="/images/book.svg" mode="aspectFit" />
        <text class="info-title">我们 past</text>
        <text class="info-caption">把日常，写成我们的故事</text>
      </view>
      <scroll-view class="info-body" scroll-y show-scrollbar="{{false}}">
        <view class="info-content">
          <text class="about-intro">属于两个人的小世界，珍藏每一次相遇，也记录平凡日常里的心动。</text>
          <view class="about-block">
            <text class="about-block-title">我们的生活手账</text>
            <text class="about-item">日记 · 写下心情与故事</text>
            <text class="about-item">相册 · 珍藏照片与美好瞬间</text>
            <text class="about-item">记忆日 · 记住每一个重要日子</text>
            <text class="about-item">歌曲 · 收藏一起听过的旋律</text>
            <text class="about-item">打卡 · 一起完成日常约定</text>
            <text class="about-item">宠物 · 照顾属于我们的伙伴</text>
            <text class="about-item">姨姨 · 记录生理期与身体状态</text>
          </view>
          <view class="about-block">
            <text class="about-block-title">让陪伴更近一点</text>
            <text class="about-item">情侣绑定 · 邀请另一半，共享记录</text>
            <text class="about-item">消息通知 · 订阅对方的动态提醒</text>
            <text class="about-item">首页背景 · 换成喜欢的照片</text>
            <text class="about-item">所在城市 · 分享彼此的位置</text>
          </view>
          <text class="about-version info-signature">让所有的爱有迹可循</text>
        </view>
      </scroll-view>
      <view class="info-footer"><button class="info-dismiss" bindtap="hideAboutModal">知道了</button></view>
    </view>
  </view>

  <!-- 联系我们弹窗 -->
  <view class="modal-overlay" wx:if="{{showContactModal}}" bindtap="hideContactModal">
    <view class="modal" catchtap="noop">
      <text class="modal-heart">💬</text>
      <text class="title">联系我们</text>
      <text class="modal-subtitle">软件功能建议与反馈</text>

      <view class="about-section">
        <text class="about-intro">如果你在使用过程中有任何软件功能建议、优化想法或遇到的问题，欢迎随时联系我们，我们会认真听取每一位用户的声音，不断把「我们past」做得更好。💕</text>
      </view>

      <view class="about-block">
        <text class="about-block-title">📮 联系微信</text>
        <text class="about-item">微信：e909e10</text>
        <text class="about-item">添加时请备注「我们past」，方便我们快速响应</text>
      </view>

      <view class="about-foot">
        <text class="about-version">让所有的爱有迹可循</text>
      </view>
    </view>
  </view>






</view>