assess-app/pages/statistics/module/stat_gather.vue

<template>
	<view class="page-box-bg-fff r-30 p-30 sys-weight-400" :class="is_margin_top?'m-t20':''">
		<StatisticsTitle :genre="genre" :leftText="leftText" :rightText="rightText" @onHandle="onHandle">
		</StatisticsTitle>
    <view class="row-justify-c m-b25" v-if="is_subsection">
      <view class="subsection">
        <uv-subsection :list="list" :bgColor="'#DBE8DB'" :activeColor="'#0FB160'" :inactiveColor="'#121212'"
                       :fontSize="14" custom-style="height: 70rpx;border-radius: 30rpx;"
                       custom-item-style="border-radius: 30rpx;" :current="current" @change="onChange"></uv-subsection>
      </view>
    </view>
		<view class="" v-if="current===0">
			<view class="ranking_item sys-from-background-color m-b16 r-20 p-20 p-tb40" v-if="index<=2"
				v-for="(item,index) in outList" :key="index">
				<view class="row-justify-sb center sys-weight-400 size-28 color-000 r-20">
					<view class="row-c line-40">
						<image class="wh-36 m-r20" :src="`https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/statistics/${iconList[index]}.png`"
							mode="aspectFill">
						</image>
						<text>{{item.name}}</text>
					</view>
					<text>{{item.total_num}}笔</text>
					<view class="sys-weight-600 line-30">
						<text class=" text-color-12 m-r10">{{item.value}}万</text>
						<uni-icons type="forward" size="14" color="#D8D8D8"></uni-icons>
					</view>
				</view>
			</view>
			<en-blank v-if="outList.length<=0"></en-blank>
		</view>
		<view v-else>
			<view class="ranking_item sys-from-background-color m-b16 r-20 p-20 p-tb40" v-if="index<=2"
				v-for="(item,index) in putList" :key="index">
				<view class="row-justify-sb center sys-weight-400 size-28 color-000 r-20">
					<view class="row-c line-40">
						<image class="wh-36 m-r20" :src="`https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/statistics/${iconList[index]}.png`"
							mode="aspectFill">
						</image>
						<text>{{item.name}}</text>
					</view>
					<text>{{item.total_num}}笔</text>
					<view class="sys-weight-600 line-30">
						<text class=" text-color-12 m-r10">{{item.value}}万</text>
						<uni-icons type="forward" size="14" color="#D8D8D8"></uni-icons>
					</view>
				</view>
			</view>
			<en-blank v-if="putList.length<=0"></en-blank>
		</view>


	</view>
</template>

<script>
	import StatisticsTitle from "./statistics_title.vue";
	import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";

	export default {
		name: 'stat_gather',
		components: {
			EnBlank,
			StatisticsTitle
		},
		props: {
			genre: {
				type: Number,
				default: 0
			},
			is_subsection: {
				type: Boolean,
				default: false
			},
			is_type: {
				type: Number,
				default: 0
			},
			is_margin_top: {
				type: Boolean,
				default: true
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: '全部'
			},
			outList: {
				default: []
			},
			putList: {
				default: []
			}
		},

		data() {
			return {
				iconList: ['champion', 'runner-up', 'third'],
				userIconList: ['one', 'two', 'three'],
				taskIconLsit: ['task-one', 'task-two', 'task-three', 'task-four'],
				current: 0,
				list: ['放款', '回款'],
			};
		},
    watch:{
      'is_type':function () {
        this.current=this.is_type
      }
    },
    mounted() {
      this.current=this.is_type
    },
    methods: {
      onChange(e){
        console.log(e)
        this.current=e
      }
    },
	}
</script>

<style lang="scss" scoped>
	.ranking_item:last-child {
		margin-bottom: 0;
	}

	.subsection {
		width: 350rpx;
	}
</style>