开发收费总览页面，对接中

2026-08-06 18:03:06 +08:00
parent d9ede93745
commit e106ce523d
28 changed files with 12943 additions and 1 deletions
--- a/wuye-manager-uniapp/pageSubPack/statistics/components/FeeOverviewCard.vue
+++ b/wuye-manager-uniapp/pageSubPack/statistics/components/FeeOverviewCard.vue
@@ -0,0 +1,169 @@
+<template>
+  <view class="fee-card">
+    <view class="fee-card-header">
+      <text class="fee-title">收费总览</text>
+      <picker mode="selector" :range="feeTypeOptions" range-key="label" @change="onFeeTypeChange">
+        <view class="fee-type-picker">
+          <text>{{ selectedFeeTypeLabel || '全部收费类型' }}</text>
+          <text class="filter-arrow">&#9660;</text>
+        </view>
+      </picker>
+    </view>
+    <view class="fee-tabs">
+      <view class="fee-tab-item" :class="{ active: activeTab === 'day' }" @click="switchTab('day')">本日</view>
+      <view class="fee-tab-item" :class="{ active: activeTab === 'month' }" @click="switchTab('month')">本月</view>
+      <view class="fee-tab-item" :class="{ active: activeTab === 'year' }" @click="switchTab('year')">本年</view>
+    </view>
+
+    <view class="fee-content">
+      <view class="fee-ring">
+        <qiun-data-charts type="arcbar" :chartData="arcbarData" :opts="arcbarOpts" />
+      </view>
+
+      <view class="fee-metrics">
+        <view class="metric-row" v-for="item in metricList" :key="item.label">
+          <view class="metric-info">
+            <text class="metric-label">{{ item.label }}(元)</text>
+            <text class="metric-num">{{ item.value }}</text>
+          </view>
+          <view class="metric-compare">
+            <text class="compare-line">同比 <text class="compare-num" :class="compareClass(item.yoy)">{{ item.yoy }}</text></text>
+            <text class="compare-line">环比 <text class="compare-num" :class="compareClass(item.mom)">{{ item.mom }}</text></text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  feeTypeOptions: { type: Array, default: () => [] },
+  selectedFeeTypeLabel: { type: String, default: '全部收费类型' },
+  activeTab: { type: String, default: 'day' },
+  arcbarPercent: { type: Number, default: 0 },
+  metricList: { type: Array, default: () => [] }
+})
+
+const emit = defineEmits(['tab-change', 'fee-type-change'])
+
+const arcbarData = computed(() => ({
+  series: [{ name: '实收占比', data: props.arcbarPercent }]
+}))
+
+const arcbarOpts = computed(() => ({
+  color: ["#4D5DFA"],
+  title: { name: Math.round(props.arcbarPercent * 100) + '%', fontSize: 16, color: '#4D5DFA' },
+  subtitle: { name: '' },
+  extra: {
+    arcbar: {
+      type: 'circle',
+      width: 16,
+      backgroundColor: '#EAEAEA',
+      startAngle: 1.5,
+      endAngle: 0.25,
+      gap: 2,
+      lineCap: 'butt'
+    }
+  }
+}))
+
+const compareClass = (val) => {
+  if (val && val.startsWith('-')) return 'down'
+  if (val && val.startsWith('+')) return 'up'
+  return ''
+}
+
+const switchTab = (tab) => { emit('tab-change', tab) }
+
+const onFeeTypeChange = (e) => {
+  const opt = props.feeTypeOptions[e.detail.value]
+  emit('fee-type-change', opt)
+}
+</script>
+
+<style scoped lang="scss">
+.fee-card {
+  margin-top: 20rpx;
+  background: #fff;
+  border-radius: 8rpx;
+  padding: 30rpx 24rpx;
+
+  .fee-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24rpx;
+    .fee-title { font-size: 32rpx; font-weight: 600; color: #222; }
+    .fee-type-picker { display: flex; align-items: center; font-size: 24rpx; color: #666; border: 2rpx solid #DCDFE6; border-radius: 6rpx; padding: 8rpx 16rpx; }
+    .filter-arrow { font-size: 18rpx; color: #999; margin-left: 6rpx; }
+  }
+
+  .fee-tabs {
+    display: flex;
+    .fee-tab-item {
+      text-align: center;
+      padding: 14rpx 32rpx;
+      font-size: 26rpx;
+      color: #666;
+      position: relative;
+      &.active {
+        color: #4D5DFA;
+        font-weight: 600;
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: -2rpx;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 60rpx;
+          height: 4rpx;
+          background: #4D5DFA;
+          border-radius: 2rpx;
+        }
+      }
+    }
+  }
+
+  .fee-content {
+    display: flex;
+    align-items: center;
+    margin-top: 30rpx;
+
+    .fee-ring {
+      width: 240rpx;
+      height: 180rpx;
+      flex-shrink: 0;
+    }
+
+    .fee-metrics {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 20rpx;
+      margin-left: 20rpx;
+
+      .metric-row {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+      }
+      .metric-info {
+        display: flex;
+        flex-direction: column;
+        .metric-label { font-size: 28rpx; color: #666; }
+        .metric-num   { font-size: 32rpx; color: #333; font-weight: 600; margin-top: 2rpx; }
+      }
+      .metric-compare {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        .compare-line { font-size: 24rpx; color: #666; line-height: 1.7; }
+        .compare-num  { font-weight: 600; &.up { color: #67C23A; } &.down { color: #F56C6C; } }
+      }
+    }
+  }
+}
+</style>