源文件

2024-05-23 14:39:33 +08:00
commit a1128dd791
2997 changed files with 500069 additions and 0 deletions
--- a/jeepay-ui-uapp-face/pages/stat/components/PayTypeCard.vue
+++ b/jeepay-ui-uapp-face/pages/stat/components/PayTypeCard.vue
@@ -0,0 +1,131 @@
+<template>
+  <view class="type-card" :style="{ backgroundColor: rgba }">
+    <view class="type-header" :style="{ backgroundColor: bgColor }" @tap="emits('upOrDown')">
+      <view> {{ typeName }} </view>
+      <view class="type-num">￥{{ (allAmount / 100).toFixed(2) }} /{{ allCount }}笔
+        <image src="/static/iconImg/down.svg" style="transition: 0.3s linear" :class="{ 'img-up': !isShow }"
+          mode="scaleToFill" />
+      </view>
+    </view>
+    <view class="type-main" :style="{ maxHeight: isShow ? '40vh' : '0' }">
+      <view class="type-item">
+        <view class="type-num">
+          <view> ￥{{ (allAmount / 100).toFixed(2) }}</view>
+          <view class="title"> 成交金额 </view>
+        </view>
+      </view>
+      <view class="type-item">
+        <view class="type-num">
+          <view> ￥{{ ((payAmount - refundAmount) / 100).toFixed(2) }}</view>
+          <view class="title"> 实收金额</view>
+        </view>
+      </view>
+      <view class="type-item">
+        <view class="type-num">
+          <view> ￥{{ payCount }}/{{ allCount }}</view>
+          <view class="title"> 成交笔数/总笔数 </view>
+        </view>
+      </view>
+      <view class="type-item">
+        <view class="type-num">
+          <view> ￥{{ (refundAmount / 100).toFixed(2) }}</view>
+          <view class="title"> 退款金额</view>
+        </view>
+      </view>
+      <view class="type-item">
+        <view class="type-num">
+          <view> {{ refundCount }}</view>
+          <view class="title"> 退款笔数 </view>
+        </view>
+      </view>
+      <view class="type-item">
+        <view class="type-num">
+          <view> {{ round }}%</view>
+          <view class="title"> 成功率</view>
+        </view>
+      </view>
+    </view>
+</view>
+</template>
+
+<script setup>
+
+import { reactive, ref } from 'vue'
+const emits = defineEmits(['upOrDown'])
+const props = defineProps({
+  typeName: { type: String },
+  allCount: { type: [String, Number] },
+  allAmount: { type: [String, Number] },
+  bgColor: { type: String },
+  rgba: { type: String },
+  isShow: { type: Boolean },
+  refundAmount: { type: [String, Number] },
+  round: { type: [String, Number] },
+  payCount: { type: [String, Number] },
+  payAmount: { type: [String, Number] },
+  refundCount: { type: [String, Number] },
+})
+</script>
+
+<style lang="scss" scoped>
+.type-card {
+  position: relative;
+  z-index: 10;
+  margin: 0 auto;
+  box-sizing: border-box;
+  width: 95%;
+
+  border-radius: 14rpx;
+  overflow: hidden;
+
+  .type-header {
+    padding: 25rpx 20rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #fff;
+    font-size: 24rpx;
+    font-weight: 600;
+
+    .type-num {
+      display: flex;
+      align-items: center;
+    }
+
+    image {
+      margin-left: 10rpx;
+      width: 30rpx;
+      height: 30rpx;
+    }
+  }
+
+  .type-main {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 0 20rpx;
+    overflow: hidden;
+    // max-height: 0;
+    transition: 0.3s linear;
+
+    .type-item {
+      flex: 0 0 30%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      padding: 20rpx 0;
+      text-align: center;
+      color: #fff;
+
+      .title {
+        margin-top: 10rpx;
+        color: rgba($color: #fff, $alpha: 0.6);
+      }
+    }
+  }
+}
+
+.img-up {
+  transform: rotate(-180deg);
+}</style>