USER-20230908AJ\Administrator 1 سال پیش
والد
کامیت
92af0320fe
4فایلهای تغییر یافته به همراه89 افزوده شده و 2 حذف شده
  1. 73 0
      components/en-utils/en-number/en-number.vue
  2. 7 2
      pages/index/module/index_column.vue
  3. 6 0
      static/css/common.css
  4. 3 0
      static/css/default-color.scss

+ 73 - 0
components/en-utils/en-number/en-number.vue

@@ -0,0 +1,73 @@
+<template>
+  <view class="number-box" :class="[textWeight,textSize,textColor]">
+      {{number}}
+  </view>
+</template>
+
+<script>
+export default {
+  name:'en-number',
+  props:{
+    'endNum':{
+      default:0
+    },
+    textColor:{
+      default: 'color-02154E'
+    },
+    textSize:{
+      default: 'size-30'
+    },
+    textWeight:{
+      default: 'sys-weight-400'
+    }
+  },
+  data() {
+    return {
+      number:0
+    };
+  },
+  watch:{
+    'endNum':function () {
+      this.startNumber()
+    }
+  },
+  mounted() {
+    this.startNumber()
+  },
+  methods: {
+    startNumber(){
+      if(this.endNum<=0){
+        return
+      }
+      this.number=0
+      let addNum=9
+      let frameNum=1
+      if(this.endNum<=500){
+        addNum=1
+        frameNum=15
+      }else if(this.endNum<7000){
+        addNum=3
+        frameNum=11
+      }else if(this.endNum<16000){
+        addNum=6
+        frameNum=8
+      }
+      let intervalId=setInterval(()=>{
+        this.number+=addNum
+        if(this.number>=this.endNum){
+          this.number=this.endNum
+          clearInterval(intervalId)
+        }
+      },frameNum)
+    }
+
+  },
+}
+</script>
+
+<style lang="scss">
+.number-box{
+  display: inline;
+}
+
+</style>

+ 7 - 2
pages/index/module/index_column.vue

@@ -36,9 +36,12 @@
 					<text class="text-color-12 sys-weight-600 size-24 m-l10">今日放款</text>
 				</view>
 				<view class="row-justify-sb center m-t20 line-40">
-					<text class="sys-weight-600" style="color: #02154E;">{{(moneyData.out_money).toFixed(2)}}万</text>
+					<view class=" row-justify-l" >
+            <en-number :end-num="99" :text-color="'color-02154E'" :text-weight="'sys-weight-600'" :text-size="'size-30'"></en-number>
+            <view class="row-justify-sb center m-t20 line-40 sys-weight-600 color-02154E">万</view>
+            </view>
 					<view class="row-c">
-						<text class="sys-weight-600" style="color: #02154E;padding-right: 6rpx;">{{moneyData.out_num}}</text>
+						<text class="sys-weight-600 " style="color: #02154E;padding-right: 6rpx;">{{moneyData.out_num}}</text>
 						<text class="size-24 text-color-999">笔</text>
 					</view>
 				</view>
@@ -86,9 +89,11 @@
 <script>
 	import tools from "@/service/tools";
   import {getSysCashier} from "@/api/statistics";
+  import EnNumber from "@/components/en-utils/en-number/en-number.vue";
 
   export default {
 		name: 'index_column',
+    components: {EnNumber},
 		props: {
       memberData:{
         default:{

+ 6 - 0
static/css/common.css

@@ -139,6 +139,12 @@
 	justify-content: space-between;
 }
 
+.row-justify-l {
+	display: flex;
+	flex-direction: row;
+	justify-content: left;
+}
+
 .column-justify-c {
 	display: flex;
 	flex-direction: column;

+ 3 - 0
static/css/default-color.scss

@@ -165,5 +165,8 @@
 .color-718096{
   color: #718096;
 }
+.color-02154E{
+
+}