<view class="coin-page">
  <custom-nav padding-x="42">
    <view class="coin-nav">
      <view class="nav-back" bindtap="handleBack"><text></text></view>
      <text class="nav-title">购买金币</text>
      <view class="nav-placeholder"></view>
    </view>
  </custom-nav>

  <view class="coin-content">
    <view class="balance-card">
      <image class="balance-art icon-placeholder" src="/static/images/icons/frame_1.png" mode="widthFix"></image>
      <view class="balance-copy">{{userInfo.diamond}}</view>
    </view>

    <view class="section-head">
      <text class="section-title">金币套餐</text>
      <view class="section-note">
        <image class="info-icon icon-placeholder" src="/static/images/info-circle.png" mode="aspectFit"></image>
        <text>套餐数量与价格以实际配置为准</text>
      </view>
    </view>

    <view class="package-grid">
      <view
        wx:for="{{packages}}"
        wx:key="id"
        class="package-card {{selectedPackage.id == item.id ? 'selected' : ''}}"
        data-id="{{item.id}}"
        bindtap="handlePackageTap"
      >
        <view wx:if="{{item.ribbon}}" class="ribbon {{item.ribbonClass}}">{{item.ribbon}}</view>
        <text class="package-name">{{item.coins}} 金币</text>
        <image class="package-art {{item.artClass}} icon-placeholder" src="{{item.icon}}" mode="widthFix"></image>
        <view class="package-price">
          <text>¥</text>
          <text>{{item.price}}</text>
        </view>
        <view wx:if="{{item.selected}}" class="selected-check"><text></text></view>

        <view wx:if="{{item.tag == 'best_seller'}}" class="right-jiao best_seller">热卖</view>
        <view wx:if="{{item.tag == 'hot'}}" class="right-jiao">爆款</view>
        <view wx:if="{{item.tag == 'recommend'}}" class="right-jiao recommend">推荐</view>
      </view>
    </view>

    <view class="tips-card">
      <view class="tip-row">
        <image class="tip-icon flash-tip icon-placeholder" src="/static/images/icons/frame_7.png" mode="aspectFit"></image>
        <text>充值后金币实时到账</text>
      </view>
      <view class="tip-row">
        <image class="tip-icon shield-tip icon-placeholder" src="/static/images/icons/frame_.png" mode="aspectFit"></image>
        <text>金币仅用于平台内数字人视频相关功能</text>
      </view>
    </view>

    <view class="selected-bar">
      <view class="selected-left">
        <image class="selected-icon icon-placeholder" src="/static/images/icons/check-circle-filled.png" mode="aspectFit"></image>
        <text>已选：</text>
        <text class="selected-coins">{{selectedPackage.coin || 0}}</text>
        <text>金币</text>
      </view>
      <text class="selected-price">¥{{selectedPackage.price || 0.00}}</text>
    </view>

    <view class="buy-btn" bindtap="handleBuy">立即购买</view>
  </view>
</view>

