feat: 商家端代码

src/pagesMerchant/finance/settlement.vue

@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import { getSettlements } from '@/pagesMerchant/api'
+import { SettlementStatus } from '@/typings/merchant'
+import type { Settlement } from '@/typings/merchant'
+
+definePage({
+  style: {
+    navigationBarTitleText: '结算记录',
+  },
+})
+
+const settlements = ref<Settlement[]>([])
+const loading = ref(false)
+
+// 状态配置
+const statusConfig = {
+  [SettlementStatus.PENDING]: { label: '待结算', color: '#ff8f0d' },
+  [SettlementStatus.SETTLED]: { label: '已结算', color: '#00c05a' },
+}
+
+// 加载数据
+async function loadData() {
+  loading.value = true
+  try {
+    const res = await getSettlements()
+    settlements.value = res.list
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  loadData()
+})
+</script>
+
+<template>
+  <view class="settlement-page">
+    <view v-if="settlements.length === 0" class="empty">
+      <text class="i-carbon-document"></text>
+      <text>暂无结算记录</text>
+    </view>
+    
+    <view v-for="item in settlements" :key="item.id" class="settlement-card">
+      <view class="card-header">
+        <text class="settlement-no">{{ item.settlementNo }}</text>
+        <text class="status" :style="{ color: statusConfig[item.status].color }">
+          {{ statusConfig[item.status].label }}
+        </text>
+      </view>
+      
+      <view class="card-body">
+        <view class="amount-row">
+          <text class="label">结算金额</text>
+          <text class="amount">¥{{ item.amount.toFixed(2) }}</text>
+        </view>
+        <view class="info-row">
+          <text>订单数：{{ item.orderCount }}笔</text>
+          <text>周期：{{ item.period }}</text>
+        </view>
+      </view>
+      
+      <view class="card-footer">
+        <text class="time">创建时间：{{ item.createTime }}</text>
+        <text class="time" v-if="item.settledTime">结算时间：{{ item.settledTime }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.settlement-page {
+  min-height: 100vh;
+  background: #f5f5f5;
+  padding: 20rpx;
+  width: 100%;
+  max-width: 540px;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 100rpx 0;
+  color: #999;
+  
+  text:first-child {
+    font-size: 80rpx;
+    margin-bottom: 20rpx;
+  }
+}
+
+.settlement-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+  
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 16rpx;
+    border-bottom: 1rpx solid #f5f5f5;
+    
+    .settlement-no {
+      font-size: 26rpx;
+      color: #333;
+      font-weight: 500;
+    }
+    
+    .status {
+      font-size: 24rpx;
+      font-weight: 500;
+    }
+  }
+  
+  .card-body {
+    padding: 20rpx 0;
+    
+    .amount-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12rpx;
+      
+      .label {
+        font-size: 26rpx;
+        color: #666;
+      }
+      
+      .amount {
+        font-size: 36rpx;
+        font-weight: 700;
+        color: #ff8f0d;
+      }
+    }
+    
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      
+      text {
+        font-size: 24rpx;
+        color: #999;
+      }
+    }
+  }
+  
+  .card-footer {
+    padding-top: 16rpx;
+    border-top: 1rpx solid #f5f5f5;
+    
+    .time {
+      font-size: 22rpx;
+      color: #999;
+      display: block;
+      
+      & + .time {
+        margin-top: 4rpx;
+      }
+    }
+  }
+}
+</style>