assess-app/pages/statistics/module/stat_ranking.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 v-if="is_type == 1">
			<view class="ranking_item sys-from-background-color m-b16 r-20 p-20 p-tb40" v-for="(item,index) in 3"
				: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>综合业务部一部</text>
					</view>
					<text>34笔</text>
					<view class="sys-weight-600 line-30">
						<text class=" text-color-12 m-r10">800万</text>
						<uni-icons type="forward" size="14" color="#D8D8D8"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view v-if="is_type == 2">
			<view class="ranking_item sys-from-background-color m-b16 r-20 p-20 row-justify-sb center"
				v-for="(item,index) in dataList" :key="index">
				<view class="row-c sys-weight-400">
					<image class="wh-36 m-r20" :src="`https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/statistics/${userIconList[index]}.png`"
						mode="aspectFill">
					</image>
					<image class="wh-60 r-100" :src="item.head_img" mode=""></image>
					<view class="column m-l16">
						<text class="size-28 text-color-000 p-b10">{{item.name}}</text>
						<text class="size-24 text-color-666">{{item.departments_name}}</text>
					</view>
				</view>
				<text class="size-28 color-000 sys-weight-600">{{item.total_money}}万</text>
			</view>
			<en-blank v-if="dataList.length<=0"></en-blank>
		</view>
		<view v-if="is_type == 3">
			<view class="ranking_item sys-from-background-color m-b16 r-20 p-20 row-justify-sb center"
				v-for="(item,index) in dataList" :key="index">
				<view class="row-c sys-weight-400">
					<image class="wh-60 m-r30" :src="item.product_icon" mode="aspectFill">
					</image>
					<text class="size-28 text-color-000 p-b10">{{item.product_name}}</text>
				</view>
				<view class="row-c">
					<text class="size-28 color-000 sys-weight-600 m-r10">{{item.value}}次</text>
					<uni-icons type="forward" size="16" color="#8F99B1"></uni-icons>
				</view>
			</view>
		</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_ranking',
		components: {
			EnBlank,
			StatisticsTitle
		},
		props: {
			genre: {
				type: Number,
				default: 0
			},
			is_type: {
				type: Number,
				default: 1
			},
			is_margin_top: {
				type: Boolean,
				default: true
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: '全部'
			},

		},

		data() {
			return {
				dataList: [],
				iconList: ['champion', 'runner-up', 'third'],
				userIconList: ['one', 'two', 'three'],
				taskIconLsit: ['task-one', 'task-two', 'task-three', 'task-four']
			};
		},
		methods: {
			setDataList(data) {

				this.dataList = data
				console.log(this.dataList)
			}
		},
	}
</script>

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