<template>
  <view class="min-h-100vh bg-gray">
    <up-navbar
      bg-color="transparent"
      title="分销中心"
      @leftClick="back"
      :fixed="true"
    ></up-navbar>
    <view class="top">
      <image class="top_bg" src="/distribution/static/top_bg.png"></image>
      <view class="box type1">
        <view class="u-flex align-center justify-between">
          <view class="u-flex align-center">
            <up-avatar size="62rpx" />
            <text class="u-m-l-14 font-14 color-333 font-700"
              >这里是店铺名称</text
            >
          </view>
          <view>
            <template v-if="false">
              <view class="font-12 color-666"> 上级：用户昵称15812340001 </view>
            </template>
            <template v-if="true">
              <view class="bind" @click="showBindShangji = true">
                绑定上级
              </view>
            </template>
          </view>
        </view>
        <view class="top_content u-m-t-32" v-if="false">
          <template v-if="false">
            <view class="color-333 font-16 font-700"> 如何成为分销员 </view>
            <view class="u-m-t-16 color-666 font-14">
              <view> 需要邀请人数：1000人</view>
              <view>是否需要邀请人数下单：是/否</view>
              <view>每人可获得的分销奖励次数：永久/X次</view>
            </view>
          </template>
          <template v-if="false">
            <view class="color-333 font-16 font-700 text-center">
              如何成为分销员
            </view>
            <view class="u-m-t-16 color-666 font-14 text-center">
              <view>只需付费X元，即可成为分销员</view>
            </view>
          </template>
          <template v-if="false">
            <view class="color-333 font-16 font-700 text-center">
              如何成为分销员
            </view>
            <view class="u-m-t-16 color-666 font-14 text-center">
              <view>请联系商家咨询详情</view>
            </view>
          </template>
        </view>

        <view class="top_content type1 u-m-t-32">
          <template v-if="true">
            <view class="font-14">
              <view>
                <text class="color-666">我的分销等级：</text>
                <text class="color-333 font-700">一级 普通分销员</text>
              </view>
              <view class="u-m-t-28 u-flex align-center">
                <text class="color-666">距离下一级还差：</text>
                <text class="color-333 font-700 u-m-r-18">100人 </text>
                <up-icon name="question-circle" size="24rpx" color="#666" />
              </view>
              <view class="u-flex u-m-t-28">
                <view class="u-flex-1">
                  <view class="u-flex align-center">
                    <text class="u-m-r-10 font-12 color-666">总收益</text>
                    <up-icon name="question-circle" size="24rpx" color="#666" />
                  </view>
                  <view class="u-m-t-16 price">9925.56</view>
                </view>
                <view class="u-flex-1">
                  <view class="u-flex align-center">
                    <text class="u-m-r-10 font-12 color-666">待入账</text>
                    <up-icon name="question-circle" size="24rpx" color="#666" />
                  </view>
                  <view class="u-m-t-16 price">9925.56</view>
                </view>
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>
    <template v-if="false">
      <view class="bottom">
        <view class="u-flex">
          <view class="title">规则说明</view>
        </view>
        <view>
          <template v-if="true">
            <view class="font-12 color-666 u-m-t-16">
              <view>
                <view> 我的收益什么时候可以到账？</view>
                <view> 分销的结算时长为X天</view>
              </view>
              <view class="u-m-t-40">
                <view>怎么样才能升级分销员等级？</view>
                <view>邀请的有效人数达到X人即可升级</view>
                <view> 消费金额总计达到X元即可升级</view>
                <view> 什么是有效邀请人数？</view>
                <view>被邀请人在店铺消费过，即有一笔订单完成才算有效</view>
              </view>
              <view class="u-m-t-40">
                <view>消费金额如何计算？</view>
                <view
                  >消费金额是计算您和您邀请的人在店铺消费的总金额，但退款订单不计入</view
                >
              </view>
            </view>
          </template>
        </view>
      </view>
      <view class="parse-html">
        <up-parse :content="content"></up-parse>
      </view>
    </template>
    <view class="bottom type1" v-if="true">
      <view class="u-flex justify-between align-center">
        <view class="u-flex align-center">
          <view class="color-333 font-16 u-m-r-6">我的下级（30/10）</view>
          <up-icon name="question-circle" size="24rpx" color="#666" />
        </view>
        <view class="font-10 color-999">一级分成1.99%二级分成3.99%</view>
      </view>

      <view class="u-m-t-48 font-14">
        <view class="u-flex justify-between color-333">
          <view>用户</view>
          <view>获得利益</view>
          <view>邀请时间</view>
        </view>
        <view class="u-m-t-16">
          <view
            v-for="(item, index) in 3"
            :key="index"
            class="u-flex justify-between align-center recoder-item color-666 font-12"
          >
            <view class="">
              <view>用户昵称</view>
              <view>158****0001</view>
            </view>
            <view>0（一级）</view>
            <view>2025/03/18 19:12</view>
          </view>
        </view>
      </view>
    </view>

    <view class="tips u-m-t-32"
      >您的分销员身份已取消，不再获得分成有疑问可联系商家</view
    >

    <view class="u-flex justify-center bottom-btn">
      <view class="copy" @click="copyCode">
        <view>复制邀请码</view>
        <view>123457891231</view>
      </view>
      <view class="u-flex u-flex-col justify-center">
        <view class="share" @click="showSharePopup=true">分享邀请</view>
      </view>
    </view>
    <bindShangji v-model="showBindShangji"></bindShangji>
    <sharePopup v-model="showSharePopup"></sharePopup>
  </view>
