swkz_wx/pages/guicangDetails/index.wxml

<!-- pages/guicangDetails/index.wxml -->
<view class="container" wx:if="{{itemDetail}}">
  <!-- 下载app提示 -->
  <view class="app-download-banner" wx:if="{{showAppBanner}}">
    <view class="banner-content">
      <view class="close-btn" bindtap="closeAppBanner">
      ×
      </view>
      <image src="../../imgs/guicang/heritage_h5_logo.png" class="app-logo"></image>
      <view class="app-info">
        <view class="app-name">归藏</view>
        <view class="app-subtitle">Heritage Return</view>
      </view>
      <view class="banner-actions">
        <view class="download-btn" bindtap="downloadApp">下载APP</view>
      </view>
    </view>
  </view>
  <!-- 顶部图片区域 -->
  <view class="image-container" bindtap="openH5Page">
    <image src="{{itemDetail.imageUrl}}" mode="aspectFill" class="main-image"></image>
    <!-- <view class="image-info">
      <view class="title">{{itemDetail.title}}</view>
      <view class="subtitle">{{itemDetail.date}} · {{itemDetail.source}}</view>
    </view> -->
  </view>
  
  <!-- 可上拉的信息区域 -->
  <view class="info-box {{isFullScreen ? 'full-screen' : ''}}" style="top: {{boxTop}}px;" 
        bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
    <!-- 上拉指示器 -->
    <view class="drag-indicator"></view>
    
    <!-- 内容区域 -->
    <view class="info-content">
      <view class="header-section">
        <view class="title-container">
          <view class="title">{{itemDetail.title}}</view>
          <view class="subtitle">{{itemDetail.date}} · {{itemDetail.source}}</view>
        </view>
        <view wx:if="{{!isFullScreen}}" class="share-button" bindtap="shareItem">
          <image src="../../imgs/guicang/share.png" mode="aspectFit" class="share-icon"></image>
        </view>
      </view>
      <view class="description-text">{{itemDetail.description}}</view>
      
      <!-- <view class="info-section">
        <view class="info-item">
          <view class="info-label">尺寸</view>
          <view class="info-value">{{itemDetail.dimensions}}</view>
        </view>
        <view class="info-item">
          <view class="info-label">材质</view>
          <view class="info-value">{{itemDetail.material}}</view>
        </view>
      </view> -->
    </view>
  </view>
</view>

<!-- 加载中提示 -->
<view class="loading" wx:if="{{!itemDetail}}">
  <view class="weui-loading"></view>
  <view class="loading-text">加载中...</view>
</view>

<!-- 分享弹窗 -->
<view class="share-popup" wx:if="{{showSharePopup}}">
  <canvas style="width: 72px;height: 72px;" class="canvas-code" canvas-id="myQrcode" id="myQrcode"></canvas>
  <view class="share-popup-mask" bindtap="closeSharePopup"></view>
  <view class="share-popup-content">
    <view class="share-title">分享到</view>
    
    <!-- 分享图片预览 -->
    <view class="share-image-container" style="display: none;" show-menu-by-longpress="{{true}}">
      <view class="top-image">
        <image class="wenwubg" src="https://swkz-1332577016.cos.ap-guangzhou.myqcloud.com/swkzGuicang/test.png"></image>
      </view>
      <view class="item-box">
        <image class="btmbg" src="../../imgs/guicang/img_share_bg.png"></image>
        <view class="left-box">
          <text class="text scrwenwu">这是一件文物</text>
          <text class="text scrcontent">长按扫码 查看更多内容</text>
        </view>
        <view class="right-box">
          <image class="qrcode" :src="{{qrcodeUrl}}"></image>
        </view>
      </view>
    </view>
    <wxml-to-canvas class="widget" width="360" height="256"></wxml-to-canvas>
    <view class="share-png-box" hover-class="none" hover-stop-propagation="false">
      <text wx:if="{{!shareImagePath}}" class="share-tips">图片生成中</text>
      <image wx:else class="share-png" src="{{shareImagePath}}" show-menu-by-longpress></image>
    </view>
    
    <!-- 分享按钮区域 -->
    <view class="share-options">
      <view class="share-option-item" bindtap="saveToLocal">
        <view class="option-img" hover-class="none" hover-stop-propagation="false">
          <image src="../../imgs/guicang/down.png" class="option-icon"></image>
        </view>
        <text class="option-text">保存本地</text>
      </view>
      <view class="share-option-item" bindtap="copyLink">
        <view class="option-img" hover-class="none" hover-stop-propagation="false">
          <image src="../../imgs/guicang/share_link.png" class="option-icon"></image>
        </view>
        <text class="option-text">复制链接</text>
      </view>
      <view class="share-option-item" bindtap="shareToWechat">
        <view class="option-img" hover-class="none" hover-stop-propagation="false">
          <image src="../../imgs/guicang/wechat.png" class="option-icon"></image>
        </view>
        <text class="option-text">微信</text>
      </view>
      <!-- <view class="share-option-item" bindtap="shareToTimeline">
        <view class="option-img" hover-class="none" hover-stop-propagation="false">
          <image src="../../imgs/guicang/pengyouquan.png" class="option-icon"></image>
        </view>
        <text class="option-text">朋友圈</text>
      </view> -->
    </view>
    
    <!-- 取消按钮 -->
    <view class="cancel-button" bindtap="closeSharePopup">取消</view>
  </view>
</view>