consumoption/pages/mintir/tiewk/tiewk.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="CalendarList" @change="change"
					:clear="false"></uni-data-select>
			</view>
			<view class="cartsList-seleven">
				<uni-data-select v-model="valueList" :localdata="medicament" @change="changelist"
					:clear="false"></uni-data-select>
			</view>
		</view>
		<view class="cartsList-table">
			<uni-table>
				<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>{{ item.date }}</uni-td>
					<uni-td align="left">
						<view class="name">{{ item.prodName }}</view>
					</uni-td>
					<uni-td align="center">{{ item.mcsCnt }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script>
	import {
		CalendarList,
		medicament
	} from '../Pie.js';
	export default {
		data() {
			return {
				value: 'Y',
				valueList: "1",
				CalendarList: CalendarList,
				medicament: medicament,
				dataList: []
			}
		},
		methods: {
			listData() {
				this.$http('homePage.cntCosm', {
					mcsType: this.valueList,
					timeType: this.value
				}, '加载中').then((res) => {
					this.dataList = res.data;
				});
			},
			change(e) {
				this.value = e;
				this.updateListData();
			},
			changelist(e) {
				this.valueList = e;
				this.updateListData();
			},
			updateListData() {
				this.listData({
					mcsType: this.valueList,
					timeType: this.value
				});
			}
		},
		created() {
			this.listData()
		}
	}
</script>

<style lang="scss" scoped>
	.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;
		}
	}
</style>