</template>
    
<script setup>
import bindShangji from "./components/bind-shangji.vue";
import sharePopup from "./components/share-popup.vue";
const showBindShangji = ref(false);
const showSharePopup=ref(false);
import { ref } from "vue";
const content = ref("123");
function back() {
  uni.navigateBack({
    delta: 1,
  });
}
function copyCode() {
  uni.setClipboardData({
    data: "hello",
    success: function () {
      console.log("success");
    },
  });
}
</script>
    
<style scoped lang="scss">
.input-number-box {
  width: 428rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #999;
  font-size: 28rpx;
  align-items: baseline;
  .fuhao {
    font-size: 64rpx;
    color: #333;
  }
  .input-number {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
    color: #333;
    padding-left: 24rpx;
    padding-right: 10rpx;
  }
  .all-in {
    font-size: 28rpx;
    color: #fe7e00;
  }
}
.list {
  .shop-item {
    padding: 32rpx 28rpx;
    border-bottom: 2rpx solid #ededed;
    font-size: 28rpx;
    color: #666;
    display: flex;
    align-items: center;
    &:last-child {
      border-bottom: none;
    }
    .fufei {
      color: #e8ad7b;
    }
    .tag {
      font-size: 24rpx;
      color: #ff1c1c;
      background-color: #ffe4e4;
      padding: 8rpx 20rpx;
      border-radius: 8rpx;
    }
    .name {
      color: #333;
      font-weight: 700;
    }
    .shouxufei {
    }
    .shouyi {
      font-size: 24rpx;
      color: #666;
      text-align: center;
    }
  }
}
.status {
  font-size: 28rpx;
  font-weight: 700;
  text-align: right;
  color: #333333;
  &.fail {
    color: #ff1c1c;
  }
}
.lingqu {
  font-size: 28rpx;
  border-radius: 8rpx;
  background: #fe6d11;
  padding: 8rpx 16rpx;
  color: #ffffff;
}
.price {
  font-weight: 700;
  font-size: 40rpx;
  color: #333;
}
.top {
  position: relative;
  .box {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28rpx 28rpx 52rpx 28rpx;
    &.type1 {
      padding-bottom: 0;
    }
  }
  .top_content {
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16rpx;
    flex-shrink: 0;
    fill: #ffffff3b;
    stroke-width: 2rpx;
    padding: 32rpx 28rpx;
    stroke: #fff;
    filter: drop-shadow(2rpx -4rpx 13.4rpx #ff6f0124);
    backdrop-filter: blur(5.1rpx);
    &.type1 {
      filter: none;
      border: none;
      background-color: #fcf5ed;
      border-radius: 36rpx 36rpx 0 0 ;
      padding: 32rpx 36rpx; 
    }
  }
}
.btn-group {
  position: absolute;
  right: 28rpx;
  top: 50%;
  transform: translateY(-50%);
  .btn {
    padding: 8rpx 16rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    border: 2rpx solid #fe6d11;
    &.shiming {
      color: #fe6d11;
    }
    &.tixian {
      color: #fff;
      background-color: #fe6d11;
    }
  }
}
.tips {
  padding: 16rpx 18rpx;
  background: #ffe2e2;
  padding: 16rpx 18rpx;
  font-size: 28rpx;
  line-height: 48rpx;
  color: #ff1c1c;
}
.bind {
  padding: 8rpx 32rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  border: 2rpx solid #fe6d11;
  color: #fff;
  background-color: #fe6d11;
}
.top_bg {
  width: 100%;
  height: 580rpx;
}
.bottom {
  margin: 0 28rpx;
  border-radius: 36rpx;
  background-color: #fff;
  transform: translateY(-20rpx);
  padding: 32rpx 28rpx;
  &.type1 {
    transform: translateY(0);
    margin: 0;
    padding-bottom: 42rpx;
  }
}
.title {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
}
.small-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #333;
}
.parse-html {
  margin: 32rpx 28rpx;
  font-size: 28rpx;
}
.recoder-item {
  padding: 16rpx 0;
  border-bottom: 2rpx solid #ededed;
}
.share {
  border-radius: 16rpx;
  background: #e8ad7b;
  padding: 14rpx 76rpx;
  font-size: 32rpx;
  line-height: 48rpx;
  color: #fff;
}
.copy {
  padding: 4rpx 30rpx;
  border-radius: 18rpx;
  border: 2rpx solid #e8ad7b;
  background: #fff;
  font-size: 28rpx;
  color: #e8ad7b;
  line-height: 48rpx;
  text-align: center;
}
.bottom-btn {
  position: fixed;
  left: 84rpx;
  right: 84rpx;
  bottom: 100rpx;
  white-space: nowrap;
  gap: 54rpx;
}
</style>