first commit

src/pages/agent.vue

@@ -0,0 +1,287 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { getAgentRevenue } from '@/api/apis'
+import GzhQrcode from '@/components/GzhQrcode.vue'
+
+// 日期选项映射
+const dateRangeMap = {
+  today: 'today',
+  week: 'last7d',
+  month: 'last30d'
+}
+
+// 日期文本映射
+const dateTextMap = {
+  today: '今日',
+  week: '近7天',
+  month: '近1月'
+}
+
+// 直推报告数据
+const promoteDateOptions = [
+  { label: '今日', value: 'today' },
+  { label: '近7天', value: 'week' },
+  { label: '近1月', value: 'month' }
+]
+const selectedPromoteDate = ref('today')
+
+// 活跃下级数据
+const activeDateOptions = [
+  { label: '今日', value: 'today' },
+  { label: '近7天', value: 'week' },
+  { label: '近1月', value: 'month' }
+]
+const selectedActiveDate = ref('today')
+
+const data = ref(null)
+
+// 控制公众号二维码弹窗显示
+const showGzhQrcode = ref(false)
+
+// 计算当前直推数据
+const currentPromoteData = computed(() => {
+  const range = dateRangeMap[selectedPromoteDate.value]
+  return data.value?.direct_push?.[range] || { commission: 0, report: 0 }
+})
+
+// 计算当前活跃数据
+const currentActiveData = computed(() => {
+  const range = dateRangeMap[selectedActiveDate.value]
+  return data.value?.active_reward?.[range] || {
+    active_reward: 0,
+    sub_promote_reward: 0,
+    sub_upgrade_reward: 0,
+    sub_withdraw_reward: 0
+  }
+})
+
+// 计算日期文本
+const promoteTimeText = computed(() => {
+  return dateTextMap[selectedPromoteDate.value] || '今日'
+})
+
+const activeTimeText = computed(() => {
+  return dateTextMap[selectedActiveDate.value] || '今日'
+})
+
+const getData = async () => {
+  try {
+    const res = await getAgentRevenue()
+    if (res.code === 200) {
+      data.value = res.data
+    }
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+onBeforeMount(() => {
+  if (uni.getStorageSync('token')) {
+    getData()
+  }
+})
+
+// 路由跳转
+function goToPromoteDetail() {
+  uni.navigateTo({
+    url: '/pages/promoteDetails'
+  })
+}
+
+function goToActiveDetail() {
+  uni.navigateTo({
+    url: '/pages/rewardsDetails'
+  })
+}
+
+function toWithdraw() {
+  // 弹出公众号二维码提示提现
+  showGzhQrcode.value = true
+}
+
+// 关闭公众号二维码弹窗
+function closeGzhQrcode() {
+  showGzhQrcode.value = false
+}
+
+function toWithdrawDetails() {
+  uni.navigateTo({
+    url: '/pages/withdrawDetails'
+  })
+}
+</script>
+
+<template>
+  <view class="safe-area-top min-h-screen">
+    <view class="p-4">
+      <!-- 资产卡片 -->
+      <view class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-blue-50/70 to-blue-100/50 p-6">
+        <view class="flex justify-between items-center mb-3">
+          <view class="flex items-center">
+
+
+            <text class="text-lg font-bold text-gray-800">余额</text>
+          </view>
+          <text class="text-3xl text-blue-600 font-bold">¥ {{ (data?.balance || 0).toFixed(2) }}</text>
+        </view>
+        <view class="text-sm text-gray-500 mb-2">累计收益：¥ {{ (data?.total_earnings || 0).toFixed(2) }}</view>
+        <view class="text-sm text-gray-500 mb-6">冻结余额：¥ {{ (data?.frozen_balance || 0).toFixed(2) }}</view>
+        <view class="grid grid-cols-2 gap-3">
+          <view @click="toWithdraw"
+            class="bg-gradient-to-r from-blue-500 to-blue-400 text-white rounded-full py-2 shadow-md flex items-center justify-center">
+            <text>提现</text>
+          </view>
+          <view @click="toWithdrawDetails"
+            class="bg-white/90 text-gray-600 border border-gray-200/50 rounded-full py-2 shadow-sm flex items-center justify-center">
+            <text>提现记录</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 直推报告收益 -->
+      <view class="rounded-xl shadow-lg mb-4 bg-gradient-to-r from-blue-50/40 to-cyan-50/50 p-6">
+        <view class="flex justify-between items-center mb-4">
+          <view class="flex items-center">
+            <text class="text-lg font-bold text-gray-800">直推报告收益</text>
+          </view>
+          <view class="text-right">
+            <text class="text-2xl text-blue-600 font-bold">¥ {{ (data?.direct_push?.total_commission || 0).toFixed(2)
+              }}</text>
+            <view class="text-sm text-gray-500 mt-1">有效报告 {{ data?.direct_push?.total_report || 0 }} 份</view>
+          </view>
+        </view>
+
+        <!-- 日期选择 -->
+        <view class="grid grid-cols-3 gap-2 mb-6">
+          <view v-for="item in promoteDateOptions" :key="item.value" @click="selectedPromoteDate = item.value" :class="[
+            'rounded-full transition-all py-1 px-4 text-sm text-center',
+            selectedPromoteDate === item.value
+              ? 'bg-blue-500 text-white shadow-md'
+              : 'bg-white/90 text-gray-600 border border-gray-200/50'
+          ]">
+            {{ item.label }}
+          </view>
+        </view>
+
+        <view class="grid grid-cols-2 gap-4 mb-6">
+          <view class="bg-blue-50/60 p-3 rounded-lg backdrop-blur-sm">
+            <view class="flex items-center text-sm text-gray-500">
+              <text>{{ promoteTimeText }}收益</text>
+            </view>
+            <text class="text-xl text-blue-600 font-bold mt-1">¥ {{ currentPromoteData.commission?.toFixed(2) || '0.00'
+              }}</text>
+          </view>
+          <view class="bg-blue-50/60 p-3 rounded-lg backdrop-blur-sm">
+            <view class="flex items-center text-sm text-gray-500">
+              <text>有效报告</text>
+            </view>
+            <text class="text-xl text-blue-600 font-bold mt-1">{{ currentPromoteData.report || 0 }} 份</text>
+          </view>
+        </view>
+
+        <view class="flex items-center justify-between text-blue-500 text-sm font-semibold" @click="goToPromoteDetail">
+          <text>查看收益明细</text>
+          <text class="text-lg">→</text>
+        </view>
+      </view>
+
+      <!-- 活跃下级奖励 -->
+      <view class="rounded-xl shadow-lg bg-gradient-to-r from-green-50/40 to-cyan-50/30 p-6">
+        <view class="flex justify-between items-center mb-4">
+          <view class="flex items-center">
+            <text class="text-lg font-bold text-gray-800">活跃下级奖励</text>
+          </view>
+          <view class="text-right">
+            <text class="text-2xl text-green-600 font-bold">¥ {{ (data?.active_reward?.total_reward || 0).toFixed(2)
+              }}</text>
+            <view class="text-sm text-gray-500 mt-1">活跃下级 0 位</view>
+          </view>
+        </view>
+
+        <!-- 日期选择 -->
+        <view class="grid grid-cols-3 gap-2 mb-6">
+          <view v-for="item in activeDateOptions" :key="item.value" @click="selectedActiveDate = item.value" :class="[
+            'rounded-full transition-all py-1 px-4 text-sm text-center',
+            selectedActiveDate === item.value
+              ? 'bg-green-500 text-white shadow-md'
+              : 'bg-white/90 text-gray-600 border border-gray-200/50'
+          ]">
+            {{ item.label }}
+          </view>
+        </view>
+
+        <view class="grid grid-cols-2 gap-2 mb-6">
+          <view class="bg-green-50/60 p-3 rounded-lg backdrop-blur-sm">
+            <view class="flex items-center text-sm text-gray-500">
+              <text>{{ activeTimeText }}奖励</text>
+            </view>
+            <text class="text-xl text-green-600 font-bold mt-1">¥ {{ (currentActiveData.active_reward || 0).toFixed(2)
+              }}</text>
+          </view>
+          <view class="bg-green-50/60 p-3 rounded-lg backdrop-blur-sm">
+            <view class="flex items-center text-sm text-gray-500">
+              <text>下级推广奖励</text>
+            </view>
+            <text class="text-xl text-green-600 font-bold mt-1">¥ {{ (currentActiveData.sub_promote_reward ||
+              0).toFixed(2) }}</text>
+          </view>
+          <view class="bg-green-50/60 p-3 rounded-lg backdrop-blur-sm">
+            <view class="flex items-center text-sm text-gray-500">
+              <text>新增活跃奖励</text>
+            </view>
+            <text class="text-xl text-green-600 font-bold mt-1">¥ {{ (currentActiveData.sub_upgrade_reward ||
+              0).toFixed(2) }}</text>
+          </view>
+          <view class="bg-green-50/60 p-3 rounded-lg backdrop-blur-sm">
+            <view class="flex items-center text-sm text-gray-500">
+              <text>下级转化奖励</text>
+            </view>
+            <text class="text-xl text-green-600 font-bold mt-1">¥ {{ (currentActiveData.sub_withdraw_reward ||
+              0).toFixed(2) }}</text>
+          </view>
+        </view>
+
+        <view class="flex items-center justify-between text-green-500 text-sm font-semibold" @click="goToActiveDetail">
+          <text>查看奖励明细</text>
+          <text class="text-lg">→</text>
+        </view>
+      <!-- 添加查看下级按钮 -->
+      <!-- <view class="mt-4 px-4">
+        <view
+          @click="toSubordinateList"
+          class=" mx-auto bg-gradient-to-r from-green-500 to-green-400 text-white rounded-full py-2 px-4 shadow-md flex items-center justify-center active:opacity-80"
+          hover-class="opacity-90 scale-98"
+        >
+          <text>查看我的下级</text>
+        </view>
+      </view> -->
+      </view>
+    </view>
+
+    <!-- 公众号二维码弹窗 -->
+    <GzhQrcode
+      :visible="showGzhQrcode"
+      type="withdraw"
+      @close="closeGzhQrcode"
+    />
+  </view>
+</template>
+
+<style>
+button {
+  transition: all 0.2s ease;
+}
+
+button:hover {
+  transform: translateY(-1px);
+}
+</style>
+
+<route lang="json">{
+  "layout": "home",
+  "style": {
+    "navigationBarTextStyle": "black",
+    "navigationStyle": "default",
+    "navigationBarBackgroundColor": "#e3f0ff"
+  }
+}</route>