<template>
  <view class="member-price-page">
    <view class="page-header">
      <view class="back-link" @click="goBack">
        <text class="arrow">{"<"}</text>
        <text class="back-txt">返回</text>
      </view>
      <text class="header-title">会员价管理</text>
    </view>

    <view class="content-card">
      <view class="product-info">
        <image class="p-img" src="https://img1.baidu.com/it/u=254065646,3100346083&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFill" />
        <text class="p-name">UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫</text>
      </view>

      <view class="price-table">
        <view class="th-row">
          <view class="th flex-2"><text>规格名称</text></view>
          <view class="th flex-1"><text>售价</text></view>
          <view class="th flex-1"><text>普通会员价</text></view>
          <view class="th flex-1"><text>黄金会员价</text></view>
          <view class="th flex-1"><text>铂金会员价</text></view>
        </view>
        <view class="tr-row">
          <view class="td flex-2"><text>XL,卡其</text></view>
          <view class="td flex-1"><text>￥99.00</text></view>
          <view class="td flex-1"><input class="price-input" value="89.00" /></view>
          <view class="td flex-1"><input class="price-input" value="79.00" /></view>
          <view class="td flex-1"><input class="price-input" value="69.00" /></view>
        </view>
      </view>

      <view class="footer-btns">
        <button class="btn-save">保存设置</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { openRoute } from '@/layouts/admin/store/adminNavStore.uts'

function goBack() {
  openRoute('product_productList')
}
</script>

<style scoped lang="scss">
.member-price-page { padding: 20px; background: #f5f7f9; min-height: 100vh; }
.page-header { display: flex; flex-direction: row; align-items: center; gap: 16px; margin-bottom: 20px;
  .back-link { display: flex; flex-direction: row; align-items: center; gap: 4px; color: #666; cursor: pointer; }
  .header-title { font-size: 16px; font-weight: bold; color: #333; }
}
.content-card { background: #fff; border-radius: 4px; padding: 24px; }
.product-info { display: flex; flex-direction: row; align-items: center; gap: 16px; margin-bottom: 30px;
  .p-img { width: 64px; height: 64px; border-radius: 4px; }
  .p-name { font-size: 15px; font-weight: bold; color: #333; }
}
.price-table { border: 1px solid #f0f0f0; border-radius: 4px; }
.th-row { display: flex; flex-direction: row; background: #f8f9fa; border-bottom: 1px solid #f0f0f0; }
.th { padding: 12px; font-size: 14px; font-weight: 500; color: #333; text-align: center; }
.tr-row { display: flex; flex-direction: row; border-bottom: 1px solid #f0f0f0; &:last-child { border-bottom: none; } }
.td { padding: 16px 12px; font-size: 14px; color: #666; text-align: center; display: flex; align-items: center; justify-content: center; }
.flex-1 { flex: 1; } .flex-2 { flex: 2; }
.price-input { border: 1px solid #dcdfe6; border-radius: 4px; height: 32px; padding: 0 8px; text-align: center; width: 80%; font-size: 13px; }
.footer-btns { margin-top: 40px; display: flex; justify-content: center; .btn-save { background: #1890ff; color: #fff; border: none; padding: 0 32px; height: 40px; border-radius: 4px; } }
</style>
