consumoption/pages/mintir/enterprise/enterprise.vue

<template>
	<view class="cartsList">
		<view class="cartsList-all">
			<view class="cartsList-name">
				配送企业排名
			</view>
			<view class="cartsList-seleven">
				<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"></uni-data-select>
			</view>
		</view>
		<view class="cartsList-table">
			<uni-table style="height: 200rpx;">
				<uni-tr>
					<uni-th align="center">排名</uni-th>
					<uni-th align="left">配送企业</uni-th>
					<uni-th align="left">金额</uni-th>
					<uni-th align="left">占比</uni-th>
				</uni-tr>

				<uni-tr v-for="(item, index) in dataList" :key="index">
					<uni-td align="center">
						<span v-if="index === 0" style="color: #c13124; font-weight: 800; font-family: sans-serif">
							{{ index + 1 }}
						</span>
						<span v-else-if="index === 1" style="color: #e99d7f; font-weight: 800; font-family: sans-serif">
							{{ index + 1 }}
						</span>
						<span v-else-if="index === 2" style="color: #75f9fd; font-weight: 800; font-family: sans-serif">
							{{ index + 1 }}
						</span>
						<span v-else>{{ index + 1 }}</span>
					</uni-td>
					<uni-td align="left">
						<view>{{ item.splerName }}</view>
					</uni-td>
					<uni-td align="left">
						<view>{{ item.splerAmt }}</view>
					</uni-td align="left">
					<uni-td>{{ item.amtPer||""}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
	import {
		Calendar,
	} from '../Pie.js';
	export default {
		data() {
			return {
				value: 'Y',
				range: Calendar,
				dataList: []
			}
		},
		methods: {
			getData() {
				this.$http('homePage.splerCosm', {
					timeType: this.value
				}, '加载中').then((res) => {
					this.dataList = res.data
				})
			},
			change(e) {
				this.value = e;
				this.getData({
					timeType: this.value
				})
			},
			changelist(e) {
				console.log(e)
			}
		},
		created() {
			this.getData()
		}
	}
</script>

<style lang="scss">
	.cartsList {
		padding: 30rpx;

		.cartsList-all {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			background-color: #ffffff;
			padding: 20rpx;
			box-sizing: border-box;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			border-width: 4rpx 4rpx 4rpx 4rpx;
			border-style: solid;
			border-color: #90ffe4;

			.cartsList-name {
				font-size: 35rpx;
				font-weight: bold;
			}


		}

		.cartsList-table {
			border-bottom-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
			border-style: solid;
			border-color: #90ffe4;
			border-width: 0 4rpx 4rpx 4rpx;
		}
	}

	.uni-select {
		width: 130% !important;
	}
</style>